Skip to content

Commit

Permalink
test: add visual tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@DavideMininni-Fincons
DavideMininni-Fincons committed Jul 1, 2024
1 parent 6d1c454 commit f60e7bf
Show file tree
Hide file tree
Showing 4 changed files with 200 additions and 42 deletions.
81 changes: 71 additions & 10 deletions src/elements/checkbox/checkbox-group/checkbox-group.visual.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,11 @@ import {
visualDiffFocus,
} from '../../core/testing/private.js';

import '../../card.js';
import '../../form-error.js';
import '../../icon.js';
import '../checkbox.js';
import '../checkbox-panel.js';
import './checkbox-group.js';

describe('sbb-checkbox-group', () => {
Expand All @@ -22,14 +25,14 @@ describe('sbb-checkbox-group', () => {
orientation: 'horizontal',
disabled: false,
required: false,
horizontalFrom: undefined,
horizontalFrom: undefined as string | undefined,
size: 'm',
label: 'Label',
iconName: undefined as string | undefined,
iconPlacement: undefined as string | undefined,
};

const template = ({
const checkboxesTemplate = ({
orientation,
disabled,
required,
Expand All @@ -50,7 +53,7 @@ describe('sbb-checkbox-group', () => {
(_, index) => html`
<sbb-checkbox
value="checkbox-${index}"
?checked=${index === 0 && true}
?checked=${index === 0}
icon-name=${iconName || nothing}
icon-placement=${iconPlacement || nothing}
>
Expand All @@ -64,43 +67,77 @@ describe('sbb-checkbox-group', () => {
</sbb-checkbox-group>
`;

const panelsTemplate = ({
orientation,
disabled,
horizontalFrom,
size,
}: typeof defaultArgs): TemplateResult => html`
<sbb-checkbox-group
orientation=${orientation}
horizontal-from=${horizontalFrom || nothing}
size=${size}
.disabled=${disabled}
>
${repeat(
new Array(2),
(_, index) => html`
<sbb-checkbox-panel value="checkbox-${index}" ?checked=${index === 0}>
Label ${index}
<span slot="subtext">Subtext</span>
<span slot="suffix" style="margin-inline-start: auto;">
<span style="display: flex; align-items: center;">
<sbb-icon
name="diamond-small"
style="margin-inline: var(--sbb-spacing-fixed-2x);"
></sbb-icon>
<span class="sbb-text-m sbb-text--bold">CHF 40.00</span>
</span>
</span>
<sbb-card-badge>%</sbb-card-badge>
</sbb-checkbox-panel>
`,
)}
</sbb-checkbox-group>
`;

describeViewports({ viewports: ['small', 'medium'] }, () => {
for (const orientation of ['horizontal', 'vertical']) {
const args = { ...defaultArgs, orientation };
for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) {
it(
`${orientation} ${visualDiffState.name}`,
visualDiffState.with(async (setup) => {
await setup.withFixture(template(args));
await setup.withFixture(checkboxesTemplate(args));
}),
);
}

it(
`${orientation} size=s ${visualDiffDefault.name}`,
visualDiffDefault.with(async (setup) => {
await setup.withFixture(template({ ...args, size: 's' }));
await setup.withFixture(checkboxesTemplate({ ...args, size: 's' }));
}),
);

it(
`${orientation} disabled ${visualDiffDefault.name}`,
visualDiffDefault.with(async (setup) => {
await setup.withFixture(template({ ...args, disabled: true }));
await setup.withFixture(checkboxesTemplate({ ...args, disabled: true }));
}),
);

it(
`${orientation} required ${visualDiffDefault.name}`,
visualDiffDefault.with(async (setup) => {
await setup.withFixture(template({ ...args, required: true }));
await setup.withFixture(checkboxesTemplate({ ...args, required: true }));
}),
);

it(
`${orientation} label=ellipsis ${visualDiffDefault.name}`,
`${orientation} label=long ${visualDiffDefault.name}`,
visualDiffDefault.with(async (setup) => {
await setup.withFixture(template({ ...args, label: longLabelText }));
await setup.withFixture(checkboxesTemplate({ ...args, label: longLabelText }));
}),
);

Expand All @@ -109,11 +146,35 @@ describe('sbb-checkbox-group', () => {
`${orientation} iconPlacement=${iconPlacement} ${visualDiffDefault.name}`,
visualDiffDefault.with(async (setup) => {
await setup.withFixture(
template({ ...args, iconName: 'tickets-class-small', iconPlacement }),
checkboxesTemplate({ ...args, iconName: 'tickets-class-small', iconPlacement }),
);
}),
);
}

it(
`${orientation} template=panel ${visualDiffDefault.name}`,
visualDiffDefault.with(async (setup) => {
await setup.withFixture(panelsTemplate(args));
}),
);
}

describe('horizontalFrom=medium', () => {
const args = { ...defaultArgs, orientation: 'vertical', horizontalFrom: 'medium' };
it(
`checkbox ${visualDiffDefault.name}`,
visualDiffDefault.with(async (setup) => {
await setup.withFixture(checkboxesTemplate(args));
}),
);

it(
`panel ${visualDiffDefault.name}`,
visualDiffDefault.with(async (setup) => {
await setup.withFixture(panelsTemplate(args));
}),
);
});
});
});
56 changes: 28 additions & 28 deletions src/elements/checkbox/checkbox-panel/__snapshots__/checkbox-panel.snapshot.spec.snap.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* @web/test-runner snapshot v1 */
export const snapshots = {};

snapshots["sbb-checkbox-panel should render unchecked DOM"] =
snapshots["sbb-checkbox-panel renders unchecked DOM"] =
`<sbb-checkbox-panel
data-slot-names="subtext suffix unnamed"
size="m"
Expand All @@ -16,9 +16,9 @@ snapshots["sbb-checkbox-panel should render unchecked DOM"] =
</span>
</sbb-checkbox-panel>
`;
/* end snapshot sbb-checkbox-panel should render unchecked DOM */
/* end snapshot sbb-checkbox-panel renders unchecked DOM */

snapshots["sbb-checkbox-panel should render unchecked Shadow DOM"] =
snapshots["sbb-checkbox-panel renders unchecked Shadow DOM"] =
`<span class="sbb-selection-panel">
<div class="sbb-selection-panel__badge">
<slot name="badge">
Expand All @@ -44,9 +44,9 @@ snapshots["sbb-checkbox-panel should render unchecked Shadow DOM"] =
</span>
</span>
`;
/* end snapshot sbb-checkbox-panel should render unchecked Shadow DOM */
/* end snapshot sbb-checkbox-panel renders unchecked Shadow DOM */

snapshots["sbb-checkbox-panel should render checked DOM"] =
snapshots["sbb-checkbox-panel renders checked DOM"] =
`<sbb-checkbox-panel
checked=""
data-checked=""
Expand All @@ -63,9 +63,9 @@ snapshots["sbb-checkbox-panel should render checked DOM"] =
</span>
</sbb-checkbox-panel>
`;
/* end snapshot sbb-checkbox-panel should render checked DOM */
/* end snapshot sbb-checkbox-panel renders checked DOM */

snapshots["sbb-checkbox-panel should render checked Shadow DOM"] =
snapshots["sbb-checkbox-panel renders checked Shadow DOM"] =
`<span class="sbb-selection-panel">
<div class="sbb-selection-panel__badge">
<slot name="badge">
Expand All @@ -91,9 +91,9 @@ snapshots["sbb-checkbox-panel should render checked Shadow DOM"] =
</span>
</span>
`;
/* end snapshot sbb-checkbox-panel should render checked Shadow DOM */
/* end snapshot sbb-checkbox-panel renders checked Shadow DOM */

snapshots["sbb-checkbox-panel should render indeterminate DOM"] =
snapshots["sbb-checkbox-panel renders indeterminate DOM"] =
`<sbb-checkbox-panel
data-slot-names="subtext suffix unnamed"
indeterminate=""
Expand All @@ -109,9 +109,9 @@ snapshots["sbb-checkbox-panel should render indeterminate DOM"] =
</span>
</sbb-checkbox-panel>
`;
/* end snapshot sbb-checkbox-panel should render indeterminate DOM */
/* end snapshot sbb-checkbox-panel renders indeterminate DOM */

snapshots["sbb-checkbox-panel should render indeterminate Shadow DOM"] =
snapshots["sbb-checkbox-panel renders indeterminate Shadow DOM"] =
`<span class="sbb-selection-panel">
<div class="sbb-selection-panel__badge">
<slot name="badge">
Expand All @@ -137,9 +137,9 @@ snapshots["sbb-checkbox-panel should render indeterminate Shadow DOM"] =
</span>
</span>
`;
/* end snapshot sbb-checkbox-panel should render indeterminate Shadow DOM */
/* end snapshot sbb-checkbox-panel renders indeterminate Shadow DOM */

snapshots["sbb-checkbox-panel should render unchecked disabled DOM"] =
snapshots["sbb-checkbox-panel renders unchecked disabled DOM"] =
`<sbb-checkbox-panel
data-slot-names="subtext suffix unnamed"
disabled=""
Expand All @@ -155,9 +155,9 @@ snapshots["sbb-checkbox-panel should render unchecked disabled DOM"] =
</span>
</sbb-checkbox-panel>
`;
/* end snapshot sbb-checkbox-panel should render unchecked disabled DOM */
/* end snapshot sbb-checkbox-panel renders unchecked disabled DOM */

snapshots["sbb-checkbox-panel should render unchecked disabled Shadow DOM"] =
snapshots["sbb-checkbox-panel renders unchecked disabled Shadow DOM"] =
`<span class="sbb-selection-panel">
<div class="sbb-selection-panel__badge">
<slot name="badge">
Expand All @@ -183,25 +183,26 @@ snapshots["sbb-checkbox-panel should render unchecked disabled Shadow DOM"] =
</span>
</span>
`;
/* 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"] =
`<p>
{
"role": "document",
"role": "WebArea",
"name": "",
"children": [
{
"role": "checkbox",
"name": "​ Label"
"name": "​ Label",
"checked": false
}
]
}
</p>
`;
/* 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"] =
`<p>
{
"role": "WebArea",
Expand All @@ -210,30 +211,29 @@ snapshots["sbb-checkbox-panel Unchecked - A11y tree Chrome"] =
{
"role": "checkbox",
"name": "​ Label",
"checked": false
"checked": true
}
]
}
</p>
`;
/* 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"] =
`<p>
{
"role": "WebArea",
"role": "document",
"name": "",
"children": [
{
"role": "checkbox",
"name": "​ Label",
"checked": true
"name": "​ Label"
}
]
}
</p>
`;
/* 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"] =
`<p>
Expand Down
8 changes: 4 additions & 4 deletions src/elements/checkbox/checkbox-panel/checkbox-panel.snapshot.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`<sbb-checkbox-panel
Expand All @@ -29,7 +29,7 @@ describe('sbb-checkbox-panel', () => {
});
});

describe('should render checked', async () => {
describe('renders checked', async () => {
beforeEach(async () => {
element = (await fixture(
html`<sbb-checkbox-panel checked
Expand All @@ -49,7 +49,7 @@ describe('sbb-checkbox-panel', () => {
});
});

describe('should render indeterminate', async () => {
describe('renders indeterminate', async () => {
beforeEach(async () => {
element = (await fixture(
html`<sbb-checkbox-panel indeterminate
Expand All @@ -69,7 +69,7 @@ describe('sbb-checkbox-panel', () => {
});
});

describe('should render unchecked disabled', async () => {
describe('renders unchecked disabled', async () => {
beforeEach(async () => {
element = (await fixture(
html`<sbb-checkbox-panel disabled
Expand Down
Loading

0 comments on commit f60e7bf

Please sign in to comment.