From a6d4bba82b999cd720ab95e8db4778470f76fa64 Mon Sep 17 00:00:00 2001
From: Tommmaso Menga <tommaso.menga-94@hotmail.it>
Date: Wed, 3 Jul 2024 11:31:22 +0200
Subject: [PATCH 1/3] test(sbb-toast): add visual spec

---
 src/elements/toast/toast.visual.spec.ts | 72 +++++++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 src/elements/toast/toast.visual.spec.ts

diff --git a/src/elements/toast/toast.visual.spec.ts b/src/elements/toast/toast.visual.spec.ts
new file mode 100644
index 0000000000..068efbf2f4
--- /dev/null
+++ b/src/elements/toast/toast.visual.spec.ts
@@ -0,0 +1,72 @@
+import { html, nothing } from 'lit';
+
+import { describeEach, describeViewports, visualDiffDefault } from '../core/testing/private.js';
+
+import './toast.js';
+import '../button.js';
+import '../link.js';
+
+describe(`sbb-toast`, () => {
+  const cases = {
+    icon: [false, true],
+    action: ['dismissible', 'button', 'link'],
+  };
+
+  const positionCases = [
+    'top-start',
+    'top-center',
+    'top-end',
+    'bottom-start',
+    'bottom-center',
+    'bottom-end',
+  ];
+
+  describeViewports({ viewports: ['zero', 'medium'], viewportHeight: 300 }, () => {
+    describeEach(cases, ({ icon, action }) => {
+      it(
+        '',
+        visualDiffDefault.with((setup) => {
+          setup.withFixture(
+            html`
+              <sbb-toast
+                icon-name=${icon ? 'circle-tick-small' : nothing}
+                ?dismissible=${action === 'dismissible'}
+              >
+                Lorem ipsum dolor
+                ${action === 'button'
+                  ? html`<sbb-transparent-button
+                      slot="action"
+                      icon-name="clock-small"
+                      sbb-toast-close
+                    ></sbb-transparent-button>`
+                  : nothing}
+                ${action === 'link'
+                  ? html`<sbb-link slot="action" sbb-toast-close href="#"> Link action </sbb-link>`
+                  : nothing}
+              </sbb-toast>
+            `,
+            { minHeight: '300px', padding: '0' },
+          );
+          setup.withPostSetupAction(() => setup.snapshotElement.querySelector('sbb-toast')!.open());
+        }),
+      );
+    });
+
+    for (const position of positionCases) {
+      it(
+        `position=${position}`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(
+            html`
+              <sbb-toast icon-name="circle-tick-small" dismissible position=${position}>
+                Lorem ipsum dolor
+              </sbb-toast>
+            `,
+            { minHeight: '300px', padding: '0' },
+          );
+          setup.withPostSetupAction(() => setup.snapshotElement.querySelector('sbb-toast')!.open());
+        }),
+      );
+    }
+  });
+});

From 38162fa0b6ead87b8b6e60c59d2bda5ff19f50ad Mon Sep 17 00:00:00 2001
From: Tommmaso Menga <tommaso.menga-94@hotmail.it>
Date: Wed, 3 Jul 2024 14:00:12 +0200
Subject: [PATCH 2/3] test(sbb-toast): visual spec fix

---
 src/elements/toast/toast.visual.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/elements/toast/toast.visual.spec.ts b/src/elements/toast/toast.visual.spec.ts
index 068efbf2f4..7db0a22ea2 100644
--- a/src/elements/toast/toast.visual.spec.ts
+++ b/src/elements/toast/toast.visual.spec.ts
@@ -25,8 +25,8 @@ describe(`sbb-toast`, () => {
     describeEach(cases, ({ icon, action }) => {
       it(
         '',
-        visualDiffDefault.with((setup) => {
-          setup.withFixture(
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(
             html`
               <sbb-toast
                 icon-name=${icon ? 'circle-tick-small' : nothing}

From 8b65ca9255342724a9606d42d01dde3dc63bf95e Mon Sep 17 00:00:00 2001
From: Tommmaso Menga <tommaso.menga-94@hotmail.it>
Date: Wed, 3 Jul 2024 14:01:41 +0200
Subject: [PATCH 3/3] test(visual-regression): trim test title

---
 src/elements/core/testing/private/visual-regression-snapshot.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/elements/core/testing/private/visual-regression-snapshot.ts b/src/elements/core/testing/private/visual-regression-snapshot.ts
index 4059565b88..fab8e3c8b4 100644
--- a/src/elements/core/testing/private/visual-regression-snapshot.ts
+++ b/src/elements/core/testing/private/visual-regression-snapshot.ts
@@ -7,7 +7,7 @@ import { visualRegressionFixture } from './fixture.js';
 import { tabKey } from './keys.js';
 
 export function imageName(test: Mocha.Runnable): string {
-  return test!.fullTitle().replaceAll(', ', '-').replaceAll(' ', '_').replaceAll('.', '_');
+  return test!.fullTitle().trim().replaceAll(', ', '-').replaceAll(' ', '_').replaceAll('.', '_');
 }
 
 class VisualDiffSetupBuilder {