test(sbb-dialog): add visual spec (#2813)

sbb-design-systems · Jun 24, 2024 · a1a0dd6 · a1a0dd6
1 parent 1095121
commit a1a0dd6
Show file tree

Hide file tree

Showing 6 changed files with 241 additions and 22 deletions.
diff --git a/src/elements/dialog/dialog-actions/__snapshots__/dialog-actions.snapshot.spec.snap.js b/src/elements/dialog/dialog-actions/__snapshots__/dialog-actions.snapshot.spec.snap.js
@@ -33,3 +33,45 @@ snapshots["sbb-dialog-actions A11y tree Firefox"] =
 `;
 /* end snapshot sbb-dialog-actions A11y tree Firefox */
 
+snapshots["sbb-dialog-actions renders DOM"] = 
+`<sbb-dialog-actions
+  align-group="start"
+  button-size="l"
+  horizontal-from="medium"
+  link-size="m"
+  orientation="horizontal"
+>
+</sbb-dialog-actions>
+`;
+/* end snapshot sbb-dialog-actions renders DOM */
+
+snapshots["sbb-dialog-actions renders Shadow DOM"] = 
+`<div class="sbb-dialog-actions">
+  <div class="sbb-action-group">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot sbb-dialog-actions renders Shadow DOM */
+
+snapshots["sbb-dialog-actions renders A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-dialog-actions renders A11y tree Chrome */
+
+snapshots["sbb-dialog-actions renders A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-dialog-actions renders A11y tree Firefox */
+
diff --git a/src/elements/dialog/dialog-actions/dialog-actions.snapshot.spec.ts b/src/elements/dialog/dialog-actions/dialog-actions.snapshot.spec.ts
@@ -2,23 +2,26 @@ import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+
+import type { SbbDialogActionsElement } from './dialog-actions.js';
 import './dialog-actions.js';
 
 describe('sbb-dialog-actions', () => {
-  it('renders', async () => {
-    const root = await fixture(html`<sbb-dialog-actions></sbb-dialog-actions>`);
+  describe('renders', async () => {
+    let root: SbbDialogActionsElement;
 
-    await expect(root).dom.to.equalSnapshot();
+    beforeEach(async () => {
+      root = await fixture(html`<sbb-dialog-actions></sbb-dialog-actions>`);
+    });
 
-    expect(root).shadowDom.to.be.equal(`
-      <div class="sbb-dialog-actions">
-        <div class="sbb-action-group">
-          <slot>
-          </slot>
-        </div>
-      </div>
-    `);
-  });
+    it('DOM', async () => {
+      await expect(root).dom.to.be.equalSnapshot();
+    });
 
-  testA11yTreeSnapshot(html`<sbb-dialog-actions></sbb-dialog-actions>`);
+    it('Shadow DOM', async () => {
+      await expect(root).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
+  });
 });
diff --git a/src/elements/dialog/dialog-content/__snapshots__/dialog-content.snapshot.spec.snap.js b/src/elements/dialog/dialog-content/__snapshots__/dialog-content.snapshot.spec.snap.js
@@ -0,0 +1,50 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-dialog-content renders DOM"] = 
+`<sbb-dialog-content>
+  Content
+</sbb-dialog-content>
+`;
+/* end snapshot sbb-dialog-content renders DOM */
+
+snapshots["sbb-dialog-content renders Shadow DOM"] = 
+`<div class="sbb-dialog-content">
+  <slot>
+  </slot>
+</div>
+`;
+/* end snapshot sbb-dialog-content renders Shadow DOM */
+
+snapshots["sbb-dialog-content renders A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Content"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-dialog-content renders A11y tree Chrome */
+
+snapshots["sbb-dialog-content renders A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "text leaf",
+      "name": "Content"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-dialog-content renders A11y tree Firefox */
+
diff --git a/src/elements/dialog/dialog-content/dialog-content.snapshot.spec.ts b/src/elements/dialog/dialog-content/dialog-content.snapshot.spec.ts
@@ -1,17 +1,27 @@
-import { expect, fixture } from '@open-wc/testing';
+import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+
+import type { SbbDialogContentElement } from './dialog-content.js';
 import './dialog-content.js';
 
 describe('sbb-dialog-content', () => {
-  it('renders', async () => {
-    const root = await fixture(html`<sbb-dialog-content>Content</sbb-dialog-content>`);
+  describe('renders', async () => {
+    let root: SbbDialogContentElement;
+
+    beforeEach(async () => {
+      root = await fixture(html`<sbb-dialog-content>Content</sbb-dialog-content>`);
+    });
+
+    it('DOM', async () => {
+      await expect(root).dom.to.be.equalSnapshot();
+    });
 
-    expect(root).dom.to.be.equal(`<sbb-dialog-content>Content</sbb-dialog-content>`);
+    it('Shadow DOM', async () => {
+      await expect(root).shadowDom.to.be.equalSnapshot();
+    });
 
-    expect(root).shadowDom.to.be.equal(`
-      <div class="sbb-dialog-content">
-        <slot></slot>
-      </div>
-    `);
+    testA11yTreeSnapshot();
   });
 });
diff --git a/src/elements/dialog/dialog/dialog.spec.ts b/src/elements/dialog/dialog/dialog.spec.ts
@@ -442,6 +442,7 @@ describe('sbb-dialog with long content', () => {
     await openDialog(element);
 
     expect(element).to.have.attribute('data-state', 'opened');
+    await waitForCondition(() => element.hasAttribute('data-overflows'));
     expect(element).to.have.attribute('data-overflows', '');
   });
 

diff --git a/src/elements/dialog/dialog/dialog.visual.spec.ts b/src/elements/dialog/dialog/dialog.visual.spec.ts
@@ -0,0 +1,113 @@
+import { html, nothing, type TemplateResult } from 'lit';
+
+import { describeViewports, visualDiffDefault } from '../../core/testing/private.js';
+
+import './dialog.js';
+import '../dialog-actions.js';
+import '../dialog-content.js';
+import '../dialog-title.js';
+import '../../link/block-link.js';
+import '../../button/button.js';
+import '../../button/secondary-button.js';
+
+describe(`sbb-dialog`, () => {
+  const negativeCases = [false, true];
+
+  const dialogTitle = (backButton = true, hideOnScroll = false): TemplateResult => html`
+    <sbb-dialog-title ?back-button=${backButton} ?hide-on-scroll=${hideOnScroll}>
+      A describing title of the dialog
+    </sbb-dialog-title>
+  `;
+
+  const dialogContent = (longContent = false): TemplateResult => html`
+    <sbb-dialog-content>
+      <p style="margin: 0">
+        “What really knocks me out is a book that, when you're all done reading it, you wish the
+        author that wrote it was a terrific friend of yours and you could call him up on the phone
+        whenever you felt like it. That doesn't happen much, though.” ― J.D. Salinger, The Catcher
+        in the Rye
+      </p>
+      ${longContent
+        ? html`
+            <p>
+              “What really knocks me out is a book that, when you're all done reading it, you wish
+              the author that wrote it was a terrific friend of yours and you could call him up on
+              the phone whenever you felt like it. That doesn't happen much, though.” ― J.D.
+              Salinger, The Catcher in the Rye
+            </p>
+          `
+        : nothing}
+    </sbb-dialog-content>
+  `;
+
+  const dialogFooter = (negative = false): TemplateResult => html`
+    <sbb-dialog-actions align-group="stretch" orientation="vertical" horizontal-from="medium">
+      <sbb-block-link
+        align-self="start"
+        icon-name="chevron-small-left-small"
+        href="https://www.sbb.ch/en/"
+        ?negative=${negative}
+        sbb-dialog-close
+      >
+        Link
+      </sbb-block-link>
+      <sbb-secondary-button sbb-dialog-close> Cancel </sbb-secondary-button>
+      <sbb-button sbb-dialog-close> Confirm </sbb-button>
+    </sbb-dialog-actions>
+  `;
+
+  describeViewports({ viewports: ['zero', 'medium'], viewportHeight: 600 }, () => {
+    // Negative test
+    for (const negative of negativeCases) {
+      it(
+        `negative=${negative}`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(html`
+            <sbb-dialog ?negative=${negative}>
+              ${dialogTitle()} ${dialogContent()} ${dialogFooter(negative)}
+            </sbb-dialog>
+          `);
+          const dialog = setup.snapshotElement.querySelector('sbb-dialog')!;
+          setup.withSnapshotElement(dialog);
+          dialog.open();
+        }),
+      );
+    }
+
+    it(
+      `no back button`,
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(html`
+          <sbb-dialog> ${dialogTitle(false)} ${dialogContent()} ${dialogFooter()} </sbb-dialog>
+        `);
+        const dialog = setup.snapshotElement.querySelector('sbb-dialog')!;
+        setup.withSnapshotElement(dialog);
+        dialog.open();
+      }),
+    );
+
+    it(
+      `no footer`,
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(html`
+          <sbb-dialog> ${dialogTitle()} ${dialogContent()} </sbb-dialog>
+        `);
+        const dialog = setup.snapshotElement.querySelector('sbb-dialog')!;
+        setup.withSnapshotElement(dialog);
+        dialog.open();
+      }),
+    );
+
+    it(
+      `long content`,
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(html`
+          <sbb-dialog> ${dialogTitle()} ${dialogContent(true)} ${dialogFooter()} </sbb-dialog>
+        `);
+        const dialog = setup.snapshotElement.querySelector('sbb-dialog')!;
+        setup.withSnapshotElement(dialog);
+        dialog.open();
+      }),
+    );
+  });
+});