test(sbb-navigation-button): optimize visual spec

sbb-design-systems · Jul 1, 2024 · 81bb0fb · 81bb0fb
1 parent fd024f5
commit 81bb0fb
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 22 deletions.
diff --git a/src/elements/navigation/navigation-button/navigation-button.visual.spec.ts b/src/elements/navigation/navigation-button/navigation-button.visual.spec.ts
@@ -13,18 +13,28 @@ describe(`sbb-navigation-button`, () => {
   const sizeCases = ['s', 'm', 'l'];
 
   describeViewports({ viewports: ['zero', 'medium'] }, () => {
+    for (const state of [visualDiffDefault, visualDiffHover, visualDiffFocus]) {
+      it(
+        state.name,
+        state.with(async (setup) => {
+          await setup.withFixture(html` <sbb-navigation-button>Label</sbb-navigation-button> `, {
+            backgroundColor: 'var(--sbb-color-midnight)',
+            focusOutlineDark: true,
+          });
+        }),
+      );
+    }
+
     for (const size of sizeCases) {
-      for (const state of [visualDiffDefault, visualDiffHover, visualDiffFocus]) {
-        it(
-          `size=${size} ${state.name}`,
-          state.with(async (setup) => {
-            await setup.withFixture(
-              html` <sbb-navigation-button size=${size}>Label</sbb-navigation-button> `,
-              { backgroundColor: 'var(--sbb-color-midnight)', focusOutlineDark: true },
-            );
-          }),
-        );
-      }
+      it(
+        `size=${size}`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(
+            html` <sbb-navigation-button size=${size}>Label</sbb-navigation-button> `,
+            { backgroundColor: 'var(--sbb-color-midnight)', focusOutlineDark: true },
+          );
+        }),
+      );
     }
   });
 });
diff --git a/src/elements/navigation/navigation-link/navigation-link.visual.spec.ts b/src/elements/navigation/navigation-link/navigation-link.visual.spec.ts
@@ -13,18 +13,28 @@ describe(`sbb-navigation-link`, () => {
   const sizeCases = ['s', 'm', 'l'];
 
   describeViewports({ viewports: ['zero', 'medium'] }, () => {
+    for (const state of [visualDiffDefault, visualDiffHover, visualDiffFocus]) {
+      it(
+        state.name,
+        state.with(async (setup) => {
+          await setup.withFixture(
+            html` <sbb-navigation-link href="#">Label</sbb-navigation-link> `,
+            { backgroundColor: 'var(--sbb-color-midnight)', focusOutlineDark: true },
+          );
+        }),
+      );
+    }
+
     for (const size of sizeCases) {
-      for (const state of [visualDiffDefault, visualDiffHover, visualDiffFocus]) {
-        it(
-          `size=${size} ${state.name}`,
-          state.with(async (setup) => {
-            await setup.withFixture(
-              html` <sbb-navigation-link size=${size} href="#">Label</sbb-navigation-link> `,
-              { backgroundColor: 'var(--sbb-color-midnight)', focusOutlineDark: true },
-            );
-          }),
-        );
-      }
+      it(
+        `size=${size}`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(
+            html` <sbb-navigation-link href="#" size=${size}>Label</sbb-navigation-link> `,
+            { backgroundColor: 'var(--sbb-color-midnight)', focusOutlineDark: true },
+          );
+        }),
+      );
     }
   });
 });