test: fix flip card visual tests (#3263)

sbb-design-systems · Dec 2, 2024 · 8418040 · 8418040
1 parent 3651bed
commit 8418040
Showing 1 changed file with 37 additions and 35 deletions.
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
@@ -110,41 +110,43 @@ describe(`sbb-flip-card`, () => {
     }
 
     for (const imageAlignment of ['after', 'below']) {
-      it(
-        `grid`,
-        visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(
-            html` <div
-              style=${styleMap({
-                display: 'grid',
-                gridTemplateRows: 'minmax(20rem, 1fr)',
-                gridTemplateColumns: 'repeat(2, 1fr)',
-                gridColumnGap: '1rem',
-                gridRowGap: '1rem',
-              })}
-            >
-              <sbb-flip-card>
-                ${content('Summary', imageAlignment as SbbFlipCardImageAlignment, true)}
-              </sbb-flip-card>
-              <sbb-flip-card>
-                ${content('Summary', imageAlignment as SbbFlipCardImageAlignment, true)}
-              </sbb-flip-card>
-              <sbb-flip-card>
-                ${content('Summary', imageAlignment as SbbFlipCardImageAlignment, true)}
-              </sbb-flip-card>
-              <sbb-flip-card>
-                ${content('Summary', imageAlignment as SbbFlipCardImageAlignment, true)}
-              </sbb-flip-card>
-            </div>`,
-          );
-          setup.withPostSetupAction(() => {
-            const flipCard =
-              setup.snapshotElement.querySelector<SbbFlipCardElement>('sbb-flip-card')!;
-            flipCard.click();
-          });
-          await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
-        }),
-      );
+      describe(`imageAlignment=${imageAlignment}`, () => {
+        it(
+          `grid`,
+          visualDiffDefault.with(async (setup) => {
+            await setup.withFixture(
+              html` <div
+                style=${styleMap({
+                  display: 'grid',
+                  gridTemplateRows: 'minmax(20rem, 1fr)',
+                  gridTemplateColumns: 'repeat(2, 1fr)',
+                  gridColumnGap: '1rem',
+                  gridRowGap: '1rem',
+                })}
+              >
+                <sbb-flip-card>
+                  ${content('Summary', imageAlignment as SbbFlipCardImageAlignment, true)}
+                </sbb-flip-card>
+                <sbb-flip-card>
+                  ${content('Summary', imageAlignment as SbbFlipCardImageAlignment, true)}
+                </sbb-flip-card>
+                <sbb-flip-card>
+                  ${content('Summary', imageAlignment as SbbFlipCardImageAlignment, true)}
+                </sbb-flip-card>
+                <sbb-flip-card>
+                  ${content('Summary', imageAlignment as SbbFlipCardImageAlignment, true)}
+                </sbb-flip-card>
+              </div>`,
+            );
+            setup.withPostSetupAction(() => {
+              const flipCard =
+                setup.snapshotElement.querySelector<SbbFlipCardElement>('sbb-flip-card')!;
+              flipCard.click();
+            });
+            await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
+          }),
+        );
+      });
     }
 
     describe('forcedColors=true', () => {