test(Button): improve button tests

playwright/core/expectScreenshotFixture.ts

@@ -9,7 +9,7 @@ export const expectScreenshotFixture: PlaywrightFixture<ExpectScreenshotFixture>
 ) => {
     const expectScreenshot: ExpectScreenshotFixture = async ({
         component,
-        screenshotName,
+        nameSuffix,
         ...pageScreenshotOptions
     } = {}) => {
         const captureScreenshot = async (theme: string) => {
@@ -25,14 +25,15 @@ export const expectScreenshotFixture: PlaywrightFixture<ExpectScreenshotFixture>
             });
         };
 
-        const nameScreenshot = testInfo.titlePath.slice(1).join(' ');
+        const nameScreenshot =
+            testInfo.titlePath.slice(1).join(' ') + (nameSuffix ? ` ${nameSuffix}` : '');
 
         expect(await captureScreenshot('dark')).toMatchSnapshot({
-            name: `${screenshotName || nameScreenshot} dark.png`,
+            name: `${nameScreenshot} dark.png`,
         });
 
         expect(await captureScreenshot('light')).toMatchSnapshot({
-            name: `${screenshotName || nameScreenshot} light.png`,
+            name: `${nameScreenshot} light.png`,
         });
     };
 

playwright/core/index.ts

@@ -8,3 +8,5 @@ export const test = base.extend<Fixtures>({
     mount: mountFixture,
     expectScreenshot: expectScreenshotFixture,
 });
+
+export {expect} from '@playwright/experimental-ct-react';

playwright/core/types.ts

@@ -34,6 +34,6 @@ export interface ExpectScreenshotFixture {
 }
 
 interface CaptureScreenshotParams extends PageScreenshotOptions {
-    screenshotName?: string;
+    nameSuffix?: string;
     component?: Locator;
 }

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

@@ -3,10 +3,10 @@ import React from 'react';
 import {test} from '~playwright/core';
 
 import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import type {ButtonProps} from '../Button';
 import {Button} from '../Button';
 
 import {
-    defaultProps,
     disabledCases,
     loadingCases,
     pinsCases,
@@ -89,20 +89,36 @@ test.describe('Button', {tag: '@Button'}, () => {
         await expectScreenshot();
     });
 
-    const smokeScenarios = createSmokeScenarios(defaultProps, {
-        size: sizeCases,
-        selected: selectedCases,
-        disabled: disabledCases,
-        loading: loadingCases,
-        view: viewsCases,
-        pin: pinsCases,
-    });
-
-    smokeScenarios.forEach(([title, details, props]) => {
+    const qa = 'test-button';
+
+    createSmokeScenarios<ButtonProps>(
+        {
+            children: 'Text',
+            qa,
+        },
+        {
+            size: sizeCases,
+            selected: selectedCases,
+            disabled: disabledCases,
+            loading: loadingCases,
+            view: viewsCases,
+            pin: pinsCases,
+        },
+    ).forEach(([title, details, props]) => {
         test(title, details, async ({mount, expectScreenshot}) => {
-            await mount(<Button {...props} />);
+            const root = await mount(<Button {...props} />);
 
             await expectScreenshot();
+
+            if (props.disabled || props.loading) {
+                return;
+            }
+
+            await root.getByTestId(qa).hover();
+
+            await expectScreenshot({
+                nameSuffix: 'hovered',
+            });
         });
     });
 });

src/components/Button/__tests__/cases.ts

@@ -1,10 +1,6 @@
 import type {CasesWithName} from '../../../stories/tests-factory/models';
 import type {ButtonProps} from '../Button';
 
-export const defaultProps: ButtonProps = {
-    children: 'Text',
-};
-
 export const sizeCases: CasesWithName<ButtonProps['size']> = [
     ['xs', 'xs'],
     ['s', 's'],

src/stories/tests-factory/create-smoke-scenarios.test.ts

@@ -1,7 +1,7 @@
 import {createSmokeScenarios} from './create-smoke-scenarios';
 
 test('regular', () => {
-    const smokeScenarious = createSmokeScenarios(
+    const smokeScenarios = createSmokeScenarios(
         {
             theme: 'theme-1',
             label: 'label-1',
@@ -12,41 +12,41 @@ test('regular', () => {
         },
     );
 
-    expect(smokeScenarious).toEqual([
+    expect(smokeScenarios).toEqual([
         [
-            'smoke',
+            'smoke [default]',
             {tag: ['@smoke']},
             {
                 label: 'label-1',
                 theme: 'theme-1',
             },
         ],
         [
-            'smoke-theme-theme-2',
+            'smoke [theme: theme-2]',
             {tag: ['@smoke']},
             {
                 label: 'label-1',
                 theme: 'theme-2',
             },
         ],
         [
-            'smoke-theme-theme-3',
+            'smoke [theme: theme-3]',
             {tag: ['@smoke']},
             {
                 label: 'label-1',
                 theme: 'theme-3',
             },
         ],
         [
-            'smoke-label-label-2',
+            'smoke [label: label-2]',
             {tag: ['@smoke']},
             {
                 label: 'label-2',
                 theme: 'theme-1',
             },
         ],
         [
-            'smoke-label-label-3',
+            'smoke [label: label-3]',
             {tag: ['@smoke']},
             {
                 label: 'label-3',
@@ -57,7 +57,7 @@ test('regular', () => {
 });
 
 test('with scenario name', () => {
-    const smokeScenarious = createSmokeScenarios(
+    const smokeScenarios = createSmokeScenarios(
         {
             theme: 'theme-1',
             label: 'label-1',
@@ -74,41 +74,41 @@ test('with scenario name', () => {
         },
     );
 
-    expect(smokeScenarious).toEqual([
+    expect(smokeScenarios).toEqual([
         [
-            'smoke',
+            'smoke [default]',
             {tag: ['@smoke']},
             {
                 label: 'label-1',
                 theme: 'theme-1',
             },
         ],
         [
-            'smoke-theme-name-theme-2',
+            'smoke [theme: name-theme-2]',
             {tag: ['@smoke']},
             {
                 label: 'label-1',
                 theme: 'theme-2',
             },
         ],
         [
-            'smoke-theme-name-theme-3',
+            'smoke [theme: name-theme-3]',
             {tag: ['@smoke']},
             {
                 label: 'label-1',
                 theme: 'theme-3',
             },
         ],
         [
-            'smoke-label-name-label-2',
+            'smoke [label: name-label-2]',
             {tag: ['@smoke']},
             {
                 label: 'label-2',
                 theme: 'theme-1',
             },
         ],
         [
-            'smoke-label-name-label-3',
+            'smoke [label: name-label-3]',
             {tag: ['@smoke']},
             {
                 label: 'label-3',
@@ -119,7 +119,7 @@ test('with scenario name', () => {
 });
 
 test('with additionalTags option', () => {
-    const smokeScenarious = createSmokeScenarios(
+    const smokeScenarios = createSmokeScenarios(
         {
             theme: 'theme-1',
         },
@@ -131,8 +131,8 @@ test('with additionalTags option', () => {
         },
     );
 
-    expect(smokeScenarious).toEqual([
-        ['smoke', {tag: ['@smoke', '@custom-tag-1']}, {theme: 'theme-1'}],
-        ['smoke-theme-name-theme-2', {tag: ['@smoke', '@custom-tag-1']}, {theme: 'theme-2'}],
+    expect(smokeScenarios).toEqual([
+        ['smoke [default]', {tag: ['@smoke', '@custom-tag-1']}, {theme: 'theme-1'}],
+        ['smoke [theme: name-theme-2]', {tag: ['@smoke', '@custom-tag-1']}, {theme: 'theme-2'}],
     ]);
 });

src/stories/tests-factory/create-smoke-scenarios.ts

@@ -1,6 +1,7 @@
-import type {Cases, CasesWithName, Scenario, ScenarioDetails} from './models';
+import type {Cases, CasesWithName, Scenario, ScenarioDetails, ScenarioName} from './models';
 
 interface Options {
+    scenarioName?: string;
     additionalTags?: Array<string>;
 }
 
@@ -11,18 +12,20 @@ function checkIsCasesWithName<T>(cases: CasesWithName<T> | Cases<T>): cases is C
 
 export const createSmokeScenarios = <Props extends {}>(
     baseProps: Props,
-    propsCases: {
-        [K in Partial<keyof Props>]: CasesWithName<Props[K]> | Cases<Props[K]>;
-    },
+    propsCases: Partial<{
+        [K in keyof Props]: CasesWithName<Props[K]> | Cases<Props[K]>;
+    }>,
     options?: Options,
 ) => {
     const scenarioDetails: ScenarioDetails = {
         tag: ['@smoke', ...(options?.additionalTags || [])],
     };
 
+    const scenarioName: ScenarioName = `smoke${options?.scenarioName ? ` ${options?.scenarioName}` : ''}`;
+
     const scenarios: Array<Scenario<Props>> = [
         [
-            'smoke',
+            `${scenarioName} [default]`,
             scenarioDetails,
             {
                 ...baseProps,
@@ -33,13 +36,16 @@ export const createSmokeScenarios = <Props extends {}>(
     const propNames = Object.keys(propsCases) as Array<keyof Props>;
     propNames.forEach((propName) => {
         const propCases = propsCases[propName];
+        if (!propCases) {
+            return;
+        }
 
         if (checkIsCasesWithName(propCases)) {
             propCases.forEach((propCase) => {
                 const [caseName, caseProps] = propCase;
 
                 scenarios.push([
-                    `smoke-${propName as string}-${caseName}`,
+                    `${scenarioName} [${propName as string}: ${caseName}]`,
                     scenarioDetails,
                     {
                         ...baseProps,
@@ -57,7 +63,7 @@ export const createSmokeScenarios = <Props extends {}>(
                 }
 
                 scenarios.push([
-                    `smoke-${propName as string}-${(propCase as any)?.toString()}`,
+                    `${scenarioName} [${propName as string}: ${(propCase as any)?.toString()}]`,
                     scenarioDetails,
                     {
                         ...baseProps,