test(sbb-overlay): add visual tests

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,60 @@
+import { html, type TemplateResult } from 'lit';
+
+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,
+  };
+
+  const template = ({ expanded, backButton, negative }: typeof defaultArgs): TemplateResult => html`
+    <sbb-overlay ?negative=${negative} ?expanded=${expanded} ?back-button=${backButton}>
+      <div class="overlay-content">
+        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.
+      </div>
+    </sbb-overlay>
+  `;
+
+  const openOverlay = (setup: any): void => {
+    const overlay: SbbOverlayElement = setup.snapshotElement.querySelector('sbb-overlay')!;
+    setup.withSnapshotElement(overlay);
+    setup.withPostSetupAction(() => overlay.open());
+  };
+
+  describeViewports({ viewportHeight: 600 }, () => {
+    for (const negative of [false, true]) {
+      it(
+        `negative=${negative} ${visualDiffDefault.name}`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(template({ ...defaultArgs, negative }));
+          openOverlay(setup);
+        }),
+      );
+
+      it(
+        `negative=${negative} backButton ${visualDiffDefault.name}`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(template({ ...defaultArgs, negative, backButton: true }));
+          openOverlay(setup);
+        }),
+      );
+
+      it(
+        `negative=${negative} expanded ${visualDiffDefault.name}`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(template({ ...defaultArgs, negative, expanded: true }));
+          openOverlay(setup);
+        }),
+      );
+    }
+  });
+});