diff --git a/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Actions-dark-chromium-linux.png b/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Actions-dark-chromium-linux.png new file mode 100644 index 0000000000..c35df78e06 Binary files /dev/null and b/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Actions-dark-chromium-linux.png differ diff --git a/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Actions-light-chromium-linux.png b/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Actions-light-chromium-linux.png new file mode 100644 index 0000000000..92b15968c0 Binary files /dev/null and b/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Actions-light-chromium-linux.png differ diff --git a/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Align-dark-chromium-linux.png b/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Align-dark-chromium-linux.png new file mode 100644 index 0000000000..c19ea5d100 Binary files /dev/null and b/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Align-dark-chromium-linux.png differ diff --git a/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Align-light-chromium-linux.png b/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Align-light-chromium-linux.png new file mode 100644 index 0000000000..afd4eeaa94 Binary files /dev/null and b/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Align-light-chromium-linux.png differ diff --git a/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Default-dark-chromium-linux.png b/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Default-dark-chromium-linux.png new file mode 100644 index 0000000000..8e6d3e15ac Binary files /dev/null and b/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Default-dark-chromium-linux.png differ diff --git a/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Default-light-chromium-linux.png b/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Default-light-chromium-linux.png new file mode 100644 index 0000000000..6f3a8037cd Binary files /dev/null and b/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Default-light-chromium-linux.png differ diff --git a/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Direction-dark-chromium-linux.png b/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Direction-dark-chromium-linux.png new file mode 100644 index 0000000000..6ba2cc7d23 Binary files /dev/null and b/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Direction-dark-chromium-linux.png differ diff --git a/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Direction-light-chromium-linux.png b/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Direction-light-chromium-linux.png new file mode 100644 index 0000000000..5276a57226 Binary files /dev/null and b/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Direction-light-chromium-linux.png differ diff --git a/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Size-dark-chromium-linux.png b/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Size-dark-chromium-linux.png new file mode 100644 index 0000000000..5c80349648 Binary files /dev/null and b/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Size-dark-chromium-linux.png differ diff --git a/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Size-light-chromium-linux.png b/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Size-light-chromium-linux.png new file mode 100644 index 0000000000..7d4f531e7a Binary files /dev/null and b/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-render-story-Size-light-chromium-linux.png differ diff --git a/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-smoke-light-chromium-linux.png b/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-smoke-light-chromium-linux.png new file mode 100644 index 0000000000..6952fcc941 Binary files /dev/null and b/src/components/PlaceholderContainer/__snapshots__/PlaceholderContainer.visual.test.tsx-snapshots/PlaceholderContainer-smoke-light-chromium-linux.png differ diff --git a/src/components/PlaceholderContainer/__tests__/PlaceholderContainer.visual.test.tsx b/src/components/PlaceholderContainer/__tests__/PlaceholderContainer.visual.test.tsx new file mode 100644 index 0000000000..fddc82f34f --- /dev/null +++ b/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: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + 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( + { + title: 'Title', + description: 'Description', + }, + commonPropsCases, + ); + + await mount( +
+ {smokeScenarios.map(([title, props]) => { + console.log('kekw', props); + + return ( +
+

{title}

+
+ +
+
+ ); + })} +
, + ); + + await expectScreenshot({ + themes: ['light'], + }); + }); +}); diff --git a/src/components/PlaceholderContainer/__tests__/cases.tsx b/src/components/PlaceholderContainer/__tests__/cases.tsx new file mode 100644 index 0000000000..a477c6797e --- /dev/null +++ b/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 = ['s', 'm', 'l', 'promo']; +export const directionCases: Cases = ['row', 'column']; +export const alignCases: Cases = ['left', 'center']; +export const titleCases: CasesWithName = [['none', undefined]]; +export const descriptionCases: CasesWithName = [ + ['none', undefined], +]; +export const contentCases: CasesWithName = [ + ['has', 'Content'], +]; +export const actionsCases: CasesWithName = [ + [ + 'has', + [ + { + text: 'Main button', + view: 'normal', + onClick: () => {}, + }, + { + text: 'Additional button', + view: 'flat-secondary', + onClick: () => {}, + }, + ], + ], +]; diff --git a/src/components/PlaceholderContainer/__tests__/helpersPlaywright.tsx b/src/components/PlaceholderContainer/__tests__/helpersPlaywright.tsx new file mode 100644 index 0000000000..5b300ed081 --- /dev/null +++ b/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; + +const TestImageComponent = () => { + return ( + + + + ); +}; + +export const TestPlaceholderContainerWithImage = (props: TestPlaceholderContainerProps) => { + return } {...props} />; +};