Skip to content

Commit

Permalink
test(sbb-slider): add visual tests (#2896)
Browse files Browse the repository at this point in the history
  • Loading branch information
@DavideMininni-Fincons
DavideMininni-Fincons authored Jul 8, 2024
1 parent 83ede30 commit c2adeb2
Show file tree
Hide file tree
Showing 4 changed files with 219 additions and 123 deletions.
180 changes: 90 additions & 90 deletions src/elements/slider/__snapshots__/slider.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-slider should render DOM"] =
snapshots["sbb-slider renders DOM"] =
`<sbb-slider
aria-valuemax="100"
aria-valuemin="0"
Expand All @@ -13,9 +13,9 @@ snapshots["sbb-slider should render DOM"] =
>
</sbb-slider>
`;
/* end snapshot sbb-slider should render DOM */
/* end snapshot sbb-slider renders DOM */

snapshots["sbb-slider should render Shadow DOM"] =
snapshots["sbb-slider renders Shadow DOM"] =
`<div class="sbb-slider__height-container">
<div class="sbb-slider__wrapper">
<slot name="prefix">
Expand Down Expand Up @@ -44,30 +44,9 @@ snapshots["sbb-slider should render Shadow DOM"] =
</div>
</div>
`;
/* end snapshot sbb-slider should render Shadow DOM */
/* end snapshot sbb-slider renders Shadow DOM */

snapshots["sbb-slider should render A11y tree Chrome"] =
`<p>
{
"role": "WebArea",
"name": "",
"children": [
{
"role": "slider",
"name": "",
"valuetext": "",
"valuemin": 0,
"valuemax": 100,
"orientation": "horizontal",
"value": 1
}
]
}
</p>
`;
/* end snapshot sbb-slider should render A11y tree Chrome */

snapshots["sbb-slider should render with properties DOM"] =
snapshots["sbb-slider renders with properties DOM"] =
`<sbb-slider
aria-valuemax="500"
aria-valuemin="0"
Expand All @@ -83,9 +62,9 @@ snapshots["sbb-slider should render with properties DOM"] =
>
</sbb-slider>
`;
/* end snapshot sbb-slider should render with properties DOM */
/* end snapshot sbb-slider renders with properties DOM */

snapshots["sbb-slider should render with properties Shadow DOM"] =
snapshots["sbb-slider renders with properties Shadow DOM"] =
`<div class="sbb-slider__height-container">
<div class="sbb-slider__wrapper">
<slot name="prefix">
Expand Down Expand Up @@ -128,30 +107,9 @@ snapshots["sbb-slider should render with properties Shadow DOM"] =
</div>
</div>
`;
/* end snapshot sbb-slider should render with properties Shadow DOM */

snapshots["sbb-slider should render with properties A11y tree Chrome"] =
`<p>
{
"role": "WebArea",
"name": "",
"children": [
{
"role": "slider",
"name": "",
"valuetext": "",
"valuemin": 0,
"valuemax": 500,
"orientation": "horizontal",
"value": 100
}
]
}
</p>
`;
/* end snapshot sbb-slider should render with properties A11y tree Chrome */
/* end snapshot sbb-slider renders with properties Shadow DOM */

snapshots["sbb-slider should render disabled DOM"] =
snapshots["sbb-slider renders disabled DOM"] =
`<sbb-slider
aria-disabled="true"
aria-valuemax="500"
Expand All @@ -168,9 +126,9 @@ snapshots["sbb-slider should render disabled DOM"] =
>
</sbb-slider>
`;
/* end snapshot sbb-slider should render disabled DOM */
/* end snapshot sbb-slider renders disabled DOM */

snapshots["sbb-slider should render disabled Shadow DOM"] =
snapshots["sbb-slider renders disabled Shadow DOM"] =
`<div class="sbb-slider__height-container">
<div class="sbb-slider__wrapper">
<slot name="prefix">
Expand Down Expand Up @@ -214,31 +172,9 @@ snapshots["sbb-slider should render disabled Shadow DOM"] =
</div>
</div>
`;
/* end snapshot sbb-slider should render disabled Shadow DOM */

snapshots["sbb-slider should render disabled A11y tree Chrome"] =
`<p>
{
"role": "WebArea",
"name": "",
"children": [
{
"role": "slider",
"name": "",
"valuetext": "",
"disabled": true,
"valuemin": 0,
"valuemax": 500,
"orientation": "horizontal",
"value": 100
}
]
}
</p>
`;
/* end snapshot sbb-slider should render disabled A11y tree Chrome */
/* end snapshot sbb-slider renders disabled Shadow DOM */

snapshots["sbb-slider should render readonly DOM"] =
snapshots["sbb-slider renders readonly DOM"] =
`<sbb-slider
aria-readonly="true"
aria-valuemax="500"
Expand All @@ -256,9 +192,9 @@ snapshots["sbb-slider should render readonly DOM"] =
>
</sbb-slider>
`;
/* end snapshot sbb-slider should render readonly DOM */
/* end snapshot sbb-slider renders readonly DOM */

snapshots["sbb-slider should render readonly Shadow DOM"] =
snapshots["sbb-slider renders readonly Shadow DOM"] =
`<div class="sbb-slider__height-container">
<div class="sbb-slider__wrapper">
<slot name="prefix">
Expand Down Expand Up @@ -302,9 +238,73 @@ snapshots["sbb-slider should render readonly Shadow DOM"] =
</div>
</div>
`;
/* end snapshot sbb-slider should render readonly Shadow DOM */
/* end snapshot sbb-slider renders readonly Shadow DOM */

snapshots["sbb-slider renders A11y tree Chrome"] =
`<p>
{
"role": "WebArea",
"name": "",
"children": [
{
"role": "slider",
"name": "",
"valuetext": "",
"valuemin": 0,
"valuemax": 100,
"orientation": "horizontal",
"value": 1
}
]
}
</p>
`;
/* end snapshot sbb-slider renders A11y tree Chrome */

snapshots["sbb-slider renders with properties A11y tree Chrome"] =
`<p>
{
"role": "WebArea",
"name": "",
"children": [
{
"role": "slider",
"name": "",
"valuetext": "",
"valuemin": 0,
"valuemax": 500,
"orientation": "horizontal",
"value": 100
}
]
}
</p>
`;
/* end snapshot sbb-slider renders with properties A11y tree Chrome */

snapshots["sbb-slider renders disabled A11y tree Chrome"] =
`<p>
{
"role": "WebArea",
"name": "",
"children": [
{
"role": "slider",
"name": "",
"valuetext": "",
"disabled": true,
"valuemin": 0,
"valuemax": 500,
"orientation": "horizontal",
"value": 100
}
]
}
</p>
`;
/* end snapshot sbb-slider renders disabled A11y tree Chrome */

snapshots["sbb-slider should render readonly A11y tree Chrome"] =
snapshots["sbb-slider renders readonly A11y tree Chrome"] =
`<p>
{
"role": "WebArea",
Expand All @@ -323,9 +323,9 @@ snapshots["sbb-slider should render readonly A11y tree Chrome"] =
}
</p>
`;
/* end snapshot sbb-slider should render readonly A11y tree Chrome */
/* end snapshot sbb-slider renders readonly A11y tree Chrome */

snapshots["sbb-slider should render A11y tree Firefox"] =
snapshots["sbb-slider renders A11y tree Firefox"] =
`<p>
{
"role": "document",
Expand All @@ -341,9 +341,9 @@ snapshots["sbb-slider should render A11y tree Firefox"] =
}
</p>
`;
/* end snapshot sbb-slider should render A11y tree Firefox */
/* end snapshot sbb-slider renders A11y tree Firefox */

snapshots["sbb-slider should render with properties A11y tree Firefox"] =
snapshots["sbb-slider renders with properties A11y tree Firefox"] =
`<p>
{
"role": "document",
Expand All @@ -359,9 +359,9 @@ snapshots["sbb-slider should render with properties A11y tree Firefox"] =
}
</p>
`;
/* end snapshot sbb-slider should render with properties A11y tree Firefox */
/* end snapshot sbb-slider renders with properties A11y tree Firefox */

snapshots["sbb-slider should render disabled A11y tree Firefox"] =
snapshots["sbb-slider renders disabled A11y tree Firefox"] =
`<p>
{
"role": "document",
Expand All @@ -378,9 +378,9 @@ snapshots["sbb-slider should render disabled A11y tree Firefox"] =
}
</p>
`;
/* end snapshot sbb-slider should render disabled A11y tree Firefox */
/* end snapshot sbb-slider renders disabled A11y tree Firefox */

snapshots["sbb-slider should render readonly A11y tree Firefox"] =
snapshots["sbb-slider renders readonly A11y tree Firefox"] =
`<p>
{
"role": "document",
Expand All @@ -396,5 +396,5 @@ snapshots["sbb-slider should render readonly A11y tree Firefox"] =
}
</p>
`;
/* end snapshot sbb-slider should render readonly A11y tree Firefox */
/* end snapshot sbb-slider renders readonly A11y tree Firefox */

8 changes: 4 additions & 4 deletions src/elements/slider/slider.snapshot.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import './slider.js';
describe(`sbb-slider`, () => {
let element: SbbSliderElement;

describe('should render', async () => {
describe('renders', async () => {
beforeEach(async () => {
element = await fixture(html`<sbb-slider value="1"></sbb-slider>`);
});
Expand All @@ -26,7 +26,7 @@ describe(`sbb-slider`, () => {
testA11yTreeSnapshot();
});

describe('should render with properties', async () => {
describe('renders with properties', async () => {
beforeEach(async () => {
element = await fixture(
html`<sbb-slider
Expand All @@ -50,7 +50,7 @@ describe(`sbb-slider`, () => {
testA11yTreeSnapshot();
});

describe('should render disabled', async () => {
describe('renders disabled', async () => {
beforeEach(async () => {
element = await fixture(
html`<sbb-slider
Expand All @@ -75,7 +75,7 @@ describe(`sbb-slider`, () => {
testA11yTreeSnapshot();
});

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

0 comments on commit c2adeb2

Please sign in to comment.