test(sbb-map-container): add visual spec

sbb-design-systems · Jun 27, 2024 · 9eb6edb · 9eb6edb
1 parent 25db2e4
commit 9eb6edb
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 29 deletions.
diff --git a/src/elements/map-container/__snapshots__/map-container.snapshot.spec.snap.js b/src/elements/map-container/__snapshots__/map-container.snapshot.spec.snap.js
@@ -1,7 +1,13 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-map-container renders the container with button"] = 
+snapshots["sbb-map-container renders DOM"] = 
+`<sbb-map-container>
+</sbb-map-container>
+`;
+/* end snapshot sbb-map-container renders DOM */
+
+snapshots["sbb-map-container renders Shadow DOM"] = 
 `<div class="sbb-map-container">
   <div class="sbb-map-container__sidebar">
     <span>
@@ -31,9 +37,15 @@ snapshots["sbb-map-container renders the container with button"] =
   </div>
 </div>
 `;
-/* end snapshot sbb-map-container renders the container with button */
+/* end snapshot sbb-map-container renders Shadow DOM */
+
+snapshots["sbb-map-container renders without scroll-up button DOM"] = 
+`<sbb-map-container hide-scroll-up-button="">
+</sbb-map-container>
+`;
+/* end snapshot sbb-map-container renders without scroll-up button DOM */
 
-snapshots["sbb-map-container renders the container without button"] = 
+snapshots["sbb-map-container renders without scroll-up button Shadow DOM"] = 
 `<div class="sbb-map-container">
   <div class="sbb-map-container__sidebar">
     <slot>
@@ -45,25 +57,25 @@ snapshots["sbb-map-container renders the container without button"] =
   </div>
 </div>
 `;
-/* end snapshot sbb-map-container renders the container without button */
+/* end snapshot sbb-map-container renders without scroll-up button Shadow DOM */
 
-snapshots["sbb-map-container A11y tree Chrome"] = 
+snapshots["sbb-map-container renders A11y tree Chrome"] = 
 `<p>
   {
   "role": "WebArea",
   "name": ""
 }
 </p>
 `;
-/* end snapshot sbb-map-container A11y tree Chrome */
+/* end snapshot sbb-map-container renders A11y tree Chrome */
 
-snapshots["sbb-map-container A11y tree Firefox"] = 
+snapshots["sbb-map-container renders A11y tree Firefox"] = 
 `<p>
   {
   "role": "document",
   "name": ""
 }
 </p>
 `;
-/* end snapshot sbb-map-container A11y tree Firefox */
+/* end snapshot sbb-map-container renders A11y tree Firefox */
 
diff --git a/src/elements/map-container/map-container.snapshot.spec.ts b/src/elements/map-container/map-container.snapshot.spec.ts
@@ -10,29 +10,33 @@ import './map-container.js';
 describe(`sbb-map-container`, () => {
   let element: SbbMapContainerElement;
 
-  it('renders the container with button', async () => {
-    element = await fixture(html`<sbb-map-container></sbb-map-container>`);
-
-    expect(element).dom.to.be.equal(
-      `
-        <sbb-map-container>  
-        </sbb-map-container>
-      `,
-    );
-    await expect(element).shadowDom.to.be.equalSnapshot();
-  });
+  describe('renders', () => {
+    beforeEach(async () => {
+      element = await fixture(html`<sbb-map-container></sbb-map-container>`);
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
 
-  it('renders the container without button', async () => {
-    element = await fixture(html`<sbb-map-container hide-scroll-up-button></sbb-map-container>`);
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
 
-    expect(element).dom.to.be.equal(
-      `
-        <sbb-map-container hide-scroll-up-button>
-        </sbb-map-container>
-      `,
-    );
-    await expect(element).shadowDom.to.be.equalSnapshot();
+    testA11yTreeSnapshot();
   });
 
-  testA11yTreeSnapshot(html`<sbb-map-container hide-scroll-up-button></sbb-map-container>`);
+  describe('renders without scroll-up button', () => {
+    beforeEach(async () => {
+      element = await fixture(html`<sbb-map-container hide-scroll-up-button></sbb-map-container>`);
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+  });
 });
diff --git a/src/elements/map-container/map-container.visual.spec.ts b/src/elements/map-container/map-container.visual.spec.ts
@@ -0,0 +1,65 @@
+import { html } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import { describeViewports, visualDiffDefault } from '../core/testing/private.js';
+
+import './map-container.js';
+import '../header.js';
+import '../title.js';
+
+describe(`sbb-map-container`, () => {
+  describeViewports({ viewports: ['zero', 'medium'], viewportHeight: 500 }, () => {
+    it(
+      visualDiffDefault.name,
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(
+          html`
+            <sbb-header expanded hide-on-scroll>
+              <sbb-header-button icon-name="hamburger-menu-small" expand-from="small">
+                Menu
+              </sbb-header-button>
+            </sbb-header>
+            <sbb-map-container>
+              <!-- Content slot -->
+              <div style="padding: var(--sbb-spacing-fixed-4x)">
+                <sbb-title level="4">Operations & Disruptions</sbb-title>
+                ${[...Array(5).keys()].map(
+                  (value) => html`
+                    <div
+                      style=${styleMap({
+                        'background-color': 'var(--sbb-color-milk)',
+                        height: '116px',
+                        display: 'flex',
+                        'align-items': 'center',
+                        'justify-content': 'center',
+                        'border-radius': 'var(--sbb-border-radius-4x)',
+                        'margin-block-end': 'var(--sbb-spacing-fixed-4x)',
+                      })}
+                    >
+                      <p>Situation ${value}</p>
+                    </div>
+                  `,
+                )}
+              </div>
+
+              <div slot="map" style="height: 100%">
+                <div
+                  style=${styleMap({
+                    'background-color': 'grey',
+                    height: '100%',
+                    display: 'flex',
+                    'align-items': 'center',
+                    'justify-content': 'center',
+                  })}
+                >
+                  map
+                </div>
+              </div>
+            </sbb-map-container>
+          `,
+          { padding: '0' },
+        );
+      }),
+    );
+  });
+});