diff --git a/components/dialog/dialog-mixin.js b/components/dialog/dialog-mixin.js
index 75c6b4324b6..bdc16e1a5fa 100644
--- a/components/dialog/dialog-mixin.js
+++ b/components/dialog/dialog-mixin.js
@@ -468,6 +468,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
}
const dialogOuterClasses = {
+ 'vdiff-target': true,
'd2l-dialog-outer': true,
'd2l-dialog-outer-full-height': this._autoSize && this._isFullHeight,
'd2l-dialog-outer-overflow-bottom': this._overflowBottom,
diff --git a/components/dialog/test/dialog-confirm.vdiff.js b/components/dialog/test/dialog-confirm.vdiff.js
new file mode 100644
index 00000000000..8f4e3012c7e
--- /dev/null
+++ b/components/dialog/test/dialog-confirm.vdiff.js
@@ -0,0 +1,75 @@
+import '../../button/button.js';
+import '../dialog-confirm.js';
+import { expect, fixture, html } from '@brightspace-ui/testing';
+
+const buttons = html`
+ Yes
+ No
+`;
+
+const confirmDialog = html`
+
+ ${buttons}
+
+`;
+
+describe('dialog-confirm', () => {
+
+ [/*'native',*/ 'custom'].forEach((type) => {
+
+ describe(type, () => {
+ before(() => window.D2L.DialogMixin.preferNative = type === 'native');
+
+ [
+ { screen: 'wide', viewport: { width: 800, height: 500 } },
+ { screen: 'narrow', viewport: { width: 600, height: 500 } }
+ ].forEach(({ screen, viewport }) => {
+ describe(screen, () => {
+ [
+ { name: 'opened', template: confirmDialog },
+ { name: 'rtl', rtl: true, template: confirmDialog },
+ ].forEach(({ name, template, rtl }) => {
+ it(name, async() => {
+ await fixture(template, { viewport, rtl });
+ await expect(document).to.be.golden();
+ });
+ });
+ });
+ });
+
+ describe('internal', () => {
+
+ [
+ { name: 'short', template: confirmDialog },
+ { name: 'long-title', template: html`
+
+ ${buttons}
+
+ ` },
+ { name: 'no-title', template: html`${buttons}` },
+ { name: 'long-text', template: html`
+
+ ${buttons}
+
+ ` },
+ { name: 'long-buttons', template: html`
+
+ A really long workflow button.
+ Another really long workflow button.
+
+ ` },
+ { name: 'multiple-paragraphs', template: html`
+
+ ${buttons}
+
+ ` }
+ ].forEach(({ name, template }) => {
+ it(name, async() => {
+ const elem = await fixture(template, { viewport: { width: 800, height: 500 } });
+ await expect(elem).to.be.golden();
+ });
+ });
+ });
+ });
+ });
+});
diff --git a/components/dialog/test/dialog-confirm.visual-diff.html b/components/dialog/test/dialog-confirm.visual-diff.html
deleted file mode 100644
index 11afc083bbc..00000000000
--- a/components/dialog/test/dialog-confirm.visual-diff.html
+++ /dev/null
@@ -1,57 +0,0 @@
-
-
-
-
-
-
- d2l-dialog-confirm
-
-
-
-
- Open Dialog
-
-
- Yes
- No
-
-
-
- Yes
- No
-
-
-
- Yes
- No
-
-
-
- Yes
- No
-
-
-
- A really long workflow button.
- Another really long workflow button.
-
-
-
- Yes
- No
-
-
-
- Yes
- No
-
-
-
-
diff --git a/components/dialog/test/dialog-confirm.visual-diff.js b/components/dialog/test/dialog-confirm.visual-diff.js
deleted file mode 100644
index 95a95c7df30..00000000000
--- a/components/dialog/test/dialog-confirm.visual-diff.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import { getRect, open, reset } from './dialog-helper.js';
-import puppeteer from 'puppeteer';
-import VisualDiff from '@brightspace-ui/visual-diff';
-
-describe('d2l-dialog-confirm', () => {
-
- const visualDiff = new VisualDiff('dialog-confirm', import.meta.url);
-
- let browser, page;
-
- before(async() => {
- browser = await puppeteer.launch();
- page = await visualDiff.createPage(browser);
- });
-
- after(async() => await browser.close());
-
- ['native', 'custom'].forEach((name) => {
-
- describe(name, () => {
-
- before(async() => {
- const preferNative = (name === 'native' ? '' : '?preferNative=false');
- await page.goto(`${visualDiff.getBaseUrl()}/components/dialog/test/dialog-confirm.visual-diff.html${preferNative}`, { waitUntil: ['networkidle0', 'load'] });
- await page.bringToFront();
- });
-
- beforeEach(async() => {
- await reset(page, '#confirm');
- await reset(page, '#confirmLongTitle');
- await reset(page, '#confirmNoTitle');
- await reset(page, '#confirmLongText');
- await reset(page, '#confirmLongButtons');
- await reset(page, '#confirmRtl');
- await reset(page, '#confirmMultiParagraph');
- });
-
- [
- { category: 'wide', viewport: { width: 800, height: 500 } },
- { category: 'narrow', viewport: { width: 600, height: 500 } }
- ].forEach((info) => {
-
- describe(info.category, () => {
-
- before(async() => {
- await page.setViewport({ width: info.viewport.width, height: info.viewport.height, deviceScaleFactor: 2 });
- });
-
- it('opened', async function() {
- await open(page, '#confirm');
- await visualDiff.screenshotAndCompare(page, this.test.fullTitle(), { captureBeyondViewport: false });
- });
-
- it('rtl', async function() {
- await open(page, '#confirmRtl');
- await visualDiff.screenshotAndCompare(page, this.test.fullTitle(), { captureBeyondViewport: false });
- });
-
- });
-
- });
-
- describe('internal', () => {
-
- before(async() => {
- await page.setViewport({ width: 800, height: 500, deviceScaleFactor: 2 });
- });
-
- [
- { name: 'short', selector: '#confirm' },
- { name: 'long title', selector: '#confirmLongTitle' },
- { name: 'no title', selector: '#confirmNoTitle' },
- { name: 'long text', selector: '#confirmLongText' },
- { name: 'long buttons', selector: '#confirmLongButtons' },
- { name: 'multiple paragraphs', selector: '#confirmMultiParagraph' }
- ].forEach((info) => {
-
- it(info.name, async function() {
- await open(page, info.selector);
- const rect = await getRect(page, info.selector);
- await visualDiff.screenshotAndCompare(page, this.test.fullTitle(), { captureBeyondViewport: false, clip: rect });
- });
-
- });
-
- });
-
- });
-
- });
-
-});
diff --git a/components/dialog/test/dialog-helper.js b/components/dialog/test/dialog-helper.js
deleted file mode 100644
index 0fe6e73fa53..00000000000
--- a/components/dialog/test/dialog-helper.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { focusWithKeyboard, oneEvent } from '@brightspace-ui/visual-diff';
-
-export function getOpenEvent(page, selector) {
- return oneEvent(page, selector, 'd2l-dialog-open');
-}
-
-export function getRect(page, selector) {
- return page.$eval(selector, (dialog) => {
- const elem = dialog.shadowRoot.querySelector('.d2l-dialog-outer');
- return {
- x: elem.offsetLeft - 10,
- y: elem.offsetTop - 10,
- width: elem.offsetWidth + 20,
- height: elem.offsetHeight + 20
- };
- });
-}
-
-export async function open(page, selector) {
- const openEvent = getOpenEvent(page, selector);
- await page.$eval(selector, (dialog) => dialog.opened = true);
- return openEvent;
-}
-
-export async function reset(page, selector) {
- await page.$eval(selector, (dialog) => {
- return new Promise((resolve) => {
- dialog._fullscreenWithin = 0;
- dialog.shadowRoot.querySelector('.d2l-dialog-content').scrollTo(0, 0);
- if (dialog._state) {
- dialog.addEventListener('d2l-dialog-close', () => resolve(), { once: true });
- dialog.opened = false;
- } else {
- resolve();
- }
- });
- });
- return focusWithKeyboard(page, '#open');
-}
diff --git a/components/dialog/test/dialog-ifrau-contents.visual-diff.html b/components/dialog/test/dialog-ifrau-contents.vdiff.html
similarity index 69%
rename from components/dialog/test/dialog-ifrau-contents.visual-diff.html
rename to components/dialog/test/dialog-ifrau-contents.vdiff.html
index 1fd8f73f09c..82f0a8f610a 100644
--- a/components/dialog/test/dialog-ifrau-contents.visual-diff.html
+++ b/components/dialog/test/dialog-ifrau-contents.vdiff.html
@@ -18,7 +18,7 @@
Open Dialog
-
+
Line 1
Line 2
Line 3
@@ -26,16 +26,5 @@
Yes
No
-
-
-