From 2b80a7442dae27dfa07ab93525324b917c8982b1 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Tue, 11 Jun 2024 09:41:05 +0200 Subject: [PATCH 1/2] test(sbb-image): migrate visual regression tests --- .../testing}/assets/lucerne.png | Bin src/elements/image/image.snapshot.spec.ts | 10 +- src/elements/image/image.spec.ts | 2 +- src/elements/image/image.ssr.spec.ts | 6 +- src/elements/image/image.visual.spec.ts | 89 ++++++++++++++++++ .../lead-container.snapshot.spec.ts | 2 +- .../lead-container.visual.spec.ts | 2 +- 7 files changed, 100 insertions(+), 11 deletions(-) rename src/elements/{lead-container => core/testing}/assets/lucerne.png (100%) create mode 100644 src/elements/image/image.visual.spec.ts diff --git a/src/elements/lead-container/assets/lucerne.png b/src/elements/core/testing/assets/lucerne.png similarity index 100% rename from src/elements/lead-container/assets/lucerne.png rename to src/elements/core/testing/assets/lucerne.png diff --git a/src/elements/image/image.snapshot.spec.ts b/src/elements/image/image.snapshot.spec.ts index 2f1e5eaeba..dc43d1354f 100644 --- a/src/elements/image/image.snapshot.spec.ts +++ b/src/elements/image/image.snapshot.spec.ts @@ -1,12 +1,14 @@ -import { assert, expect } from '@open-wc/testing'; +import { expect } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import { fixture } from '../core/testing/private.js'; import { waitForImageReady } from '../core/testing.js'; -import { SbbImageElement } from './image.js'; +import type { SbbImageElement } from './image.js'; -const imageUrl = import.meta.resolve('../clock/assets/sbb_clock_face.svg'); +import './image.js'; + +const imageUrl = import.meta.resolve('../core/testing/assets/lucerne.png'); describe(`sbb-image`, () => { let element: SbbImageElement; @@ -15,8 +17,6 @@ describe(`sbb-image`, () => { beforeEach(async () => { element = await fixture(html``); await waitForImageReady(element); - - assert.instanceOf(element, SbbImageElement); }); it('DOM', async () => { diff --git a/src/elements/image/image.spec.ts b/src/elements/image/image.spec.ts index 00d643bca9..7b7848c496 100644 --- a/src/elements/image/image.spec.ts +++ b/src/elements/image/image.spec.ts @@ -7,7 +7,7 @@ import { waitForCondition } from '../core/testing.js'; import './image.js'; -const imageUrl = import.meta.resolve('../clock/assets/sbb_clock_face.svg'); +const imageUrl = import.meta.resolve('../core/testing/assets/lucerne.png'); describe(`sbb-image`, () => { it('should trigger load event', async () => { diff --git a/src/elements/image/image.ssr.spec.ts b/src/elements/image/image.ssr.spec.ts index 2dc6d037da..8f241c1117 100644 --- a/src/elements/image/image.ssr.spec.ts +++ b/src/elements/image/image.ssr.spec.ts @@ -7,7 +7,7 @@ import { SbbImageElement } from './image.js'; describe(`sbb-image ${fixture.name}`, () => { let root: SbbImageElement; - const url = import.meta.resolve('../clock/assets/sbb_clock_face.svg'); + const url = import.meta.resolve('../core/testing/assets/lucerne.png'); it('renders', async () => { root = await fixture(html``, { @@ -18,8 +18,8 @@ describe(`sbb-image ${fixture.name}`, () => { const urls = [ { name: 'fully qualified url', url }, - { name: 'local url', url: 'src/elements/clock/assets/sbb_clock_face.svg' }, - { name: 'local root url', url: '/src/elements/clock/assets/sbb_clock_face.svg' }, + { name: 'local url', url: 'src/core/testing/assets/lucerne.png' }, + { name: 'local root url', url: '/src/core/testing/assets/lucerne.png' }, ]; for (const { name, url } of urls) { it(`should work with ${name}`, async () => { diff --git a/src/elements/image/image.visual.spec.ts b/src/elements/image/image.visual.spec.ts new file mode 100644 index 0000000000..e76a819e05 --- /dev/null +++ b/src/elements/image/image.visual.spec.ts @@ -0,0 +1,89 @@ +import { html } from 'lit/static-html.js'; + +import sampleImages from '../core/images.js'; +import { describeEach, describeViewports, visualDiffDefault } from '../core/testing/private.js'; +import { waitForImageReady } from '../core/testing.js'; + +import './image.js'; + +const imageUrl = import.meta.resolve('../core/testing/assets/lucerne.png'); + +describe(`sbb-image`, () => { + const aspectRatioCases = { + aspectRatio: [ + 'free', + '1-1', + '1-1', + '1-2', + '2-1', + '2-3', + '3-2', + '3-4', + '4-3', + '4-5', + '5-4', + '9-16', + '16-9', + ], + }; + + const additionalBorderRadiusCases = { + borderRadius: ['none', 'round'], + }; + + describeViewports({ viewports: ['zero', 'medium'] }, () => { + describeEach(aspectRatioCases, ({ aspectRatio }) => { + it( + visualDiffDefault.name, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + html``, + ); + + await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!); + }), + ); + }); + + describeEach(additionalBorderRadiusCases, ({ borderRadius }) => { + it( + visualDiffDefault.name, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + html``, + ); + + await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!); + }), + ); + }); + + it( + 'with caption', + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + html`Gleis 7. After the link there is more text.`} + >`, + ); + + await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!); + }), + ); + + it( + 'with transparent image from img cdn', + visualDiffDefault.with(async (setup) => { + await setup.withFixture(html``); + + await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!); + }), + ); + }); +}); diff --git a/src/elements/lead-container/lead-container.snapshot.spec.ts b/src/elements/lead-container/lead-container.snapshot.spec.ts index d283144be0..79f6794350 100644 --- a/src/elements/lead-container/lead-container.snapshot.spec.ts +++ b/src/elements/lead-container/lead-container.snapshot.spec.ts @@ -12,7 +12,7 @@ import '../link/block-link/block-link.js'; import '../title.js'; import './lead-container.js'; -const imageUrl = import.meta.resolve('./assets/lucerne.png'); +const imageUrl = import.meta.resolve('../core/testing/assets/lucerne.png'); describe(`sbb-lead-container`, () => { let element: SbbLeadContainerElement; diff --git a/src/elements/lead-container/lead-container.visual.spec.ts b/src/elements/lead-container/lead-container.visual.spec.ts index 6ee2daec81..2285b0ab7b 100644 --- a/src/elements/lead-container/lead-container.visual.spec.ts +++ b/src/elements/lead-container/lead-container.visual.spec.ts @@ -15,7 +15,7 @@ import '../link/block-link/block-link.js'; import '../title.js'; import './lead-container.js'; -const leadImageUrl = import.meta.resolve('./assets/lucerne.png'); +const leadImageUrl = import.meta.resolve('../core/testing/assets/lucerne.png'); const leadImageBase64 = await loadAssetAsBase64(leadImageUrl); describe(`sbb-lead-container`, () => { From 055a982e03e7f8778815cd2e24e0574642e8a5af Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Tue, 11 Jun 2024 12:25:00 +0200 Subject: [PATCH 2/2] fix: review --- src/elements/image/image.visual.spec.ts | 53 ++++++++----------- src/elements/message/message.snapshot.spec.ts | 2 +- .../teaser-hero/teaser-hero.snapshot.spec.ts | 2 +- src/elements/teaser-hero/teaser-hero.spec.ts | 2 +- 4 files changed, 26 insertions(+), 33 deletions(-) diff --git a/src/elements/image/image.visual.spec.ts b/src/elements/image/image.visual.spec.ts index e76a819e05..963cdca70c 100644 --- a/src/elements/image/image.visual.spec.ts +++ b/src/elements/image/image.visual.spec.ts @@ -1,40 +1,33 @@ import { html } from 'lit/static-html.js'; import sampleImages from '../core/images.js'; -import { describeEach, describeViewports, visualDiffDefault } from '../core/testing/private.js'; +import { describeViewports, visualDiffDefault } from '../core/testing/private.js'; import { waitForImageReady } from '../core/testing.js'; import './image.js'; const imageUrl = import.meta.resolve('../core/testing/assets/lucerne.png'); -describe(`sbb-image`, () => { - const aspectRatioCases = { - aspectRatio: [ - 'free', - '1-1', - '1-1', - '1-2', - '2-1', - '2-3', - '3-2', - '3-4', - '4-3', - '4-5', - '5-4', - '9-16', - '16-9', - ], - }; - - const additionalBorderRadiusCases = { - borderRadius: ['none', 'round'], - }; +const aspectRatios = [ + 'free', + '1-1', + '1-2', + '2-1', + '2-3', + '3-2', + '3-4', + '4-3', + '4-5', + '5-4', + '9-16', + '16-9', +]; +describe(`sbb-image`, () => { describeViewports({ viewports: ['zero', 'medium'] }, () => { - describeEach(aspectRatioCases, ({ aspectRatio }) => { + for (const aspectRatio of aspectRatios) { it( - visualDiffDefault.name, + `aspect-ratio=${aspectRatio}`, visualDiffDefault.with(async (setup) => { await setup.withFixture( html``, @@ -43,11 +36,11 @@ describe(`sbb-image`, () => { await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!); }), ); - }); + } - describeEach(additionalBorderRadiusCases, ({ borderRadius }) => { + for (const borderRadius of ['none', 'round']) { it( - visualDiffDefault.name, + `border-radius=${borderRadius}`, visualDiffDefault.with(async (setup) => { await setup.withFixture( html` { await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!); }), ); - }); + } it( 'with caption', @@ -78,7 +71,7 @@ describe(`sbb-image`, () => { ); it( - 'with transparent image from img cdn', + 'transparent image from img cdn', visualDiffDefault.with(async (setup) => { await setup.withFixture(html``); diff --git a/src/elements/message/message.snapshot.spec.ts b/src/elements/message/message.snapshot.spec.ts index 6233ecd614..69da74f5b6 100644 --- a/src/elements/message/message.snapshot.spec.ts +++ b/src/elements/message/message.snapshot.spec.ts @@ -10,7 +10,7 @@ import './message.js'; import '../image.js'; import '../button/button.js'; -const imageUrl = import.meta.resolve('../clock/assets/sbb_clock_face.svg'); +const imageUrl = import.meta.resolve('../core/testing/assets/lucerne.png'); describe(`sbb-message`, () => { let element: SbbMessageElement; diff --git a/src/elements/teaser-hero/teaser-hero.snapshot.spec.ts b/src/elements/teaser-hero/teaser-hero.snapshot.spec.ts index 47c8192f2b..c4a912347b 100644 --- a/src/elements/teaser-hero/teaser-hero.snapshot.spec.ts +++ b/src/elements/teaser-hero/teaser-hero.snapshot.spec.ts @@ -9,7 +9,7 @@ import type { SbbTeaserHeroElement } from './teaser-hero.js'; import './teaser-hero.js'; import '../image.js'; -const imageUrl = import.meta.resolve('../clock/assets/sbb_clock_face.svg'); +const imageUrl = import.meta.resolve('../core/testing/assets/lucerne.png'); describe(`sbb-teaser-hero`, () => { let element: SbbTeaserHeroElement; diff --git a/src/elements/teaser-hero/teaser-hero.spec.ts b/src/elements/teaser-hero/teaser-hero.spec.ts index bee90625eb..075cb253ee 100644 --- a/src/elements/teaser-hero/teaser-hero.spec.ts +++ b/src/elements/teaser-hero/teaser-hero.spec.ts @@ -6,7 +6,7 @@ import { waitForLitRender } from '../core/testing.js'; import { SbbTeaserHeroElement } from './teaser-hero.js'; -const imageUrl = import.meta.resolve('../clock/assets/sbb_clock_face.svg'); +const imageUrl = import.meta.resolve('../core/testing/assets/lucerne.png'); describe(`sbb-teaser-hero`, () => { let element: SbbTeaserHeroElement;