spike into visual-diffs

components/button/test/button-icon.vdiff.js

@@ -0,0 +1,33 @@
+import '../button-icon.js';
+import { fixture, focusWithKeyboard, focusWithMouse, hoverWithMouse, html, screenshotAndCompare } from '../../../tools/web-test-runner-helpers.js';
+
+describe('d2l-button-icon', () => {
+
+	[
+		{ category: 'normal', f: html`<d2l-button-icon icon="tier1:gear" text="Icon Button"></d2l-button-icon>` },
+		{ category: 'translucent', f: html`<d2l-button-icon icon="tier1:gear" text="Icon Button" translucent></d2l-button-icon>`, theme: 'translucent' },
+		{ category: 'dark', f: html`<d2l-button-icon icon="tier1:gear" text="Icon Button" theme="dark"></d2l-button-icon>`, theme: 'dark' },
+		{ category: 'custom', f: html`<d2l-button-icon icon="tier1:gear" text="Icon Button" style="--d2l-button-icon-min-height: 1.5rem; --d2l-button-icon-min-width: 1.5rem; --d2l-button-icon-border-radius: 4px; --d2l-button-icon-focus-box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #006fbf; --d2l-button-icon-fill-color: var(--d2l-color-celestine); --d2l-button-icon-fill-color-hover: var(--d2l-color-celestine-minus-1);"></d2l-button-icon>` }
+	].forEach(({ category, f, theme }) => {
+
+		describe(category, () => {
+
+			[
+				{ name: 'normal' },
+				{ name: 'hover', action: async(elem) => await hoverWithMouse(elem) },
+				{ name: 'focus', action: async(elem) => await focusWithKeyboard(elem) },
+				{ name: 'click', action: async(elem) => await focusWithMouse(elem) },
+				{ name: 'disabled', action: async(elem) => elem.disabled = true }
+			].forEach(({ action, name }) => {
+				it(name, async function() {
+					const elem = await fixture(f, { theme: theme });
+					if (action) await action(elem);
+					await screenshotAndCompare(elem, this.test.fullTitle());
+				});
+			});
+
+		});
+
+	});
+
+});

components/button/test/button-move.vdiff.js

@@ -0,0 +1,57 @@
+import '../button-move.js';
+import { fixture, focusWithKeyboard, focusWithMouse, hoverWithMouse, html, screenshotAndCompare } from '../../../tools/web-test-runner-helpers.js';
+
+describe('d2l-button-move', () => {
+
+	[ 'normal', 'dark' ].forEach(category => {
+
+		describe(category, () => {
+
+			let elem;
+			beforeEach(async() => {
+				elem = await fixture(
+					html`<d2l-button-move text="Reorder Item"></d2l-button-move>`,
+					{ theme: category === 'dark' ? 'dark' : undefined }
+				);
+			});
+
+			[
+				{ name: 'normal' },
+				{ name: 'hover', action: async(elem) => await hoverWithMouse(elem) },
+				{ name: 'keyboard-focus', action: async(elem) => await focusWithKeyboard(elem) },
+				{ name: 'mouse-focus', action: async(elem) => await focusWithMouse(elem) },
+				{ name: 'disabled', action: async(elem) => {
+					elem.disabledUp = true;
+					elem.disabledDown = true;
+					elem.disabledLeft = true;
+					elem.disabledRight = true;
+					elem.disabledHome = true;
+					elem.disabledEnd = true;
+				} },
+				{ name: 'disabled-up', action: async(elem) => elem.disabledUp = true },
+				{ name: 'disabled-up-hover', action: async(elem) => {
+					elem.disabledUp = true;
+					await hoverWithMouse(elem);
+				} },
+				{ name: 'disabled-up-keyboard-focus', action: async(elem) => {
+					elem.disabledUp = true;
+					await focusWithKeyboard(elem);
+				} },
+				{ name: 'disabled-up-mouse-focus', action: async(elem) => {
+					elem.disabledUp = true;
+					await focusWithMouse(elem);
+				} },
+				{ name: 'disabled-down', action: async(elem) => elem.disabledDown = true },
+			].forEach(({ action, name }) => {
+				it(name, async function() {
+					if (category === 'dark') elem.theme = 'dark';
+					if (action) await action(elem);
+					await screenshotAndCompare(elem, this.test.fullTitle());
+				});
+			});
+
+		});
+
+	});
+
+});

components/button/test/button-subtle.vdiff.js

@@ -0,0 +1,59 @@
+import '../button-subtle.js';
+import { fixture, focusWithKeyboard, focusWithMouse, hoverWithMouse, html, screenshotAndCompare } from '../../../tools/web-test-runner-helpers.js';
+
+describe('d2l-button-subtle', () => {
+
+	[
+		{ category: 'default-normal', f: html`<d2l-button-subtle text="Subtle Button"></d2l-button-subtle>` },
+		{ category: 'default-icon', f: html`<d2l-button-subtle icon="tier1:bookmark-hollow" text="Subtle Button"></d2l-button-subtle>`, hasRtl: true },
+		{ category: 'default-icon-right', f: html`<d2l-button-subtle icon="tier1:chevron-down" text="Subtle Button" icon-right></d2l-button-subtle>`, hasRtl: true },
+		{ category: 'slim-normal', f: html`<d2l-button-subtle slim text="Subtle Button"></d2l-button-subtle>` },
+		{ category: 'slim-icon', f: html`<d2l-button-subtle slim icon="tier1:bookmark-hollow" text="Subtle Button"></d2l-button-subtle>`, hasRtl: true },
+		{ category: 'slim-icon-right', f: html`<d2l-button-subtle slim icon="tier1:chevron-down" text="Subtle Button" icon-right></d2l-button-subtle>`, hasRtl: true }
+	].forEach(({ category, f, hasRtl }) => {
+
+		describe(category, () => {
+
+			[
+				{ name: 'normal' },
+				{ name: 'hover', action: async(elem) => await hoverWithMouse(elem) },
+				{ name: 'focus', action: async(elem) => await focusWithKeyboard(elem) },
+				{ name: 'click', action: async(elem) => await focusWithMouse(elem) },
+				{ name: 'disabled', action: async(elem) => elem.disabled = true }
+			].forEach(({ action, name }) => {
+				it(name, async function() {
+					const elem = await fixture(f);
+					if (action) await action(elem);
+					await screenshotAndCompare(elem, this.test.fullTitle());
+				});
+			});
+
+			if (hasRtl) {
+				it('rtl', async function() {
+					const elem = await fixture(f, { rtl: true });
+					await screenshotAndCompare(elem, this.test.fullTitle());
+				});
+			}
+
+		});
+
+	});
+
+	it('h-align', async function() {
+		const elem = await fixture(html`
+			<div id="h-align">
+				<d2l-button-subtle icon="tier1:gear" text="Button Edge Aligned (default)"></d2l-button-subtle>
+				<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
+				<d2l-button-subtle icon="tier1:gear" text="Button Content Aligned" h-align="text"></d2l-button-subtle>
+				<br>
+				<d2l-button-subtle slim icon="tier1:gear" text="Slim Button Content Aligned" h-align="text"></d2l-button-subtle>
+				<br>
+				<d2l-button-subtle icon="tier1:chevron-down" text="Subtle Button" icon-right h-align="text"></d2l-button-subtle>
+				<br>
+				<d2l-button-subtle slim icon="tier1:chevron-down" text="Slim Subtle Button" icon-right h-align="text"></d2l-button-subtle>
+			</div>
+		`);
+		await screenshotAndCompare(elem, this.test.fullTitle());
+	});
+
+});

components/button/test/button.vdiff.js

@@ -0,0 +1,31 @@
+import '../button.js';
+import { fixture, focusWithKeyboard, focusWithMouse, hoverWithMouse, html, screenshotAndCompare } from '../../../tools/web-test-runner-helpers.js';
+
+describe('d2l-button', () => {
+
+	[
+		{ category: 'normal', f: html`<d2l-button>Normal Button</d2l-button>` },
+		{ category: 'primary', f: html`<d2l-button primary>Primary Button</d2l-button>` }
+	].forEach(({ category, f }) => {
+
+		describe(category, () => {
+
+			[
+				{ name: 'normal' },
+				{ name: 'hover', action: async(elem) => await hoverWithMouse(elem) },
+				{ name: 'focus', action: async(elem) => await focusWithKeyboard(elem) },
+				{ name: 'click', action: async(elem) => await focusWithMouse(elem) },
+				{ name: 'disabled', action: async(elem) => elem.disabled = true }
+			].forEach(({ action, name }) => {
+				it(name, async function() {
+					const elem = await fixture(f);
+					if (action) await action(elem);
+					await screenshotAndCompare(elem, this.test.fullTitle());
+				});
+			});
+
+		});
+
+	});
+
+});

components/button/test/floating-buttons.vdiff.js

@@ -0,0 +1,77 @@
+import '../button.js';
+import '../floating-buttons.js';
+import { fixture, html, screenshotAndCompare } from '../../../tools/web-test-runner-helpers.js';
+
+const lotsaCoffee = Array.from(Array(22).keys()).map(() => html`<p>I love Coffee!</p>`);
+
+const floatingButtonsFixture = html`
+	<div>
+		${lotsaCoffee}
+		<d2l-floating-buttons>
+			<d2l-button primary>Primary Button</d2l-button>
+			<d2l-button>Secondary Button</d2l-button>
+		</d2l-floating-buttons>
+	</div>
+`;
+const floatingButtonsShortFixture = html`
+	<div>
+		<div id="floating-buttons-short-content">
+			<p>I love Coffee!</p>
+		</div>
+		<d2l-floating-buttons>
+			<d2l-button primary>Brew more Coffee!</d2l-button>
+		</d2l-floating-buttons>
+	</div>
+`;
+const floatingButtonsAlwaysFloatFixture = html`
+	<div>
+		${lotsaCoffee}
+		<d2l-floating-buttons always-float>
+			<d2l-button primary>Primary Button</d2l-button>
+			<d2l-button>Secondary Button</d2l-button>
+		</d2l-floating-buttons>
+	</div>
+`;
+
+describe('d2l-floating-buttons', () => {
+
+	it('floats', async function() {
+		const elem = await fixture(floatingButtonsFixture);
+		await screenshotAndCompare(elem, this.test.fullTitle());
+	});
+
+	it('does not float at bottom of container', async function() {
+		const elem = await fixture(floatingButtonsFixture);
+		window.scrollTo(0, document.body.scrollHeight);
+		await screenshotAndCompare(elem, this.test.fullTitle());
+	});
+
+	it('does not float when small amount of content', async function() {
+		const elem = await fixture(floatingButtonsShortFixture);
+		await screenshotAndCompare(elem, this.test.fullTitle());
+	});
+
+	it('floats when content added to dom', async function() {
+		const elem = await fixture(floatingButtonsShortFixture);
+		const contentElem = document.querySelector('#floating-buttons-short-content').querySelector('p');
+		contentElem.innerHTML += '<br><br>I love Coffe<br><br>I love Coffe<br><br>I love Coffe<br><br>I love Coffe<br><br>I love Coffe<br><br>I love Coffe<br><br>I love Coffe<br><br>I love Coffe<br><br>I love Coffe<br><br>I love Coffe<br><br>I love Coffe<br><br>I love Coffe<br><br>I love Coffe<br><br>I love Coffe<br><br>I love Coffe<br><br>I love Coffe<br><br>I love Coffe<br><br>I love Coffe<br><br>I love Coffe<br><br>I love Coffe<br><br>I love Coffe<br><br>';
+		await screenshotAndCompare(elem, this.test.fullTitle());
+	});
+
+	it('floats at bottom of page when always-float', async function() {
+		const elem = await fixture(floatingButtonsAlwaysFloatFixture);
+		window.scrollTo(0, document.body.scrollHeight);
+		await screenshotAndCompare(elem, this.test.fullTitle());
+	});
+
+	it('is correct with rtl', async function() {
+		const elem = await fixture(floatingButtonsFixture, { rtl: true });
+		await screenshotAndCompare(elem, this.test.fullTitle());
+	});
+
+	it('floats when bounded', async function() {
+		const elem = await fixture(html`<div style="border: 1px dashed #999999; height: 200px; overflow: scroll;">${floatingButtonsFixture}</div>`);
+		await screenshotAndCompare(elem, this.test.fullTitle());
+	});
+
+});

components/icons/icon.js

@@ -6,8 +6,9 @@ import { loadSvg } from '../../generated/icons/presetIconLoader.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { runAsync } from '../../directives/run-async/run-async.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { WaitForMeMixin } from '../../tools/web-test-runner-helpers.js';
 
-class Icon extends RtlMixin(LitElement) {
+class Icon extends WaitForMeMixin(RtlMixin(LitElement)) {
 
 	static get properties() {
 		return {
@@ -35,9 +36,17 @@ class Icon extends RtlMixin(LitElement) {
 		`];
 	}
 
+	constructor() {
+		super();
+		this._iconWaitHandle = this.setWaitHandle();
+	}
+
 	render() {
 		return html`${runAsync(this.icon, () => this._getIcon(), {
-			success: (icon) => icon
+			success: (icon) => {
+				this.clearWaitHandle(this._iconWaitHandle);
+				return icon;
+			}
 		}, { pendingState: false })}`;
 	}
 

components/icons/test/icon.vdiff.js

@@ -0,0 +1,80 @@
+import '../icon.js';
+import '../demo/icon-color-override.js';
+import '../demo/icon-size-override.js';
+import { fixture, html, screenshotAndCompare } from '../../../tools/web-test-runner-helpers.js';
+
+describe('d2l-icon', () => {
+
+	it('tier1', async function() {
+		const elem = await fixture(html`<d2l-icon icon="tier1:assignments"></d2l-icon>`);
+		await screenshotAndCompare(elem, this.test.fullTitle());
+	});
+
+	it('tier2', async function() {
+		const elem = await fixture(html`<d2l-icon icon="tier2:assignments"></d2l-icon>`);
+		await screenshotAndCompare(elem, this.test.fullTitle());
+	});
+
+	it('tier3', async function() {
+		const elem = await fixture(html`<d2l-icon icon="tier3:assignments"></d2l-icon>`);
+		await screenshotAndCompare(elem, this.test.fullTitle());
+	});
+
+	it('prefixed', async function() {
+		const elem = await fixture(html`<d2l-icon icon="d2l-tier3:assignments"></d2l-icon>`);
+		await screenshotAndCompare(elem, this.test.fullTitle());
+	});
+
+	it('fill-none', async function() {
+		const elem = await fixture(html`<d2l-icon icon="tier2:evaluate-all"></d2l-icon>`);
+		await screenshotAndCompare(elem, this.test.fullTitle());
+	});
+
+	it('fill-circle', async function() {
+		const elem = await fixture(html`<d2l-icon icon="tier2:divider-big"></d2l-icon>`);
+		await screenshotAndCompare(elem, this.test.fullTitle());
+	});
+
+	it('fill-mixed', async function() {
+		const elem = await fixture(html`
+			<d2l-icon-demo-color-override>
+				<d2l-icon icon="tier2:check-box"></d2l-icon>
+			</d2l-icon-demo-color-override>
+		`);
+		await screenshotAndCompare(elem, this.test.fullTitle());
+	});
+
+	it('color-override', async function() {
+		const elem = await fixture(html`
+			<d2l-icon-demo-color-override>
+				<d2l-icon icon="tier3:assignments"></d2l-icon>
+			</d2l-icon-demo-color-override>
+		`);
+		await screenshotAndCompare(elem, this.test.fullTitle());
+	});
+
+	it('size-override', async function() {
+		const elem = await fixture(html`
+			<d2l-icon-demo-size-override>
+				<d2l-icon icon="tier3:assignments"></d2l-icon>
+			</d2l-icon-demo-size-override>
+		`);
+		await screenshotAndCompare(elem, this.test.fullTitle());
+	});
+
+	it('rtl-tier1', async function() {
+		const elem = await fixture(html`<d2l-icon icon="tier1:assignments"></d2l-icon>`, { rtl: true });
+		await screenshotAndCompare(elem, this.test.fullTitle());
+	});
+
+	it('rtl-tier2', async function() {
+		const elem = await fixture(html`<d2l-icon icon="tier2:assignments"></d2l-icon>`, { rtl: true });
+		await screenshotAndCompare(elem, this.test.fullTitle());
+	});
+
+	it('rtl-tier3', async function() {
+		const elem = await fixture(html`<d2l-icon icon="tier3:assignments"></d2l-icon>`, { rtl: true });
+		await screenshotAndCompare(elem, this.test.fullTitle());
+	});
+
+});