diff --git a/src/elements/teaser/teaser.visual.spec.ts b/src/elements/teaser/teaser.visual.spec.ts
index 0e3456be01..e58b238a19 100644
--- a/src/elements/teaser/teaser.visual.spec.ts
+++ b/src/elements/teaser/teaser.visual.spec.ts
@@ -5,7 +5,8 @@ import {
describeEach,
describeViewports,
visualDiffDefault,
- visualDiffStandardStates,
+ visualDiffFocus,
+ visualDiffHover,
} from '../core/testing/private.js';
import { waitForImageReady } from '../core/testing.js';
@@ -36,38 +37,66 @@ describe(`sbb-teaser`, () => {
for (const screenCombination of screenCombinations) {
describeViewports({ viewports: [screenCombination.viewport] }, () => {
for (const alignment of screenCombination.alignments) {
- for (const visualDiffStandardState of visualDiffStandardStates) {
- it(
- `alignment=${alignment} ${visualDiffStandardState.name}`,
- visualDiffStandardState.with(async (setup) => {
- await setup.withFixture(
- html`
-
-
- This is a paragraph
-
- `,
- { maxWidth: '760px' },
- );
- await waitForImageReady(setup.snapshotElement.querySelector('img')!);
- }),
- );
- }
+ describe(`alignment=${alignment}`, () => {
+ for (const visualDiffStandardState of [
+ visualDiffDefault,
+ visualDiffFocus,
+ visualDiffHover,
+ ]) {
+ it(
+ `state=${visualDiffStandardState.name}`,
+ visualDiffStandardState.with(async (setup) => {
+ await setup.withFixture(
+ html`
+
+
+ This is a paragraph
+
+ `,
+ { maxWidth: '760px' },
+ );
+ await waitForImageReady(setup.snapshotElement.querySelector('img')!);
+ }),
+ );
+ }
+
+ describeEach(visualStates, ({ hasChip, withLongContent }) => {
+ it(
+ '',
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(
+ html`
+
+
+ ${withLongContent ? loremIpsum : 'This is a paragraph'}
+
+ `,
+ { maxWidth: '760px' },
+ );
+ await waitForImageReady(setup.snapshotElement.querySelector('img')!);
+ }),
+ );
+ });
- describeEach(visualStates, ({ hasChip, withLongContent }) => {
it(
- `alignment=${alignment}`,
+ `longChip=true`,
visualDiffDefault.with(async (setup) => {
await setup.withFixture(
html`
-
- ${withLongContent ? loremIpsum : 'This is a paragraph'}
+
+ This is a paragraph
`,
{ maxWidth: '760px' },
@@ -75,36 +104,12 @@ describe(`sbb-teaser`, () => {
await waitForImageReady(setup.snapshotElement.querySelector('img')!);
}),
);
- });
- it(
- `longChip=true ${alignment}`,
- visualDiffDefault.with(async (setup) => {
- await setup.withFixture(
- html`
-
-
- This is a paragraph
-
- `,
- { maxWidth: '760px' },
- );
- await waitForImageReady(setup.snapshotElement.querySelector('img')!);
- }),
- );
-
- it(
- `list=true ${alignment}`,
- visualDiffDefault.with(async (setup) => {
- await setup.withFixture(
- html`
-
+ it(
+ `list=true`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(html`
+
${repeat(
new Array(5),
(_, i) => html`
@@ -114,19 +119,18 @@ describe(`sbb-teaser`, () => {
href="#"
alignment=${alignment}
>
-
+
This is the paragraph n.${i + 1}
`,
)}
- `,
- { maxWidth: '760px' },
- );
- await waitForImageReady(setup.snapshotElement.querySelector('img')!);
- }),
- );
+ `);
+ await waitForImageReady(setup.snapshotElement.querySelector('img')!);
+ }),
+ );
+ });
}
});
}