diff --git a/src/components/Tabs/TabsItem.tsx b/src/components/Tabs/TabsItem.tsx index ca2b005479..4fcb33bd3f 100644 --- a/src/components/Tabs/TabsItem.tsx +++ b/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} >
{icon &&
{icon}
} diff --git a/src/components/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-allow-not-selected-light-chromium-linux.png b/src/components/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-allow-not-selected-light-chromium-linux.png new file mode 100644 index 0000000000..40091b359c Binary files /dev/null and b/src/components/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-allow-not-selected-light-chromium-linux.png differ diff --git a/src/components/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-light-chromium-linux.png b/src/components/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-light-chromium-linux.png new file mode 100644 index 0000000000..ac39684ccd Binary files /dev/null and b/src/components/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-light-chromium-linux.png differ diff --git a/src/components/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-with-custom-tab-light-chromium-linux.png b/src/components/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-with-custom-tab-light-chromium-linux.png new file mode 100644 index 0000000000..9edd9c73b1 Binary files /dev/null and b/src/components/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-with-custom-tab-light-chromium-linux.png differ diff --git a/src/components/Tabs/__stories__/getTabsMock.tsx b/src/components/Tabs/__stories__/getTabsMock.tsx index 244a21cc1e..e9154bd4b2 100644 --- a/src/components/Tabs/__stories__/getTabsMock.tsx +++ b/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', }, ]; } diff --git a/src/components/Tabs/__tests__/Tabs.visual.test.tsx b/src/components/Tabs/__tests__/Tabs.visual.test.tsx new file mode 100644 index 0000000000..d4acb7dfd9 --- /dev/null +++ b/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( + { + activeTab: 'active', + }, + { + size: sizeCases, + direction: directionCases, + }, + ); + + await mount( +
+ {smokeScenarios.map(([title, props]) => ( +
+

{title}

+
+ +
+
+ ))} +
, + ); + + await expectScreenshot({ + themes: ['light'], + }); + }); + + smokeTest('allow not selected', async ({mount, expectScreenshot}) => { + const smokeScenarios = createSmokeScenarios( + { + allowNotSelected: true, + }, + {}, + ); + + await mount( +
+ {smokeScenarios.map(([title, props]) => ( +
+

{title}

+
+ +
+
+ ))} +
, + ); + + await expectScreenshot({ + themes: ['light'], + }); + }); + + smokeTest('with custom tab', async ({mount, expectScreenshot}) => { + const smokeScenarios = createSmokeScenarios( + { + activeTab: 'active', + }, + { + size: sizeCases, + direction: directionCases, + }, + ); + + await mount( +
+ {smokeScenarios.map(([title, props]) => ( +
+

{title}

+
+ +
+
+ ))} +
, + ); + + await expectScreenshot({ + themes: ['light'], + }); + }); +}); diff --git a/src/components/Tabs/__tests__/cases.tsx b/src/components/Tabs/__tests__/cases.tsx new file mode 100644 index 0000000000..5de47fd6b1 --- /dev/null +++ b/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 = ['m', 'l', 'xl']; +export const directionCases: Cases = [ + TabsDirection.Horizontal, + TabsDirection.Vertical, +]; diff --git a/src/components/Tabs/__tests__/helpers.tsx b/src/components/Tabs/__tests__/helpers.tsx new file mode 100644 index 0000000000..47941456b3 --- /dev/null +++ b/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) => { + const items = getTabsMock({}); + + return ; +}; + +export const TestTabsWithCustomTabs = (props: Partial) => { + const items = getTabsMock({}); + + return ( + { + return ( + // eslint-disable-next-line jsx-a11y/anchor-is-valid + + {item.title} + + ); + }} + {...props} + /> + ); +};