test: add new tests

Signed-off-by: Jeremias Peier <[email protected]>
sbb-design-systems · May 14, 2024 · 99365bd · 99365bd
1 parent 6121595
commit 99365bd
Show file tree

Hide file tree

Showing 2 changed files with 124 additions and 22 deletions.
diff --git a/src/components/button/button/button.snapshot.spec.ts b/src/components/button/button/button.snapshot.spec.ts
@@ -5,14 +5,19 @@ import {
   describeViewports,
   fixture,
   isVisualRegressionRun,
+  testVisualDiff,
+  testVisualDiffHover,
   visualRegressionSnapshot,
+  visualRegressionWrapperStyles,
 } from '../../core/testing/private.js';
 
 import './button.js';
 
 describe(`sbb-button`, () => {
   if (isVisualRegressionRun()) {
     describe('visual-regression', () => {
+      let root: HTMLElement;
+
       const cases = {
         disabled: [false, true],
         negative: [false, true],
@@ -23,29 +28,102 @@ describe(`sbb-button`, () => {
         ],
       };
 
+      // 'l' as default is covered by other cases.
+      const sizeCases = { size: ['s', 'm'] };
+
       describeViewports({ viewports: ['zero', 'medium'] }, () => {
         describeEach(cases, ({ disabled, negative, state }) => {
-          let root: HTMLElement;
           beforeEach(async () => {
-            root = await fixture(html`
-              <div
-                style="padding:0.5rem;background-color:${negative
-                  ? '#484040'
-                  : 'var(--sbb-color-white)'}"
+            root = await fixture(
+              html`<div
+                style=${visualRegressionWrapperStyles({
+                  backgroundColor: negative ? '#484040' : undefined,
+                })}
               >
-                <sbb-button
-                  style="--sbb-button-transition-duration:0s;--sbb-button-transition-easing-function:0s;"
-                  ?disabled=${disabled}
-                  ?negative=${negative}
-                  .iconName=${state.icon}
-                  >${state.text}</sbb-button
-                >
-              </div>
-            `);
+                <sbb-button ?disabled=${disabled} ?negative=${negative} .iconName=${state.icon}>
+                  ${state.text}
+                </sbb-button>
+              </div>`,
+            );
           });
 
           visualRegressionSnapshot(() => root);
         });
+
+        describeEach(sizeCases, ({ size }) => {
+          beforeEach(async () => {
+            root = await fixture(
+              html`<div style=${visualRegressionWrapperStyles()}>
+                <sbb-button size=${size}>Button</sbb-button>
+              </div>`,
+            );
+          });
+
+          testVisualDiff(() => root);
+        });
+
+        describe('with ellipsis', () => {
+          beforeEach(async () => {
+            root = await fixture(
+              html`<div style=${visualRegressionWrapperStyles()}>
+                <sbb-button style="width: 200px;" icon-name="arrow-right-small">
+                  Button with long text
+                </sbb-button>
+              </div>`,
+            );
+          });
+
+          testVisualDiff(() => root);
+        });
+
+        describe('wide width', () => {
+          beforeEach(async () => {
+            root = await fixture(
+              html`<div style=${visualRegressionWrapperStyles()}>
+                <sbb-button style="max-width: 100%; width: 600px;" icon-name="arrow-right-small">
+                  Wide Button
+                </sbb-button>
+              </div>`,
+            );
+          });
+
+          testVisualDiff(() => root);
+        });
+
+        describe('slotted icon', () => {
+          beforeEach(async () => {
+            root = await fixture(
+              html`<div style=${visualRegressionWrapperStyles()}>
+                <sbb-button>
+                  Button
+                  <sbb-icon slot="icon" name="chevron-small-right-small"></sbb-icon>
+                </sbb-button>
+              </div>`,
+            );
+          });
+
+          testVisualDiff(() => root);
+          testVisualDiffHover(() => root);
+        });
+
+        describe('with hidden slot', () => {
+          beforeEach(async () => {
+            root = await fixture(
+              html`<div style=${visualRegressionWrapperStyles()}>
+                <sbb-button>
+                  Button
+                  <sbb-icon
+                    slot="icon"
+                    name="chevron-small-right-small"
+                    style="display: none;"
+                  ></sbb-icon>
+                </sbb-button>
+              </div>`,
+            );
+          });
+
+          testVisualDiff(() => root);
+        });
       });
     });
   }

diff --git a/src/components/core/testing/private/visual-regression-snapshot.ts b/src/components/core/testing/private/visual-regression-snapshot.ts
@@ -29,13 +29,17 @@ export function testVisualDiff(snapshotElement: () => HTMLElement): void {
 export function testVisualDiffFocus(snapshotElement: () => HTMLElement): void {
   it('focus', async function () {
     await sendKeys({ press: 'Tab' });
+    await aTimeout(50);
     await visualDiff(snapshotElement(), imageName(this.test!));
   });
 }
 
-export function testVisualDiffHover(snapshotElement: () => HTMLElement): void {
+export function testVisualDiffHover(
+  snapshotElement: () => HTMLElement,
+  stateElement?: (() => HTMLElement) | undefined,
+): void {
   it('hover', async function () {
-    const position = findElementCenter(snapshotElement);
+    const position = findElementCenter(stateElement ?? snapshotElement);
 
     try {
       await sendMouse({ type: 'move', position });
@@ -47,9 +51,12 @@ export function testVisualDiffHover(snapshotElement: () => HTMLElement): void {
   });
 }
 
-export function testVisualDiffActive(snapshotElement: () => HTMLElement): void {
+export function testVisualDiffActive(
+  snapshotElement: () => HTMLElement,
+  stateElement?: (() => HTMLElement) | undefined,
+): void {
   it('active', async function () {
-    const position = findElementCenter(snapshotElement);
+    const position = findElementCenter(stateElement ?? snapshotElement);
 
     try {
       await sendMouse({ type: 'move', position });
@@ -62,9 +69,26 @@ export function testVisualDiffActive(snapshotElement: () => HTMLElement): void {
   });
 }
 
-export function visualRegressionSnapshot(snapshotElement: () => HTMLElement): void {
+export function visualRegressionSnapshot(
+  snapshotElement: () => HTMLElement,
+  stateElement?: () => HTMLElement,
+): void {
   testVisualDiff(snapshotElement);
   testVisualDiffFocus(snapshotElement);
-  testVisualDiffHover(snapshotElement);
-  testVisualDiffActive(snapshotElement);
+  testVisualDiffHover(snapshotElement, stateElement);
+  testVisualDiffActive(snapshotElement, stateElement);
+}
+
+/**
+ * Generates styles for the wrapper element in visual regression testing.
+ * @param options.padding Defaults to 2rem to include shadows and similar styles.
+ * @param options.backgroundColor Defaults to white.
+ */
+export function visualRegressionWrapperStyles(
+  options: {
+    padding?: string;
+    backgroundColor?: string;
+  } = {},
+): string {
+  return `padding: ${options.padding ?? '2rem'};background-color: ${options.backgroundColor ?? 'var(--sbb-color-white)'};`;
 }