test(sbb-file-selector): add visual tests

src/elements/file-selector/__snapshots__/file-selector.snapshot.spec.snap.js

@@ -1,7 +1,13 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-file-selector renders default"] = 
+snapshots["sbb-file-selector renders DOM"] = 
+`<sbb-file-selector size="m">
+</sbb-file-selector>
+`;
+/* end snapshot sbb-file-selector renders DOM */
+
+snapshots["sbb-file-selector renders Shadow DOM"] = 
 `<div class="sbb-file-selector">
   <div class="sbb-file-selector__input-container">
     <label>
@@ -32,9 +38,18 @@ snapshots["sbb-file-selector renders default"] =
   </div>
 </div>
 `;
-/* 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"] = 
+`<sbb-file-selector
+  size="s"
+  variant="dropzone"
+>
+</sbb-file-selector>
+`;
+/* 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"] = 
 `<div class="sbb-file-selector">
   <div class="sbb-file-selector__input-container">
     <label>
@@ -82,46 +97,54 @@ snapshots["sbb-file-selector renders with dropzone area and size s"] =
   </div>
 </div>
 `;
-/* 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"] = 
 `<p>
   {
   "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"
     }
   ]
 }
 </p>
 `;
-/* 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"] = 
 `<p>
   {
   "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… …"
     }
   ]
 }
 </p>
 `;
-/* end snapshot sbb-file-selector A11y tree Firefox */
+/* end snapshot sbb-file-selector renders with dropzone area and size s A11y tree Firefox */
 

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`<sbb-file-selector></sbb-file-selector>`);
-
-    expect(root).dom.to.be.equal(`
-      <sbb-file-selector size='m'>
-      </sbb-file-selector>
-    `);
-    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`<sbb-file-selector variant="dropzone" size="s"></sbb-file-selector>`,
-    );
+    beforeEach(async () => {
+      element = await fixture(html`<sbb-file-selector></sbb-file-selector>`);
+    });
 
-    await waitForLitRender(root);
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
 
-    expect(root).dom.to.be.equal(`
-      <sbb-file-selector variant='dropzone' size='s'>
-      </sbb-file-selector>
-    `);
-    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`<sbb-file-selector></sbb-file-selector>`, undefined, { safari: true });
+  describe('renders with dropzone area and size s', () => {
+    let element: SbbFileSelectorElement;
+
+    beforeEach(async () => {
+      element = await fixture(
+        html`<sbb-file-selector variant="dropzone" size="s"></sbb-file-selector>`,
+      );
+    });
+
+    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 });
+  });
 });

src/elements/file-selector/file-selector.visual.spec.ts

@@ -0,0 +1,96 @@
+import { html, nothing } from 'lit';
+
+import {
+  describeEach,
+  describeViewports,
+  visualDiffDefault,
+  visualRegressionFixture,
+} from '../core/testing/private.js';
+
+import '../form-error.js';
+import './file-selector.js';
+import type { SbbFileSelectorElement } from '@sbb-esta/lyne-elements/file-selector/file-selector';
+
+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=${true}
+            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=${true}
+            variant=${variant}
+            size=${size}
+          ></sbb-file-selector>
+        `);
+      });
+
+      it(
+        visualDiffDefault.name,
+        visualDiffDefault.with((setup) => {
+          addFilesToComponentInput(root.querySelector('#fs')!);
+          setup.withSnapshotElement(root);
+        }),
+      );
+    });
+  });
+});