-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
test(sbb-file-selector): add visual tests (#2812)
- Loading branch information
1 parent
aaec60e
commit 35384eb
Showing
3 changed files
with
164 additions
and
32 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
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,99 @@ | ||
| import { html, nothing } from 'lit'; | ||
|
|
||
| import { | ||
| describeEach, | ||
| describeViewports, | ||
| visualDiffDefault, | ||
| visualDiffFocus, | ||
| visualRegressionFixture, | ||
| } from '../core/testing/private.js'; | ||
|
|
||
| import '../form-error.js'; | ||
| import './file-selector.js'; | ||
| import type { SbbFileSelectorElement } from './file-selector.js'; | ||
|
|
||
| describe(`sbb-file-selector`, () => { | ||
| function addFilesToComponentInput(elem: SbbFileSelectorElement): void { | ||
| const dataTransfer: DataTransfer = new DataTransfer(); | ||
| for (let i: number = 0; i < 5; i++) { | ||
| dataTransfer.items.add( | ||
| new File([`Hello world - ${i}`], `hello${i}.txt`, { | ||
| type: 'text/plain', | ||
| lastModified: new Date(i).getMilliseconds(), | ||
| }), | ||
| ); | ||
| } | ||
| const input: HTMLInputElement = elem.shadowRoot!.querySelector<HTMLInputElement>('input')!; | ||
| input.files = dataTransfer.files; | ||
| input.dispatchEvent(new Event('change')); | ||
| } | ||
|
|
||
| let root: HTMLElement; | ||
|
|
||
| const states = { | ||
| variant: ['default', 'dropzone'], | ||
| state: [ | ||
| { disabled: false, error: false }, | ||
| { disabled: true, error: false }, | ||
| { disabled: false, error: true }, | ||
| ], | ||
| }; | ||
|
|
||
| const sizes = { | ||
| variant: ['default', 'dropzone'], | ||
| size: ['s', 'm'], | ||
| }; | ||
|
|
||
| describeViewports({ viewports: ['small', 'medium'] }, () => { | ||
| describeEach(states, ({ variant, state }) => { | ||
| beforeEach(async function () { | ||
| root = await visualRegressionFixture(html` | ||
| <sbb-file-selector | ||
| id="fs" | ||
| title-content="Title" | ||
| multiple | ||
| variant=${variant} | ||
| ?disabled=${state.disabled} | ||
| ></sbb-file-selector> | ||
| ${state.error | ||
| ? html`<sbb-form-error slot="error">There has been an error.</sbb-form-error>` | ||
| : nothing} | ||
| `); | ||
| }); | ||
|
|
||
| it( | ||
| visualDiffDefault.name, | ||
| visualDiffDefault.with((setup) => { | ||
| if (!state.disabled && state.error) { | ||
| addFilesToComponentInput(root.querySelector('#fs')!); | ||
| } | ||
| setup.withSnapshotElement(root); | ||
| }), | ||
| ); | ||
| }); | ||
|
|
||
| describeEach(sizes, ({ variant, size }) => { | ||
| beforeEach(async function () { | ||
| root = await visualRegressionFixture(html` | ||
| <sbb-file-selector | ||
| id="fs" | ||
| title-content="Title" | ||
| multiple | ||
| variant=${variant} | ||
| size=${size} | ||
| ></sbb-file-selector> | ||
| `); | ||
| }); | ||
|
|
||
| for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) { | ||
| it( | ||
| visualDiffState.name, | ||
| visualDiffState.with((setup) => { | ||
| addFilesToComponentInput(root.querySelector('#fs')!); | ||
| setup.withSnapshotElement(root); | ||
| }), | ||
| ); | ||
| } | ||
| }); | ||
| }); | ||
| }); |