test(sbb-footer): add visual spec (#2818)

sbb-design-systems · Jun 26, 2024 · 4b27c6b · 4b27c6b
1 parent 26f6aa1
commit 4b27c6b
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 21 deletions.
diff --git a/src/elements/footer/__snapshots__/footer.snapshot.spec.snap.js b/src/elements/footer/__snapshots__/footer.snapshot.spec.snap.js
@@ -1,7 +1,16 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-footer renders"] = 
+snapshots["sbb-footer renders DOM"] = 
+`<sbb-footer
+  accessibility-title="Footer"
+  variant="default"
+>
+</sbb-footer>
+`;
+/* end snapshot sbb-footer renders DOM */
+
+snapshots["sbb-footer renders Shadow DOM"] = 
 `<footer class="sbb-footer">
   <div class="sbb-footer-wrapper">
     <h1 class="sbb-footer__title">
@@ -12,12 +21,12 @@ snapshots["sbb-footer renders"] =
   </div>
 </footer>
 `;
-/* end snapshot sbb-footer renders */
+/* end snapshot sbb-footer renders Shadow DOM */
 
-snapshots["sbb-footer A11y tree Chrome"] = 
+snapshots["sbb-footer renders A11y tree Firefox"] = 
 `<p>
   {
-  "role": "WebArea",
+  "role": "document",
   "name": "",
   "children": [
     {
@@ -29,12 +38,12 @@ snapshots["sbb-footer A11y tree Chrome"] =
 }
 </p>
 `;
-/* end snapshot sbb-footer A11y tree Chrome */
+/* end snapshot sbb-footer renders A11y tree Firefox */
 
-snapshots["sbb-footer A11y tree Firefox"] = 
+snapshots["sbb-footer renders A11y tree Chrome"] = 
 `<p>
   {
-  "role": "document",
+  "role": "WebArea",
   "name": "",
   "children": [
     {
@@ -46,5 +55,5 @@ snapshots["sbb-footer A11y tree Firefox"] =
 }
 </p>
 `;
-/* end snapshot sbb-footer A11y tree Firefox */
+/* end snapshot sbb-footer renders A11y tree Chrome */
 
diff --git a/src/elements/footer/footer.snapshot.spec.ts b/src/elements/footer/footer.snapshot.spec.ts
@@ -4,22 +4,24 @@ import { html } from 'lit/static-html.js';
 import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
 import type { SbbFooterElement } from './footer.js';
-
 import './footer.js';
 
 describe(`sbb-footer`, () => {
-  it('renders', async () => {
-    const element: SbbFooterElement = await fixture(
-      html`<sbb-footer accessibility-title="Footer"></sbb-footer>`,
-    );
+  describe('renders', () => {
+    let element: SbbFooterElement;
 
-    expect(element).dom.to.be.equal(
-      `
-        <sbb-footer accessibility-title="Footer" variant="default"></sbb-footer>
-      `,
-    );
-    await expect(element).shadowDom.to.be.equalSnapshot();
-  });
+    beforeEach(async () => {
+      element = await fixture(html` <sbb-footer accessibility-title="Footer"></sbb-footer> `);
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
 
-  testA11yTreeSnapshot(html`<sbb-footer accessibility-title="Footer"></sbb-footer>`);
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
+  });
 });
diff --git a/src/elements/footer/footer.visual.spec.ts b/src/elements/footer/footer.visual.spec.ts
@@ -0,0 +1,89 @@
+import { html } from 'lit';
+
+import { describeEach, describeViewports, visualDiffDefault } from '../core/testing/private.js';
+
+import './footer.js';
+import '../button/button-link.js';
+import '../button/secondary-button-link.js';
+import '../clock.js';
+import '../divider.js';
+import '../link-list.js';
+import '../link/block-link.js';
+
+describe(`sbb-footer`, () => {
+  const cases = {
+    expanded: [false, true],
+    negative: [false, true],
+  };
+
+  describeViewports({ viewports: ['zero', 'small', 'medium', 'wide'] }, () => {
+    describeEach(cases, ({ expanded, negative }) => {
+      it(
+        'variant=default',
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(
+            html`
+              <sbb-footer ?expanded=${expanded} ?negative=${negative}>
+                <sbb-link-list horizontal-from="medium" ?negative=${negative}>
+                  <sbb-block-link> Refunds </sbb-block-link>
+                  <sbb-block-link> Lost property office </sbb-block-link>
+                </sbb-link-list>
+              </sbb-footer>
+            `,
+            { padding: '0' },
+          );
+        }),
+      );
+
+      it(
+        'variant=clock-columns',
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(
+            html`
+              <sbb-footer variant="clock-columns" ?expanded=${expanded} ?negative=${negative}>
+                <div class="sbb-link-list-button-group">
+                  <sbb-link-list
+                    title-level="2"
+                    title-content="Help &amp; Contact."
+                    ?negative=${negative}
+                  >
+                    <sbb-block-link>Refunds</sbb-block-link>
+                    <sbb-block-link>Lost property office</sbb-block-link>
+                  </sbb-link-list>
+                  <sbb-button-link size="m">All help topics</sbb-button-link>
+                </div>
+                <sbb-link-list title-level="2" title-content="More SBB." ?negative=${negative}>
+                  <sbb-block-link> Jobs & careers </sbb-block-link>
+                  <sbb-block-link> Rail traffic information </sbb-block-link>
+                </sbb-link-list>
+                <div class="sbb-link-list-button-group">
+                  <span>
+                    <sbb-title
+                      level="2"
+                      visual-level="5"
+                      ?negative=${negative}
+                      style="margin: 0 0 var(--sbb-spacing-fixed-3x)"
+                    >
+                      Newsletter.
+                    </sbb-title>
+                    <p style="margin: 0">
+                      Our newsletter regularly informs you of attractive offers from SBB via e-mail.
+                    </p>
+                  </span>
+                  <sbb-secondary-button-link size="m"> Subscribe </sbb-secondary-button-link>
+                </div>
+                <sbb-clock now="01:59:27"></sbb-clock>
+                <sbb-divider ?negative=${negative}></sbb-divider>
+                <sbb-link-list horizontal-from="medium" ?negative=${negative}>
+                  <sbb-block-link> Refunds </sbb-block-link>
+                  <sbb-block-link> Lost property office </sbb-block-link>
+                </sbb-link-list>
+              </sbb-footer>
+            `,
+            { padding: '0' },
+          );
+        }),
+      );
+    });
+  });
+});