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` - - 400x300 - 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` - 400x300 - ${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` - - 400x300 - This is a paragraph - - `, - { maxWidth: '760px' }, - ); - await waitForImageReady(setup.snapshotElement.querySelector('img')!); - }), - ); - - it( - `list=true ${alignment}`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture( - html` -