test(sbb-toast): add visual spec (#2883)

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('.', '_');
 }
 
 export class VisualDiffSetupBuilder {

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(async (setup) => {
+          await 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());
+        }),
+      );
+    }
+  });
+});