test(Card): add smoke visual tests (#1773)

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

@@ -1,10 +1,22 @@
 import React from 'react';
 
-import {test} from '~playwright/core';
-
+import {smokeTest, test} from '~playwright/core';
+
+import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import type {CardProps} from '../Card';
+import {Card} from '../Card';
+
+import {
+    containerViewCases,
+    disabledCases,
+    selectedCases,
+    selectionViewCases,
+    sizeCases,
+    themeCases,
+} from './cases';
 import {CardStories} from './helpersPlaywright';
 
-test.describe('Card', () => {
+test.describe('Card', {tag: '@Card'}, () => {
     test('render story: <Default>', async ({mount, expectScreenshot}) => {
         await mount(<CardStories.Default />);
 
@@ -46,4 +58,130 @@ test.describe('Card', () => {
 
         await expectScreenshot();
     });
+
+    smokeTest('smoke, selection type', async ({mount, expectScreenshot}) => {
+        const defaultProps: CardProps = {
+            children: null,
+        };
+
+        const smokeScenarios = createSmokeScenarios(
+            {
+                ...defaultProps,
+                type: 'selection',
+            } as const,
+            {
+                size: sizeCases,
+                disabled: disabledCases,
+                selected: selectedCases,
+                view: selectionViewCases,
+            },
+            {
+                scenarioName: 'selection',
+            },
+        );
+
+        await mount(
+            <div style={{width: 400}}>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <Card {...props}>
+                                <div data-qa="content" style={{padding: '10px'}}>
+                                    Some text
+                                </div>
+                            </Card>
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('smoke, action type', async ({mount, expectScreenshot}) => {
+        const defaultProps: CardProps = {
+            children: null,
+        };
+
+        const smokeScenarios = createSmokeScenarios(
+            {
+                ...defaultProps,
+                type: 'action',
+                onClick: () => {},
+            } as const,
+            {
+                size: sizeCases,
+                disabled: disabledCases,
+            },
+            {
+                scenarioName: 'selection',
+            },
+        );
+
+        await mount(
+            <div style={{width: 400}}>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <Card {...props}>
+                                <div data-qa="content" style={{padding: '10px'}}>
+                                    Some text
+                                </div>
+                            </Card>
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('smoke, container type', async ({mount, expectScreenshot}) => {
+        const defaultProps: CardProps = {
+            children: null,
+        };
+
+        const smokeScenarios = createSmokeScenarios(
+            {
+                ...defaultProps,
+                type: 'container',
+            } as const,
+            {
+                size: sizeCases,
+                disabled: disabledCases,
+                view: containerViewCases,
+                theme: themeCases,
+            },
+            {
+                scenarioName: 'selection',
+            },
+        );
+
+        await mount(
+            <div style={{width: 400}}>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <Card {...props}>
+                                <div style={{padding: '10px'}}>Some text</div>
+                            </Card>
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
 });

src/components/Card/__tests__/cases.tsx

@@ -0,0 +1,20 @@
+import type {Cases, CasesWithName} from '../../../stories/tests-factory/models';
+import type {CardProps} from '../Card';
+
+export const sizeCases: Array<CardProps['size']> = ['m', 'l'];
+
+export const disabledCases: CasesWithName<CardProps['disabled']> = [['disabled', true]];
+
+export const selectedCases: CasesWithName<CardProps['selected']> = [['selected', true]];
+
+export const selectionViewCases: Cases<CardProps['view']> = ['outlined', 'clear'];
+export const containerViewCases: Cases<CardProps['view']> = ['outlined', 'filled', 'raised'];
+
+export const themeCases: Cases<CardProps['theme']> = [
+    'normal',
+    'info',
+    'success',
+    'warning',
+    'danger',
+    'utility',
+];