From e4816d56658d512330912a38f3f38413c1221819 Mon Sep 17 00:00:00 2001
From: Davide Mininni <davide.mininni@finconsgroup.com>
Date: Mon, 24 Jun 2024 11:22:47 +0200
Subject: [PATCH 1/3] test: add visual tests

---
 .../file-selector.snapshot.spec.snap.js       | 43 +++++++--
 .../file-selector.snapshot.spec.ts            | 54 ++++++-----
 .../file-selector.visual.spec.ts              | 96 +++++++++++++++++++
 3 files changed, 161 insertions(+), 32 deletions(-)
 create mode 100644 src/elements/file-selector/file-selector.visual.spec.ts

diff --git a/src/elements/file-selector/__snapshots__/file-selector.snapshot.spec.snap.js b/src/elements/file-selector/__snapshots__/file-selector.snapshot.spec.snap.js
index a53441a9ad..4acde3459b 100644
--- a/src/elements/file-selector/__snapshots__/file-selector.snapshot.spec.snap.js
+++ b/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 */
 
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`<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 });
+  });
 });
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..04178dce03
--- /dev/null
+++ b/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);
+        }),
+      );
+    });
+  });
+});

From 8f98e14bb11e00c0d8fa47e3010125bdd012ed55 Mon Sep 17 00:00:00 2001
From: Davide Mininni <davide.mininni@finconsgroup.com>
Date: Mon, 24 Jun 2024 15:28:21 +0200
Subject: [PATCH 2/3] fix: review

---
 .../file-selector/file-selector.visual.spec.ts    | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/elements/file-selector/file-selector.visual.spec.ts b/src/elements/file-selector/file-selector.visual.spec.ts
index 04178dce03..971fde9a8d 100644
--- a/src/elements/file-selector/file-selector.visual.spec.ts
+++ b/src/elements/file-selector/file-selector.visual.spec.ts
@@ -4,12 +4,13 @@ import {
   describeEach,
   describeViewports,
   visualDiffDefault,
+  visualDiffFocus,
   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';
+import type { SbbFileSelectorElement } from './file-selector.js';
 
 describe(`sbb-file-selector`, () => {
   function addFilesToComponentInput(elem: SbbFileSelectorElement): void {
@@ -50,7 +51,7 @@ describe(`sbb-file-selector`, () => {
           <sbb-file-selector
             id="fs"
             title-content="Title"
-            ?multiple=${true}
+            multiple
             variant=${variant}
             ?disabled=${state.disabled}
           ></sbb-file-selector>
@@ -77,7 +78,7 @@ describe(`sbb-file-selector`, () => {
           <sbb-file-selector
             id="fs"
             title-content="Title"
-            ?multiple=${true}
+            multiple
             variant=${variant}
             size=${size}
           ></sbb-file-selector>
@@ -91,6 +92,14 @@ describe(`sbb-file-selector`, () => {
           setup.withSnapshotElement(root);
         }),
       );
+
+      it(
+        visualDiffFocus.name,
+        visualDiffFocus.with((setup) => {
+          addFilesToComponentInput(root.querySelector('#fs')!);
+          setup.withSnapshotElement(root);
+        }),
+      );
     });
   });
 });

From 33bae204d026a6e3ffc46606fd441ebe5fd4bbc6 Mon Sep 17 00:00:00 2001
From: Davide Mininni <davide.mininni@finconsgroup.com>
Date: Tue, 25 Jun 2024 09:22:52 +0200
Subject: [PATCH 3/3] fix: review

---
 .../file-selector.visual.spec.ts              | 24 +++++++------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/src/elements/file-selector/file-selector.visual.spec.ts b/src/elements/file-selector/file-selector.visual.spec.ts
index 971fde9a8d..edc790eaeb 100644
--- a/src/elements/file-selector/file-selector.visual.spec.ts
+++ b/src/elements/file-selector/file-selector.visual.spec.ts
@@ -85,21 +85,15 @@ describe(`sbb-file-selector`, () => {
         `);
       });
 
-      it(
-        visualDiffDefault.name,
-        visualDiffDefault.with((setup) => {
-          addFilesToComponentInput(root.querySelector('#fs')!);
-          setup.withSnapshotElement(root);
-        }),
-      );
-
-      it(
-        visualDiffFocus.name,
-        visualDiffFocus.with((setup) => {
-          addFilesToComponentInput(root.querySelector('#fs')!);
-          setup.withSnapshotElement(root);
-        }),
-      );
+      for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) {
+        it(
+          visualDiffState.name,
+          visualDiffState.with((setup) => {
+            addFilesToComponentInput(root.querySelector('#fs')!);
+            setup.withSnapshotElement(root);
+          }),
+        );
+      }
     });
   });
 });