diff --git a/gulpfile.js b/gulpfile.js index dd7caec5db..0b7975fdbb 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -31,6 +31,7 @@ function compileTs(modules = false) { '!src/**/__tests__/**/*', '!src/**/__mocks__/**/*', '!src/**/*.test.{ts,tsx}', + '!src/**/__snapshots__/**/*', ]) .pipe( replace(/import '.+\.scss';/g, (match) => diff --git a/playwright/README.md b/playwright/README.md index 4ac762738a..631690d808 100644 --- a/playwright/README.md +++ b/playwright/README.md @@ -9,10 +9,12 @@ ```ts import React from 'react'; - import {expect, test} from '@playwright/experimental-ct-react'; + import {expect} from '@playwright/experimental-ct-react'; import {MyTestedComponent} from '../MyTestedComponent'; + import {test} from '~playwright/core'; + test('Name test', async ({mount}) => { //mounting a component const component = await mount(); @@ -67,30 +69,6 @@ npm run playwright:docker:update 1. [playwright-test-components](https://playwright.dev/docs/test-components) 2. [playwright-docs](https://playwright.dev/docs/api/class-test) -## Pay attention - -Screenshots are taken within the component boundaries and if it has overflowing content, do the following: - -```ts -import React from 'react'; - -import {expect, test} from '@playwright/experimental-ct-react'; - -import {WrapperTest} from '../../../../playwright/helpers'; - -import {Component} from '../Component'; - -test('Test Component ', async ({mount}) => { - const component = await mount( - - - , - ); - - await expect(component).toHaveScreenshot(); -}); -``` - ## Test examples - [Button](../src/components/Button/__tests__/Button.visual.test) diff --git a/playwright/core/index.tsx b/playwright/core/index.tsx new file mode 100644 index 0000000000..8b35c20c20 --- /dev/null +++ b/playwright/core/index.tsx @@ -0,0 +1,26 @@ +import React from 'react'; + +import type {JsonObject} from '@playwright/experimental-ct-core/types/component'; +import {ComponentFixtures, MountOptions, test as base} from '@playwright/experimental-ct-react'; + +type MountFixtures = { + mount: ComponentFixtures['mount']; +}; + +export const test = base.extend({ + mount: async ({mount: baseMount}, use) => { + const mount = async ( + component: JSX.Element, + options?: MountOptions | undefined, + ) => { + return await baseMount( +
+ {component} +
, + options, + ); + }; + + await use(mount); + }, +}); diff --git a/playwright/helpers.tsx b/playwright/helpers.tsx deleted file mode 100644 index 43d986e6fb..0000000000 --- a/playwright/helpers.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; - -export const WrapperTest = ({children}) => { - return
{children}
; -}; diff --git a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-ButtonViewShowcase-1-chromium-linux.png b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-ButtonViewShowcase-1-chromium-linux.png index cb41574838..75d1fa2fdd 100644 Binary files a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-ButtonViewShowcase-1-chromium-linux.png and b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-ButtonViewShowcase-1-chromium-linux.png differ diff --git a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-ButtonViewShowcase-1-webkit-linux.png b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-ButtonViewShowcase-1-webkit-linux.png index df7f44a561..69770515aa 100644 Binary files a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-ButtonViewShowcase-1-webkit-linux.png and b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-ButtonViewShowcase-1-webkit-linux.png differ diff --git a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-add-style-1-chromium-linux.png b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-add-style-1-chromium-linux.png index add739edbe..bddf2a3150 100644 Binary files a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-add-style-1-chromium-linux.png and b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-add-style-1-chromium-linux.png differ diff --git a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-add-style-1-webkit-linux.png b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-add-style-1-webkit-linux.png index 512e380254..d54715f571 100644 Binary files a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-add-style-1-webkit-linux.png and b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-add-style-1-webkit-linux.png differ diff --git a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-loading-when-loading-true-prop-is-given-1-chromium-linux.png b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-loading-when-loading-true-prop-is-given-1-chromium-linux.png index 3c54d0c55a..e04f1d570c 100644 Binary files a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-loading-when-loading-true-prop-is-given-1-chromium-linux.png and b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-loading-when-loading-true-prop-is-given-1-chromium-linux.png differ diff --git a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-loading-when-loading-true-prop-is-given-1-webkit-linux.png b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-loading-when-loading-true-prop-is-given-1-webkit-linux.png index 8c5966c684..97c90d89f9 100644 Binary files a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-loading-when-loading-true-prop-is-given-1-webkit-linux.png and b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-loading-when-loading-true-prop-is-given-1-webkit-linux.png differ diff --git a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-buttom-by-default-1-chromium-linux.png b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-buttom-by-default-1-chromium-linux.png index 02de61bd55..d01eb2aeb6 100644 Binary files a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-buttom-by-default-1-chromium-linux.png and b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-buttom-by-default-1-chromium-linux.png differ diff --git a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-buttom-by-default-1-webkit-linux.png b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-buttom-by-default-1-webkit-linux.png index 8557ce4535..6abf0fde41 100644 Binary files a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-buttom-by-default-1-webkit-linux.png and b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-buttom-by-default-1-webkit-linux.png differ diff --git a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-with-given-reset-type-1-chromium-linux.png b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-with-given-reset-type-1-chromium-linux.png index 02de61bd55..d01eb2aeb6 100644 Binary files a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-with-given-reset-type-1-chromium-linux.png and b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-with-given-reset-type-1-chromium-linux.png differ diff --git a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-with-given-reset-type-1-webkit-linux.png b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-with-given-reset-type-1-webkit-linux.png index 8557ce4535..6abf0fde41 100644 Binary files a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-with-given-reset-type-1-webkit-linux.png and b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-with-given-reset-type-1-webkit-linux.png differ diff --git a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-with-given-submit-type-1-chromium-linux.png b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-with-given-submit-type-1-chromium-linux.png index 02de61bd55..d01eb2aeb6 100644 Binary files a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-with-given-submit-type-1-chromium-linux.png and b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-with-given-submit-type-1-chromium-linux.png differ diff --git a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-with-given-submit-type-1-webkit-linux.png b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-with-given-submit-type-1-webkit-linux.png index 8557ce4535..6abf0fde41 100644 Binary files a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-with-given-submit-type-1-webkit-linux.png and b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-with-given-submit-type-1-webkit-linux.png differ diff --git a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-selected-when-selected-true-prop-is-given-1-chromium-linux.png b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-selected-when-selected-true-prop-is-given-1-chromium-linux.png index f9b94de312..944414c56e 100644 Binary files a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-selected-when-selected-true-prop-is-given-1-chromium-linux.png and b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-selected-when-selected-true-prop-is-given-1-chromium-linux.png differ diff --git a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-selected-when-selected-true-prop-is-given-1-webkit-linux.png b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-selected-when-selected-true-prop-is-given-1-webkit-linux.png index d975b3928a..49232fa8f8 100644 Binary files a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-selected-when-selected-true-prop-is-given-1-webkit-linux.png and b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-selected-when-selected-true-prop-is-given-1-webkit-linux.png differ diff --git a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-Icon-component-1-chromium-linux.png b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-Icon-component-1-chromium-linux.png index 83bbfa96f5..acdc13bb97 100644 Binary files a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-Icon-component-1-chromium-linux.png and b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-Icon-component-1-chromium-linux.png differ diff --git a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-Icon-component-1-webkit-linux.png b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-Icon-component-1-webkit-linux.png index 8f6a601afa..3bdc298729 100644 Binary files a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-Icon-component-1-webkit-linux.png and b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-Icon-component-1-webkit-linux.png differ diff --git a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-a-tag-1-chromium-linux.png b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-a-tag-1-chromium-linux.png index 02de61bd55..d01eb2aeb6 100644 Binary files a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-a-tag-1-chromium-linux.png and b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-a-tag-1-chromium-linux.png differ diff --git a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-a-tag-1-webkit-linux.png b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-a-tag-1-webkit-linux.png index 8557ce4535..6abf0fde41 100644 Binary files a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-a-tag-1-webkit-linux.png and b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-a-tag-1-webkit-linux.png differ diff --git a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-icon-1-chromium-linux.png b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-icon-1-chromium-linux.png index 05bb38c705..b7b427e065 100644 Binary files a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-icon-1-chromium-linux.png and b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-icon-1-chromium-linux.png differ diff --git a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-icon-1-webkit-linux.png b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-icon-1-webkit-linux.png index 6342a01b24..93755fb34b 100644 Binary files a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-icon-1-webkit-linux.png and b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-icon-1-webkit-linux.png differ diff --git a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-icon-in-Button-Icon-1-chromium-linux.png b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-icon-in-Button-Icon-1-chromium-linux.png index ce9750670d..2e06817ae6 100644 Binary files a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-icon-in-Button-Icon-1-chromium-linux.png and b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-icon-in-Button-Icon-1-chromium-linux.png differ diff --git a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-icon-in-Button-Icon-1-webkit-linux.png b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-icon-in-Button-Icon-1-webkit-linux.png index c1063e0fac..73afe68c0a 100644 Binary files a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-icon-in-Button-Icon-1-webkit-linux.png and b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-should-render-icon-in-Button-Icon-1-webkit-linux.png differ diff --git a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-show-given-children-1-chromium-linux.png b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-show-given-children-1-chromium-linux.png index 59a06997b4..b2a2d8424a 100644 Binary files a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-show-given-children-1-chromium-linux.png and b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-show-given-children-1-chromium-linux.png differ diff --git a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-show-given-children-1-webkit-linux.png b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-show-given-children-1-webkit-linux.png index 841104feba..f94ac5291a 100644 Binary files a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-show-given-children-1-webkit-linux.png and b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-show-given-children-1-webkit-linux.png differ diff --git a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-show-given-content-1-chromium-linux.png b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-show-given-content-1-chromium-linux.png index dac8ea1cac..553867eb0e 100644 Binary files a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-show-given-content-1-chromium-linux.png and b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-show-given-content-1-chromium-linux.png differ diff --git a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-show-given-content-1-webkit-linux.png b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-show-given-content-1-webkit-linux.png index c6df66cee9..54db9cf1a6 100644 Binary files a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-show-given-content-1-webkit-linux.png and b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-show-given-content-1-webkit-linux.png differ diff --git a/src/components/Button/__tests__/Button.visual.test.tsx b/src/components/Button/__tests__/Button.visual.test.tsx index 08edac4fc9..cff91e6072 100644 --- a/src/components/Button/__tests__/Button.visual.test.tsx +++ b/src/components/Button/__tests__/Button.visual.test.tsx @@ -1,13 +1,15 @@ import React from 'react'; import {Gear} from '@gravity-ui/icons'; -import {expect, test} from '@playwright/experimental-ct-react'; +import {expect} from '@playwright/experimental-ct-react'; import {Button} from '../Button'; import {ButtonViewShowcase} from '../__stories__/ButtonViewShowcase'; import {ButtonIcon, ButtonWitchIcon} from './helpers'; +import {test} from '~playwright/core'; + test.describe('Button', () => { test('render buttom by default', async ({mount}) => { const component = await mount(); diff --git a/tsconfig.json b/tsconfig.json index f593233ed4..a793a34bd8 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,11 +8,16 @@ "baseUrl": ".", "resolveJsonModule": true, "importHelpers": true, - "importsNotUsedAsValues": "error" + "importsNotUsedAsValues": "error", + "paths": { + "~playwright/*": [ + "playwright/*" + ] + } }, "include": [ "src/**/*.ts", "src/**/*.tsx", "test-utils/setup-tests-after.ts" ] -} +} \ No newline at end of file