test(Text): add smoke visual tests (#1798)

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

@@ -0,0 +1,86 @@
+import React from 'react';
+
+import {smokeTest, test} from '~playwright/core';
+
+import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import type {TextProps} from '../Text';
+
+import {colorCases, ellipsisCases, variantCases, whiteSpaceCases, wordBreakCases} from './cases';
+import {TestText} from './helpersPlaywright';
+import {TextStories} from './stories';
+
+const longText =
+    'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates asperiores accusamus est, ab rerum harum hic delectus fuga veniam! Hic, atque, quia sunt consectetur eius corrupti, expedita sapiente exercitationem aperiam quibusdam libero ipsa veritatis quisquam! Debitis eos unde, blanditiis ipsam adipisci, soluta incidunt architecto quidem, repellat commodi tempore! Enim assumenda nam esse laudantium sequi quaerat maiores, voluptatum quibusdam temporibus nulla perspiciatis! Corrupti error aliquid iure asperiores voluptate. Nisi temporibus nesciunt quasi animi, accusamus officia debitis voluptatum ratione ullam delectus, adipisci, repellendus vitae in amet sit magni iste impedit? Exercitationem rerum impedit sed earum iusto modi et officia aspernatur quibusdam? Fugit.';
+
+test.describe('Text', {tag: '@Text'}, () => {
+    smokeTest('regular', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<TextProps>(
+            {},
+            {
+                color: colorCases,
+                variant: variantCases,
+            },
+        );
+
+        await mount(
+            <div style={{backgroundColor: '#F5F5F5'}}>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TestText {...props}>Text</TestText>
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('long text', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<TextProps>(
+            {},
+            {
+                ellipsis: ellipsisCases,
+                whiteSpace: whiteSpaceCases,
+                wordBreak: wordBreakCases,
+            },
+        );
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div style={{width: 200}}>
+                            <TestText {...props}>{longText}</TestText>
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('render story <Ellipsis />', async ({mount, expectScreenshot}) => {
+        await mount(<TextStories.Ellipsis />);
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('render story <WordBreak />', async ({mount, expectScreenshot}) => {
+        await mount(<TextStories.WordBreak />);
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+});

src/components/Text/__tests__/cases.tsx

@@ -0,0 +1,63 @@
+import type {Cases} from '../../../stories/tests-factory/models';
+import type {TextProps} from '../Text';
+
+export const colorCases: Cases<TextProps['color']> = [
+    'primary',
+    'complementary',
+    'secondary',
+    'hint',
+    'info',
+    'info-heavy',
+    'positive',
+    'positive-heavy',
+    'warning',
+    'warning-heavy',
+    'danger',
+    'danger-heavy',
+    'utility',
+    'utility-heavy',
+    'misc',
+    'misc-heavy',
+    'brand',
+    'link',
+    'link-hover',
+    'link-visited',
+    'link-visited-hover',
+    'dark-primary',
+    'dark-complementary',
+    'dark-secondary',
+    'light-primary',
+    'light-complementary',
+    'light-secondary',
+    'light-hint',
+    'inverted-primary',
+    'inverted-complementary',
+    'inverted-secondary',
+    'inverted-hint',
+];
+export const variantCases: Cases<TextProps['variant']> = [
+    'display-4',
+    'display-3',
+    'display-2',
+    'display-1',
+    'header-2',
+    'header-1',
+    'subheader-3',
+    'subheader-2',
+    'subheader-1',
+    'body-3',
+    'body-2',
+    'body-1',
+    'body-short',
+    'caption-2',
+    'caption-1',
+    'code-3',
+    'code-inline-3',
+    'code-2',
+    'code-inline-2',
+    'code-1',
+    'code-inline-1',
+];
+export const ellipsisCases: Cases<TextProps['ellipsis']> = [true];
+export const whiteSpaceCases: Cases<TextProps['whiteSpace']> = ['nowrap', 'break-spaces'];
+export const wordBreakCases: Cases<TextProps['wordBreak']> = ['break-all', 'break-word'];

src/components/Text/__tests__/helpersPlaywright.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import type {TextProps} from '../Text';
+import {Text} from '../Text';
+
+export const TestText = (props: Partial<TextProps>) => {
+    return (
+        <Text
+            // eslint-disable-next-line react/no-children-prop
+            children={<span>Text</span>}
+            {...props}
+        />
+    );
+};

src/components/Text/__tests__/stories.ts

@@ -0,0 +1,5 @@
+import {composeStories} from '@storybook/react';
+
+import * as CSFStories from '../__stories__/Text.stories';
+
+export const TextStories = composeStories(CSFStories);