-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
James Klassen
authored and
James Klassen
committed
Jul 12, 2023
1 parent
e2d0500
commit e0bb9da
Showing
4 changed files
with
193 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,90 @@ | ||
<!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> | ||
.visual-diff { | ||
width: 300px; | ||
} | ||
</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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 }); | ||
}); | ||
}); | ||
|
||
}); | ||
|
||
}); | ||
|
||
}); |