Skip to content

Commit

Permalink
add some vdiff tests
Browse files Browse the repository at this point in the history
  • Loading branch information
James Klassen authored and James Klassen committed Jul 12, 2023
1 parent e2d0500 commit e92b8c2
Show file tree
Hide file tree
Showing 4 changed files with 190 additions and 2 deletions.
5 changes: 3 additions & 2 deletions components/skeleton/demo/skeleton-group-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@ class SkeletonTestGroup extends LitElement {

constructor() {
super();
this._items = ['1', '2', '3'];
this._items = [1, 2, 3];
this._loadAsGroup = true;
}

render() {
Expand All @@ -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();
}

Expand Down
14 changes: 14 additions & 0 deletions components/skeleton/demo/skeleton-group-wrapper.js
View file
Original file line number Diff line number Diff line change
@@ -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`
<slot></slot>
`;
}
}
customElements.define('d2l-skeleton-group-test-wrapper', SkeletonGroupTestWrapper);

87 changes: 87 additions & 0 deletions components/skeleton/test/skeleton-group.visual-diff.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../../../test/styles.css" type="text/css">
<script>
const rtl = (window.location.search.indexOf('dir=rtl') !== -1);
if (rtl) document.documentElement.setAttribute('dir', 'rtl');
</script>
<script type="module">
import '../../typography/typography.js';
import '../../collapsible-panel/collapsible-panel.js';
import '../../collapsible-panel/collapsible-panel-group.js';
import '../demo/skeleton-group-wrapper.js';
</script>
<style>
</style>
<title>d2l-skeleton-group</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
</head>
<body class="d2l-typography">
<div class="visual-diff" id="all-skeleton">
<d2l-skeleton-group-test-wrapper>
<d2l-collapsible-panel-group>
<d2l-collapsible-panel skeleton panel-title="Title 1"></d2l-collapsible-panel>
<d2l-collapsible-panel skeleton panel-title="Title 2"></d2l-collapsible-panel>
<d2l-collapsible-panel skeleton panel-title="Title 3"></d2l-collapsible-panel>
</d2l-collapsible-panel-group>
</d2l-skeleton-group-test-wrapper>
</div>
<div class="visual-diff" id="one-skeleton">
<d2l-skeleton-group-test-wrapper>
<d2l-collapsible-panel-group>
<d2l-collapsible-panel skeleton panel-title="Title 1"></d2l-collapsible-panel>
<d2l-collapsible-panel panel-title="Title 2"></d2l-collapsible-panel>
<d2l-collapsible-panel panel-title="Title 3"></d2l-collapsible-panel>
</d2l-collapsible-panel-group>
</d2l-skeleton-group-test-wrapper>
</div>
<div class="visual-diff" id="no-skeleton">
<d2l-skeleton-group-test-wrapper>
<d2l-collapsible-panel-group>
<d2l-collapsible-panel panel-title="Title 1"></d2l-collapsible-panel>
<d2l-collapsible-panel panel-title="Title 2"></d2l-collapsible-panel>
<d2l-collapsible-panel panel-title="Title 3"></d2l-collapsible-panel>
</d2l-collapsible-panel-group>
</d2l-skeleton-group-test-wrapper>
</div>
<div class="visual-diff" id="make-one-skeleton">
<d2l-skeleton-group-test-wrapper>
<d2l-collapsible-panel-group>
<d2l-collapsible-panel panel-title="Title 1"></d2l-collapsible-panel>
<d2l-collapsible-panel panel-title="Title 2"></d2l-collapsible-panel>
<d2l-collapsible-panel panel-title="Title 3"></d2l-collapsible-panel>
</d2l-collapsible-panel-group>
</d2l-skeleton-group-test-wrapper>
</div>
<div class="visual-diff" id="make-one-not-skeleton">
<d2l-skeleton-group-test-wrapper>
<d2l-collapsible-panel-group>
<d2l-collapsible-panel skeleton panel-title="Title 1"></d2l-collapsible-panel>
<d2l-collapsible-panel panel-title="Title 2"></d2l-collapsible-panel>
<d2l-collapsible-panel panel-title="Title 3"></d2l-collapsible-panel>
</d2l-collapsible-panel-group>
</d2l-skeleton-group-test-wrapper>
</div>
<div class="visual-diff" id="add-element">
<d2l-skeleton-group-test-wrapper>
<d2l-collapsible-panel-group>
<d2l-collapsible-panel panel-title="Title 1"></d2l-collapsible-panel>
<d2l-collapsible-panel panel-title="Title 2"></d2l-collapsible-panel>
<d2l-collapsible-panel panel-title="Title 3"></d2l-collapsible-panel>
</d2l-collapsible-panel-group>
</d2l-skeleton-group-test-wrapper>
</div>

<div class="visual-diff" id="remove-element">
<d2l-skeleton-group-test-wrapper>
<d2l-collapsible-panel-group>
<d2l-collapsible-panel skeleton panel-title="Title 1"></d2l-collapsible-panel>
<d2l-collapsible-panel panel-title="Title 2"></d2l-collapsible-panel>
<d2l-collapsible-panel panel-title="Title 3"></d2l-collapsible-panel>
</d2l-collapsible-panel-group>
</d2l-skeleton-group-test-wrapper>
</div>
</body>
</html>
86 changes: 86 additions & 0 deletions components/skeleton/test/skeleton-group.visual-diff.js
View file
Original file line number Diff line number Diff line change
@@ -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 += '<d2l-collapsible-panel skeleton panel-title="blah"></d2l-collapsible-panel>';
});
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 });
});
});

});

});

});

0 comments on commit e92b8c2

Please sign in to comment.