test: add visual tests for img tag

sbb-design-systems · Aug 13, 2024 · 3d1d59c · 3d1d59c
1 parent 18a54a2
commit 3d1d59c
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 31 deletions.
diff --git a/src/elements/flip-card/flip-card-summary/flip-card-summary.visual.spec.ts b/src/elements/flip-card/flip-card-summary/flip-card-summary.visual.spec.ts
@@ -1,7 +1,11 @@
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { describeViewports, visualDiffDefault } from '../../core/testing/private.js';
+import {
+  describeViewports,
+  loadAssetAsBase64,
+  visualDiffDefault,
+} from '../../core/testing/private.js';
 import { waitForImageReady } from '../../core/testing/wait-for-image-ready.js';
 
 import './flip-card-summary.js';
@@ -10,38 +14,61 @@ import '../../title.js';
 import '../../image.js';
 
 const imageUrl = import.meta.resolve('../../core/testing/assets/placeholder-image.png');
+const imageBase64 = await loadAssetAsBase64(
+  import.meta.resolve('../../core/testing/assets/lucerne.png'),
+);
+
+const images = [
+  {
+    selector: 'sbb-image',
+    image: html`<sbb-image
+      slot="image"
+      image-src=${imageUrl}
+      border-radius="none"
+      aspect-ratio="free"
+    ></sbb-image>`,
+  },
+  {
+    selector: 'img',
+    image: html`<img
+      slot="image"
+      src=${imageBase64}
+      alt=''
+    ></img>`,
+  },
+];
 
 describe(`sbb-flip-card-summary`, () => {
   describeViewports({ viewports: ['zero', 'medium'] }, () => {
-    for (const imageAlignment of ['after', 'below']) {
-      it(
-        `image-alignment=${imageAlignment}`,
-        visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(html`
-            <div
-              style=${styleMap({
-                position: 'relative',
-                display: 'flex',
-                'flex-flow': 'column wrap',
-                gap: 'var(--sbb-spacing-responsive-xs)',
-                'min-height': '17.5rem',
-                'background-color': 'var(--sbb-color-cloud-alpha-80)',
-              })}
-            >
-              <sbb-flip-card-summary slot="summary" image-alignment=${imageAlignment}>
-                <sbb-title level="4">Summary</sbb-title>
-                <sbb-image
-                  slot="image"
-                  image-src=${imageUrl}
-                  border-radius="none"
-                  aspect-ratio="free"
-                ></sbb-image>
-              </sbb-flip-card-summary>
-            </div>
-          `);
-          await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
-        }),
-      );
+    for (const image of images) {
+      describe(`image=${image.selector}`, () => {
+        for (const imageAlignment of ['after', 'below']) {
+          it(
+            `image-alignment=${imageAlignment}`,
+            visualDiffDefault.with(async (setup) => {
+              await setup.withFixture(html`
+                <div
+                  style=${styleMap({
+                    position: 'relative',
+                    display: 'flex',
+                    'flex-flow': 'column wrap',
+                    gap: 'var(--sbb-spacing-responsive-xs)',
+                    'min-height': '17.5rem',
+                    'background-color': 'var(--sbb-color-cloud-alpha-80)',
+                  })}
+                >
+                  <sbb-flip-card-summary slot="summary" image-alignment=${imageAlignment}>
+                    ${image.image}
+                    <sbb-title level="4">Summary</sbb-title>
+                  </sbb-flip-card-summary>
+                </div>
+              `);
+
+              await waitForImageReady(setup.snapshotElement.querySelector(image.selector)!);
+            }),
+          );
+        }
+      });
     }
   });
 });
diff --git a/src/elements/teaser-hero/teaser-hero.visual.spec.ts b/src/elements/teaser-hero/teaser-hero.visual.spec.ts
@@ -11,7 +11,7 @@ import './teaser-hero.js';
 import '../image.js';
 import '../chip.js';
 
-const imageUrl = import.meta.resolve('../../elements/core/testing/assets/placeholder-image.png');
+const imageUrl = import.meta.resolve('../core/testing/assets/placeholder-image.png');
 
 describe(`sbb-teaser-hero`, () => {
   describeViewports({ viewports: ['zero', 'micro', 'small', 'medium', 'wide'] }, () => {