From e0bb9dac34ae1bc8a2bd83ce25ffd996b6915d01 Mon Sep 17 00:00:00 2001 From: James Klassen Date: Tue, 11 Jul 2023 16:25:11 -0500 Subject: [PATCH] add some vdiff tests --- .../skeleton/demo/skeleton-group-test.js | 5 +- .../skeleton/demo/skeleton-group-wrapper.js | 14 +++ .../test/skeleton-group.visual-diff.html | 90 +++++++++++++++++++ .../test/skeleton-group.visual-diff.js | 86 ++++++++++++++++++ 4 files changed, 193 insertions(+), 2 deletions(-) create mode 100644 components/skeleton/demo/skeleton-group-wrapper.js create mode 100644 components/skeleton/test/skeleton-group.visual-diff.html create mode 100644 components/skeleton/test/skeleton-group.visual-diff.js diff --git a/components/skeleton/demo/skeleton-group-test.js b/components/skeleton/demo/skeleton-group-test.js index 5a474459ac..42854f7b8b 100644 --- a/components/skeleton/demo/skeleton-group-test.js +++ b/components/skeleton/demo/skeleton-group-test.js @@ -30,7 +30,8 @@ class SkeletonTestGroup extends LitElement { constructor() { super(); - this._items = ['1', '2', '3']; + this._items = [1, 2, 3]; + this._loadAsGroup = true; } render() { @@ -48,7 +49,7 @@ class SkeletonTestGroup extends LitElement { } _addItem() { - this._items.push((this._items.length + 1).toString()); + this._items.push((this._items.length + 1)); this.requestUpdate(); } diff --git a/components/skeleton/demo/skeleton-group-wrapper.js b/components/skeleton/demo/skeleton-group-wrapper.js new file mode 100644 index 0000000000..99ebad7e1c --- /dev/null +++ b/components/skeleton/demo/skeleton-group-wrapper.js @@ -0,0 +1,14 @@ +import '../../collapsible-panel/collapsible-panel.js'; +import '../../collapsible-panel/collapsible-panel-group.js'; +import { html, LitElement } from 'lit'; +import { SkeletonGroupMixin } from '../skeleton-group-mixin.js'; + +class SkeletonGroupTestWrapper extends SkeletonGroupMixin(LitElement) { + render() { + return html` + + `; + } +} +customElements.define('d2l-skeleton-group-test-wrapper', SkeletonGroupTestWrapper); + diff --git a/components/skeleton/test/skeleton-group.visual-diff.html b/components/skeleton/test/skeleton-group.visual-diff.html new file mode 100644 index 0000000000..edb31689b5 --- /dev/null +++ b/components/skeleton/test/skeleton-group.visual-diff.html @@ -0,0 +1,90 @@ + + + + + + + + d2l-skeleton-group + + + + +
+ + + + + + + +
+
+ + + + + + + +
+
+ + + + + + + +
+
+ + + + + + + +
+
+ + + + + + + +
+
+ + + + + + + +
+ +
+ + + + + + + +
+ + diff --git a/components/skeleton/test/skeleton-group.visual-diff.js b/components/skeleton/test/skeleton-group.visual-diff.js new file mode 100644 index 0000000000..24cd27b2c1 --- /dev/null +++ b/components/skeleton/test/skeleton-group.visual-diff.js @@ -0,0 +1,86 @@ +import puppeteer from 'puppeteer'; +import VisualDiff from '@brightspace-ui/visual-diff'; + +describe('d2l-skeleton-group', () => { + + const visualDiff = new VisualDiff('skeleton-group', import.meta.url); + + let browser, page; + + before(async() => { + browser = await puppeteer.launch(); + page = await visualDiff.createPage(browser, { viewport: { width: 800, height: 3500 } }); + }); + + after(async() => await browser.close()); + + ['ltr', 'rtl'].forEach(dir => { + + describe(dir, () => { + + before(async() => { + await page.goto( + `${visualDiff.getBaseUrl()}/components/skeleton/test/skeleton-group.visual-diff.html?dir=${dir}`, + { waitUntil: ['networkidle0', 'load'] } + ); + await page.bringToFront(); + }); + + [ + 'all-skeleton', + 'one-skeleton', + 'no-skeleton', + ].forEach((name) => { + it(name, async function() { + const rect = await visualDiff.getRect(page, `#${name}`); + await visualDiff.screenshotAndCompare(page, this.test.fullTitle(), { clip: rect }); + }); + }); + + [ + { name: 'make-one-skeleton', skeleton: true }, + { name: 'make-one-not-skeleton', skeleton: false }, + ].forEach((info) => { + it(info.name, async function() { + page.$eval(`#${info.name}`, async(element, skeleton) => { + const panelGroup = element.querySelector('d2l-skeleton-group-test-wrapper').querySelector('d2l-collapsible-panel-group'); + const el = panelGroup.querySelector('d2l-collapsible-panel'); + el.skeleton = skeleton; + }, info.skeleton); + const rect = await visualDiff.getRect(page, `#${info.name}`); + await visualDiff.screenshotAndCompare(page, this.test.fullTitle(), { clip: rect }); + }); + }); + + [ + 'add-element', + ].forEach((name) => { + it(name, async function() { + page.$eval(`#${name}`, async(element) => { + const panelGroup = element.querySelector('d2l-skeleton-group-test-wrapper').querySelector('d2l-collapsible-panel-group'); + panelGroup.innerHTML += ''; + }); + const rect = await visualDiff.getRect(page, `#${name}`); + await visualDiff.screenshotAndCompare(page, this.test.fullTitle(), { clip: rect }); + }); + }); + + [ + 'remove-element', + ].forEach((name) => { + it(name, async function() { + page.$eval(`#${name}`, async(element) => { + const panelGroup = element.querySelector('d2l-skeleton-group-test-wrapper').querySelector('d2l-collapsible-panel-group'); + const el = panelGroup.querySelector('d2l-collapsible-panel'); + el.remove(); + }); + const rect = await visualDiff.getRect(page, `#${name}`); + await visualDiff.screenshotAndCompare(page, this.test.fullTitle(), { clip: rect }); + }); + }); + + }); + + }); + +});