From 81bb0fb8884d5c910f4fef5170ca5290e1c4a62f Mon Sep 17 00:00:00 2001
From: Tommmaso Menga <tommaso.menga-94@hotmail.it>
Date: Mon, 1 Jul 2024 18:56:17 +0200
Subject: [PATCH] test(sbb-navigation-button): optimize visual spec

---
 .../navigation-button.visual.spec.ts          | 32 ++++++++++++-------
 .../navigation-link.visual.spec.ts            | 32 ++++++++++++-------
 2 files changed, 42 insertions(+), 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
index ef7a6a3905..c85efdd282 100644
--- 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
index 6b45068320..66d09b17fa 100644
--- 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 },
+          );
+        }),
+      );
     }
   });
 });