diff --git a/src/elements/flip-card/flip-card/flip-card.visual.spec.ts b/src/elements/flip-card/flip-card/flip-card.visual.spec.ts index 39d27e80df..961b3224db 100644 --- a/src/elements/flip-card/flip-card/flip-card.visual.spec.ts +++ b/src/elements/flip-card/flip-card/flip-card.visual.spec.ts @@ -1,4 +1,4 @@ -import { html } from 'lit'; +import { html, nothing } from 'lit'; import sampleImages from '../../core/images.js'; import { @@ -14,9 +14,13 @@ import '../../title.js'; import '../../link.js'; import '../../image.js'; -const content = (imageAlignment: 'after' | 'below' = 'after') => +const content = ( + title: string = 'Summary', + imageAlignment: 'after' | 'below' = 'after', + longConent: boolean = false, +) => html` - Summary + ${title} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus ornare condimentum. - Vivamus turpis elit, dapibus eget fringilla pellentesque, lobortis in nibh. Duis dapibus vitae - tortor ullamcorper maximus. + Vivamus turpis elit, dapibus eget fringilla pellentesque, lobortis in nibh. + ${longConent + ? `Duis dapibus vitae + tortor ullamcorper maximus. In convallis consectetur felis. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. Nam luctus ornare condimentum. Vivamus turpis elit, dapibus eget + fringilla pellentesque, lobortis in nibh. Duis dapibus vitae tortor ullamcorper maximus. In + convallis consectetur felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam + luctus ornare condimentum. Vivamus turpis elit, dapibus eget fringilla pellentesque, lobortis + in nibh. Duis dapibus vitae tortor ullamcorper maximus. In convallis consectetur felis.` + : nothing} Link`; @@ -39,7 +51,9 @@ describe(`sbb-flip-card`, () => { `image-alignment=${imageAlignment} ${state.name}`, state.with(async (setup) => { await setup.withFixture(html` - ${content(imageAlignment as 'after' | 'below')} + + ${content('Summary', imageAlignment as 'after' | 'below')} + `); }), ); @@ -52,5 +66,31 @@ describe(`sbb-flip-card`, () => { await setup.withFixture(html` ${content()}`); }), ); + + it( + 'multiline', + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + html` + ${content( + 'This is a very long title that should break into multiple lines', + )}`, + ); + }), + ); + + for (const imageAlignment of ['after', 'below']) { + it( + `long content image-alignment=${imageAlignment}`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + html` + ${content('Summary', imageAlignment as 'after' | 'below', true)} + `, + ); + }), + ); + } }); });