-
Notifications
You must be signed in to change notification settings - Fork 25
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Spike into visual-diffs #3610
Closed
Closed
Spike into visual-diffs #3610
Changes from all commits
Commits
Show all changes
7 commits
Select commit
Hold shift + click to select a range
77249f2
spike into visual-diffs
dlockhart 105d28d
update to use @brightspace-ui/testing vdiff
dlockhart 25e335e
Fix things
dlockhart 2acbf8e
Fix flaky vdiff tests
bearfriend b14ae64
Fix firefox vdiff focus by forwarding focus-visible
bearfriend 49d7790
Fix firefox flaky vdiff tests
bearfriend 2e0befe
Merge branch 'main' into dlockhart/visual-diff-spike
dlockhart File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| .vdiff/ | ||
| build/ | ||
| generated/ | ||
| node_modules/ | ||
|
|
||
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,33 @@ | ||
| import '../button-icon.js'; | ||
| import { clickElem, expect, fixture, focusElem, hoverElem, html } from '@brightspace-ui/testing'; | ||
|
|
||
| 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 hoverElem(elem) }, | ||
| { name: 'focus', action: async(elem) => await focusElem(elem) }, | ||
| { name: 'click', action: async(elem) => await clickElem(elem) }, | ||
| { name: 'disabled', action: async(elem) => elem.disabled = true } | ||
| ].forEach(({ action, name }) => { | ||
| it(name, async() => { | ||
| const elem = await fixture(f, { theme: theme }); | ||
| if (action) await action(elem); | ||
| await expect(elem).to.be.golden(); | ||
| }); | ||
| }); | ||
|
|
||
| }); | ||
|
|
||
| }); | ||
|
|
||
| }); | ||
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,57 @@ | ||
| import '../button-move.js'; | ||
| import { clickElem, expect, fixture, focusElem, hoverElem, html } from '@brightspace-ui/testing'; | ||
|
|
||
| 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 hoverElem(elem) }, | ||
| { name: 'keyboard-focus', action: async(elem) => await focusElem(elem) }, | ||
| { name: 'mouse-focus', action: async(elem) => await clickElem(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 hoverElem(elem); | ||
| } }, | ||
| { name: 'disabled-up-keyboard-focus', action: async(elem) => { | ||
| elem.disabledUp = true; | ||
| await focusElem(elem); | ||
| } }, | ||
| { name: 'disabled-up-mouse-focus', action: async(elem) => { | ||
| elem.disabledUp = true; | ||
| await clickElem(elem); | ||
| } }, | ||
| { name: 'disabled-down', action: async(elem) => elem.disabledDown = true }, | ||
| ].forEach(({ action, name }) => { | ||
| it(name, async() => { | ||
| if (category === 'dark') elem.theme = 'dark'; | ||
| if (action) await action(elem); | ||
| await expect(elem).to.be.golden(); | ||
| }); | ||
| }); | ||
|
|
||
| }); | ||
|
|
||
| }); | ||
|
|
||
| }); |
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,59 @@ | ||
| import '../button-subtle.js'; | ||
| import { clickElem, expect, fixture, focusElem, hoverElem, html } from '@brightspace-ui/testing'; | ||
|
|
||
| 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 hoverElem(elem) }, | ||
| { name: 'focus', action: async(elem) => await focusElem(elem) }, | ||
| { name: 'click', action: async(elem) => await clickElem(elem) }, | ||
| { name: 'disabled', action: async(elem) => elem.disabled = true } | ||
| ].forEach(({ action, name }) => { | ||
| it(name, async() => { | ||
| const elem = await fixture(f); | ||
| if (action) await action(elem); | ||
| await expect(elem).to.be.golden(); | ||
| }); | ||
| }); | ||
|
|
||
| if (hasRtl) { | ||
| it('rtl', async() => { | ||
| const elem = await fixture(f, { rtl: true }); | ||
| await expect(elem).to.be.golden(); | ||
| }); | ||
| } | ||
|
|
||
| }); | ||
|
|
||
| }); | ||
|
|
||
| it('h-align', async() => { | ||
| 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 expect(elem).to.be.golden(); | ||
| }); | ||
|
|
||
| }); |
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,31 @@ | ||
| import '../button.js'; | ||
| import { clickElem, expect, fixture, focusElem, hoverElem, html } from '@brightspace-ui/testing'; | ||
|
|
||
| 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 hoverElem(elem) }, | ||
| { name: 'focus', action: async(elem) => await focusElem(elem) }, | ||
| { name: 'click', action: async(elem) => await clickElem(elem) }, | ||
| { name: 'disabled', action: async(elem) => elem.disabled = true } | ||
| ].forEach(({ action, name }) => { | ||
| it(name, async() => { | ||
| const elem = await fixture(f); | ||
| if (action) await action(elem); | ||
| await expect(elem).to.be.golden(); | ||
| }); | ||
| }); | ||
|
|
||
| }); | ||
|
|
||
| }); | ||
|
|
||
| }); |
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,80 @@ | ||
| import '../button.js'; | ||
| import '../floating-buttons.js'; | ||
| import { expect, fixture, html, nextFrame, oneEvent } from '@brightspace-ui/testing'; | ||
|
|
||
| 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() => { | ||
| const elem = await fixture(floatingButtonsFixture); | ||
| await expect(elem).to.be.golden(); | ||
| }); | ||
|
|
||
| it('does not float at bottom of container', async() => { | ||
| const elem = await fixture(floatingButtonsFixture); | ||
| window.scrollTo(0, document.body.scrollHeight); | ||
| await oneEvent(window, 'scroll'); | ||
| await expect(elem).to.be.golden(); | ||
| }); | ||
|
|
||
| it('does not float when small amount of content', async() => { | ||
| const elem = await fixture(floatingButtonsShortFixture); | ||
| await nextFrame(); | ||
| await expect(elem).to.be.golden(); | ||
| }); | ||
|
|
||
| it('floats when content added to dom', async() => { | ||
| 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 nextFrame(); | ||
| await expect(elem).to.be.golden(); | ||
| }); | ||
|
|
||
| it('floats at bottom of page when always-float', async() => { | ||
| const elem = await fixture(floatingButtonsAlwaysFloatFixture); | ||
| window.scrollTo(0, document.body.scrollHeight); | ||
| await expect(elem).to.be.golden(); | ||
| }); | ||
|
|
||
| it('is correct with rtl', async() => { | ||
| const elem = await fixture(floatingButtonsFixture, { rtl: true }); | ||
| await expect(elem).to.be.golden(); | ||
| }); | ||
|
|
||
| it('floats when bounded', async() => { | ||
| const elem = await fixture(html`<div style="border: 1px dashed #999999; height: 200px; overflow: scroll;">${floatingButtonsFixture}</div>`); | ||
| await expect(elem).to.be.golden(); | ||
| }); | ||
|
|
||
| }); |
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,80 @@ | ||
| import '../icon.js'; | ||
| import '../demo/icon-color-override.js'; | ||
| import '../demo/icon-size-override.js'; | ||
| import { expect, fixture, html } from '@brightspace-ui/testing'; | ||
|
|
||
| describe('d2l-icon', () => { | ||
|
|
||
| it('tier1', async() => { | ||
| const elem = await fixture(html`<d2l-icon icon="tier1:assignments"></d2l-icon>`); | ||
| await expect(elem).to.be.golden(); | ||
| }); | ||
|
|
||
| it('tier2', async() => { | ||
| const elem = await fixture(html`<d2l-icon icon="tier2:assignments"></d2l-icon>`); | ||
| await expect(elem).to.be.golden(); | ||
| }); | ||
|
|
||
| it('tier3', async() => { | ||
| const elem = await fixture(html`<d2l-icon icon="tier3:assignments"></d2l-icon>`); | ||
| await expect(elem).to.be.golden(); | ||
| }); | ||
|
|
||
| it('prefixed', async() => { | ||
| const elem = await fixture(html`<d2l-icon icon="d2l-tier3:assignments"></d2l-icon>`); | ||
| await expect(elem).to.be.golden(); | ||
| }); | ||
|
|
||
| it('fill-none', async() => { | ||
| const elem = await fixture(html`<d2l-icon icon="tier2:evaluate-all"></d2l-icon>`); | ||
| await expect(elem).to.be.golden(); | ||
| }); | ||
|
|
||
| it('fill-circle', async() => { | ||
| const elem = await fixture(html`<d2l-icon icon="tier2:divider-big"></d2l-icon>`); | ||
| await expect(elem).to.be.golden(); | ||
| }); | ||
|
|
||
| it('fill-mixed', async() => { | ||
| const elem = await fixture(html` | ||
| <d2l-icon-demo-color-override> | ||
| <d2l-icon icon="tier2:check-box"></d2l-icon> | ||
| </d2l-icon-demo-color-override> | ||
| `); | ||
| await expect(elem).to.be.golden(); | ||
| }); | ||
|
|
||
| it('color-override', async() => { | ||
| const elem = await fixture(html` | ||
| <d2l-icon-demo-color-override> | ||
| <d2l-icon icon="tier3:assignments"></d2l-icon> | ||
| </d2l-icon-demo-color-override> | ||
| `); | ||
| await expect(elem).to.be.golden(); | ||
| }); | ||
|
|
||
| it('size-override', async() => { | ||
| const elem = await fixture(html` | ||
| <d2l-icon-demo-size-override> | ||
| <d2l-icon icon="tier3:assignments"></d2l-icon> | ||
| </d2l-icon-demo-size-override> | ||
| `); | ||
| await expect(elem).to.be.golden(); | ||
| }); | ||
|
|
||
| it('rtl-tier1', async() => { | ||
| const elem = await fixture(html`<d2l-icon icon="tier1:assignments"></d2l-icon>`, { rtl: true }); | ||
| await expect(elem).to.be.golden(); | ||
| }); | ||
|
|
||
| it('rtl-tier2', async() => { | ||
| const elem = await fixture(html`<d2l-icon icon="tier2:assignments"></d2l-icon>`, { rtl: true }); | ||
| await expect(elem).to.be.golden(); | ||
| }); | ||
|
|
||
| it('rtl-tier3', async() => { | ||
| const elem = await fixture(html`<d2l-icon icon="tier3:assignments"></d2l-icon>`, { rtl: true }); | ||
| await expect(elem).to.be.golden(); | ||
| }); | ||
|
|
||
| }); |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would it be possible to pass in a
csstemplate literal tofixturethat would automatically get added and removed from the page? 🤔 Could clean this kind of thing up a bitThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe? We have to be careful because we still want the root of the fixture to be the button, so we couldn't drop a
<style>element in as a sibling. But maybe we could do a constructible stylesheet and apply it to the<body>. Worth experimenting for sure, I'll add it to the Confluence doc.