test(sbb-time-input): add visual spec

src/elements/time-input/__snapshots__/time-input.snapshot.spec.snap.js

@@ -1,7 +1,39 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-time-input renders"] = 
+snapshots["sbb-time-input A11y tree Chrome"] =
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "textbox",
+      "name": "HH:MM"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-time-input A11y tree Chrome */
+
+snapshots["sbb-time-input A11y tree Firefox"] =
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "textbox",
+      "name": "HH:MM"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-time-input A11y tree Firefox */
+
+snapshots["sbb-time-input renders DOM"] = 
 `<span>
   <sbb-time-input input="id-1">
   </sbb-time-input>
@@ -15,9 +47,15 @@ snapshots["sbb-time-input renders"] =
   >
 </span>
 `;
-/* end snapshot sbb-time-input renders */
+/* end snapshot sbb-time-input renders DOM */
+
+snapshots["sbb-time-input renders Shadow DOM"] = 
+`<p role="status">
+</p>
+`;
+/* end snapshot sbb-time-input renders Shadow DOM */
 
-snapshots["sbb-time-input A11y tree Chrome"] = 
+snapshots["sbb-time-input renders A11y tree Chrome"] =
 `<p>
   {
   "role": "WebArea",
@@ -31,9 +69,9 @@ snapshots["sbb-time-input A11y tree Chrome"] =
 }
 </p>
 `;
-/* end snapshot sbb-time-input A11y tree Chrome */
+/* end snapshot sbb-time-input renders A11y tree Chrome */
 
-snapshots["sbb-time-input A11y tree Firefox"] = 
+snapshots["sbb-time-input renders A11y tree Firefox"] = 
 `<p>
   {
   "role": "document",
@@ -47,5 +85,5 @@ snapshots["sbb-time-input A11y tree Firefox"] =
 }
 </p>
 `;
-/* end snapshot sbb-time-input A11y tree Firefox */
+/* end snapshot sbb-time-input renders A11y tree Firefox */
 

src/elements/time-input/time-input.snapshot.spec.ts

@@ -3,28 +3,32 @@ import { html } from 'lit/static-html.js';
 
 import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
+import type { SbbTimeInputElement } from './time-input.js';
 import './time-input.js';
 
 describe(`sbb-time-input`, () => {
-  it('renders', async () => {
-    const root = await fixture(
-      html` <span>
-        <sbb-time-input input="id-1"></sbb-time-input>
-        <input id="id-1" />
-      </span>`,
-    );
-    const elem = root.querySelector('sbb-time-input');
+  describe('renders', () => {
+    let root: HTMLElement;
+    let element: SbbTimeInputElement;
 
-    await expect(root).dom.to.be.equalSnapshot();
-    expect(elem).shadowDom.to.be.equal(`
-      <p role="status"></p>
-    `);
-  });
+    beforeEach(async () => {
+      root = await fixture(html`
+        <span>
+          <sbb-time-input input="id-1"></sbb-time-input>
+          <input id="id-1" />
+        </span>
+      `);
+      element = document.querySelector('sbb-time-input')!;
+    });
+
+    it('DOM', async () => {
+      await expect(root).dom.to.be.equalSnapshot();
+    });
 
-  testA11yTreeSnapshot(
-    html` <span>
-      <sbb-time-input input="id-1"></sbb-time-input>
-      <input id="id-1" />
-    </span>`,
-  );
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
+  });
 });

src/elements/time-input/time-input.visual.spec.ts

@@ -0,0 +1,94 @@
+import { html, nothing, type TemplateResult } from 'lit';
+
+import {
+  describeEach,
+  describeViewports,
+  visualDiffDefault,
+  visualDiffFocus,
+  visualRegressionFixture,
+} from '../core/testing/private.js';
+
+import './time-input.js';
+import '../form-field.js';
+import '../form-error.js';
+import '../icon.js';
+
+describe(`sbb-time-input`, () => {
+  let root: HTMLElement;
+
+  const cases = {
+    negative: [false, true],
+    withError: [false, true],
+  };
+
+  type ParamsType = { [K in keyof typeof cases]: (typeof cases)[K][number] } & {
+    readonly?: boolean;
+    borderless?: boolean;
+    disabled?: boolean;
+    noIcons?: boolean;
+  };
+  const template = (args: Partial<ParamsType>): TemplateResult => html`
+    <sbb-form-field ?borderless=${args.borderless} ?negative=${args.negative} width="collapse">
+      <label>Label</label>
+      ${!args.noIcons ? html`<sbb-icon slot="prefix" name="clock-small"></sbb-icon>` : nothing}
+      <sbb-time-input></sbb-time-input>
+      <input
+        id="input-id"
+        value=${args.withError ? '00:99' : '12:00'}
+        ?disabled=${args.disabled}
+        ?readonly="${args.readonly}"
+      />
+      ${!args.noIcons
+        ? html`<sbb-icon slot="suffix" name="circle-information-small"></sbb-icon>`
+        : nothing}
+      ${args.withError ? html`<sbb-form-error>Error message</sbb-form-error>` : nothing}
+    </sbb-form-field>
+  `;
+
+  describeViewports({ viewports: ['zero', 'medium'] }, () => {
+    for (const state of [visualDiffDefault, visualDiffFocus]) {
+      describeEach(cases, (params) => {
+        beforeEach(async function () {
+          root = await visualRegressionFixture(template(params), {
+            backgroundColor: params.negative ? 'var(--sbb-color-charcoal)' : undefined,
+          });
+        });
+
+        it(
+          state.name,
+          state.with((setup) => {
+            setup.withSnapshotElement(root);
+          }),
+        );
+      });
+
+      it(
+        `disabled_${state.name}`,
+        state.with(async (setup) => {
+          await setup.withFixture(template({ disabled: true }));
+        }),
+      );
+
+      it(
+        `readonly_${state.name}`,
+        state.with(async (setup) => {
+          await setup.withFixture(template({ readonly: true }));
+        }),
+      );
+
+      it(
+        `borderless_${state.name}`,
+        state.with(async (setup) => {
+          await setup.withFixture(template({ borderless: true }));
+        }),
+      );
+
+      it(
+        `no icon_${state.name}`,
+        state.with(async (setup) => {
+          await setup.withFixture(template({ noIcons: true }));
+        }),
+      );
+    }
+  });
+});