diff --git a/package-lock.json b/package-lock.json index ae4128a423..3c0bdb75e9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,7 +32,7 @@ "@babel/preset-typescript": "^7.23.3", "@commitlint/cli": "^18.6.0", "@commitlint/config-conventional": "^18.6.0", - "@faker-js/faker": "^8.4.0", + "@faker-js/faker": "^9.0.3", "@gravity-ui/eslint-config": "^3.1.1", "@gravity-ui/prettier-config": "^1.1.0", "@gravity-ui/stylelint-config": "^4.0.1", @@ -3312,9 +3312,9 @@ } }, "node_modules/@faker-js/faker": { - "version": "8.4.0", - "resolved": "https://registry.npmjs.org/@faker-js/faker/-/faker-8.4.0.tgz", - "integrity": "sha512-htW87352wzUCdX1jyUQocUcmAaFqcR/w082EC8iP/gtkF0K+aKcBp0hR5Arb7dzR8tQ1TrhE9DNa5EbJELm84w==", + "version": "9.0.3", + "resolved": "https://registry.npmjs.org/@faker-js/faker/-/faker-9.0.3.tgz", + "integrity": "sha512-lWrrK4QNlFSU+13PL9jMbMKLJYXDFu3tQfayBsMXX7KL/GiQeqfB1CzHkqD5UHBUtPAuPo6XwGbMFNdVMZObRA==", "dev": true, "funding": [ { @@ -3322,9 +3322,10 @@ "url": "https://opencollective.com/fakerjs" } ], + "license": "MIT", "engines": { - "node": "^14.17.0 || ^16.13.0 || >=18.0.0", - "npm": ">=6.14.13" + "node": ">=18.0.0", + "npm": ">=9.0.0" } }, "node_modules/@fal-works/esbuild-plugin-global-externals": { diff --git a/package.json b/package.json index bc2c98e37e..660f1cb358 100644 --- a/package.json +++ b/package.json @@ -140,7 +140,7 @@ "@babel/preset-typescript": "^7.23.3", "@commitlint/cli": "^18.6.0", "@commitlint/config-conventional": "^18.6.0", - "@faker-js/faker": "^8.4.0", + "@faker-js/faker": "^9.0.3", "@gravity-ui/eslint-config": "^3.1.1", "@gravity-ui/prettier-config": "^1.1.0", "@gravity-ui/stylelint-config": "^4.0.1", diff --git a/playwright/core/mountFixture.tsx b/playwright/core/mountFixture.tsx index 28b4db4d44..2a29bde248 100644 --- a/playwright/core/mountFixture.tsx +++ b/playwright/core/mountFixture.tsx @@ -6,7 +6,13 @@ export const mountFixture: PlaywrightFixture = async ({mount: base const mount: MountFixture = async (component, options) => { return await baseMount(
{component} diff --git a/playwright/core/types.ts b/playwright/core/types.ts index 6e8416b28c..929f190b50 100644 --- a/playwright/core/types.ts +++ b/playwright/core/types.ts @@ -1,3 +1,5 @@ +import type React from 'react'; + import type {MountOptions, MountResult} from '@playwright/experimental-ct-react'; import type { Locator, @@ -11,8 +13,8 @@ import type { interface ComponentFixtures { mount( - component: JSX.Element, - options?: MountOptions, + component: React.JSX.Element, + options?: MountOptions & {width?: number}, ): Promise; } diff --git a/playwright/playwright/index.tsx b/playwright/playwright/index.tsx index 917d4031cc..80a9ffdc4a 100644 --- a/playwright/playwright/index.tsx +++ b/playwright/playwright/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import {beforeMount} from '@playwright/experimental-ct-react/hooks'; -import {ToasterComponent, ToasterProvider} from '../../src/components/Toaster'; +import {ToasterProvider} from '../../src/components/Toaster'; import {MobileProvider} from '../../src/components/mobile/MobileProvider'; import {ThemeProvider} from '../../src/components/theme/ThemeProvider'; @@ -14,7 +14,6 @@ beforeMount(async ({App}) => { - diff --git a/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-danger-dark-chromium-linux.png b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-danger-dark-chromium-linux.png new file mode 100644 index 0000000000..7e685647f2 Binary files /dev/null and b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-danger-dark-chromium-linux.png differ diff --git a/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-danger-dark-webkit-linux.png b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-danger-dark-webkit-linux.png new file mode 100644 index 0000000000..0e831739de Binary files /dev/null and b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-danger-dark-webkit-linux.png differ diff --git a/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-danger-light-chromium-linux.png b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-danger-light-chromium-linux.png new file mode 100644 index 0000000000..3ba3ba4a33 Binary files /dev/null and b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-danger-light-chromium-linux.png differ diff --git a/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-danger-light-webkit-linux.png b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-danger-light-webkit-linux.png new file mode 100644 index 0000000000..c134fd2187 Binary files /dev/null and b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-danger-light-webkit-linux.png differ diff --git a/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-info-dark-chromium-linux.png b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-info-dark-chromium-linux.png new file mode 100644 index 0000000000..cd933c8dc8 Binary files /dev/null and b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-info-dark-chromium-linux.png differ diff --git a/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-info-dark-webkit-linux.png b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-info-dark-webkit-linux.png new file mode 100644 index 0000000000..125dcb80f1 Binary files /dev/null and b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-info-dark-webkit-linux.png differ diff --git a/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-info-light-chromium-linux.png b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-info-light-chromium-linux.png new file mode 100644 index 0000000000..bd3fad4907 Binary files /dev/null and b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-info-light-chromium-linux.png differ diff --git a/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-info-light-webkit-linux.png b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-info-light-webkit-linux.png new file mode 100644 index 0000000000..4aede00575 Binary files /dev/null and b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-info-light-webkit-linux.png differ diff --git a/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-normal-dark-chromium-linux.png b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-normal-dark-chromium-linux.png new file mode 100644 index 0000000000..f3db15bb91 Binary files /dev/null and b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-normal-dark-chromium-linux.png differ diff --git a/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-normal-dark-webkit-linux.png b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-normal-dark-webkit-linux.png new file mode 100644 index 0000000000..eb4edb346a Binary files /dev/null and b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-normal-dark-webkit-linux.png differ diff --git a/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-normal-light-chromium-linux.png b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-normal-light-chromium-linux.png new file mode 100644 index 0000000000..d898eec492 Binary files /dev/null and b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-normal-light-chromium-linux.png differ diff --git a/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-normal-light-webkit-linux.png b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-normal-light-webkit-linux.png new file mode 100644 index 0000000000..461351a447 Binary files /dev/null and b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-normal-light-webkit-linux.png differ diff --git a/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-success-dark-chromium-linux.png b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-success-dark-chromium-linux.png new file mode 100644 index 0000000000..56cf2aa97a Binary files /dev/null and b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-success-dark-chromium-linux.png differ diff --git a/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-success-dark-webkit-linux.png b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-success-dark-webkit-linux.png new file mode 100644 index 0000000000..555d1f394f Binary files /dev/null and b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-success-dark-webkit-linux.png differ diff --git a/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-success-light-chromium-linux.png b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-success-light-chromium-linux.png new file mode 100644 index 0000000000..a0f935678d Binary files /dev/null and b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-success-light-chromium-linux.png differ diff --git a/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-success-light-webkit-linux.png b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-success-light-webkit-linux.png new file mode 100644 index 0000000000..a1f74846a4 Binary files /dev/null and b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-success-light-webkit-linux.png differ diff --git a/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-utility-dark-chromium-linux.png b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-utility-dark-chromium-linux.png new file mode 100644 index 0000000000..749d0373f3 Binary files /dev/null and b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-utility-dark-chromium-linux.png differ diff --git a/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-utility-dark-webkit-linux.png b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-utility-dark-webkit-linux.png new file mode 100644 index 0000000000..40e95688ec Binary files /dev/null and b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-utility-dark-webkit-linux.png differ diff --git a/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-utility-light-chromium-linux.png b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-utility-light-chromium-linux.png new file mode 100644 index 0000000000..cfcb355107 Binary files /dev/null and b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-utility-light-chromium-linux.png differ diff --git a/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-utility-light-webkit-linux.png b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-utility-light-webkit-linux.png new file mode 100644 index 0000000000..9bf9964bc3 Binary files /dev/null and b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-utility-light-webkit-linux.png differ diff --git a/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-warning-dark-chromium-linux.png b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-warning-dark-chromium-linux.png new file mode 100644 index 0000000000..fef4de26ba Binary files /dev/null and b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-warning-dark-chromium-linux.png differ diff --git a/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-warning-dark-webkit-linux.png b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-warning-dark-webkit-linux.png new file mode 100644 index 0000000000..7e20539add Binary files /dev/null and b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-warning-dark-webkit-linux.png differ diff --git a/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-warning-light-chromium-linux.png b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-warning-light-chromium-linux.png new file mode 100644 index 0000000000..2fa349c219 Binary files /dev/null and b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-warning-light-chromium-linux.png differ diff --git a/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-warning-light-webkit-linux.png b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-warning-light-webkit-linux.png new file mode 100644 index 0000000000..124087a892 Binary files /dev/null and b/src/components/Toaster/__snapshots__/Toast.visual.test.tsx-snapshots/Toast-render-story-ToastPlayground-warning-light-webkit-linux.png differ diff --git a/src/components/Toaster/__stories__/Toaster.stories.tsx b/src/components/Toaster/__stories__/Toaster.stories.tsx index 2c16a06bc9..6ab0d4f961 100644 --- a/src/components/Toaster/__stories__/Toaster.stories.tsx +++ b/src/components/Toaster/__stories__/Toaster.stories.tsx @@ -127,7 +127,7 @@ export const ToastPlayground: Story = { renderIcon: disabledControl, removeCallback: disabledControl, }, - render: (args) => { + render: (args, context) => { // eslint-disable-next-line react-hooks/rules-of-hooks const toaster = useToaster(); @@ -143,6 +143,11 @@ export const ToastPlayground: Story = { return () => toaster.remove(toastId); }, [args, toaster]); - return ; + return ( + + ); }, }; diff --git a/src/components/Toaster/__tests__/Toast.visual.test.tsx b/src/components/Toaster/__tests__/Toast.visual.test.tsx new file mode 100644 index 0000000000..fc589e3674 --- /dev/null +++ b/src/components/Toaster/__tests__/Toast.visual.test.tsx @@ -0,0 +1,87 @@ +import React from 'react'; + +import {test} from '~playwright/core'; + +import type {Toast} from '../Toast/Toast'; + +import {ToastStories} from './helpersPlaywright'; + +const wrapperOptions = { + width: 312, +}; + +function getToastActions(contrastButton = true): React.ComponentProps['actions'] { + return [ + {onClick() {}, label: 'Action', view: contrastButton ? 'normal-contrast' : 'normal'}, + {onClick() {}, label: 'Something More', view: 'outlined'}, + ]; +} + +const simpleToastProps: React.ComponentProps = { + actions: getToastActions(), + removeCallback: () => {}, + name: 'simple-toast', + isClosable: true, + title: 'Do some actions', + content: 'We address you some concerns regarding your last actions in UI', +}; + +test.describe('Toast', {tag: '@Toaster'}, () => { + test('render story: (normal)', async ({mount, expectScreenshot}) => { + await mount( + , + wrapperOptions, + ); + + await expectScreenshot(); + }); + + test('render story: (info)', async ({mount, expectScreenshot}) => { + await mount( + , + wrapperOptions, + ); + + await expectScreenshot(); + }); + + test('render story: (success)', async ({mount, expectScreenshot}) => { + await mount( + , + wrapperOptions, + ); + + await expectScreenshot(); + }); + + test('render story: (warning)', async ({mount, expectScreenshot}) => { + await mount( + , + wrapperOptions, + ); + + await expectScreenshot(); + }); + + test('render story: (danger)', async ({mount, expectScreenshot}) => { + await mount( + , + wrapperOptions, + ); + + await expectScreenshot(); + }); + + test('render story: (utility)', async ({mount, expectScreenshot}) => { + await mount( + , + wrapperOptions, + ); + + await expectScreenshot(); + }); +}); diff --git a/src/components/Toaster/__tests__/helpersPlaywright.tsx b/src/components/Toaster/__tests__/helpersPlaywright.tsx new file mode 100644 index 0000000000..1f1fecb2ec --- /dev/null +++ b/src/components/Toaster/__tests__/helpersPlaywright.tsx @@ -0,0 +1,9 @@ +import {composeStories} from '@storybook/react'; + +import * as ToastStoriesImport from '../__stories__/Toaster.stories'; + +export const ToastStories = composeStories(ToastStoriesImport, { + globals: { + screenshotTests: true, + }, +}); diff --git a/src/components/UserLabel/__stories__/UserLabel.stories.tsx b/src/components/UserLabel/__stories__/UserLabel.stories.tsx index 8b8c7f3bbd..1045b787fa 100644 --- a/src/components/UserLabel/__stories__/UserLabel.stories.tsx +++ b/src/components/UserLabel/__stories__/UserLabel.stories.tsx @@ -13,8 +13,9 @@ export default meta; type Story = StoryObj; const person = 'Charles Darwin'; -const email = faker.internet.email(...person.split(' ')); -const personImg = faker.internet.avatar(); +const [firstName, lastName] = person.split(' '); +const email = faker.internet.email({firstName, lastName}); +const personImg = faker.image.avatar(); export const Default: Story = { args: {