test(sbb-clock): add visual spec (#2795)

src/elements/clock/__snapshots__/clock.snapshot.spec.snap.js

@@ -1,7 +1,13 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-clock renders"] = 
+snapshots["sbb-clock renders DOM"] = 
+`<sbb-clock>
+</sbb-clock>
+`;
+/* end snapshot sbb-clock renders DOM */
+
+snapshots["sbb-clock renders Shadow DOM"] = 
 `<div class="sbb-clock">
   <span class="sbb-clock__face">
   </span>
@@ -13,9 +19,29 @@ snapshots["sbb-clock renders"] =
   </span>
 </div>
 `;
-/* end snapshot sbb-clock renders */
+/* end snapshot sbb-clock renders Shadow DOM */
+
+snapshots["sbb-clock renders A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-clock renders A11y tree Chrome */
 
-snapshots["sbb-clock renders with a fixed time"] = 
+snapshots["sbb-clock renders with fixed time DOM"] = 
+`<sbb-clock
+  data-initialized=""
+  now="12:30:00"
+  style="--sbb-clock-hours-animation-start-angle: 15deg; --sbb-clock-hours-animation-duration: 41400s; --sbb-clock-seconds-animation-start-angle: 0deg; --sbb-clock-seconds-animation-duration: 60s; --sbb-clock-animation-play-state: running;"
+>
+</sbb-clock>
+`;
+/* end snapshot sbb-clock renders with fixed time DOM */
+
+snapshots["sbb-clock renders with fixed time Shadow DOM"] = 
 `<div class="sbb-clock">
   <span class="sbb-clock__face">
   </span>
@@ -30,25 +56,15 @@ snapshots["sbb-clock renders with a fixed time"] =
   </span>
 </div>
 `;
-/* end snapshot sbb-clock renders with a fixed time */
-
-snapshots["sbb-clock A11y tree Chrome"] = 
-`<p>
-  {
-  "role": "WebArea",
-  "name": ""
-}
-</p>
-`;
-/* end snapshot sbb-clock A11y tree Chrome */
+/* end snapshot sbb-clock renders with fixed time Shadow DOM */
 
-snapshots["sbb-clock A11y tree Firefox"] = 
+snapshots["sbb-clock renders A11y tree Firefox"] = 
 `<p>
   {
   "role": "document",
   "name": ""
 }
 </p>
 `;
-/* end snapshot sbb-clock A11y tree Firefox */
+/* end snapshot sbb-clock renders A11y tree Firefox */
 

src/elements/clock/clock.snapshot.spec.ts

@@ -1,30 +1,41 @@
-import { assert, expect } 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 { SbbClockElement } from './clock.js';
+import type { SbbClockElement } from './clock.js';
+import './clock.js';
 
 describe(`sbb-clock`, () => {
   let element: SbbClockElement;
 
-  it('renders', async () => {
-    element = await fixture(html`<sbb-clock></sbb-clock>`);
-    assert.instanceOf(element, SbbClockElement);
+  describe('renders', () => {
+    beforeEach(async () => {
+      element = await fixture(html`<sbb-clock></sbb-clock>`);
+    });
 
-    expect(element).dom.to.be.equal(`<sbb-clock></sbb-clock>`);
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
 
-    await expect(element).shadowDom.to.be.equalSnapshot();
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
   });
 
-  it('renders with a fixed time', async () => {
-    element = await fixture(html`<sbb-clock now="12:30:00"></sbb-clock>`);
-    assert.instanceOf(element, SbbClockElement);
+  describe('renders with fixed time', () => {
+    beforeEach(async () => {
+      element = await fixture(html`<sbb-clock now="12:30:00"></sbb-clock>`);
+    });
 
-    expect(element).to.have.attribute('data-initialized');
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
 
-    await expect(element).shadowDom.to.be.equalSnapshot();
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
   });
-
-  testA11yTreeSnapshot(html`<sbb-clock></sbb-clock>`);
 });

src/elements/clock/clock.visual.spec.ts

@@ -0,0 +1,27 @@
+import { html } from 'lit';
+
+import { describeViewports, visualDiffDefault } from '../core/testing/private.js';
+
+import './clock.js';
+
+describe(`sbb-clock`, () => {
+  const timeCases = [
+    { hours: '0', minutes: '0', seconds: '0' },
+    { hours: '7', minutes: '32', seconds: '15' },
+    { hours: '16', minutes: '15', seconds: '0' },
+    { hours: '11', minutes: '60', seconds: '60' },
+  ];
+
+  describeViewports({ viewports: ['medium'] }, () => {
+    for (const time of timeCases) {
+      const timeStamp = `${time.hours}:${time.minutes}:${time.seconds}`;
+
+      it(
+        `time=${timeStamp.replaceAll(':', '-')}`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(html`<sbb-clock now=${timeStamp}></sbb-clock>`);
+        }),
+      );
+    }
+  });
+});