From 00e1d766062e9d9f7ee5d4089292330de59b65aa Mon Sep 17 00:00:00 2001
From: Davide Mininni <davide.mininni@finconsgroup.com>
Date: Thu, 27 Jun 2024 13:47:28 +0200
Subject: [PATCH 1/8] test: snapshot

---
 .../menu-button.snapshot.spec.snap.js         | 46 +++++++++----------
 .../menu-button/menu-button.snapshot.spec.ts  |  8 ++--
 .../menu-link.snapshot.spec.snap.js           | 45 +++++++++++++++++-
 .../menu/menu-link/menu-link.snapshot.spec.ts | 26 ++++++++++-
 .../__snapshots__/menu.snapshot.spec.snap.js  | 36 ++++++++++++++-
 src/elements/menu/menu/menu.snapshot.spec.ts  |  4 +-
 6 files changed, 133 insertions(+), 32 deletions(-)

diff --git a/src/elements/menu/menu-button/__snapshots__/menu-button.snapshot.spec.snap.js b/src/elements/menu/menu-button/__snapshots__/menu-button.snapshot.spec.snap.js
index a9aa7f8792..e04288744f 100644
--- a/src/elements/menu/menu-button/__snapshots__/menu-button.snapshot.spec.snap.js
+++ b/src/elements/menu/menu-button/__snapshots__/menu-button.snapshot.spec.snap.js
@@ -1,7 +1,7 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-menu-button renders Light DOM"] = 
+snapshots["sbb-menu-button renders DOM"] = 
 `<sbb-menu-button
   aria-label="a11y label"
   data-action=""
@@ -18,7 +18,7 @@ snapshots["sbb-menu-button renders Light DOM"] =
   </span>
 </sbb-menu-button>
 `;
-/* end snapshot sbb-menu-button renders Light DOM */
+/* end snapshot sbb-menu-button renders DOM */
 
 snapshots["sbb-menu-button renders Shadow DOM"] = 
 `<span class="sbb-action-base sbb-menu-button">
@@ -36,23 +36,7 @@ snapshots["sbb-menu-button renders Shadow DOM"] =
 `;
 /* end snapshot sbb-menu-button renders Shadow DOM */
 
-snapshots["sbb-menu-button renders A11y tree Chrome"] = 
-`<p>
-  {
-  "role": "WebArea",
-  "name": "",
-  "children": [
-    {
-      "role": "button",
-      "name": "a11y label"
-    }
-  ]
-}
-</p>
-`;
-/* end snapshot sbb-menu-button renders A11y tree Chrome */
-
-snapshots["sbb-menu-button renders component with icon and amount Light DOM"] = 
+snapshots["sbb-menu-button renders component with icon and amount DOM"] = 
 `<sbb-menu-button
   amount="123456"
   data-action=""
@@ -67,7 +51,7 @@ snapshots["sbb-menu-button renders component with icon and amount Light DOM"] =
   </span>
 </sbb-menu-button>
 `;
-/* end snapshot sbb-menu-button renders component with icon and amount Light DOM */
+/* end snapshot sbb-menu-button renders component with icon and amount DOM */
 
 snapshots["sbb-menu-button renders component with icon and amount Shadow DOM"] = 
 `<span class="sbb-action-base sbb-menu-button">
@@ -95,7 +79,23 @@ snapshots["sbb-menu-button renders component with icon and amount Shadow DOM"] =
 `;
 /* end snapshot sbb-menu-button renders component with icon and amount Shadow DOM */
 
-snapshots["sbb-menu-button renders A11y tree Firefox"] = 
+snapshots["sbb-menu-button renders component with icon and amount A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Action 123456"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-menu-button renders component with icon and amount A11y tree Chrome */
+
+snapshots["sbb-menu-button renders component with icon and amount A11y tree Firefox"] = 
 `<p>
   {
   "role": "document",
@@ -103,11 +103,11 @@ snapshots["sbb-menu-button renders A11y tree Firefox"] =
   "children": [
     {
       "role": "button",
-      "name": "a11y label"
+      "name": "Action 123456"
     }
   ]
 }
 </p>
 `;
-/* end snapshot sbb-menu-button renders A11y tree Firefox */
+/* end snapshot sbb-menu-button renders component with icon and amount A11y tree Firefox */
 
diff --git a/src/elements/menu/menu-button/menu-button.snapshot.spec.ts b/src/elements/menu/menu-button/menu-button.snapshot.spec.ts
index d0f5ea950a..59d99df61f 100644
--- a/src/elements/menu/menu-button/menu-button.snapshot.spec.ts
+++ b/src/elements/menu/menu-button/menu-button.snapshot.spec.ts
@@ -19,15 +19,13 @@ describe(`sbb-menu-button`, () => {
       `);
     });
 
-    it('Light DOM', async () => {
+    it('DOM', async () => {
       await expect(element).dom.to.be.equalSnapshot();
     });
 
     it('Shadow DOM', async () => {
       await expect(element).shadowDom.to.be.equalSnapshot();
     });
-
-    testA11yTreeSnapshot();
   });
 
   describe('renders component with icon and amount', () => {
@@ -41,12 +39,14 @@ describe(`sbb-menu-button`, () => {
       `);
     });
 
-    it('Light DOM', async () => {
+    it('DOM', async () => {
       await expect(element).dom.to.be.equalSnapshot();
     });
 
     it('Shadow DOM', async () => {
       await expect(element).shadowDom.to.be.equalSnapshot();
     });
+
+    testA11yTreeSnapshot();
   });
 });
diff --git a/src/elements/menu/menu-link/__snapshots__/menu-link.snapshot.spec.snap.js b/src/elements/menu/menu-link/__snapshots__/menu-link.snapshot.spec.snap.js
index 23b48564d5..e6d85b3d68 100644
--- a/src/elements/menu/menu-link/__snapshots__/menu-link.snapshot.spec.snap.js
+++ b/src/elements/menu/menu-link/__snapshots__/menu-link.snapshot.spec.snap.js
@@ -1,7 +1,48 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-menu-link renders component with icon and amount Light DOM"] = 
+snapshots["sbb-menu-link renders DOM"] = 
+`<sbb-menu-link
+  accessibility-label="a11y label"
+  data-action=""
+  data-link=""
+  dir="ltr"
+  href="https://github.com/sbb-design-systems/lyne-components"
+  target="_blank"
+>
+  <span>
+    Action
+  </span>
+</sbb-menu-link>
+`;
+/* end snapshot sbb-menu-link renders DOM */
+
+snapshots["sbb-menu-link renders Shadow DOM"] = 
+`<a
+  aria-label="a11y label"
+  class="sbb-action-base sbb-menu-link"
+  href="https://github.com/sbb-design-systems/lyne-components"
+  rel="external noopener nofollow"
+  target="_blank"
+>
+  <span class="sbb-menu-action__content">
+    <span class="sbb-menu-action__icon">
+      <slot name="icon">
+      </slot>
+    </span>
+    <span class="sbb-menu-action__label">
+      <slot>
+      </slot>
+    </span>
+  </span>
+  <sbb-screen-reader-only>
+    . Link target opens in a new window.
+  </sbb-screen-reader-only>
+</a>
+`;
+/* end snapshot sbb-menu-link renders Shadow DOM */
+
+snapshots["sbb-menu-link renders component with icon and amount DOM"] = 
 `<sbb-menu-link
   accessibility-label="a11y label"
   amount="123456"
@@ -17,7 +58,7 @@ snapshots["sbb-menu-link renders component with icon and amount Light DOM"] =
   </span>
 </sbb-menu-link>
 `;
-/* end snapshot sbb-menu-link renders component with icon and amount Light DOM */
+/* end snapshot sbb-menu-link renders component with icon and amount DOM */
 
 snapshots["sbb-menu-link renders component with icon and amount Shadow DOM"] = 
 `<a
diff --git a/src/elements/menu/menu-link/menu-link.snapshot.spec.ts b/src/elements/menu/menu-link/menu-link.snapshot.spec.ts
index 4e8d690e53..fe06faf8fa 100644
--- a/src/elements/menu/menu-link/menu-link.snapshot.spec.ts
+++ b/src/elements/menu/menu-link/menu-link.snapshot.spec.ts
@@ -8,6 +8,30 @@ import type { SbbMenuLinkElement } from './menu-link.js';
 import './menu-link.js';
 
 describe(`sbb-menu-link`, () => {
+  describe('renders', () => {
+    let element: SbbMenuLinkElement;
+
+    beforeEach(async () => {
+      element = await fixture(html`
+        <sbb-menu-link
+          href="https://github.com/sbb-design-systems/lyne-components"
+          target="_blank"
+          accessibility-label="a11y label"
+        >
+          <span>Action</span>
+        </sbb-menu-link>
+      `);
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+  });
+
   describe('renders component with icon and amount', () => {
     let element: SbbMenuLinkElement;
 
@@ -25,7 +49,7 @@ describe(`sbb-menu-link`, () => {
       `);
     });
 
-    it('Light DOM', async () => {
+    it('DOM', async () => {
       await expect(element).dom.to.be.equalSnapshot();
     });
 
diff --git a/src/elements/menu/menu/__snapshots__/menu.snapshot.spec.snap.js b/src/elements/menu/menu/__snapshots__/menu.snapshot.spec.snap.js
index bc36348581..d02b860e13 100644
--- a/src/elements/menu/menu/__snapshots__/menu.snapshot.spec.snap.js
+++ b/src/elements/menu/menu/__snapshots__/menu.snapshot.spec.snap.js
@@ -87,7 +87,7 @@ snapshots["sbb-menu renders Shadow DOM"] =
 snapshots["sbb-menu renders with list DOM"] = 
 `<sbb-menu
   data-state="closed"
-  id="sbb-menu-2"
+  id="sbb-menu-3"
   trigger="menu-trigger"
 >
   <sbb-menu-button
@@ -173,3 +173,37 @@ snapshots["sbb-menu renders with list Shadow DOM"] =
 `;
 /* end snapshot sbb-menu renders with list Shadow DOM */
 
+snapshots["sbb-menu renders A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Menu trigger",
+      "haspopup": "menu"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-menu renders A11y tree Chrome */
+
+snapshots["sbb-menu renders A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Menu trigger",
+      "haspopup": "menu"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-menu renders A11y tree Firefox */
+
diff --git a/src/elements/menu/menu/menu.snapshot.spec.ts b/src/elements/menu/menu/menu.snapshot.spec.ts
index 494d06bdca..bb6d604137 100644
--- a/src/elements/menu/menu/menu.snapshot.spec.ts
+++ b/src/elements/menu/menu/menu.snapshot.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../../core/testing/private.js';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
 import type { SbbMenuElement } from './menu.js';
 
@@ -39,6 +39,8 @@ describe(`sbb-menu`, () => {
     it('Shadow DOM', async () => {
       await expect(element).shadowDom.to.be.equalSnapshot();
     });
+
+    testA11yTreeSnapshot();
   });
 
   describe('renders with list', () => {

From 86e1e49f25445116e6968d22a6c9f441208413c6 Mon Sep 17 00:00:00 2001
From: Davide Mininni <davide.mininni@finconsgroup.com>
Date: Thu, 27 Jun 2024 15:54:48 +0200
Subject: [PATCH 2/8] test: add visual tests

---
 src/elements/core/testing/private/fixture.ts  |  2 +
 .../menu/menu-button/menu-button.stories.ts   |  1 -
 .../menu-button/menu-button.visual.spec.ts    | 96 +++++++++++++++++++
 .../menu/menu-link/menu-link.stories.ts       |  1 -
 .../menu/menu-link/menu-link.visual.spec.ts   | 96 +++++++++++++++++++
 5 files changed, 194 insertions(+), 2 deletions(-)
 create mode 100644 src/elements/menu/menu-button/menu-button.visual.spec.ts
 create mode 100644 src/elements/menu/menu-link/menu-link.visual.spec.ts

diff --git a/src/elements/core/testing/private/fixture.ts b/src/elements/core/testing/private/fixture.ts
index 07e84d946c..bcec9d1192 100644
--- a/src/elements/core/testing/private/fixture.ts
+++ b/src/elements/core/testing/private/fixture.ts
@@ -89,6 +89,7 @@ export async function visualRegressionFixture<T extends HTMLElement>(
     focusOutlineDark?: boolean;
     padding?: string;
     minHeight?: string;
+    width?: string;
   },
 ): Promise<T> {
   const base = tryFindBase(new Error().stack!);
@@ -104,6 +105,7 @@ export async function visualRegressionFixture<T extends HTMLElement>(
           ? 'var(--sbb-focus-outline-color-dark)'
           : undefined,
         'min-height': wrapperStyles?.minHeight,
+        width: wrapperStyles?.width,
       })}
       tabindex="0"
     >
diff --git a/src/elements/menu/menu-button/menu-button.stories.ts b/src/elements/menu/menu-button/menu-button.stories.ts
index c3acbb37ce..1b73a8b33c 100644
--- a/src/elements/menu/menu-button/menu-button.stories.ts
+++ b/src/elements/menu/menu-button/menu-button.stories.ts
@@ -8,7 +8,6 @@ import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
 import './menu-button.js';
-import '../../icon.js';
 
 const getBasicTemplate = (
   { text, ...args }: Args,
diff --git a/src/elements/menu/menu-button/menu-button.visual.spec.ts b/src/elements/menu/menu-button/menu-button.visual.spec.ts
new file mode 100644
index 0000000000..b1693e23d3
--- /dev/null
+++ b/src/elements/menu/menu-button/menu-button.visual.spec.ts
@@ -0,0 +1,96 @@
+import { html, nothing } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+
+import {
+  describeEach,
+  describeViewports,
+  visualDiffDefault,
+  visualDiffFocus,
+  visualDiffHover,
+} from '../../core/testing/private.js';
+
+import './menu-button.js';
+
+describe(`sbb-menu-button`, () => {
+  describeViewports({ viewports: ['zero', 'medium'] }, () => {
+    const state = {
+      amount: [undefined, 123],
+      slotted: [false, true],
+    };
+
+    for (const visualDiffState of [visualDiffDefault, visualDiffHover, visualDiffFocus]) {
+      it(
+        visualDiffState.name,
+        visualDiffState.with(async (setup) => {
+          await setup.withFixture(
+            html`
+              ${repeat(
+                new Array(3),
+                (_, index) => html`
+                  <sbb-menu-button amount="123" icon-name="tick-small"
+                    >Details ${index}</sbb-menu-button
+                  >
+                `,
+              )}
+            `,
+            {
+              backgroundColor: 'var(--sbb-color-black)',
+              width: '256px',
+              focusOutlineDark: true,
+            },
+          );
+        }),
+      );
+    }
+
+    describeEach(state, ({ amount, slotted }) => {
+      it(
+        visualDiffDefault.name,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(
+            html`
+              ${repeat(
+                new Array(3),
+                (_, index) => html`
+                  <sbb-menu-button amount=${amount || nothing}>
+                    Details ${index}
+                    ${slotted ? html`<sbb-icon slot="icon" name="pie-small"></sbb-icon>` : nothing}
+                  </sbb-menu-button>
+                `,
+              )}
+            `,
+            {
+              backgroundColor: 'var(--sbb-color-black)',
+              width: '256px',
+            },
+          );
+        }),
+      );
+    });
+
+    for (const disabled of [true, false]) {
+      it(
+        `long label disabled=${disabled} ${visualDiffDefault.name}`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(
+            html`
+              ${repeat(
+                new Array(3),
+                (_, index) => html`
+                  <sbb-menu-button amount="123" icon-name="tick-small" .disabled=${disabled}
+                    >Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    ${index}</sbb-menu-button
+                  >
+                `,
+              )}
+            `,
+            {
+              backgroundColor: 'var(--sbb-color-black)',
+              width: '256px',
+            },
+          );
+        }),
+      );
+    }
+  });
+});
diff --git a/src/elements/menu/menu-link/menu-link.stories.ts b/src/elements/menu/menu-link/menu-link.stories.ts
index 32b4cfc5ba..679d4c79da 100644
--- a/src/elements/menu/menu-link/menu-link.stories.ts
+++ b/src/elements/menu/menu-link/menu-link.stories.ts
@@ -9,7 +9,6 @@ import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
 import './menu-link.js';
-import '../../icon.js';
 
 const getBasicTemplate = (
   { text, ...args }: Args,
diff --git a/src/elements/menu/menu-link/menu-link.visual.spec.ts b/src/elements/menu/menu-link/menu-link.visual.spec.ts
new file mode 100644
index 0000000000..4e9b51b293
--- /dev/null
+++ b/src/elements/menu/menu-link/menu-link.visual.spec.ts
@@ -0,0 +1,96 @@
+import { html, nothing } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+
+import {
+  describeEach,
+  describeViewports,
+  visualDiffDefault,
+  visualDiffFocus,
+  visualDiffHover,
+} from '../../core/testing/private.js';
+
+import './menu-link.js';
+
+describe(`sbb-menu-link`, () => {
+  describeViewports({ viewports: ['zero', 'medium'] }, () => {
+    const state = {
+      amount: [undefined, 123],
+      slotted: [false, true],
+    };
+
+    for (const visualDiffState of [visualDiffDefault, visualDiffHover, visualDiffFocus]) {
+      it(
+        visualDiffState.name,
+        visualDiffState.with(async (setup) => {
+          await setup.withFixture(
+            html`
+              ${repeat(
+                new Array(3),
+                (_, index) => html`
+                  <sbb-menu-link href="#" amount="123" icon-name="tick-small"
+                    >Details ${index}</sbb-menu-link
+                  >
+                `,
+              )}
+            `,
+            {
+              backgroundColor: 'var(--sbb-color-black)',
+              width: '256px',
+              focusOutlineDark: true,
+            },
+          );
+        }),
+      );
+    }
+
+    describeEach(state, ({ amount, slotted }) => {
+      it(
+        visualDiffDefault.name,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(
+            html`
+              ${repeat(
+                new Array(3),
+                (_, index) => html`
+                  <sbb-menu-link href="#" amount=${amount || nothing}>
+                    Details ${index}
+                    ${slotted ? html`<sbb-icon slot="icon" name="pie-small"></sbb-icon>` : nothing}
+                  </sbb-menu-link>
+                `,
+              )}
+            `,
+            {
+              backgroundColor: 'var(--sbb-color-black)',
+              width: '256px',
+            },
+          );
+        }),
+      );
+    });
+
+    for (const disabled of [true, false]) {
+      it(
+        `long label disabled=${disabled} ${visualDiffDefault.name}`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(
+            html`
+              ${repeat(
+                new Array(3),
+                (_, index) => html`
+                  <sbb-menu-link href="#" amount="123" icon-name="tick-small" .disabled=${disabled}
+                    >Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    ${index}</sbb-menu-link
+                  >
+                `,
+              )}
+            `,
+            {
+              backgroundColor: 'var(--sbb-color-black)',
+              width: '256px',
+            },
+          );
+        }),
+      );
+    }
+  });
+});

From 9de35c35a0b570f407165285ac871829294e34eb Mon Sep 17 00:00:00 2001
From: Davide Mininni <davide.mininni@finconsgroup.com>
Date: Thu, 27 Jun 2024 17:48:17 +0200
Subject: [PATCH 3/8] test: add visual tests

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

diff --git a/src/elements/menu/menu/menu.visual.spec.ts b/src/elements/menu/menu/menu.visual.spec.ts
new file mode 100644
index 0000000000..5ac6cdf8f2
--- /dev/null
+++ b/src/elements/menu/menu/menu.visual.spec.ts
@@ -0,0 +1,128 @@
+import { SbbBreakpointMediumMin } from '@sbb-esta/lyne-design-tokens';
+import { setViewport } from '@web/test-runner-commands';
+import { html } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import type { SbbButtonElement } from '../../button/button.js';
+import { describeViewports, visualDiffDefault } from '../../core/testing/private.js';
+
+import '../../button/button.js';
+import '../../divider.js';
+import '../../link.js';
+import '../menu-link.js';
+import '../menu-button.js';
+import './menu.js';
+
+describe(`sbb-menu`, () => {
+  const userNameStyle = {
+    fontWeight: 'bold',
+    fontSize: 'var(--sbb-font-size-text-xs)',
+    marginTop: 'var(--sbb-spacing-fixed-1x)',
+  };
+
+  const userInfoStyle = {
+    color: 'var(--sbb-color-graphite)',
+    fontSize: 'var(--sbb-font-size-text-xxs)',
+  };
+
+  describeViewports({ viewports: ['zero', 'medium'], viewportHeight: 400 }, () => {
+    it(
+      visualDiffDefault.name,
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(
+          html`
+            <sbb-button id="menu-trigger-1" size="m"> Menu trigger</sbb-button>
+            <sbb-menu trigger="menu-trigger-1">
+              <sbb-menu-link icon-name="link-small" href="https://www.sbb.ch/en">
+                View
+              </sbb-menu-link>
+              <sbb-menu-button icon-name="pen-small" amount="16" disabled> Edit </sbb-menu-button>
+              <sbb-menu-button icon-name="swisspass-small" amount="123"> Details</sbb-menu-button>
+              <sbb-divider></sbb-divider>
+              <sbb-menu-button icon-name="cross-small">Cancel</sbb-menu-button>
+            </sbb-menu>
+          `,
+          { minHeight: '400px' },
+        );
+        await setViewport({ width: SbbBreakpointMediumMin, height: 400 });
+
+        const button = setup.snapshotElement.querySelector('#menu-trigger-1') as SbbButtonElement;
+        button.click();
+      }),
+    );
+
+    it(
+      'list with scroll',
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(
+          html`
+            <sbb-button id="menu-trigger-2" size="m"> Menu trigger</sbb-button>
+            <sbb-menu trigger="menu-trigger-2">
+              <sbb-menu-button>English</sbb-menu-button>
+              <sbb-menu-button>Deutsch</sbb-menu-button>
+              <sbb-menu-button>Français</sbb-menu-button>
+              <sbb-menu-button>Italiano</sbb-menu-button>
+              <sbb-menu-button>Rumantsch</sbb-menu-button>
+              <sbb-menu-button>Español</sbb-menu-button>
+              <sbb-menu-button>Português</sbb-menu-button>
+              <sbb-menu-button>日本語</sbb-menu-button>
+              <sbb-menu-button>한국어</sbb-menu-button>
+              <sbb-menu-button>广州话</sbb-menu-button>
+              <sbb-menu-button>Afrikaans</sbb-menu-button>
+              <sbb-menu-button>Svenska</sbb-menu-button>
+              <sbb-menu-button>Dansk</sbb-menu-button>
+              <sbb-menu-button>Nederlands</sbb-menu-button>
+              <sbb-menu-button>Suomi</sbb-menu-button>
+              <sbb-menu-button>українська мова</sbb-menu-button>
+              <sbb-menu-button>አማርኛ</sbb-menu-button>
+              <sbb-menu-button>ქართული ენა</sbb-menu-button>
+              <sbb-menu-button>Afrikaans</sbb-menu-button>
+              <sbb-menu-button>Svenska</sbb-menu-button>
+              <sbb-menu-button>Dansk</sbb-menu-button>
+              <sbb-menu-button>Nederlands</sbb-menu-button>
+              <sbb-menu-button>Suomi</sbb-menu-button>
+            </sbb-menu>
+          `,
+          { minHeight: '400px' },
+        );
+        await setViewport({ width: SbbBreakpointMediumMin, height: 400 });
+
+        const button = setup.snapshotElement.querySelector('#menu-trigger-2') as SbbButtonElement;
+        button.click();
+      }),
+    );
+
+    it(
+      'custom content with long label',
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(
+          html`
+            <sbb-button id="menu-trigger-3" size="m"> Menu trigger</sbb-button>
+            <sbb-menu trigger="menu-trigger-3">
+              <div style=${styleMap(userNameStyle)}>Christina Müller</div>
+              <span style=${styleMap(userInfoStyle)}>UIS9057</span>
+              <sbb-block-link href="https://www.sbb.ch/en" negative size="xs">
+                Profile
+              </sbb-block-link>
+              <sbb-divider></sbb-divider>
+              <sbb-menu-button icon-name="swisspass-small">
+                Very long label that exceeds the maximum width of the menu
+              </sbb-menu-button>
+              <sbb-menu-link icon-name="link-small" href="https://www.sbb.ch/en">
+                View
+              </sbb-menu-link>
+              <sbb-menu-button icon-name="tickets-class-small" disabled> Tickets </sbb-menu-button>
+              <sbb-divider></sbb-divider>
+              <sbb-menu-button icon-name="exit-small">Log Out</sbb-menu-button>
+            </sbb-menu>
+          `,
+          { minHeight: '400px' },
+        );
+        await setViewport({ width: SbbBreakpointMediumMin, height: 400 });
+
+        const button = setup.snapshotElement.querySelector('#menu-trigger-3') as SbbButtonElement;
+        button.click();
+      }),
+    );
+  });
+});

From 32c0208036b53d586e38b1604d7bc074c346d541 Mon Sep 17 00:00:00 2001
From: Davide Mininni <davide.mininni@finconsgroup.com>
Date: Thu, 27 Jun 2024 18:02:16 +0200
Subject: [PATCH 4/8] test: fix snap

---
 .../menu/menu/__snapshots__/menu.snapshot.spec.snap.js | 10 +++++-----
 src/elements/menu/menu/menu.snapshot.spec.ts           |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/elements/menu/menu/__snapshots__/menu.snapshot.spec.snap.js b/src/elements/menu/menu/__snapshots__/menu.snapshot.spec.snap.js
index d02b860e13..2b9b6c9495 100644
--- a/src/elements/menu/menu/__snapshots__/menu.snapshot.spec.snap.js
+++ b/src/elements/menu/menu/__snapshots__/menu.snapshot.spec.snap.js
@@ -87,7 +87,7 @@ snapshots["sbb-menu renders Shadow DOM"] =
 snapshots["sbb-menu renders with list DOM"] = 
 `<sbb-menu
   data-state="closed"
-  id="sbb-menu-3"
+  id="sbb-menu-2"
   trigger="menu-trigger"
 >
   <sbb-menu-button
@@ -173,7 +173,7 @@ snapshots["sbb-menu renders with list Shadow DOM"] =
 `;
 /* end snapshot sbb-menu renders with list Shadow DOM */
 
-snapshots["sbb-menu renders A11y tree Chrome"] = 
+snapshots["sbb-menu renders with list A11y tree Chrome"] = 
 `<p>
   {
   "role": "WebArea",
@@ -188,9 +188,9 @@ snapshots["sbb-menu renders A11y tree Chrome"] =
 }
 </p>
 `;
-/* end snapshot sbb-menu renders A11y tree Chrome */
+/* end snapshot sbb-menu renders with list A11y tree Chrome */
 
-snapshots["sbb-menu renders A11y tree Firefox"] = 
+snapshots["sbb-menu renders with list A11y tree Firefox"] = 
 `<p>
   {
   "role": "document",
@@ -205,5 +205,5 @@ snapshots["sbb-menu renders A11y tree Firefox"] =
 }
 </p>
 `;
-/* end snapshot sbb-menu renders A11y tree Firefox */
+/* end snapshot sbb-menu renders with list A11y tree Firefox */
 
diff --git a/src/elements/menu/menu/menu.snapshot.spec.ts b/src/elements/menu/menu/menu.snapshot.spec.ts
index bb6d604137..f54d059cc7 100644
--- a/src/elements/menu/menu/menu.snapshot.spec.ts
+++ b/src/elements/menu/menu/menu.snapshot.spec.ts
@@ -39,8 +39,6 @@ describe(`sbb-menu`, () => {
     it('Shadow DOM', async () => {
       await expect(element).shadowDom.to.be.equalSnapshot();
     });
-
-    testA11yTreeSnapshot();
   });
 
   describe('renders with list', () => {
@@ -68,5 +66,7 @@ describe(`sbb-menu`, () => {
     it('Shadow DOM', async () => {
       await expect(element).shadowDom.to.be.equalSnapshot();
     });
+
+    testA11yTreeSnapshot();
   });
 });

From 088d468824c645f7eb094a56da09cd083c935386 Mon Sep 17 00:00:00 2001
From: Davide Mininni <davide.mininni@finconsgroup.com>
Date: Fri, 28 Jun 2024 15:42:24 +0200
Subject: [PATCH 5/8] fix: review

---
 .../menu-button/menu-button.visual.spec.ts    | 55 +++++++++++++------
 .../menu/menu-link/menu-link.visual.spec.ts   | 55 +++++++++++++------
 src/elements/menu/menu/menu.visual.spec.ts    | 28 ++--------
 3 files changed, 79 insertions(+), 59 deletions(-)

diff --git a/src/elements/menu/menu-button/menu-button.visual.spec.ts b/src/elements/menu/menu-button/menu-button.visual.spec.ts
index b1693e23d3..9acc585481 100644
--- a/src/elements/menu/menu-button/menu-button.visual.spec.ts
+++ b/src/elements/menu/menu-button/menu-button.visual.spec.ts
@@ -28,7 +28,7 @@ describe(`sbb-menu-button`, () => {
                 new Array(3),
                 (_, index) => html`
                   <sbb-menu-button amount="123" icon-name="tick-small"
-                    >Details ${index}</sbb-menu-button
+                    >Button ${index}</sbb-menu-button
                   >
                 `,
               )}
@@ -36,26 +36,23 @@ describe(`sbb-menu-button`, () => {
             {
               backgroundColor: 'var(--sbb-color-black)',
               width: '256px',
-              focusOutlineDark: true,
             },
           );
         }),
       );
-    }
 
-    describeEach(state, ({ amount, slotted }) => {
       it(
-        visualDiffDefault.name,
-        visualDiffDefault.with(async (setup) => {
+        `long label ${visualDiffState.name}`,
+        visualDiffState.with(async (setup) => {
           await setup.withFixture(
             html`
               ${repeat(
                 new Array(3),
                 (_, index) => html`
-                  <sbb-menu-button amount=${amount || nothing}>
-                    Details ${index}
-                    ${slotted ? html`<sbb-icon slot="icon" name="pie-small"></sbb-icon>` : nothing}
-                  </sbb-menu-button>
+                  <sbb-menu-button amount="123" icon-name="tick-small"
+                    >Button lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    ${index}</sbb-menu-button
+                  >
                 `,
               )}
             `,
@@ -66,21 +63,21 @@ describe(`sbb-menu-button`, () => {
           );
         }),
       );
-    });
+    }
 
-    for (const disabled of [true, false]) {
+    describeEach(state, ({ amount, slotted }) => {
       it(
-        `long label disabled=${disabled} ${visualDiffDefault.name}`,
+        visualDiffDefault.name,
         visualDiffDefault.with(async (setup) => {
           await setup.withFixture(
             html`
               ${repeat(
                 new Array(3),
                 (_, index) => html`
-                  <sbb-menu-button amount="123" icon-name="tick-small" .disabled=${disabled}
-                    >Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                    ${index}</sbb-menu-button
-                  >
+                  <sbb-menu-button amount=${amount || nothing}>
+                    Button ${index}
+                    ${slotted ? html`<sbb-icon slot="icon" name="pie-small"></sbb-icon>` : nothing}
+                  </sbb-menu-button>
                 `,
               )}
             `,
@@ -91,6 +88,28 @@ describe(`sbb-menu-button`, () => {
           );
         }),
       );
-    }
+    });
+
+    it(
+      `disabled=true ${visualDiffDefault.name}`,
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(
+          html`
+            ${repeat(
+              new Array(3),
+              (_, index) => html`
+                <sbb-menu-button amount="123" icon-name="tick-small" disabled
+                  >Button ${index}</sbb-menu-button
+                >
+              `,
+            )}
+          `,
+          {
+            backgroundColor: 'var(--sbb-color-black)',
+            width: '256px',
+          },
+        );
+      }),
+    );
   });
 });
diff --git a/src/elements/menu/menu-link/menu-link.visual.spec.ts b/src/elements/menu/menu-link/menu-link.visual.spec.ts
index 4e9b51b293..907fbb6fc9 100644
--- a/src/elements/menu/menu-link/menu-link.visual.spec.ts
+++ b/src/elements/menu/menu-link/menu-link.visual.spec.ts
@@ -28,7 +28,7 @@ describe(`sbb-menu-link`, () => {
                 new Array(3),
                 (_, index) => html`
                   <sbb-menu-link href="#" amount="123" icon-name="tick-small"
-                    >Details ${index}</sbb-menu-link
+                    >Link ${index}</sbb-menu-link
                   >
                 `,
               )}
@@ -36,26 +36,23 @@ describe(`sbb-menu-link`, () => {
             {
               backgroundColor: 'var(--sbb-color-black)',
               width: '256px',
-              focusOutlineDark: true,
             },
           );
         }),
       );
-    }
 
-    describeEach(state, ({ amount, slotted }) => {
       it(
-        visualDiffDefault.name,
-        visualDiffDefault.with(async (setup) => {
+        `long label ${visualDiffState.name}`,
+        visualDiffState.with(async (setup) => {
           await setup.withFixture(
             html`
               ${repeat(
                 new Array(3),
                 (_, index) => html`
-                  <sbb-menu-link href="#" amount=${amount || nothing}>
-                    Details ${index}
-                    ${slotted ? html`<sbb-icon slot="icon" name="pie-small"></sbb-icon>` : nothing}
-                  </sbb-menu-link>
+                  <sbb-menu-link href="#" amount="123" icon-name="tick-small"
+                    >Link lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    ${index}</sbb-menu-link
+                  >
                 `,
               )}
             `,
@@ -66,21 +63,21 @@ describe(`sbb-menu-link`, () => {
           );
         }),
       );
-    });
+    }
 
-    for (const disabled of [true, false]) {
+    describeEach(state, ({ amount, slotted }) => {
       it(
-        `long label disabled=${disabled} ${visualDiffDefault.name}`,
+        visualDiffDefault.name,
         visualDiffDefault.with(async (setup) => {
           await setup.withFixture(
             html`
               ${repeat(
                 new Array(3),
                 (_, index) => html`
-                  <sbb-menu-link href="#" amount="123" icon-name="tick-small" .disabled=${disabled}
-                    >Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                    ${index}</sbb-menu-link
-                  >
+                  <sbb-menu-link href="#" amount=${amount || nothing}>
+                    Link ${index}
+                    ${slotted ? html`<sbb-icon slot="icon" name="pie-small"></sbb-icon>` : nothing}
+                  </sbb-menu-link>
                 `,
               )}
             `,
@@ -91,6 +88,28 @@ describe(`sbb-menu-link`, () => {
           );
         }),
       );
-    }
+    });
+
+    it(
+      `disabled=true ${visualDiffDefault.name}`,
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(
+          html`
+            ${repeat(
+              new Array(3),
+              (_, index) => html`
+                <sbb-menu-link href="#" amount="123" icon-name="tick-small" disabled
+                  >Link ${index}</sbb-menu-link
+                >
+              `,
+            )}
+          `,
+          {
+            backgroundColor: 'var(--sbb-color-black)',
+            width: '256px',
+          },
+        );
+      }),
+    );
   });
 });
diff --git a/src/elements/menu/menu/menu.visual.spec.ts b/src/elements/menu/menu/menu.visual.spec.ts
index 5ac6cdf8f2..58ca18092b 100644
--- a/src/elements/menu/menu/menu.visual.spec.ts
+++ b/src/elements/menu/menu/menu.visual.spec.ts
@@ -1,6 +1,7 @@
 import { SbbBreakpointMediumMin } from '@sbb-esta/lyne-design-tokens';
 import { setViewport } from '@web/test-runner-commands';
 import { html } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import type { SbbButtonElement } from '../../button/button.js';
@@ -58,29 +59,10 @@ describe(`sbb-menu`, () => {
           html`
             <sbb-button id="menu-trigger-2" size="m"> Menu trigger</sbb-button>
             <sbb-menu trigger="menu-trigger-2">
-              <sbb-menu-button>English</sbb-menu-button>
-              <sbb-menu-button>Deutsch</sbb-menu-button>
-              <sbb-menu-button>Français</sbb-menu-button>
-              <sbb-menu-button>Italiano</sbb-menu-button>
-              <sbb-menu-button>Rumantsch</sbb-menu-button>
-              <sbb-menu-button>Español</sbb-menu-button>
-              <sbb-menu-button>Português</sbb-menu-button>
-              <sbb-menu-button>日本語</sbb-menu-button>
-              <sbb-menu-button>한국어</sbb-menu-button>
-              <sbb-menu-button>广州话</sbb-menu-button>
-              <sbb-menu-button>Afrikaans</sbb-menu-button>
-              <sbb-menu-button>Svenska</sbb-menu-button>
-              <sbb-menu-button>Dansk</sbb-menu-button>
-              <sbb-menu-button>Nederlands</sbb-menu-button>
-              <sbb-menu-button>Suomi</sbb-menu-button>
-              <sbb-menu-button>українська мова</sbb-menu-button>
-              <sbb-menu-button>አማርኛ</sbb-menu-button>
-              <sbb-menu-button>ქართული ენა</sbb-menu-button>
-              <sbb-menu-button>Afrikaans</sbb-menu-button>
-              <sbb-menu-button>Svenska</sbb-menu-button>
-              <sbb-menu-button>Dansk</sbb-menu-button>
-              <sbb-menu-button>Nederlands</sbb-menu-button>
-              <sbb-menu-button>Suomi</sbb-menu-button>
+              ${repeat(
+                new Array(10),
+                (_, index) => html`<sbb-menu-button>Element ${index}</sbb-menu-button>`,
+              )}
             </sbb-menu>
           `,
           { minHeight: '400px' },

From e353bcb08673421bda5ab1565d5230b7f6fb077c Mon Sep 17 00:00:00 2001
From: Davide Mininni <davide.mininni@finconsgroup.com>
Date: Fri, 28 Jun 2024 17:58:05 +0200
Subject: [PATCH 6/8] chore: templates improvement

---
 .../menu-button/menu-button.visual.spec.ts    | 122 ++++++++----------
 .../menu/menu-link/menu-link.visual.spec.ts   | 122 ++++++++----------
 2 files changed, 102 insertions(+), 142 deletions(-)

diff --git a/src/elements/menu/menu-button/menu-button.visual.spec.ts b/src/elements/menu/menu-button/menu-button.visual.spec.ts
index 9acc585481..f641e945a6 100644
--- a/src/elements/menu/menu-button/menu-button.visual.spec.ts
+++ b/src/elements/menu/menu-button/menu-button.visual.spec.ts
@@ -1,6 +1,7 @@
-import { html, nothing } from 'lit';
+import { html, nothing, type TemplateResult } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 
+import type { visualRegressionFixture } from '../../core/testing/private.js';
 import {
   describeEach,
   describeViewports,
@@ -12,32 +13,52 @@ import {
 import './menu-button.js';
 
 describe(`sbb-menu-button`, () => {
-  describeViewports({ viewports: ['zero', 'medium'] }, () => {
-    const state = {
-      amount: [undefined, 123],
-      slotted: [false, true],
-    };
+  const defaultArgs = {
+    amount: 123 as number | undefined,
+    iconName: 'tick-small',
+    label: 'Button',
+    disabled: false,
+    slottedIcon: false,
+  };
+
+  const template = ({
+    amount,
+    iconName,
+    label,
+    disabled,
+    slottedIcon,
+  }: typeof defaultArgs): TemplateResult => html`
+    ${repeat(
+      new Array(3),
+      (_, index) => html`
+        <sbb-menu-button
+          amount=${amount || nothing}
+          icon-name=${iconName || nothing}
+          .disabled=${disabled}
+        >
+          ${label} ${index}
+          ${slottedIcon ? html`<sbb-icon slot="icon" name="pie-small"></sbb-icon>` : nothing}
+        </sbb-menu-button>
+      `,
+    )}
+  `;
+
+  const state = {
+    amount: [undefined, 123],
+    slottedIcon: [false, true],
+  };
 
+  const wrapperStyles: Parameters<typeof visualRegressionFixture>[1] = {
+    backgroundColor: 'var(--sbb-color-black)',
+    width: '256px',
+  };
+
+  describeViewports({ viewports: ['zero', 'medium'] }, () => {
     for (const visualDiffState of [visualDiffDefault, visualDiffHover, visualDiffFocus]) {
       it(
         visualDiffState.name,
         visualDiffState.with(async (setup) => {
-          await setup.withFixture(
-            html`
-              ${repeat(
-                new Array(3),
-                (_, index) => html`
-                  <sbb-menu-button amount="123" icon-name="tick-small"
-                    >Button ${index}</sbb-menu-button
-                  >
-                `,
-              )}
-            `,
-            {
-              backgroundColor: 'var(--sbb-color-black)',
-              width: '256px',
-            },
-          );
+          await setup.withFixture(template(defaultArgs), wrapperStyles);
         }),
       );
 
@@ -45,47 +66,21 @@ describe(`sbb-menu-button`, () => {
         `long label ${visualDiffState.name}`,
         visualDiffState.with(async (setup) => {
           await setup.withFixture(
-            html`
-              ${repeat(
-                new Array(3),
-                (_, index) => html`
-                  <sbb-menu-button amount="123" icon-name="tick-small"
-                    >Button lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                    ${index}</sbb-menu-button
-                  >
-                `,
-              )}
-            `,
-            {
-              backgroundColor: 'var(--sbb-color-black)',
-              width: '256px',
-            },
+            template({
+              ...defaultArgs,
+              label: 'Button lorem ipsum dolor sit amet, consectetur adipiscing elit',
+            }),
+            wrapperStyles,
           );
         }),
       );
     }
 
-    describeEach(state, ({ amount, slotted }) => {
+    describeEach(state, ({ amount, slottedIcon }) => {
       it(
         visualDiffDefault.name,
         visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(
-            html`
-              ${repeat(
-                new Array(3),
-                (_, index) => html`
-                  <sbb-menu-button amount=${amount || nothing}>
-                    Button ${index}
-                    ${slotted ? html`<sbb-icon slot="icon" name="pie-small"></sbb-icon>` : nothing}
-                  </sbb-menu-button>
-                `,
-              )}
-            `,
-            {
-              backgroundColor: 'var(--sbb-color-black)',
-              width: '256px',
-            },
-          );
+          await setup.withFixture(template({ ...defaultArgs, amount, slottedIcon }), wrapperStyles);
         }),
       );
     });
@@ -93,22 +88,7 @@ describe(`sbb-menu-button`, () => {
     it(
       `disabled=true ${visualDiffDefault.name}`,
       visualDiffDefault.with(async (setup) => {
-        await setup.withFixture(
-          html`
-            ${repeat(
-              new Array(3),
-              (_, index) => html`
-                <sbb-menu-button amount="123" icon-name="tick-small" disabled
-                  >Button ${index}</sbb-menu-button
-                >
-              `,
-            )}
-          `,
-          {
-            backgroundColor: 'var(--sbb-color-black)',
-            width: '256px',
-          },
-        );
+        await setup.withFixture(template({ ...defaultArgs, disabled: true }), wrapperStyles);
       }),
     );
   });
diff --git a/src/elements/menu/menu-link/menu-link.visual.spec.ts b/src/elements/menu/menu-link/menu-link.visual.spec.ts
index 907fbb6fc9..ea5102f94a 100644
--- a/src/elements/menu/menu-link/menu-link.visual.spec.ts
+++ b/src/elements/menu/menu-link/menu-link.visual.spec.ts
@@ -1,6 +1,7 @@
-import { html, nothing } from 'lit';
+import { html, nothing, type TemplateResult } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 
+import type { visualRegressionFixture } from '../../core/testing/private.js';
 import {
   describeEach,
   describeViewports,
@@ -12,32 +13,52 @@ import {
 import './menu-link.js';
 
 describe(`sbb-menu-link`, () => {
-  describeViewports({ viewports: ['zero', 'medium'] }, () => {
-    const state = {
-      amount: [undefined, 123],
-      slotted: [false, true],
-    };
+  const defaultArgs = {
+    amount: 123 as number | undefined,
+    iconName: 'tick-small',
+    label: 'Link',
+    disabled: false,
+    slottedIcon: false,
+  };
+
+  const template = ({
+    amount,
+    iconName,
+    label,
+    disabled,
+    slottedIcon,
+  }: typeof defaultArgs): TemplateResult =>
+    html` ${repeat(
+      new Array(3),
+      (_, index) => html`
+        <sbb-menu-link
+          href="#"
+          amount=${amount || nothing}
+          icon-name=${iconName || nothing}
+          .disabled=${disabled}
+        >
+          ${label} ${index}
+          ${slottedIcon ? html`<sbb-icon slot="icon" name="pie-small"></sbb-icon>` : nothing}
+        </sbb-menu-link>
+      `,
+    )}`;
+
+  const state = {
+    amount: [undefined, 123],
+    slottedIcon: [false, true],
+  };
 
+  const wrapperStyles: Parameters<typeof visualRegressionFixture>[1] = {
+    backgroundColor: 'var(--sbb-color-black)',
+    width: '256px',
+  };
+
+  describeViewports({ viewports: ['zero', 'medium'] }, () => {
     for (const visualDiffState of [visualDiffDefault, visualDiffHover, visualDiffFocus]) {
       it(
         visualDiffState.name,
         visualDiffState.with(async (setup) => {
-          await setup.withFixture(
-            html`
-              ${repeat(
-                new Array(3),
-                (_, index) => html`
-                  <sbb-menu-link href="#" amount="123" icon-name="tick-small"
-                    >Link ${index}</sbb-menu-link
-                  >
-                `,
-              )}
-            `,
-            {
-              backgroundColor: 'var(--sbb-color-black)',
-              width: '256px',
-            },
-          );
+          await setup.withFixture(template(defaultArgs), wrapperStyles);
         }),
       );
 
@@ -45,47 +66,21 @@ describe(`sbb-menu-link`, () => {
         `long label ${visualDiffState.name}`,
         visualDiffState.with(async (setup) => {
           await setup.withFixture(
-            html`
-              ${repeat(
-                new Array(3),
-                (_, index) => html`
-                  <sbb-menu-link href="#" amount="123" icon-name="tick-small"
-                    >Link lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                    ${index}</sbb-menu-link
-                  >
-                `,
-              )}
-            `,
-            {
-              backgroundColor: 'var(--sbb-color-black)',
-              width: '256px',
-            },
+            template({
+              ...defaultArgs,
+              label: 'Link lorem ipsum dolor sit amet, consectetur adipiscing elit',
+            }),
+            wrapperStyles,
           );
         }),
       );
     }
 
-    describeEach(state, ({ amount, slotted }) => {
+    describeEach(state, ({ amount, slottedIcon }) => {
       it(
         visualDiffDefault.name,
         visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(
-            html`
-              ${repeat(
-                new Array(3),
-                (_, index) => html`
-                  <sbb-menu-link href="#" amount=${amount || nothing}>
-                    Link ${index}
-                    ${slotted ? html`<sbb-icon slot="icon" name="pie-small"></sbb-icon>` : nothing}
-                  </sbb-menu-link>
-                `,
-              )}
-            `,
-            {
-              backgroundColor: 'var(--sbb-color-black)',
-              width: '256px',
-            },
-          );
+          await setup.withFixture(template({ ...defaultArgs, amount, slottedIcon }), wrapperStyles);
         }),
       );
     });
@@ -93,22 +88,7 @@ describe(`sbb-menu-link`, () => {
     it(
       `disabled=true ${visualDiffDefault.name}`,
       visualDiffDefault.with(async (setup) => {
-        await setup.withFixture(
-          html`
-            ${repeat(
-              new Array(3),
-              (_, index) => html`
-                <sbb-menu-link href="#" amount="123" icon-name="tick-small" disabled
-                  >Link ${index}</sbb-menu-link
-                >
-              `,
-            )}
-          `,
-          {
-            backgroundColor: 'var(--sbb-color-black)',
-            width: '256px',
-          },
-        );
+        await setup.withFixture(template({ ...defaultArgs, disabled: true }), wrapperStyles);
       }),
     );
   });

From 2bb3c34f5d5cd6ecb80696452eb09c8b8bbfaaf3 Mon Sep 17 00:00:00 2001
From: Davide Mininni <davide.mininni@finconsgroup.com>
Date: Mon, 1 Jul 2024 11:31:40 +0200
Subject: [PATCH 7/8] fix: review

---
 .../menu/menu-button/menu-button.visual.spec.ts    | 14 +++++++-------
 .../menu/menu-link/menu-link.visual.spec.ts        | 14 +++++++-------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/elements/menu/menu-button/menu-button.visual.spec.ts b/src/elements/menu/menu-button/menu-button.visual.spec.ts
index f641e945a6..c364331e82 100644
--- a/src/elements/menu/menu-button/menu-button.visual.spec.ts
+++ b/src/elements/menu/menu-button/menu-button.visual.spec.ts
@@ -62,6 +62,13 @@ describe(`sbb-menu-button`, () => {
         }),
       );
 
+      it(
+        `disabled ${visualDiffState.name}`,
+        visualDiffState.with(async (setup) => {
+          await setup.withFixture(template({ ...defaultArgs, disabled: true }), wrapperStyles);
+        }),
+      );
+
       it(
         `long label ${visualDiffState.name}`,
         visualDiffState.with(async (setup) => {
@@ -84,12 +91,5 @@ describe(`sbb-menu-button`, () => {
         }),
       );
     });
-
-    it(
-      `disabled=true ${visualDiffDefault.name}`,
-      visualDiffDefault.with(async (setup) => {
-        await setup.withFixture(template({ ...defaultArgs, disabled: true }), wrapperStyles);
-      }),
-    );
   });
 });
diff --git a/src/elements/menu/menu-link/menu-link.visual.spec.ts b/src/elements/menu/menu-link/menu-link.visual.spec.ts
index ea5102f94a..33d6c77336 100644
--- a/src/elements/menu/menu-link/menu-link.visual.spec.ts
+++ b/src/elements/menu/menu-link/menu-link.visual.spec.ts
@@ -62,6 +62,13 @@ describe(`sbb-menu-link`, () => {
         }),
       );
 
+      it(
+        `disabled ${visualDiffState.name}`,
+        visualDiffState.with(async (setup) => {
+          await setup.withFixture(template({ ...defaultArgs, disabled: true }), wrapperStyles);
+        }),
+      );
+
       it(
         `long label ${visualDiffState.name}`,
         visualDiffState.with(async (setup) => {
@@ -84,12 +91,5 @@ describe(`sbb-menu-link`, () => {
         }),
       );
     });
-
-    it(
-      `disabled=true ${visualDiffDefault.name}`,
-      visualDiffDefault.with(async (setup) => {
-        await setup.withFixture(template({ ...defaultArgs, disabled: true }), wrapperStyles);
-      }),
-    );
   });
 });

From dcdf85bc94c18b3889b54455b8019142bfc9016a Mon Sep 17 00:00:00 2001
From: Jeremias Peier <jeremias.peier@sbb.ch>
Date: Tue, 2 Jul 2024 11:04:37 +0200
Subject: [PATCH 8/8] fix: review

---
 src/elements/core/testing/private/fixture.ts  |  2 --
 .../menu-button/menu-button.visual.spec.ts    |  4 +--
 .../menu/menu-link/menu-link.visual.spec.ts   |  4 +--
 src/elements/menu/menu/menu.visual.spec.ts    | 25 +++++++++----------
 4 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/elements/core/testing/private/fixture.ts b/src/elements/core/testing/private/fixture.ts
index 07f0ebdf68..24fe8280ba 100644
--- a/src/elements/core/testing/private/fixture.ts
+++ b/src/elements/core/testing/private/fixture.ts
@@ -90,7 +90,6 @@ export async function visualRegressionFixture<T extends HTMLElement>(
     focusOutlineDark?: boolean;
     padding?: string;
     minHeight?: string;
-    width?: string;
     maxWidth?: string;
     forcedColors?: boolean;
   },
@@ -115,7 +114,6 @@ export async function visualRegressionFixture<T extends HTMLElement>(
           : undefined,
         'min-height': wrapperStyles?.minHeight,
         'max-width': wrapperStyles?.maxWidth,
-        width: wrapperStyles?.width,
       })}
       tabindex="0"
     >
diff --git a/src/elements/menu/menu-button/menu-button.visual.spec.ts b/src/elements/menu/menu-button/menu-button.visual.spec.ts
index c364331e82..7ecaafaae2 100644
--- a/src/elements/menu/menu-button/menu-button.visual.spec.ts
+++ b/src/elements/menu/menu-button/menu-button.visual.spec.ts
@@ -34,7 +34,7 @@ describe(`sbb-menu-button`, () => {
         <sbb-menu-button
           amount=${amount || nothing}
           icon-name=${iconName || nothing}
-          .disabled=${disabled}
+          ?disabled=${disabled}
         >
           ${label} ${index}
           ${slottedIcon ? html`<sbb-icon slot="icon" name="pie-small"></sbb-icon>` : nothing}
@@ -50,7 +50,7 @@ describe(`sbb-menu-button`, () => {
 
   const wrapperStyles: Parameters<typeof visualRegressionFixture>[1] = {
     backgroundColor: 'var(--sbb-color-black)',
-    width: '256px',
+    maxWidth: '256px',
   };
 
   describeViewports({ viewports: ['zero', 'medium'] }, () => {
diff --git a/src/elements/menu/menu-link/menu-link.visual.spec.ts b/src/elements/menu/menu-link/menu-link.visual.spec.ts
index 33d6c77336..f9ca477fa5 100644
--- a/src/elements/menu/menu-link/menu-link.visual.spec.ts
+++ b/src/elements/menu/menu-link/menu-link.visual.spec.ts
@@ -35,7 +35,7 @@ describe(`sbb-menu-link`, () => {
           href="#"
           amount=${amount || nothing}
           icon-name=${iconName || nothing}
-          .disabled=${disabled}
+          ?disabled=${disabled}
         >
           ${label} ${index}
           ${slottedIcon ? html`<sbb-icon slot="icon" name="pie-small"></sbb-icon>` : nothing}
@@ -50,7 +50,7 @@ describe(`sbb-menu-link`, () => {
 
   const wrapperStyles: Parameters<typeof visualRegressionFixture>[1] = {
     backgroundColor: 'var(--sbb-color-black)',
-    width: '256px',
+    maxWidth: '256px',
   };
 
   describeViewports({ viewports: ['zero', 'medium'] }, () => {
diff --git a/src/elements/menu/menu/menu.visual.spec.ts b/src/elements/menu/menu/menu.visual.spec.ts
index 58ca18092b..f28f2b271b 100644
--- a/src/elements/menu/menu/menu.visual.spec.ts
+++ b/src/elements/menu/menu/menu.visual.spec.ts
@@ -1,5 +1,3 @@
-import { SbbBreakpointMediumMin } from '@sbb-esta/lyne-design-tokens';
-import { setViewport } from '@web/test-runner-commands';
 import { html } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -45,10 +43,10 @@ describe(`sbb-menu`, () => {
           `,
           { minHeight: '400px' },
         );
-        await setViewport({ width: SbbBreakpointMediumMin, height: 400 });
-
-        const button = setup.snapshotElement.querySelector('#menu-trigger-1') as SbbButtonElement;
-        button.click();
+        setup.withPostSetupAction(() => {
+          const button = setup.snapshotElement.querySelector<SbbButtonElement>('#menu-trigger-1')!;
+          button.click();
+        });
       }),
     );
 
@@ -67,10 +65,10 @@ describe(`sbb-menu`, () => {
           `,
           { minHeight: '400px' },
         );
-        await setViewport({ width: SbbBreakpointMediumMin, height: 400 });
-
-        const button = setup.snapshotElement.querySelector('#menu-trigger-2') as SbbButtonElement;
-        button.click();
+        setup.withPostSetupAction(() => {
+          const button = setup.snapshotElement.querySelector<SbbButtonElement>('#menu-trigger-2')!;
+          button.click();
+        });
       }),
     );
 
@@ -100,10 +98,11 @@ describe(`sbb-menu`, () => {
           `,
           { minHeight: '400px' },
         );
-        await setViewport({ width: SbbBreakpointMediumMin, height: 400 });
 
-        const button = setup.snapshotElement.querySelector('#menu-trigger-3') as SbbButtonElement;
-        button.click();
+        setup.withPostSetupAction(() => {
+          const button = setup.snapshotElement.querySelector<SbbButtonElement>('#menu-trigger-3')!;
+          button.click();
+        });
       }),
     );
   });