diff --git a/src/browser/vdiff.js b/src/browser/vdiff.js index 3beb8ed6..f86fbdfc 100644 --- a/src/browser/vdiff.js +++ b/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); diff --git a/src/server/visual-diff-plugin.js b/src/server/visual-diff-plugin.js index 970bf629..c333595c 100644 --- a/src/server/visual-diff-plugin.js +++ b/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({ diff --git a/test/browser/element.vdiff.js b/test/browser/element.vdiff.js index d8d99a54..df36cbbf 100644 --- a/test/browser/element.vdiff.js +++ b/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">`, { 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">`); 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; }