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

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

@@ -3,28 +3,30 @@ 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 element: SbbTimeInputElement;
 
-    await expect(root).dom.to.be.equalSnapshot();
-    expect(elem).shadowDom.to.be.equal(`
-      <p role="status"></p>
-    `);
-  });
+    beforeEach(async () => {
+      element = await fixture(html`
+        <span>
+          <sbb-time-input input="id-1"></sbb-time-input>
+          <input id="id-1" />
+        </span>
+      `);
+    });
+
+    it('DOM', async () => {
+      await expect(element).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,84 @@
+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;
+  };
+  const template = (args: Partial<ParamsType>): TemplateResult => html`
+    <sbb-form-field ?borderless=${args.borderless} ?negative=${args.negative} width="collapse">
+      <label>Label</label>
+      <sbb-icon slot="prefix" name="clock-small"></sbb-icon>
+      <sbb-time-input></sbb-time-input>
+      <input
+        id="input-id"
+        value=${args.withError ? '00:99' : '12:00'}
+        ?disabled=${args.disabled}
+        ?readonly="${args.readonly}"
+      />
+      <sbb-icon slot="suffix" name="circle-information-small"></sbb-icon>
+      ${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 }));
+        }),
+      );
+    }
+  });
+});