test(sbb-overlay): add visual tests (#2864)

src/elements/core/testing/private/visual-regression-snapshot.ts

@@ -10,7 +10,7 @@ export function imageName(test: Mocha.Runnable): string {
   return test!.fullTitle().replaceAll(', ', '-').replaceAll(' ', '_').replaceAll('.', '_');
 }
 
-class VisualDiffSetupBuilder {
+export class VisualDiffSetupBuilder {
   private _snapshotElement?: HTMLElement;
   private _stateElement?: HTMLElement;
   private _postSetupAction?: () => void | Promise<void>;

src/elements/overlay/__snapshots__/overlay.snapshot.spec.snap.js

@@ -1,13 +1,13 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-overlay renders - DOM"] = 
+snapshots["sbb-overlay renders DOM"] = 
 `<sbb-overlay data-state="opening">
 </sbb-overlay>
 `;
-/* end snapshot sbb-overlay renders - DOM */
+/* end snapshot sbb-overlay renders DOM */
 
-snapshots["sbb-overlay renders - Shadow DOM"] = 
+snapshots["sbb-overlay renders Shadow DOM"] = 
 `<div class="sbb-overlay__container">
   <div class="sbb-overlay">
     <div class="sbb-overlay__wrapper">
@@ -43,9 +43,9 @@ snapshots["sbb-overlay renders - Shadow DOM"] =
 <sbb-screen-reader-only aria-live="polite">
 </sbb-screen-reader-only>
 `;
-/* end snapshot sbb-overlay renders - Shadow DOM */
+/* end snapshot sbb-overlay renders Shadow DOM */
 
-snapshots["sbb-overlay A11y tree Chrome"] = 
+snapshots["sbb-overlay renders A11y tree Chrome"] = 
 `<p>
   {
   "role": "WebArea",
@@ -64,9 +64,9 @@ snapshots["sbb-overlay A11y tree Chrome"] =
 }
 </p>
 `;
-/* end snapshot sbb-overlay A11y tree Chrome */
+/* end snapshot sbb-overlay renders A11y tree Chrome */
 
-snapshots["sbb-overlay A11y tree Firefox"] = 
+snapshots["sbb-overlay renders A11y tree Firefox"] = 
 `<p>
   {
   "role": "document",
@@ -85,5 +85,5 @@ snapshots["sbb-overlay A11y tree Firefox"] =
 }
 </p>
 `;
-/* end snapshot sbb-overlay A11y tree Firefox */
+/* end snapshot sbb-overlay renders A11y tree Firefox */
 

src/elements/overlay/overlay.snapshot.spec.ts

@@ -8,17 +8,23 @@ import type { SbbOverlayElement } from './overlay.js';
 import './overlay.js';
 
 describe('sbb-overlay', () => {
-  let root: SbbOverlayElement;
-  beforeEach(async () => {
-    root = await fixture(html`<sbb-overlay></sbb-overlay>`);
-    root.open();
-    await waitForLitRender(root);
-  });
-  it('renders - DOM', async () => {
-    await expect(root).dom.to.be.equalSnapshot();
-  });
-  it('renders - Shadow DOM', async () => {
-    await expect(root).shadowDom.to.be.equalSnapshot();
+  describe('renders', () => {
+    let root: SbbOverlayElement;
+
+    beforeEach(async () => {
+      root = await fixture(html`<sbb-overlay></sbb-overlay>`);
+      root.open();
+      await waitForLitRender(root);
+    });
+
+    it('DOM', async () => {
+      await expect(root).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(root).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
   });
-  testA11yTreeSnapshot();
 });

src/elements/overlay/overlay.visual.spec.ts

@@ -0,0 +1,85 @@
+import { html, type TemplateResult } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+
+import type { VisualDiffSetupBuilder } from '../core/testing/private.js';
+import { describeViewports, visualDiffDefault } from '../core/testing/private.js';
+
+import './overlay.js';
+import type { SbbOverlayElement } from './overlay.js';
+
+describe(`sbb-overlay`, () => {
+  const defaultArgs = {
+    expanded: false,
+    backButton: false,
+    negative: false,
+    numberOfBlocks: 1,
+  };
+
+  const template = ({
+    expanded,
+    backButton,
+    negative,
+    numberOfBlocks,
+  }: typeof defaultArgs): TemplateResult => html`
+    <sbb-overlay ?negative=${negative} ?expanded=${expanded} ?back-button=${backButton}>
+      ${repeat(
+        new Array(numberOfBlocks),
+        () => html`
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum. <br />
+        `,
+      )}
+    </sbb-overlay>
+  `;
+
+  const openOverlay = (setup: VisualDiffSetupBuilder): void => {
+    const overlay: SbbOverlayElement = setup.snapshotElement.querySelector('sbb-overlay')!;
+    setup.withPostSetupAction(() => overlay.open());
+  };
+
+  describeViewports({ viewportHeight: 600 }, () => {
+    for (const negative of [false, true]) {
+      it(
+        `negative=${negative}`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(template({ ...defaultArgs, negative }), { minHeight: '600px' });
+          openOverlay(setup);
+        }),
+      );
+
+      it(
+        `negative=${negative} backButton`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(template({ ...defaultArgs, negative, backButton: true }), {
+            minHeight: '600px',
+          });
+          openOverlay(setup);
+        }),
+      );
+
+      it(
+        `negative=${negative} expanded`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(template({ ...defaultArgs, negative, expanded: true }), {
+            minHeight: '600px',
+          });
+          openOverlay(setup);
+        }),
+      );
+
+      it(
+        `negative=${negative} long content`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(template({ ...defaultArgs, negative, numberOfBlocks: 7 }), {
+            minHeight: '600px',
+          });
+          openOverlay(setup);
+        }),
+      );
+    }
+  });
+});