Skip to content

Commit

Permalink
test(Slider): update snapshots
Browse files Browse the repository at this point in the history
  • Loading branch information
itwillwork committed Dec 27, 2024
1 parent 2d0959b commit b677033
Show file tree
Hide file tree
Showing 125 changed files with 111 additions and 81 deletions.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
192 changes: 111 additions & 81 deletions src/components/Slider/__tests__/Slider.visual.test.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import type * as React from 'react';

import {test} from '~playwright/core';
import {smokeTest, test} from '~playwright/core';

import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
import {Slider} from '../Slider';
Expand All @@ -17,56 +17,77 @@ import {
} from './cases';

test.describe('Slider', {tag: '@Slider'}, () => {
const defaultWrapStyle: React.CSSProperties = {
width: 300,
height: 50,
paddingBottom: 20,
};

const defaultProps: SliderProps = {
value: 40,
min: 0,
max: 100,
onUpdate: () => {},
};

createSmokeScenarios(defaultProps, {
size: sizeCases,
disabled: disabledCases,
validationState: validationStateCases,
hasTooltip: hasTooltipCases,
marksCount: marksCountCases,
step: stepCases,
availableValues: availableValuesCases,
}).forEach(([title, details, props]) => {
test(title, details, async ({mount, expectScreenshot}) => {
await mount(
<div style={{width: 300, height: 50}}>
<Slider {...props} />
</div>,
);

await expectScreenshot();
});
});

createSmokeScenarios<SliderProps>(
{
...defaultProps,
validationState: 'invalid',
errorMessage: 'Error message',
},
{
smokeTest('', async ({mount, expectScreenshot}) => {
const smokeScenarios = createSmokeScenarios(defaultProps, {
size: sizeCases,
disabled: disabledCases,
validationState: validationStateCases,
hasTooltip: hasTooltipCases,
marksCount: marksCountCases,
step: stepCases,
},
{
scenarioName: 'with error',
},
).forEach(([title, details, props]) => {
test(title, details, async ({mount, expectScreenshot}) => {
await mount(
<div style={{width: 300, height: 200}}>
<Slider {...props} />
</div>,
);

await expectScreenshot();
availableValues: availableValuesCases,
});

await mount(
<div>
{smokeScenarios.map(([title, props]) => (
<div key={title}>
<h4>{title}</h4>
<div style={defaultWrapStyle}>
<Slider {...props} />
</div>
</div>
))}
</div>,
);

await expectScreenshot({
themes: ['light'],
});
});

smokeTest('with error', async ({mount, expectScreenshot}) => {
const smokeScenarios = createSmokeScenarios<SliderProps>(
{
...defaultProps,
validationState: 'invalid',
errorMessage: 'Error message',
},
{
hasTooltip: hasTooltipCases,
marksCount: marksCountCases,
step: stepCases,
},
);

await mount(
<div>
{smokeScenarios.map(([title, props]) => (
<div key={title}>
<h4>{title}</h4>
<div style={defaultWrapStyle}>
<Slider {...props} />
</div>
</div>
))}
</div>,
);

await expectScreenshot({
themes: ['light'],
});
});

Expand All @@ -77,55 +98,64 @@ test.describe('Slider', {tag: '@Slider'}, () => {
onUpdate: () => {},
};

createSmokeScenarios<SliderProps>(
defaultRangeProps,
{
smokeTest('range value', async ({mount, expectScreenshot}) => {
const smokeScenarios = createSmokeScenarios<SliderProps>(defaultRangeProps, {
size: sizeCases,
disabled: disabledCases,
validationState: validationStateCases,
hasTooltip: hasTooltipCases,
marksCount: marksCountCases,
step: stepCases,
availableValues: availableValuesCases,
},
{
scenarioName: 'range',
},
).forEach(([title, details, props]) => {
test(title, details, async ({mount, expectScreenshot}) => {
await mount(
<div style={{width: 300, height: 50}}>
<Slider {...props} />
</div>,
);

await expectScreenshot();
});

await mount(
<div>
{smokeScenarios.map(([title, props]) => (
<div key={title}>
<h4>{title}</h4>
<div style={defaultWrapStyle}>
<Slider {...props} />
</div>
</div>
))}
</div>,
);

await expectScreenshot({
themes: ['light'],
});
});

createSmokeScenarios<SliderProps>(
{
...defaultRangeProps,
validationState: 'invalid',
errorMessage: 'Error message',
},
{
hasTooltip: hasTooltipCases,
marksCount: marksCountCases,
step: stepCases,
},
{
scenarioName: 'range with error',
},
).forEach(([title, details, props]) => {
test(title, details, async ({mount, expectScreenshot}) => {
await mount(
<div style={{width: 300, height: 200}}>
<Slider {...props} />
</div>,
);

await expectScreenshot();
smokeTest('range value with error', async ({mount, expectScreenshot}) => {
const smokeScenarios = createSmokeScenarios<SliderProps>(
{
...defaultRangeProps,
validationState: 'invalid',
errorMessage: 'Error message',
},
{
hasTooltip: hasTooltipCases,
marksCount: marksCountCases,
step: stepCases,
},
);

await mount(
<div>
{smokeScenarios.map(([title, props]) => (
<div key={title}>
<h4>{title}</h4>
<div style={defaultWrapStyle}>
<Slider {...props} />
</div>
</div>
))}
</div>,
);

await expectScreenshot({
themes: ['light'],
});
});
});

0 comments on commit b677033

Please sign in to comment.