test(Tabs): add smoke visual tests (#1794)

src/components/Tabs/TabsItem.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 
 import {Label} from '../Label';
 import type {LabelProps} from '../Label';
+import type {QAProps} from '../types';
 import {block} from '../utils/cn';
 
 import {TabsContext} from './TabsContext';
@@ -22,7 +23,7 @@ type ExtraProps = Omit<
     | 'onKeyDown'
 >;
 
-export interface TabsItemProps {
+export interface TabsItemProps extends QAProps {
     id: string;
     className?: string;
     title: string | React.ReactNode;
@@ -55,6 +56,7 @@ export function TabsItem({
     hasOverflow,
     extraProps,
     onClick,
+    qa,
 }: TabsItemProps) {
     const {activeTabId} = React.useContext(TabsContext);
     const isActive = typeof active === 'boolean' ? active : activeTabId === id;
@@ -96,6 +98,7 @@ export function TabsItem({
             title={htmlTitle}
             onClick={handleClick}
             onKeyDown={handleKeyDown}
+            data-qa={qa}
         >
             <div className={b('item-content')}>
                 {icon && <div className={b('item-icon')}>{icon}</div>}

src/components/Tabs/__stories__/getTabsMock.tsx

@@ -20,6 +20,7 @@ export function getTabsMock(args: StoryParams): TabsProps['items'] {
                     maxWidth: args.withOverflow ? '100px' : 'auto',
                 },
             },
+            qa: '1',
         },
         {
             id: 'active',
@@ -33,6 +34,7 @@ export function getTabsMock(args: StoryParams): TabsProps['items'] {
                     maxWidth: args.withOverflow ? '100px' : 'auto',
                 },
             },
+            qa: '2',
         },
         {
             id: 'disabled',
@@ -47,6 +49,7 @@ export function getTabsMock(args: StoryParams): TabsProps['items'] {
                     maxWidth: args.withOverflow ? '100px' : 'auto',
                 },
             },
+            qa: '3',
         },
     ];
 }

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

@@ -0,0 +1,93 @@
+import {smokeTest, test} from '~playwright/core';
+
+import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import type {TabsProps} from '../Tabs';
+
+import {directionCases, sizeCases} from './cases';
+import {TestTabs, TestTabsWithCustomTabs} from './helpers';
+
+test.describe('Tabs', {tag: '@Tabs'}, () => {
+    smokeTest('', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<TabsProps>(
+            {
+                activeTab: 'active',
+            },
+            {
+                size: sizeCases,
+                direction: directionCases,
+            },
+        );
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TestTabs {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('allow not selected', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<TabsProps>(
+            {
+                allowNotSelected: true,
+            },
+            {},
+        );
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TestTabs {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('with custom tab', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<TabsProps>(
+            {
+                activeTab: 'active',
+            },
+            {
+                size: sizeCases,
+                direction: directionCases,
+            },
+        );
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TestTabsWithCustomTabs {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+});

src/components/Tabs/__tests__/cases.tsx

@@ -0,0 +1,9 @@
+import type {Cases} from '../../../stories/tests-factory/models';
+import type {TabsProps} from '../Tabs';
+import {TabsDirection} from '../Tabs';
+
+export const sizeCases: Cases<TabsProps['size']> = ['m', 'l', 'xl'];
+export const directionCases: Cases<TabsProps['direction']> = [
+    TabsDirection.Horizontal,
+    TabsDirection.Vertical,
+];

src/components/Tabs/__tests__/helpers.tsx

@@ -0,0 +1,28 @@
+import type {TabsItemProps, TabsProps} from '../Tabs';
+import {Tabs} from '../Tabs';
+import {getTabsMock} from '../__stories__/getTabsMock';
+
+export const TestTabs = (props: Partial<TabsProps>) => {
+    const items = getTabsMock({});
+
+    return <Tabs items={items} {...props} />;
+};
+
+export const TestTabsWithCustomTabs = (props: Partial<TabsProps>) => {
+    const items = getTabsMock({});
+
+    return (
+        <Tabs
+            items={items}
+            wrapTo={(item: TabsItemProps) => {
+                return (
+                    // eslint-disable-next-line jsx-a11y/anchor-is-valid
+                    <a key={item.id} href="#" style={{textDecoration: 'none'}} data-qa={item.qa}>
+                        {item.title}
+                    </a>
+                );
+            }}
+            {...props}
+        />
+    );
+};