diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml new file mode 100644 index 0000000000..5199a04ed1 --- /dev/null +++ b/.github/workflows/playwright.yml @@ -0,0 +1,49 @@ +name: Playwright Tests + +on: + # push: + # branches: [main, next] + pull_request: + +jobs: + test: + name: Test component + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 18 + - name: Install dependencies + run: npm ci + - name: Install Playwright Browsers + run: npx playwright install --with-deps + - name: Run Playwright tests + run: npm run playwright + env: + CI: 'true' + - name: Upload Playwright playwright report to GitHub Actions Artifacts + if: always() + uses: actions/upload-artifact@v3 + with: + name: playwright-report + path: playwright-report + retention-days: 1 + - name: Upload Playwright report + if: always() + env: + AWS_ACCESS_KEY_ID: ${{ secrets.STORYBOOK_S3_KEY_ID }} + AWS_SECRET_ACCESS_KEY: ${{ secrets.STORYBOOK_S3_SECRET_KEY }} + AWS_DEFAULT_REGION: ru-central1 + AWS_EC2_METADATA_DISABLED: true + run: aws s3 cp ./playwright-report s3://playwright-reports/uikit/pulls/${{ github.event.pull_request.number }}/ --endpoint-url=https://storage.yandexcloud.net --recursive + shell: bash + - name: Create Comment + if: always() + uses: marocchino/sticky-pull-request-comment@v2 + with: + GITHUB_TOKEN: ${{ secrets.GRAVITY_UI_BOT_GITHUB_TOKEN }} + number: ${{ github.event.pull_request.number }} + header: playwright test + message: '[Playwright Test Component](https://storage.yandexcloud.net/playwright-reports/uikit/pulls/${{ github.event.pull_request.number }}/index.html) is ready.' + \ No newline at end of file diff --git a/.gitignore b/.gitignore index 041b12c0fe..0c0bfa5505 100644 --- a/.gitignore +++ b/.gitignore @@ -10,3 +10,6 @@ node_modules /build /styles/**/*.css /coverage +/playwright/playwright/.cache +/playwright-report +/test-results diff --git a/jest.config.js b/jest.config.js index 9f714164f2..8185b29f82 100644 --- a/jest.config.js +++ b/jest.config.js @@ -20,4 +20,5 @@ module.exports = { '\\.(css|less|scss|sass)$': 'jest-transform-css', }, testMatch: ['**/*.test.[jt]s?(x)'], + testPathIgnorePatterns: ['.visual.'], }; diff --git a/package-lock.json b/package-lock.json index b8a7bf5291..0eb1bc0535 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,6 +37,8 @@ "@gravity-ui/prettier-config": "^1.0.1", "@gravity-ui/stylelint-config": "^2.0.0", "@gravity-ui/tsconfig": "^1.0.0", + "@playwright/experimental-ct-react": "^1.38.1", + "@playwright/test": "^1.38.1", "@storybook/addon-essentials": "^7.4.6", "@storybook/cli": "^7.4.6", "@storybook/preset-scss": "^1.0.3", @@ -54,6 +56,7 @@ "@types/react-transition-group": "^4.4.6", "@types/react-virtualized-auto-sizer": "^1.0.1", "@types/react-window": "^1.8.5", + "@vitejs/plugin-react": "^4.1.0", "chroma-js": "^2.4.2", "cross-env": "^7.0.3", "eslint": "^8.47.0", @@ -1611,6 +1614,36 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/plugin-transform-react-jsx-self": { + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.22.5.tgz", + "integrity": "sha512-nTh2ogNUtxbiSbxaT4Ds6aXnXEipHweN9YRgOX/oNXdf0cCrGn/+2LozFa3lnPV5D90MkjhgckCPBrsoSc1a7g==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.22.5" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx-source": { + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.22.5.tgz", + "integrity": "sha512-yIiRO6yobeEIaI0RTbIr8iAK9FcBHLtZq0S89ZPjDLQXBA4xvghaKqI0etp/tF3htTM0sazJKKLz9oEiGRtu7w==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.22.5" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/plugin-transform-react-pure-annotations": { "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.22.5.tgz", @@ -4339,6 +4372,54 @@ "node": ">=14" } }, + "node_modules/@playwright/experimental-ct-core": { + "version": "1.38.1", + "resolved": "https://registry.npmjs.org/@playwright/experimental-ct-core/-/experimental-ct-core-1.38.1.tgz", + "integrity": "sha512-2EzqzwBJty08elQonIXrQxUd8HKL7dHLJ2T/dJTmgVFwGsnJYsnU03EUlKlatUfajMYVC7xGT+Bqhur2hJPC3A==", + "dev": true, + "dependencies": { + "playwright": "1.38.1", + "playwright-core": "1.38.1", + "vite": "^4.3.9" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=16" + } + }, + "node_modules/@playwright/experimental-ct-react": { + "version": "1.38.1", + "resolved": "https://registry.npmjs.org/@playwright/experimental-ct-react/-/experimental-ct-react-1.38.1.tgz", + "integrity": "sha512-V5Eu28jrF8Vd3/dvweJaewa49MrnAOQdR3U24j3gu8oj7SNS6lWv09pioZVTI8cBj3yKCSX1Bcq8Vd2bSGYtOg==", + "dev": true, + "dependencies": { + "@playwright/experimental-ct-core": "1.38.1", + "@vitejs/plugin-react": "^4.0.0" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=16" + } + }, + "node_modules/@playwright/test": { + "version": "1.38.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.1.tgz", + "integrity": "sha512-NqRp8XMwj3AK+zKLbZShl0r/9wKgzqI/527bkptKXomtuo+dOjU9NdMASQ8DNC9z9zLOMbG53T4eihYr3XR+BQ==", + "dev": true, + "dependencies": { + "playwright": "1.38.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=16" + } + }, "node_modules/@pmmmwh/react-refresh-webpack-plugin": { "version": "0.5.11", "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.11.tgz", @@ -7257,9 +7338,9 @@ "dev": true }, "node_modules/@types/babel__core": { - "version": "7.20.1", - "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.1.tgz", - "integrity": "sha512-aACu/U/omhdk15O4Nfb+fHgH/z3QsfQzpnvRZhYhThms83ZnAOZz7zZAWO7mn2yyNQaA4xTO8GLK3uqFU4bYYw==", + "version": "7.20.2", + "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.2.tgz", + "integrity": "sha512-pNpr1T1xLUc2l3xJKuPtsEky3ybxN3m4fJkknfIpTCTfIZCDW57oAg+EfCgIIp2rvCe0Wn++/FfodDS4YXxBwA==", "dev": true, "dependencies": { "@babel/parser": "^7.20.7", @@ -8052,6 +8133,70 @@ "url": "https://opencollective.com/eslint" } }, + "node_modules/@vitejs/plugin-react": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.1.0.tgz", + "integrity": "sha512-rM0SqazU9iqPUraQ2JlIvReeaxOoRj6n+PzB1C0cBzIbd8qP336nC39/R9yPi3wVcah7E7j/kdU1uCUqMEU4OQ==", + "dev": true, + "dependencies": { + "@babel/core": "^7.22.20", + "@babel/plugin-transform-react-jsx-self": "^7.22.5", + "@babel/plugin-transform-react-jsx-source": "^7.22.5", + "@types/babel__core": "^7.20.2", + "react-refresh": "^0.14.0" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "peerDependencies": { + "vite": "^4.2.0" + } + }, + "node_modules/@vitejs/plugin-react/node_modules/@babel/core": { + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.0.tgz", + "integrity": "sha512-97z/ju/Jy1rZmDxybphrBuI+jtJjFVoz7Mr9yUQVVVi+DNZE333uFQeMOqcCIy1x3WYBIbWftUSLmbNXNT7qFQ==", + "dev": true, + "dependencies": { + "@ampproject/remapping": "^2.2.0", + "@babel/code-frame": "^7.22.13", + "@babel/generator": "^7.23.0", + "@babel/helper-compilation-targets": "^7.22.15", + "@babel/helper-module-transforms": "^7.23.0", + "@babel/helpers": "^7.23.0", + "@babel/parser": "^7.23.0", + "@babel/template": "^7.22.15", + "@babel/traverse": "^7.23.0", + "@babel/types": "^7.23.0", + "convert-source-map": "^2.0.0", + "debug": "^4.1.0", + "gensync": "^1.0.0-beta.2", + "json5": "^2.2.3", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/babel" + } + }, + "node_modules/@vitejs/plugin-react/node_modules/convert-source-map": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", + "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", + "dev": true + }, + "node_modules/@vitejs/plugin-react/node_modules/react-refresh": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", + "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/@webassemblyjs/ast": { "version": "1.11.6", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz", @@ -21055,6 +21200,36 @@ "node": ">=10" } }, + "node_modules/playwright": { + "version": "1.38.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.1.tgz", + "integrity": "sha512-oRMSJmZrOu1FP5iu3UrCx8JEFRIMxLDM0c/3o4bpzU5Tz97BypefWf7TuTNPWeCe279TPal5RtPPZ+9lW/Qkow==", + "dev": true, + "dependencies": { + "playwright-core": "1.38.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=16" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, + "node_modules/playwright-core": { + "version": "1.38.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.1.tgz", + "integrity": "sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg==", + "dev": true, + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=16" + } + }, "node_modules/plugin-error": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz", @@ -22687,6 +22862,22 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/rollup": { + "version": "3.29.4", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz", + "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==", + "dev": true, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=14.18.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", @@ -25841,6 +26032,61 @@ "source-map": "^0.5.1" } }, + "node_modules/vite": { + "version": "4.4.11", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.11.tgz", + "integrity": "sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==", + "dev": true, + "dependencies": { + "esbuild": "^0.18.10", + "postcss": "^8.4.27", + "rollup": "^3.27.1" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + }, + "peerDependencies": { + "@types/node": ">= 14", + "less": "*", + "lightningcss": "^1.21.0", + "sass": "*", + "stylus": "*", + "sugarss": "*", + "terser": "^5.4.0" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "less": { + "optional": true + }, + "lightningcss": { + "optional": true + }, + "sass": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + } + } + }, "node_modules/w3c-xmlserializer": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz", diff --git a/package.json b/package.json index d51696bbba..1b408a4521 100644 --- a/package.json +++ b/package.json @@ -72,7 +72,12 @@ "lint:prettier:fix": "prettier --write '**/*.md'", "lint": "run-p lint:*", "typecheck": "tsc --noEmit", - "prepublishOnly": "npm run build" + "prepublishOnly": "npm run build", + "playwright:install": "playwright install --with-deps", + "playwright": "playwright test --config=playwright/playwright.config.ts", + "playwright:update": "npm run playwright -- -u", + "playwright:docker": "docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.39.0-jammy /bin/bash -c 'npm ci && npx playwright install && npm run playwright'", + "playwright:docker:update": " docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.39.0-jammy /bin/bash -c 'npm ci && npx playwright install && npm run playwright:update'" }, "dependencies": { "@bem-react/classname": "^1.6.0", @@ -103,6 +108,8 @@ "@gravity-ui/prettier-config": "^1.0.1", "@gravity-ui/stylelint-config": "^2.0.0", "@gravity-ui/tsconfig": "^1.0.0", + "@playwright/experimental-ct-react": "^1.38.1", + "@playwright/test": "^1.38.1", "@storybook/addon-essentials": "^7.4.6", "@storybook/cli": "^7.4.6", "@storybook/preset-scss": "^1.0.3", @@ -120,6 +127,7 @@ "@types/react-transition-group": "^4.4.6", "@types/react-virtualized-auto-sizer": "^1.0.1", "@types/react-window": "^1.8.5", + "@vitejs/plugin-react": "^4.1.0", "chroma-js": "^2.4.2", "cross-env": "^7.0.3", "eslint": "^8.47.0", diff --git a/playwright/README.md b/playwright/README.md new file mode 100644 index 0000000000..4ac762738a --- /dev/null +++ b/playwright/README.md @@ -0,0 +1,104 @@ +# Playwright Test Component + +## How to write a test + +1. Select the component you want to write tests for +2. Inside the component folder, create the `__tests__` folder and create a file inside it with the following name `.visual.test.tsx` +3. Writing a test: + + ```ts + import React from 'react'; + + import {expect, test} from '@playwright/experimental-ct-react'; + + import {MyTestedComponent} from '../MyTestedComponent'; + + test('Name test', async ({mount}) => { + //mounting a component + const component = await mount(); + + //screenshot + await expect(component).toHaveScreenshot(); + }); + ``` + +Group of tests. + +```ts +test.describe('Name group tests', () => { + test('1', ...); + test('2', ...); + ... + test('10', ...) +}); +``` + +4. Run tests + + ```shell + npm run playwright:install + npm run playwright + ``` + + If you are using system other than Linux, then you need to run tests via docker command: + + ```shell + npm run playwright:docker + ``` + + > `npm run playwright:install` command must be run only once on initial setup + +5. Update screenshots if needed + +```shell +npm run playwright:update +``` + +Or + +```shell +npm run playwright:docker:update +``` + +6.In the folder `__snapshots__`, which is on the same level as the `__tests__` folder, the folder `.visual.test.tsx-snapshots`, will contain screenshots + +## Description of possible commands: + +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) + +## Npm scripts + +- `npm run playwright:install` - install playwright browsers and dependencies +- `npm run playwright` - run tests +- `npm run playwright:update` - update screenshots +- `npm run playwright:docker` - run tests using docker +- `npm run playwright:docker:update` - update screenshots using docker diff --git a/playwright/helpers.tsx b/playwright/helpers.tsx new file mode 100644 index 0000000000..43d986e6fb --- /dev/null +++ b/playwright/helpers.tsx @@ -0,0 +1,5 @@ +import React from 'react'; + +export const WrapperTest = ({children}) => { + return
{children}
; +}; diff --git a/playwright/playwright.config.ts b/playwright/playwright.config.ts new file mode 100644 index 0000000000..b7ab346dd0 --- /dev/null +++ b/playwright/playwright.config.ts @@ -0,0 +1,70 @@ +import {resolve} from 'path'; + +import type {PlaywrightTestConfig} from '@playwright/experimental-ct-react'; +import {defineConfig, devices} from '@playwright/experimental-ct-react'; +import react from '@vitejs/plugin-react'; + +function pathFromRoot(p: string) { + return resolve(__dirname, '../', p); +} + +const reporter: PlaywrightTestConfig['reporter'] = []; + +reporter.push( + ['list'], + [ + 'html', + { + open: process.env.CI ? 'never' : 'on-failure', + outputFolder: resolve(process.cwd(), 'playwright-report'), + }, + ], +); + +/** + * See https://playwright.dev/docs/test-configuration. + */ +const config: PlaywrightTestConfig = { + testDir: pathFromRoot('src'), + testMatch: '**/__tests__/*.visual.test.tsx', + updateSnapshots: process.env.UPDATE_REQUEST ? 'all' : 'missing', + snapshotPathTemplate: + '{testDir}/{testFileDir}/../__snapshots__/{testFileName}-snapshots/{arg}{-projectName}-linux{ext}', + /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */ + /* Maximum time one test can run for. */ + timeout: 10 * 1000, + /* Run tests in files in parallel */ + fullyParallel: true, + /* Fail the build on CI if you accidentally left test.only in the source code. */ + forbidOnly: Boolean(process.env.CI), + /* Retry on CI only */ + retries: process.env.CI ? 2 : 0, + /* Opt out of parallel tests on CI. */ + workers: process.env.CI ? 8 : undefined, + /* Reporter to use. See https://playwright.dev/docs/test-reporters */ + reporter, + /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ + use: { + testIdAttribute: 'data-qa', + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: 'on-first-retry', + headless: true, + /* Port to use for Playwright component endpoint. */ + screenshot: 'only-on-failure', + timezoneId: 'UTC', + ctViteConfig: {plugins: [react()]}, + }, + /* Configure projects for major browsers */ + projects: [ + { + name: 'chromium', + use: {...devices['Desktop Chrome']}, + }, + { + name: 'webkit', + use: {...devices['Desktop Safari']}, + }, + ], +}; + +export default defineConfig(config); diff --git a/playwright/playwright/index.html b/playwright/playwright/index.html new file mode 100644 index 0000000000..6572a36e5f --- /dev/null +++ b/playwright/playwright/index.html @@ -0,0 +1,12 @@ + + + + + + Test component page + + +
+ + + diff --git a/playwright/playwright/index.scss b/playwright/playwright/index.scss new file mode 100644 index 0000000000..7a17f9ab7f --- /dev/null +++ b/playwright/playwright/index.scss @@ -0,0 +1 @@ +@import '../../styles/styles.scss'; diff --git a/playwright/playwright/index.tsx b/playwright/playwright/index.tsx new file mode 100644 index 0000000000..67aac616fc --- /dev/null +++ b/playwright/playwright/index.tsx @@ -0,0 +1 @@ +import './index.scss'; 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 new file mode 100644 index 0000000000..cb41574838 Binary files /dev/null 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 new file mode 100644 index 0000000000..df7f44a561 Binary files /dev/null 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 new file mode 100644 index 0000000000..add739edbe Binary files /dev/null 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 new file mode 100644 index 0000000000..512e380254 Binary files /dev/null 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 new file mode 100644 index 0000000000..3c54d0c55a Binary files /dev/null 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 new file mode 100644 index 0000000000..8c5966c684 Binary files /dev/null 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 new file mode 100644 index 0000000000..02de61bd55 Binary files /dev/null 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 new file mode 100644 index 0000000000..8557ce4535 Binary files /dev/null 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 new file mode 100644 index 0000000000..02de61bd55 Binary files /dev/null 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 new file mode 100644 index 0000000000..8557ce4535 Binary files /dev/null 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 new file mode 100644 index 0000000000..02de61bd55 Binary files /dev/null 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 new file mode 100644 index 0000000000..8557ce4535 Binary files /dev/null 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 new file mode 100644 index 0000000000..f9b94de312 Binary files /dev/null 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 new file mode 100644 index 0000000000..d975b3928a Binary files /dev/null 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 new file mode 100644 index 0000000000..83bbfa96f5 Binary files /dev/null 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 new file mode 100644 index 0000000000..8f6a601afa Binary files /dev/null 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 new file mode 100644 index 0000000000..02de61bd55 Binary files /dev/null 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 new file mode 100644 index 0000000000..8557ce4535 Binary files /dev/null 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 new file mode 100644 index 0000000000..05bb38c705 Binary files /dev/null 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 new file mode 100644 index 0000000000..6342a01b24 Binary files /dev/null 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 new file mode 100644 index 0000000000..ce9750670d Binary files /dev/null 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 new file mode 100644 index 0000000000..c1063e0fac Binary files /dev/null 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 new file mode 100644 index 0000000000..59a06997b4 Binary files /dev/null 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 new file mode 100644 index 0000000000..841104feba Binary files /dev/null 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 new file mode 100644 index 0000000000..dac8ea1cac Binary files /dev/null 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 new file mode 100644 index 0000000000..c6df66cee9 Binary files /dev/null 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 new file mode 100644 index 0000000000..08edac4fc9 --- /dev/null +++ b/src/components/Button/__tests__/Button.visual.test.tsx @@ -0,0 +1,111 @@ +import React from 'react'; + +import {Gear} from '@gravity-ui/icons'; +import {expect, test} from '@playwright/experimental-ct-react'; + +import {Button} from '../Button'; +import {ButtonViewShowcase} from '../__stories__/ButtonViewShowcase'; + +import {ButtonIcon, ButtonWitchIcon} from './helpers'; + +test.describe('Button', () => { + test('render buttom by default', async ({mount}) => { + const component = await mount(); + + await expect(component).toHaveScreenshot(); + }); + + test('should render icon', async ({mount}) => { + const component = await mount( + , + ); + + await expect(component).toHaveScreenshot(); + }); + + test('should render icon in Button-Icon', async ({mount}) => { + const component = await mount(); + + await expect(component).toHaveScreenshot(); + }); + + test('selected when selected=true prop is given', async ({mount}) => { + const component = await mount(); + + await expect(component).toHaveScreenshot(); + }); + + test('loading when loading=true prop is given', async ({mount}) => { + const component = await mount(); + + await expect(component).toHaveScreenshot(); + }); + + test('should render tag', async ({mount}) => { + const href = 'https://yandex.ru'; + const target = '_blank'; + + const component = await mount( + , + ); + + await expect(component).toHaveScreenshot(); + }); + + test('render with given submit type', async ({mount}) => { + const component = await mount(); + + await expect(component).toHaveScreenshot(); + }); + + test('render with given reset type', async ({mount}) => { + const component = await mount(); + + await expect(component).toHaveScreenshot(); + }); + + test('show given content', async ({mount}) => { + const content = 'Some content'; + + const component = await mount(); + + await expect(component).toHaveScreenshot(); + }); + + test('show given children', async ({mount}) => { + const childrenText = 'Children content'; + + const component = await mount( + , + ); + + await expect(component).toHaveScreenshot(); + }); + + test('add style', async ({mount}) => { + const style = {color: 'red'}; + + const component = await mount(); + + await expect(component).toHaveScreenshot(); + }); + + test('should render Icon component', async ({mount}) => { + const component = await mount(); + + await expect(component).toHaveScreenshot(); + }); + + test('ButtonViewShowcase', async ({mount}) => { + const component = await mount(); + + await expect(component).toHaveScreenshot(); + }); +}); diff --git a/src/components/Button/__tests__/helpers.tsx b/src/components/Button/__tests__/helpers.tsx new file mode 100644 index 0000000000..6999483c1e --- /dev/null +++ b/src/components/Button/__tests__/helpers.tsx @@ -0,0 +1,26 @@ +import React from 'react'; + +import {Gear} from '@gravity-ui/icons'; + +import {Icon} from '../../Icon'; +import {Button} from '../Button'; + +export const ButtonWitchIcon = () => { + return ( + + ); +}; + +export const ButtonIcon = () => { + return ( + + ); +};