test(sbb-menu): add visual tests

src/elements/core/testing/private/fixture.ts

@@ -90,8 +90,8 @@ export async function visualRegressionFixture<T extends HTMLElement>(
     focusOutlineDark?: boolean;
     padding?: string;
     minHeight?: string;
-    forcedColors?: boolean;
     maxWidth?: string;
+    forcedColors?: boolean;
   },
 ): Promise<T> {
   const base = tryFindBase(new Error().stack!);

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,19 +79,35 @@ 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",
   "name": "",
   "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 */
 

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();
   });
 });

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,

src/elements/menu/menu-button/menu-button.visual.spec.ts

@@ -0,0 +1,95 @@
+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,
+  visualDiffDefault,
+  visualDiffFocus,
+  visualDiffHover,
+} from '../../core/testing/private.js';
+
+import './menu-button.js';
+
+describe(`sbb-menu-button`, () => {
+  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)',
+    maxWidth: '256px',
+  };
+
+  describeViewports({ viewports: ['zero', 'medium'] }, () => {
+    for (const visualDiffState of [visualDiffDefault, visualDiffHover, visualDiffFocus]) {
+      it(
+        visualDiffState.name,
+        visualDiffState.with(async (setup) => {
+          await setup.withFixture(template(defaultArgs), wrapperStyles);
+        }),
+      );
+
+      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) => {
+          await setup.withFixture(
+            template({
+              ...defaultArgs,
+              label: 'Button lorem ipsum dolor sit amet, consectetur adipiscing elit',
+            }),
+            wrapperStyles,
+          );
+        }),
+      );
+    }
+
+    describeEach(state, ({ amount, slottedIcon }) => {
+      it(
+        visualDiffDefault.name,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(template({ ...defaultArgs, amount, slottedIcon }), wrapperStyles);
+        }),
+      );
+    });
+  });
+});

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

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();
     });
 

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,