test(sbb-image): migrate visual regression tests

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`<sbb-image image-src=${imageUrl}></sbb-image>`);
       await waitForImageReady(element);
-
-      assert.instanceOf(element, SbbImageElement);
     });
 
     it('DOM', async () => {

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 () => {

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`<sbb-image image-src=${url}></sbb-image>`, {
@@ -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 () => {

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`<sbb-image image-src=${imageUrl} aspect-ratio=${aspectRatio}></sbb-image>`,
+          );
+
+          await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
+        }),
+      );
+    });
+
+    describeEach(additionalBorderRadiusCases, ({ borderRadius }) => {
+      it(
+        visualDiffDefault.name,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(
+            html`<sbb-image
+              image-src=${imageUrl}
+              border-radius=${borderRadius}
+              aspect-ratio="1-1"
+            ></sbb-image>`,
+          );
+
+          await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
+        }),
+      );
+    });
+
+    it(
+      'with caption',
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(
+          html`<sbb-image
+            image-src=${imageUrl}
+            alt="Station of Lucerne from outside"
+            caption=${`A long text which takes several lines and contains a link <a href="https://www.sbb.ch/abos-billette/abonnemente/gleis-7-freie-fahrt-ab-19-uhr.html#jahrg_nger_halbtax">Gleis 7</a>. After the link there is more text.`}
+          ></sbb-image>`,
+        );
+
+        await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
+      }),
+    );
+
+    it(
+      'with transparent image from img cdn',
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(html`<sbb-image image-src=${sampleImages[9]}></sbb-image>`);
+
+        await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
+      }),
+    );
+  });
+});

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;

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`, () => {