diff --git a/src/elements/time-input/__snapshots__/time-input.snapshot.spec.snap.js b/src/elements/time-input/__snapshots__/time-input.snapshot.spec.snap.js
index c12b117c5d..4e883f9860 100644
--- a/src/elements/time-input/__snapshots__/time-input.snapshot.spec.snap.js
+++ b/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"] =
+`
+ {
+ "role": "WebArea",
+ "name": "",
+ "children": [
+ {
+ "role": "textbox",
+ "name": "HH:MM"
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-time-input A11y tree Chrome */
+
+snapshots["sbb-time-input A11y tree Firefox"] =
+`
+ {
+ "role": "document",
+ "name": "",
+ "children": [
+ {
+ "role": "textbox",
+ "name": "HH:MM"
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-time-input A11y tree Firefox */
+
+snapshots["sbb-time-input renders DOM"] =
`
@@ -15,9 +47,15 @@ snapshots["sbb-time-input renders"] =
>
`;
-/* end snapshot sbb-time-input renders */
+/* end snapshot sbb-time-input renders DOM */
+
+snapshots["sbb-time-input renders Shadow DOM"] =
+`
+
+`;
+/* end snapshot sbb-time-input renders Shadow DOM */
-snapshots["sbb-time-input A11y tree Chrome"] =
+snapshots["sbb-time-input renders A11y tree Chrome"] =
`
{
"role": "WebArea",
@@ -31,9 +69,9 @@ snapshots["sbb-time-input A11y tree Chrome"] =
}
`;
-/* 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"] =
`
{
"role": "document",
@@ -47,5 +85,5 @@ snapshots["sbb-time-input A11y tree Firefox"] =
}
`;
-/* end snapshot sbb-time-input A11y tree Firefox */
+/* end snapshot sbb-time-input renders A11y tree Firefox */
diff --git a/src/elements/time-input/time-input.snapshot.spec.ts b/src/elements/time-input/time-input.snapshot.spec.ts
index 4eb96e7647..97cfe28248 100644
--- a/src/elements/time-input/time-input.snapshot.spec.ts
+++ b/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`
-
-
- `,
- );
- 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(`
-
- `);
- });
+ beforeEach(async () => {
+ root = await fixture(html`
+
+
+
+
+ `);
+ element = document.querySelector('sbb-time-input')!;
+ });
+
+ it('DOM', async () => {
+ await expect(root).dom.to.be.equalSnapshot();
+ });
- testA11yTreeSnapshot(
- html`
-
-
- `,
- );
+ it('Shadow DOM', async () => {
+ await expect(element).shadowDom.to.be.equalSnapshot();
+ });
+
+ testA11yTreeSnapshot();
+ });
});
diff --git a/src/elements/time-input/time-input.visual.spec.ts b/src/elements/time-input/time-input.visual.spec.ts
new file mode 100644
index 0000000000..accb8e2a25
--- /dev/null
+++ b/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): TemplateResult => html`
+
+ Label
+ ${!args.noIcons ? html` ` : nothing}
+
+
+ ${!args.noIcons
+ ? html` `
+ : nothing}
+ ${args.withError ? html`Error message ` : nothing}
+
+ `;
+
+ 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 }));
+ }),
+ );
+ }
+ });
+});