@@ -183,25 +183,26 @@ snapshots["sbb-checkbox-panel should render unchecked disabled Shadow DOM"] =
`;
-/* end snapshot sbb-checkbox-panel should render unchecked disabled Shadow DOM */
+/* end snapshot sbb-checkbox-panel renders unchecked disabled Shadow DOM */
-snapshots["sbb-checkbox-panel Unchecked - A11y tree Firefox"] =
+snapshots["sbb-checkbox-panel Unchecked - A11y tree Chrome"] =
`
{
- "role": "document",
+ "role": "WebArea",
"name": "",
"children": [
{
"role": "checkbox",
- "name": " Label"
+ "name": " Label",
+ "checked": false
}
]
}
`;
-/* end snapshot sbb-checkbox-panel Unchecked - A11y tree Firefox */
+/* end snapshot sbb-checkbox-panel Unchecked - A11y tree Chrome */
-snapshots["sbb-checkbox-panel Unchecked - A11y tree Chrome"] =
+snapshots["sbb-checkbox-panel Checked - A11y tree Chrome"] =
`
{
"role": "WebArea",
@@ -210,30 +211,29 @@ snapshots["sbb-checkbox-panel Unchecked - A11y tree Chrome"] =
{
"role": "checkbox",
"name": " Label",
- "checked": false
+ "checked": true
}
]
}
`;
-/* end snapshot sbb-checkbox-panel Unchecked - A11y tree Chrome */
+/* end snapshot sbb-checkbox-panel Checked - A11y tree Chrome */
-snapshots["sbb-checkbox-panel Checked - A11y tree Chrome"] =
+snapshots["sbb-checkbox-panel Unchecked - A11y tree Firefox"] =
`
{
- "role": "WebArea",
+ "role": "document",
"name": "",
"children": [
{
"role": "checkbox",
- "name": " Label",
- "checked": true
+ "name": " Label"
}
]
}
`;
-/* end snapshot sbb-checkbox-panel Checked - A11y tree Chrome */
+/* end snapshot sbb-checkbox-panel Unchecked - A11y tree Firefox */
snapshots["sbb-checkbox-panel Checked - A11y tree Firefox"] =
`
diff --git a/src/elements/checkbox/checkbox-panel/checkbox-panel.snapshot.spec.ts b/src/elements/checkbox/checkbox-panel/checkbox-panel.snapshot.spec.ts
index 6d729e4e55..63ca157f85 100644
--- a/src/elements/checkbox/checkbox-panel/checkbox-panel.snapshot.spec.ts
+++ b/src/elements/checkbox/checkbox-panel/checkbox-panel.snapshot.spec.ts
@@ -8,7 +8,7 @@ import { SbbCheckboxPanelElement } from './checkbox-panel.js';
describe('sbb-checkbox-panel', () => {
let element: SbbCheckboxPanelElement;
- describe('should render unchecked', async () => {
+ describe('renders unchecked', async () => {
beforeEach(async () => {
element = (await fixture(
html` {
});
});
- describe('should render checked', async () => {
+ describe('renders checked', async () => {
beforeEach(async () => {
element = (await fixture(
html` {
});
});
- describe('should render indeterminate', async () => {
+ describe('renders indeterminate', async () => {
beforeEach(async () => {
element = (await fixture(
html` {
});
});
- describe('should render unchecked disabled', async () => {
+ describe('renders unchecked disabled', async () => {
beforeEach(async () => {
element = (await fixture(
html` {
+ const defaultArgs = {
+ state: 'unchecked',
+ disabled: false,
+ color: 'white',
+ borderless: false,
+ size: 'm',
+ };
+
+ const template = ({
+ state,
+ disabled,
+ color,
+ borderless,
+ size,
+ }: typeof defaultArgs): TemplateResult =>
+ html`
+ Label ${size}
+ Subtext
+
+
+
+
+ CHF 40.00
+
+
+
+ %
+ `;
+
+ describeViewports({ viewports: ['zero', 'medium'] }, () => {
+ for (const state of ['checked', 'unchecked', 'indeterminate']) {
+ const args = { ...defaultArgs, state };
+ for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) {
+ it(
+ `state=${state} ${visualDiffState.name}`,
+ visualDiffState.with(async (setup) => {
+ await setup.withFixture(template(args));
+ }),
+ );
+ }
+
+ it(
+ `state=${state} disabled ${visualDiffDefault.name}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template({ ...args, disabled: true }));
+ }),
+ );
+ }
+
+ it(
+ `color=milk ${visualDiffDefault.name}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template({ ...defaultArgs, color: 'milk' }));
+ }),
+ );
+
+ it(
+ `size=s ${visualDiffDefault.name}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template({ ...defaultArgs, size: 's' }));
+ }),
+ );
+
+ it(
+ `borderless ${visualDiffDefault.name}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template({ ...defaultArgs, borderless: true }));
+ }),
+ );
+ });
+});
diff --git a/src/elements/checkbox/checkbox/checkbox.visual.spec.ts b/src/elements/checkbox/checkbox/checkbox.visual.spec.ts
new file mode 100644
index 0000000000..d9cecff44f
--- /dev/null
+++ b/src/elements/checkbox/checkbox/checkbox.visual.spec.ts
@@ -0,0 +1,76 @@
+import { html, nothing, type TemplateResult } from 'lit';
+
+import {
+ describeViewports,
+ visualDiffDefault,
+ visualDiffFocus,
+} from '../../core/testing/private.js';
+
+import './checkbox.js';
+
+describe('sbb-checkbox', () => {
+ const defaultArgs = {
+ size: 'm',
+ disabled: false,
+ iconName: undefined as string | undefined,
+ iconPlacement: undefined as string | undefined,
+ };
+
+ describeViewports({ viewports: ['zero', 'medium'] }, () => {
+ for (const state of ['checked', 'unchecked', 'indeterminate']) {
+ const template = ({
+ size,
+ disabled,
+ iconName,
+ iconPlacement,
+ }: typeof defaultArgs): TemplateResult => html`
+ Label
+ `;
+
+ for (const forcedColors of [false, true]) {
+ for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) {
+ it(
+ `${state} forcedColors=${forcedColors} ${visualDiffState.name}`,
+ visualDiffState.with(async (setup) => {
+ await setup.withFixture(template(defaultArgs), { forcedColors });
+ }),
+ );
+
+ it(
+ `${state} forcedColors=${forcedColors} disabled`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template({ ...defaultArgs, disabled: true }), {
+ forcedColors,
+ });
+ }),
+ );
+ }
+ }
+
+ it(
+ `${state} size=s`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template({ ...defaultArgs, size: 's' }));
+ }),
+ );
+
+ for (const iconPlacement of ['start', 'end']) {
+ it(
+ `${state} iconPlacement=${iconPlacement}`,
+ visualDiffDefault.with(async (setup) => {
+ const args = { ...defaultArgs, iconName: 'tickets-class-small', iconPlacement };
+ await setup.withFixture(template(args));
+ }),
+ );
+ }
+ }
+ });
+});