test(PlaceholderContainer): add smoke visual tests (#2029)

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

@@ -0,0 +1,88 @@
+import {smokeTest, test} from '~playwright/core';
+
+import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+
+import {
+    actionsCases,
+    alignCases,
+    contentCases,
+    descriptionCases,
+    directionCases,
+    sizeCases,
+    titleCases,
+} from './cases';
+import {PlaceholderContainerStories, TestPlaceholderContainerWithImage} from './helpersPlaywright';
+import type {TestPlaceholderContainerProps} from './helpersPlaywright';
+
+test.describe('PlaceholderContainer', {tag: '@PlaceholderContainer'}, () => {
+    test('render story: <Default>', async ({mount, expectScreenshot}) => {
+        await mount(<PlaceholderContainerStories.Default />);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <Direction>', async ({mount, expectScreenshot}) => {
+        await mount(<PlaceholderContainerStories.Direction />);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <Align>', async ({mount, expectScreenshot}) => {
+        await mount(<PlaceholderContainerStories.Align />);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <Size>', async ({mount, expectScreenshot}) => {
+        await mount(<PlaceholderContainerStories.Size />);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <Actions>', async ({mount, expectScreenshot}) => {
+        await mount(<PlaceholderContainerStories.Actions />);
+
+        await expectScreenshot();
+    });
+
+    const commonPropsCases = {
+        size: sizeCases,
+        direction: directionCases,
+        align: alignCases,
+        title: titleCases,
+        description: descriptionCases,
+        content: contentCases,
+        actions: actionsCases,
+    } as const;
+
+    smokeTest('', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<TestPlaceholderContainerProps>(
+            {
+                title: 'Title',
+                description: 'Description',
+            },
+            commonPropsCases,
+        );
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => {
+                    console.log('kekw', props);
+
+                    return (
+                        <div key={title}>
+                            <h4>{title}</h4>
+                            <div>
+                                <TestPlaceholderContainerWithImage {...props} />
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+});

src/components/PlaceholderContainer/__tests__/cases.tsx

@@ -0,0 +1,30 @@
+import type {Cases, CasesWithName} from '../../../stories/tests-factory/models';
+import type {PlaceholderContainerProps} from '../types';
+
+export const sizeCases: Cases<PlaceholderContainerProps['size']> = ['s', 'm', 'l', 'promo'];
+export const directionCases: Cases<PlaceholderContainerProps['direction']> = ['row', 'column'];
+export const alignCases: Cases<PlaceholderContainerProps['align']> = ['left', 'center'];
+export const titleCases: CasesWithName<PlaceholderContainerProps['title']> = [['none', undefined]];
+export const descriptionCases: CasesWithName<PlaceholderContainerProps['description']> = [
+    ['none', undefined],
+];
+export const contentCases: CasesWithName<PlaceholderContainerProps['content']> = [
+    ['has', 'Content'],
+];
+export const actionsCases: CasesWithName<PlaceholderContainerProps['actions']> = [
+    [
+        'has',
+        [
+            {
+                text: 'Main button',
+                view: 'normal',
+                onClick: () => {},
+            },
+            {
+                text: 'Additional button',
+                view: 'flat-secondary',
+                onClick: () => {},
+            },
+        ],
+    ],
+];

src/components/PlaceholderContainer/__tests__/helpersPlaywright.tsx

@@ -0,0 +1,21 @@
+import {composeStories} from '@storybook/react';
+
+import {PlaceholderContainer} from '../PlaceholderContainer';
+import * as stories from '../__stories__/PlaceholderContainer.stories';
+import type {PlaceholderContainerProps} from '../types';
+
+export const PlaceholderContainerStories = composeStories(stories);
+
+export type TestPlaceholderContainerProps = Omit<PlaceholderContainerProps, 'image'>;
+
+const TestImageComponent = () => {
+    return (
+        <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+            <rect fill="#DDDDDD" height="100%" transform="matrix(1 0 0 1 0 0)" width="100%" />
+        </svg>
+    );
+};
+
+export const TestPlaceholderContainerWithImage = (props: TestPlaceholderContainerProps) => {
+    return <PlaceholderContainer image={<TestImageComponent />} {...props} />;
+};