test(Progress): add smoke visual tests (#1804)

src/components/Progress/__tests__/Progress.visual.test.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+
+import {smokeTest, test} from '~playwright/core';
+
+import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import {Progress} from '../Progress';
+
+import {loadingCases, sizeCases, themeCases} from './cases';
+
+test.describe('Progress', {tag: '@Progress'}, () => {
+    smokeTest('smoke', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios(
+            {},
+            {
+                size: sizeCases,
+                theme: themeCases,
+                loading: loadingCases,
+            },
+        );
+
+        await mount(
+            <div style={{width: 400}}>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div style={{width: '200px', height: '50px'}}>
+                            <Progress value={50} text="Text" {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('smoke, with color stops', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios(
+            {},
+            {
+                size: sizeCases,
+                loading: loadingCases,
+            },
+            {
+                scenarioName: 'with color stops',
+            },
+        );
+
+        await mount(
+            <div style={{width: 400}}>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div style={{width: '200px', height: '50px'}}>
+                            <Progress
+                                value={50}
+                                text="Text"
+                                colorStops={[
+                                    {theme: 'danger', stop: 20},
+                                    {theme: 'warning', stop: 50},
+                                    {theme: 'success', stop: 100},
+                                ]}
+                                {...props}
+                            />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('smoke, with stack', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios(
+            {},
+            {
+                size: sizeCases,
+                loading: loadingCases,
+            },
+            {
+                scenarioName: 'with stack',
+            },
+        );
+
+        await mount(
+            <div style={{width: 400}}>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div style={{width: '200px', height: '50px'}}>
+                            <Progress
+                                value={50}
+                                text="Text"
+                                stack={[
+                                    {theme: 'default', content: 'First', value: 25},
+                                    {theme: 'success', content: 'Second', value: 25},
+                                    {theme: 'warning', content: 'Third', value: 25},
+                                    {theme: 'danger', content: 'Fourth', value: 25},
+                                ]}
+                                {...props}
+                            />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+});

src/components/Progress/__tests__/cases.tsx

@@ -0,0 +1,13 @@
+import type {Cases} from '../../../stories/tests-factory/models';
+import type {ProgressProps} from '../types';
+
+export const sizeCases: Cases<ProgressProps['size']> = ['xs', 's', 'm'];
+export const themeCases: Cases<ProgressProps['theme']> = [
+    'default',
+    'success',
+    'warning',
+    'danger',
+    'info',
+    'misc',
+];
+export const loadingCases: Cases<ProgressProps['loading']> = [true];