`;
-/* end snapshot sbb-file-selector renders default */
+/* end snapshot sbb-file-selector renders Shadow DOM */
-snapshots["sbb-file-selector renders with dropzone area and size s"] =
+snapshots["sbb-file-selector renders with dropzone area and size s DOM"] =
+`
+
+`;
+/* end snapshot sbb-file-selector renders with dropzone area and size s DOM */
+
+snapshots["sbb-file-selector renders with dropzone area and size s Shadow DOM"] =
`
`;
-/* end snapshot sbb-file-selector renders with dropzone area and size s */
+/* end snapshot sbb-file-selector renders with dropzone area and size s Shadow DOM */
-snapshots["sbb-file-selector A11y tree Chrome"] =
+snapshots["sbb-file-selector renders with dropzone area and size s A11y tree Chrome"] =
`
{
"role": "WebArea",
"name": "",
"children": [
+ {
+ "role": "text",
+ "name": "Drag & Drop your files here"
+ },
{
"role": "text",
"name": "Choose a file"
},
{
"role": "button",
- "name": "Choose a file",
+ "name": "Drag & Drop your files here Choose a file",
"value": "No file chosen"
}
]
}
`;
-/* end snapshot sbb-file-selector A11y tree Chrome */
+/* end snapshot sbb-file-selector renders with dropzone area and size s A11y tree Chrome */
-snapshots["sbb-file-selector A11y tree Firefox"] =
+snapshots["sbb-file-selector renders with dropzone area and size s A11y tree Firefox"] =
`
{
"role": "document",
"name": "",
"children": [
+ {
+ "role": "text leaf",
+ "name": "Drag & Drop your files here"
+ },
{
"role": "text leaf",
"name": "Choose a file"
},
{
"role": "button",
- "name": "Choose a file Browse… …"
+ "name": "Drag & Drop your files here Choose a file Browse… …"
}
]
}
`;
-/* end snapshot sbb-file-selector A11y tree Firefox */
+/* end snapshot sbb-file-selector renders with dropzone area and size s A11y tree Firefox */
diff --git a/src/elements/file-selector/file-selector.snapshot.spec.ts b/src/elements/file-selector/file-selector.snapshot.spec.ts
index e9bca80df4..134001ab21 100644
--- a/src/elements/file-selector/file-selector.snapshot.spec.ts
+++ b/src/elements/file-selector/file-selector.snapshot.spec.ts
@@ -2,35 +2,45 @@ import { expect } from '@open-wc/testing';
import { html } from 'lit/static-html.js';
import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
-import { waitForLitRender } from '../core/testing.js';
+import type { SbbFileSelectorElement } from './file-selector.js';
import './file-selector.js';
describe(`sbb-file-selector`, () => {
- it('renders default', async () => {
- const root = await fixture(html``);
-
- expect(root).dom.to.be.equal(`
-
-
- `);
- await expect(root).shadowDom.to.be.equalSnapshot();
- });
+ describe('renders', () => {
+ let element: SbbFileSelectorElement;
- it('renders with dropzone area and size s', async () => {
- const root = await fixture(
- html``,
- );
+ beforeEach(async () => {
+ element = await fixture(html``);
+ });
- await waitForLitRender(root);
+ it('DOM', async () => {
+ await expect(element).dom.to.be.equalSnapshot();
+ });
- expect(root).dom.to.be.equal(`
-
-
- `);
- await expect(root).shadowDom.to.be.equalSnapshot();
+ it('Shadow DOM', async () => {
+ await expect(element).shadowDom.to.be.equalSnapshot();
+ });
});
- // We skip safari because it has an inconsistent behavior on ci environment
- testA11yTreeSnapshot(html``, undefined, { safari: true });
+ describe('renders with dropzone area and size s', () => {
+ let element: SbbFileSelectorElement;
+
+ beforeEach(async () => {
+ element = await fixture(
+ html``,
+ );
+ });
+
+ it('DOM', async () => {
+ await expect(element).dom.to.be.equalSnapshot();
+ });
+
+ it('Shadow DOM', async () => {
+ await expect(element).shadowDom.to.be.equalSnapshot();
+ });
+
+ // We skip safari because it has an inconsistent behavior on ci environment
+ testA11yTreeSnapshot(undefined, undefined, { safari: true });
+ });
});
diff --git a/src/elements/file-selector/file-selector.visual.spec.ts b/src/elements/file-selector/file-selector.visual.spec.ts
new file mode 100644
index 0000000000..edc790eaeb
--- /dev/null
+++ b/src/elements/file-selector/file-selector.visual.spec.ts
@@ -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('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`
+
+ ${state.error
+ ? html`There has been an 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`
+
+ `);
+ });
+
+ for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) {
+ it(
+ visualDiffState.name,
+ visualDiffState.with((setup) => {
+ addFilesToComponentInput(root.querySelector('#fs')!);
+ setup.withSnapshotElement(root);
+ }),
+ );
+ }
+ });
+ });
+});