From 00e1d766062e9d9f7ee5d4089292330de59b65aa Mon Sep 17 00:00:00 2001
From: Davide Mininni
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"] =
`
`;
-/* end snapshot sbb-menu-button renders Light DOM */
+/* end snapshot sbb-menu-button renders DOM */
snapshots["sbb-menu-button renders Shadow DOM"] =
`
+`;
+/* end snapshot sbb-menu renders A11y tree Chrome */
+
+snapshots["sbb-menu renders A11y tree Firefox"] =
+`
+ {
+ "role": "document",
+ "name": "",
+ "children": [
+ {
+ "role": "button",
+ "name": "Menu trigger",
+ "haspopup": "menu"
+ }
+ ]
+}
+
+`;
+/* 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
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(
focusOutlineDark?: boolean;
padding?: string;
minHeight?: string;
+ width?: string;
},
): Promise {
const base = tryFindBase(new Error().stack!);
@@ -104,6 +105,7 @@ export async function visualRegressionFixture(
? '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`
+ Details ${index}
+ `,
+ )}
+ `,
+ {
+ 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`
+
+ Details ${index}
+ ${slotted ? html`` : nothing}
+
+ `,
+ )}
+ `,
+ {
+ 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`
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ ${index}
+ `,
+ )}
+ `,
+ {
+ 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`
+ Details ${index}
+ `,
+ )}
+ `,
+ {
+ 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`
+
+ Details ${index}
+ ${slotted ? html`` : nothing}
+
+ `,
+ )}
+ `,
+ {
+ 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`
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ ${index}
+ `,
+ )}
+ `,
+ {
+ backgroundColor: 'var(--sbb-color-black)',
+ width: '256px',
+ },
+ );
+ }),
+ );
+ }
+ });
+});
From 9de35c35a0b570f407165285ac871829294e34eb Mon Sep 17 00:00:00 2001
From: Davide Mininni
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`
+
+
+
+ View
+
+ Edit
+ Details
+
+ Cancel
+
+ `,
+ { 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`
+
+
+ English
+ Deutsch
+ Français
+ Italiano
+ Rumantsch
+ Español
+ Português
+ 日本語
+ 한국어
+ 广州话
+ Afrikaans
+ Svenska
+ Dansk
+ Nederlands
+ Suomi
+ українська мова
+ አማርኛ
+ ქართული ენა
+ Afrikaans
+ Svenska
+ Dansk
+ Nederlands
+ Suomi
+
+ `,
+ { 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`
+
+
+ Christina Müller
+ UIS9057
+
+ Profile
+
+
+
+ Very long label that exceeds the maximum width of the menu
+
+
+ View
+
+ Tickets
+
+ Log Out
+
+ `,
+ { 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
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"] =
`