test(sbb-accordion, sbb-expansion-panel): add visual test (#2751)

sbb-design-systems · Jun 17, 2024 · 175606d · 175606d
1 parent 4756751
commit 175606d
Show file tree

Hide file tree

Showing 6 changed files with 346 additions and 101 deletions.
diff --git a/src/elements/accordion/accordion.visual.spec.ts b/src/elements/accordion/accordion.visual.spec.ts
@@ -0,0 +1,56 @@
+import { html } from 'lit';
+
+import {
+  describeEach,
+  describeViewports,
+  visualDiffDefault,
+  visualRegressionFixture,
+} from '../core/testing/private.js';
+
+import './accordion.js';
+import '../expansion-panel.js';
+
+describe(`sbb-accordion`, () => {
+  let root: HTMLElement;
+
+  const cases = {
+    borderless: [false, true],
+    expanded: [false, true],
+  };
+
+  describeViewports({ viewports: ['zero', 'medium'] }, () => {
+    // Main test cases
+    describeEach(cases, ({ borderless, expanded }) => {
+      beforeEach(async function () {
+        root = await visualRegressionFixture(
+          html`
+            <sbb-accordion>
+              <sbb-expansion-panel ?borderless=${borderless}>
+                <sbb-expansion-panel-header>Header 1</sbb-expansion-panel-header>
+                <sbb-expansion-panel-content>Content 1</sbb-expansion-panel-content>
+              </sbb-expansion-panel>
+              <sbb-expansion-panel ?borderless=${borderless} ?expanded=${expanded}>
+                <sbb-expansion-panel-header>Header 2</sbb-expansion-panel-header>
+                <sbb-expansion-panel-content>Content 2</sbb-expansion-panel-content>
+              </sbb-expansion-panel>
+              <sbb-expansion-panel ?borderless=${borderless}>
+                <sbb-expansion-panel-header>Header 3</sbb-expansion-panel-header>
+                <sbb-expansion-panel-content>Content 3</sbb-expansion-panel-content>
+              </sbb-expansion-panel>
+            </sbb-accordion>
+          `,
+          {
+            backgroundColor: borderless ? 'var(--sbb-color-cement)' : undefined,
+          },
+        );
+      });
+
+      it(
+        visualDiffDefault.name,
+        visualDiffDefault.with((setup) => {
+          setup.withSnapshotElement(root);
+        }),
+      );
+    });
+  });
+});
diff --git a/...panel/expansion-panel-content/__snapshots__/expansion-panel-content.snapshot.spec.snap.js b/...panel/expansion-panel-content/__snapshots__/expansion-panel-content.snapshot.spec.snap.js
@@ -1,15 +1,25 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-expansion-panel-content renders"] = 
+snapshots["sbb-expansion-panel-content renders DOM"] = 
+`<sbb-expansion-panel-content
+  role="region"
+  slot="content"
+>
+  Content
+</sbb-expansion-panel-content>
+`;
+/* end snapshot sbb-expansion-panel-content renders DOM */
+
+snapshots["sbb-expansion-panel-content renders Shadow DOM"] = 
 `<div class="sbb-expansion-panel-content">
   <slot>
   </slot>
 </div>
 `;
-/* end snapshot sbb-expansion-panel-content renders */
+/* end snapshot sbb-expansion-panel-content renders Shadow DOM */
 
-snapshots["sbb-expansion-panel-content A11y tree Chrome"] = 
+snapshots["sbb-expansion-panel-content renders A11y tree Chrome"] = 
 `<p>
   {
   "role": "WebArea",
@@ -23,9 +33,9 @@ snapshots["sbb-expansion-panel-content A11y tree Chrome"] =
 }
 </p>
 `;
-/* end snapshot sbb-expansion-panel-content A11y tree Chrome */
+/* end snapshot sbb-expansion-panel-content renders A11y tree Chrome */
 
-snapshots["sbb-expansion-panel-content A11y tree Firefox"] = 
+snapshots["sbb-expansion-panel-content renders A11y tree Firefox"] = 
 `<p>
   {
   "role": "document",
@@ -39,5 +49,5 @@ snapshots["sbb-expansion-panel-content A11y tree Firefox"] =
 }
 </p>
 `;
-/* end snapshot sbb-expansion-panel-content A11y tree Firefox */
+/* end snapshot sbb-expansion-panel-content renders A11y tree Firefox */
 
diff --git a/...elements/expansion-panel/expansion-panel-content/expansion-panel-content.snapshot.spec.ts b/...elements/expansion-panel/expansion-panel-content/expansion-panel-content.snapshot.spec.ts
@@ -3,23 +3,27 @@ import { html } from 'lit/static-html.js';
 
 import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
+import type { SbbExpansionPanelContentElement } from './expansion-panel-content.js';
 import './expansion-panel-content.js';
 
 describe(`sbb-expansion-panel-content`, () => {
-  it('renders', async () => {
-    const root = await fixture(
-      html`<sbb-expansion-panel-content>Content</sbb-expansion-panel-content>`,
-    );
+  describe('renders', () => {
+    let element: SbbExpansionPanelContentElement;
 
-    expect(root).dom.to.be.equal(
-      `
-        <sbb-expansion-panel-content slot="content" role="region">
-          Content
-        </sbb-expansion-panel-content>
-      `,
-    );
-    await expect(root).shadowDom.to.be.equalSnapshot();
-  });
+    beforeEach(async () => {
+      element = await fixture(
+        html`<sbb-expansion-panel-content>Content</sbb-expansion-panel-content>`,
+      );
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
 
-  testA11yTreeSnapshot(html`<sbb-expansion-panel-content>Content</sbb-expansion-panel-content>`);
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
+  });
 });
diff --git a/...n-panel/expansion-panel-header/__snapshots__/expansion-panel-header.snapshot.spec.snap.js b/...n-panel/expansion-panel-header/__snapshots__/expansion-panel-header.snapshot.spec.snap.js
@@ -1,7 +1,22 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-expansion-panel-header renders collapsed"] = 
+snapshots["sbb-expansion-panel-header renders DOM"] = 
+`<sbb-expansion-panel-header
+  data-action=""
+  data-button=""
+  data-slot-names="unnamed"
+  dir="ltr"
+  role="button"
+  slot="header"
+  tabindex="0"
+>
+  Header
+</sbb-expansion-panel-header>
+`;
+/* end snapshot sbb-expansion-panel-header renders DOM */
+
+snapshots["sbb-expansion-panel-header renders Shadow DOM"] = 
 `<span class="sbb-action-base sbb-expansion-panel-header">
   <span class="sbb-expansion-panel-header__title">
     <span class="sbb-expansion-panel-header__icon">
@@ -23,9 +38,42 @@ snapshots["sbb-expansion-panel-header renders collapsed"] =
   </span>
 </span>
 `;
-/* end snapshot sbb-expansion-panel-header renders collapsed */
+/* end snapshot sbb-expansion-panel-header renders Shadow DOM */
+
+snapshots["sbb-expansion-panel-header renders A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Header"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-expansion-panel-header renders A11y tree Chrome */
+
+snapshots["sbb-expansion-panel-header renders with icon DOM"] = 
+`<sbb-expansion-panel-header
+  data-action=""
+  data-button=""
+  data-icon=""
+  data-slot-names="unnamed"
+  dir="ltr"
+  icon-name="pie-medium"
+  role="button"
+  slot="header"
+  tabindex="0"
+>
+  Header
+</sbb-expansion-panel-header>
+`;
+/* end snapshot sbb-expansion-panel-header renders with icon DOM */
 
-snapshots["sbb-expansion-panel-header renders with icon"] = 
+snapshots["sbb-expansion-panel-header renders with icon Shadow DOM"] = 
 `<span class="sbb-action-base sbb-expansion-panel-header">
   <span class="sbb-expansion-panel-header__title">
     <span class="sbb-expansion-panel-header__icon">
@@ -54,9 +102,33 @@ snapshots["sbb-expansion-panel-header renders with icon"] =
   </span>
 </span>
 `;
-/* end snapshot sbb-expansion-panel-header renders with icon */
+/* end snapshot sbb-expansion-panel-header renders with icon Shadow DOM */
+
+snapshots["sbb-expansion-panel-header renders with slotted icon DOM"] = 
+`<sbb-expansion-panel-header
+  data-action=""
+  data-button=""
+  data-icon=""
+  data-slot-names="icon unnamed"
+  dir="ltr"
+  role="button"
+  slot="header"
+  tabindex="0"
+>
+  <sbb-icon
+    aria-hidden="true"
+    data-namespace="default"
+    name="pie-medium"
+    role="img"
+    slot="icon"
+  >
+  </sbb-icon>
+  Header
+</sbb-expansion-panel-header>
+`;
+/* end snapshot sbb-expansion-panel-header renders with slotted icon DOM */
 
-snapshots["sbb-expansion-panel-header renders with slotted icon"] = 
+snapshots["sbb-expansion-panel-header renders with slotted icon Shadow DOM"] = 
 `<span class="sbb-action-base sbb-expansion-panel-header">
   <span class="sbb-expansion-panel-header__title">
     <span class="sbb-expansion-panel-header__icon">
@@ -78,25 +150,9 @@ snapshots["sbb-expansion-panel-header renders with slotted icon"] =
   </span>
 </span>
 `;
-/* end snapshot sbb-expansion-panel-header renders with slotted icon */
-
-snapshots["sbb-expansion-panel-header A11y tree Chrome"] = 
-`<p>
-  {
-  "role": "WebArea",
-  "name": "",
-  "children": [
-    {
-      "role": "button",
-      "name": "Header"
-    }
-  ]
-}
-</p>
-`;
-/* end snapshot sbb-expansion-panel-header A11y tree Chrome */
+/* end snapshot sbb-expansion-panel-header renders with slotted icon Shadow DOM */
 
-snapshots["sbb-expansion-panel-header A11y tree Firefox"] = 
+snapshots["sbb-expansion-panel-header renders A11y tree Firefox"] = 
 `<p>
   {
   "role": "document",
@@ -110,5 +166,5 @@ snapshots["sbb-expansion-panel-header A11y tree Firefox"] =
 }
 </p>
 `;
-/* end snapshot sbb-expansion-panel-header A11y tree Firefox */
+/* end snapshot sbb-expansion-panel-header renders A11y tree Firefox */