diff --git a/src/components/ClipboardButton/__snapshots__/ClipboardButton.visual.test.tsx-snapshots/ClipboardButton-smoke-after-copy-light-chromium-linux.png b/src/components/ClipboardButton/__snapshots__/ClipboardButton.visual.test.tsx-snapshots/ClipboardButton-smoke-after-copy-light-chromium-linux.png new file mode 100644 index 0000000000..b2e97a63c2 Binary files /dev/null and b/src/components/ClipboardButton/__snapshots__/ClipboardButton.visual.test.tsx-snapshots/ClipboardButton-smoke-after-copy-light-chromium-linux.png differ diff --git a/src/components/ClipboardButton/__snapshots__/ClipboardButton.visual.test.tsx-snapshots/ClipboardButton-smoke-after-hover-light-chromium-linux.png b/src/components/ClipboardButton/__snapshots__/ClipboardButton.visual.test.tsx-snapshots/ClipboardButton-smoke-after-hover-light-chromium-linux.png new file mode 100644 index 0000000000..a44581adf3 Binary files /dev/null and b/src/components/ClipboardButton/__snapshots__/ClipboardButton.visual.test.tsx-snapshots/ClipboardButton-smoke-after-hover-light-chromium-linux.png differ diff --git a/src/components/ClipboardButton/__snapshots__/ClipboardButton.visual.test.tsx-snapshots/ClipboardButton-smoke-light-chromium-linux.png b/src/components/ClipboardButton/__snapshots__/ClipboardButton.visual.test.tsx-snapshots/ClipboardButton-smoke-light-chromium-linux.png new file mode 100644 index 0000000000..de4268c20a Binary files /dev/null and b/src/components/ClipboardButton/__snapshots__/ClipboardButton.visual.test.tsx-snapshots/ClipboardButton-smoke-light-chromium-linux.png differ diff --git a/src/components/ClipboardButton/__tests__/ClipboardButton.visual.test.tsx b/src/components/ClipboardButton/__tests__/ClipboardButton.visual.test.tsx new file mode 100644 index 0000000000..e51d2e0133 --- /dev/null +++ b/src/components/ClipboardButton/__tests__/ClipboardButton.visual.test.tsx @@ -0,0 +1,40 @@ +import {smokeTest, test} from '~playwright/core'; + +import type {ClipboardButtonProps} from '../ClipboardButton'; +import {ClipboardButton} from '../ClipboardButton'; + +test.describe('ClipboardButton', {tag: '@ClipboardButton'}, () => { + const defaultProps: ClipboardButtonProps = { + text: 'Text', + onCopy: () => {}, + }; + + smokeTest('', async ({mount, page, expectScreenshot}) => { + const root = await mount( +
+ +
, + ); + + await expectScreenshot({ + themes: ['light'], + }); + + await root.locator("button[type='button']").hover(); + + // wait for render tooltip + await page.waitForTimeout(1000); + + await expectScreenshot({ + themes: ['light'], + nameSuffix: 'after hover', + }); + + await root.locator("button[type='button']").click(); + + await expectScreenshot({ + themes: ['light'], + nameSuffix: 'after copy', + }); + }); +}); diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx index bcced660d8..b960324a48 100644 --- a/src/components/Label/Label.tsx +++ b/src/components/Label/Label.tsx @@ -11,6 +11,8 @@ import {Icon} from '../Icon'; import type {QAProps} from '../types'; import {block} from '../utils/cn'; +import {LabelQa} from './constants'; + import './Label.scss'; const b = block('label'); @@ -122,6 +124,7 @@ export const Label = React.forwardRef(function Label( side: 'end', type: 'button', })} + data-qa={LabelQa.copyButton} > @@ -137,6 +140,7 @@ export const Label = React.forwardRef(function Label( side: 'end', type: 'button', })} + data-qa={LabelQa.closeButton} > @@ -165,6 +169,7 @@ export const Label = React.forwardRef(function Label( type="button" onClick={onClick} className={b('main-button')} + data-qa={LabelQa.mainButton} > {content} diff --git a/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-ShowcaseStory-dark-chromium-linux.png b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-ShowcaseStory-dark-chromium-linux.png deleted file mode 100644 index 3280efe254..0000000000 Binary files a/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-ShowcaseStory-dark-chromium-linux.png and /dev/null differ diff --git a/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-ShowcaseStory-dark-webkit-linux.png b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-ShowcaseStory-dark-webkit-linux.png deleted file mode 100644 index 2a9a7f0257..0000000000 Binary files a/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-ShowcaseStory-dark-webkit-linux.png and /dev/null differ diff --git a/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-ShowcaseStory-light-chromium-linux.png b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-ShowcaseStory-light-chromium-linux.png deleted file mode 100644 index ea47fb49db..0000000000 Binary files a/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-ShowcaseStory-light-chromium-linux.png and /dev/null differ diff --git a/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-ShowcaseStory-light-webkit-linux.png b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-ShowcaseStory-light-webkit-linux.png deleted file mode 100644 index 1a38c3a13e..0000000000 Binary files a/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-ShowcaseStory-light-webkit-linux.png and /dev/null differ diff --git a/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-smoke-dark-chromium-linux.png b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-smoke-dark-chromium-linux.png new file mode 100644 index 0000000000..9ce4aeeff0 Binary files /dev/null and b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-smoke-dark-chromium-linux.png differ diff --git a/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-smoke-light-chromium-linux.png b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-smoke-light-chromium-linux.png new file mode 100644 index 0000000000..4a4f495fad Binary files /dev/null and b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-smoke-light-chromium-linux.png differ diff --git a/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-smoke-with-close-dark-chromium-linux.png b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-smoke-with-close-dark-chromium-linux.png new file mode 100644 index 0000000000..c66994e395 Binary files /dev/null and b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-smoke-with-close-dark-chromium-linux.png differ diff --git a/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-smoke-with-close-light-chromium-linux.png b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-smoke-with-close-light-chromium-linux.png new file mode 100644 index 0000000000..1ed4e1de41 Binary files /dev/null and b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-smoke-with-close-light-chromium-linux.png differ diff --git a/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-smoke-with-copy-dark-chromium-linux.png b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-smoke-with-copy-dark-chromium-linux.png new file mode 100644 index 0000000000..f6d63e809a Binary files /dev/null and b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-smoke-with-copy-dark-chromium-linux.png differ diff --git a/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-smoke-with-copy-light-chromium-linux.png b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-smoke-with-copy-light-chromium-linux.png new file mode 100644 index 0000000000..bf4a743393 Binary files /dev/null and b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-smoke-with-copy-light-chromium-linux.png differ diff --git a/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-smoke-with-custom-icon-dark-chromium-linux.png b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-smoke-with-custom-icon-dark-chromium-linux.png new file mode 100644 index 0000000000..de088cccb4 Binary files /dev/null and b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-smoke-with-custom-icon-dark-chromium-linux.png differ diff --git a/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-smoke-with-custom-icon-light-chromium-linux.png b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-smoke-with-custom-icon-light-chromium-linux.png new file mode 100644 index 0000000000..8214a6b7f8 Binary files /dev/null and b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-smoke-with-custom-icon-light-chromium-linux.png differ diff --git a/src/components/Label/__tests__/Label.visual.test.tsx b/src/components/Label/__tests__/Label.visual.test.tsx index 353a001572..2570d1be0d 100644 --- a/src/components/Label/__tests__/Label.visual.test.tsx +++ b/src/components/Label/__tests__/Label.visual.test.tsx @@ -1,8 +1,15 @@ -import {test} from '~playwright/core'; +import {smokeTest, test} from '~playwright/core'; -import {LabelStories} from './helpersPlaywright'; +import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios'; +import type {LabelProps} from '../Label'; +import {Label} from '../Label'; -test.describe('Label', () => { +import {disabledCases, sizeCases, themeCases} from './cases'; +import {LabelStories, TestLabelWithIcon} from './helpersPlaywright'; + +const qa = 'label'; + +test.describe('Label', {tag: '@Label'}, () => { test('render story: ', async ({mount, expectScreenshot}) => { await mount(); @@ -62,4 +69,117 @@ test.describe('Label', () => { await expectScreenshot(); }); + + const defaultProps: LabelProps = { + children: 'Label', + qa, + type: 'default', + }; + + smokeTest('', async ({mount, expectScreenshot}) => { + const smokeScenarios = createSmokeScenarios(defaultProps, { + theme: themeCases, + size: sizeCases, + disabled: disabledCases, + }); + + await mount( +
+ {smokeScenarios.map(([title, props]) => ( +
+

{title}

+
+
+
+ ))} +
, + ); + + await expectScreenshot({}); + }); + + smokeTest('with custom icon', async ({mount, expectScreenshot}) => { + const smokeScenarios = createSmokeScenarios(defaultProps, { + theme: themeCases, + size: sizeCases, + disabled: disabledCases, + }); + + await mount( +
+ {smokeScenarios.map(([title, props]) => ( +
+

{title}

+
+ +
+
+ ))} +
, + ); + + await expectScreenshot({}); + }); + + smokeTest('with copy', async ({mount, expectScreenshot}) => { + const smokeScenarios = createSmokeScenarios( + { + ...defaultProps, + type: 'copy', + copyText: 'Copy text', + onCopy: () => {}, + }, + { + theme: themeCases, + size: sizeCases, + disabled: disabledCases, + }, + ); + + await mount( +
+ {smokeScenarios.map(([title, props]) => ( +
+

{title}

+
+
+
+ ))} +
, + ); + + await expectScreenshot({}); + }); + + smokeTest('with close', async ({mount, expectScreenshot}) => { + const smokeScenarios = createSmokeScenarios( + { + ...defaultProps, + type: 'close', + onCloseClick: () => {}, + }, + { + theme: themeCases, + size: sizeCases, + disabled: disabledCases, + }, + ); + + await mount( +
+ {smokeScenarios.map(([title, props]) => ( +
+

{title}

+
+
+
+ ))} +
, + ); + + await expectScreenshot({}); + }); }); diff --git a/src/components/Label/__tests__/cases.tsx b/src/components/Label/__tests__/cases.tsx new file mode 100644 index 0000000000..f13b984e44 --- /dev/null +++ b/src/components/Label/__tests__/cases.tsx @@ -0,0 +1,15 @@ +import type {Cases} from '../../../stories/tests-factory/models'; +import type {LabelProps} from '../Label'; + +export const disabledCases: Cases = [true]; +export const themeCases: Cases = [ + 'normal', + 'info', + 'danger', + 'warning', + 'success', + 'utility', + 'unknown', + 'clear', +]; +export const sizeCases: Cases = ['xs', 's', 'm']; diff --git a/src/components/Label/__tests__/helpersPlaywright.ts b/src/components/Label/__tests__/helpersPlaywright.ts deleted file mode 100644 index 101a11f4b9..0000000000 --- a/src/components/Label/__tests__/helpersPlaywright.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {composeStories} from '@storybook/react'; - -import * as DefaultLabelStories from '../__stories__/Label.stories'; - -export const LabelStories = composeStories(DefaultLabelStories); diff --git a/src/components/Label/__tests__/helpersPlaywright.tsx b/src/components/Label/__tests__/helpersPlaywright.tsx new file mode 100644 index 0000000000..8f6cb4cd41 --- /dev/null +++ b/src/components/Label/__tests__/helpersPlaywright.tsx @@ -0,0 +1,13 @@ +import {Rocket} from '@gravity-ui/icons'; +import {composeStories} from '@storybook/react'; + +import {Icon} from '../../Icon'; +import type {LabelProps} from '../Label'; +import {Label} from '../Label'; +import * as DefaultLabelStories from '../__stories__/Label.stories'; + +export const LabelStories = composeStories(DefaultLabelStories); + +export const TestLabelWithIcon = (props: Partial) => { + return