fix: Recreate golden with this before each test (#41)

* Recreate golden with this before each test

* Remove unnecessary closure

* Clean up command opts

* Put test and elem in this

* Avoid setting assertion method multiple times

src/browser/vdiff.js

@@ -1,11 +1,22 @@
 import { chai, expect } from '@open-wc/testing';
 import { executeServerCommand } from '@web/test-runner-commands';
 
-chai.Assertion.addMethod('golden', ScreenshotAndCompare);
+let test;
 
-async function ScreenshotAndCompare(name, opts) {
-	const elem = this._obj;
-	const rect = elem.getBoundingClientRect();
+chai.Assertion.addMethod('golden', function(...args) {
+	return ScreenshotAndCompare.call({ test, elem: this._obj }, ...args); // eslint-disable-line no-invalid-this
+});
+mocha.setup({ // eslint-disable-line no-undef
+	rootHooks: {
+		beforeEach() {
+			test = this.currentTest;
+		}
+	}
+});
+
+async function ScreenshotAndCompare(opts) {
+	const name = this.test.fullTitle();
+	const rect = this.elem.getBoundingClientRect();
 	const { pass, message } = await executeServerCommand('brightspace-visual-diff', { name, rect, opts });
 	if (!pass) {
 		expect.fail(message);

src/server/visual-diff-plugin.js

@@ -129,8 +129,7 @@ export function visualDiff({ updateGoldens = false, runSubset = false } = {}) {
 				}
 			}
 
-			const opts = payload.opts || {};
-			opts.margin = opts.margin || DEFAULT_MARGIN;
+			const opts = { margin: DEFAULT_MARGIN, ...payload.opts };
 
 			const page = session.browser.getPage(session.id);
 			await page.screenshot({

test/browser/element.vdiff.js

@@ -42,10 +42,10 @@ describe('element-matches', () => {
 		{ name: 'rtl', rtl: true },
 		{ name: 'transition', action: elem => elem.style.opacity = '0.2' }
 	].forEach(({ name, rtl, action }) => {
-		it(name, async function() {
+		it(name, async() => {
 			const elem = await fixture(`<${elementTag} text="Visual Difference"></${elementTag}>`, { rtl: rtl });
 			if (action) await action(elem);
-			await expect(elem).to.be.golden(this.test.fullTitle());
+			await expect(elem).to.be.golden();
 		});
 	});
 });
@@ -65,7 +65,7 @@ describe('element-different', () => {
 			elem.style.height = '70px';
 		} }*/
 	].forEach(({ name, action }) => {
-		it(name, async function() {
+		it(name, async() => {
 			const elem = await fixture(`<${elementTag} text="Visual Difference"></${elementTag}>`);
 			const isGolden = await executeServerCommand('vdiff-get-golden-flag');
 			if (!isGolden) {
@@ -75,7 +75,7 @@ describe('element-different', () => {
 
 			let fail = false;
 			try {
-				await expect(elem).to.be.golden(this.test.fullTitle());
+				await expect(elem).to.be.golden();
 			} catch (ex) {
 				fail = true;
 			}