test: add visual tests infra #1047

NasgulNexus · 2023-10-11T09:06:40Z

No description provided.

gravity-ui-bot · 2023-10-11T09:09:18Z

amje · 2023-10-11T10:56:43Z

@NasgulNexus I think doing test for each component variation is not very efficient, e.g. Button has hundreds of props combination Why don't we take screenshots of component stories from storybook preview instead?

korvin89

I think it will be better to separate unit and snapshot tests. I suggest the next hierarchy:

> Component/
    > __tests__/
    > __snapshot-tests__/
        > {Component}.{case-scope}/
            > snapshots/
            > {Component}.{case-scope}.test.tsx

What do u think about it?

NasgulNexus · 2023-11-08T14:42:06Z

snapshot-tests/

I would suggest this structure, folder ____snapshot-tests__ or __visual-tests__. file name {Component}.{visual or snapshot-tests}.test.tsx - It seems to me that it will be good if the file name has an additional name different from the usual tests.

Now it itself generates the name of the folder where it will put screenshots, depending on the name of the test. If there are several tests in a folder where screenshots are taken, then I would not put them in one folder. What’s a plus is the ability to quickly find the required screenshot and perform any actions with it.

.github/workflows/playwright.yml

amje · 2023-11-08T19:05:35Z

.github/workflows/playwright.yml

+      env:
+        CI: 'true'
+    - name: Upload Playwright playwright report to GitHub Actions Artifacts
+      if: always()


This line needed?

I made it so that the report was always shown and during development it was clear whether new tests appeared or not

I mean isnt's if: always() equal to not specifing if statement at all?

https://github.com/gravity-ui/uikit/actions/runs/6888720871/job/18738258388#step:6:4712 tested without if it doesn't work.
because the test crashes and then does not perform other tasks. Without if he will do it only when everything went well

package.json

playwright/README.md

amje · 2023-11-08T19:11:08Z

playwright/README.md

+## How to write a test
+
+1. You need to select the component for which you want to write tests
+2. In the component folder, create a folder `__tests__`


Suggested change

2. In the component folder, create a folder `__tests__`

2. Inside the component folder, create the `__tests__` folder

Why new name is __snapshots__?

amje · 2023-11-08T19:27:20Z

playwright/playwright.config.ts

+    testMatch: '*/__tests__/*.visual.test.tsx',
+    updateSnapshots: process.env.UPDATE_REQUEST ? 'all' : 'missing',
+    snapshotPathTemplate:
+        '{testDir}/{testFileDir}/{testFileName}-snapshots/{arg}{-projectName}-linux{ext}',


Let's do this in the Jest manner:

Suggested change

'{testDir}/{testFileDir}/{testFileName}-snapshots/{arg}{-projectName}-linux{ext}',

'{testDir}/{testFileDir}/__snapshots__/{arg}{-projectName}-linux{ext}',

playwright/playwright.config.ts

amje · 2023-11-08T19:30:35Z

playwright/playwright/index.html

+    </head>
+    <body>
+        <div id="root" class="g-root g-root_theme_light"></div>
+        <script type="module" src="./index.tsx"></script>


I assume styles can be import like so, no scripts needed:

<link rel="stylesheet" href="index.scss" />

without index ts, the tests do not work, through this file it mounts the component

Can it be empty?

Yes, you can leave the file empty. But in the dock they recommend connecting from index tsx

src/components/Button/__tests__/ButtonHelpers.tsx

amje · 2023-11-08T19:35:41Z

I think it will be better to separate unit and snapshot tests. I suggest the next hierarchy:
> Component/
    > __tests__/
    > __snapshot-tests__/
        > {Component}.{case-scope}/
            > snapshots/
            > {Component}.{case-scope}.test.tsx
What do u think about it?

@korvin89 @NasgulNexus I suggest to keep the Jest structure with .visual. suffix:

> Component/
    > __tests__/
        > {Component}.{case-scope}.visual.test.tsx
    > __snapshots__/
        > {Component}.{case-scope}/

gravity-ui-bot · 2023-11-10T11:06:37Z

Playwright Test Component is ready.

amje · 2023-11-10T13:06:37Z

package.json

+        "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:update: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:update'"


playwright:docker:update

amje · 2023-11-10T13:11:24Z

playwright/README.md

+   import {MyTestedComponent} from '../MyTestedComponent';
+   ```
+
+5. Writing a test:


I've meant get code from 4 and put it into 5. Title In the file to make imports should be removed also

amje · 2023-11-10T13:11:49Z

playwright/README.md

+## How to write a test
+
+1. You need to select the component for which you want to write tests
+2. In the component folder, create a folder `__tests__`


Why new name is __snapshots__?

playwright/playwright.config.ts

playwright/README.md

playwright/playwright.config.ts

amje · 2023-11-16T12:54:56Z

@NasgulNexus Why in the recent update all screenshots updated and shifted by 1 pixel?

NasgulNexus · 2023-11-16T13:04:21Z

@NasgulNexus Why in the recent update all screenshots updated and shifted by 1 pixel?

for the ci test, I took screenshots locally. And then I took screenshots through the docker image for linux. And because of the font difference, this happened.

For example, I am applying a test run locally. Waiting is the removal of the docker image

NasgulNexus requested review from korvin89, Lunory, amje, Marginy605 and ValeraS as code owners October 11, 2023 09:06

korvin89 added the Work in progress label Oct 11, 2023

NasgulNexus force-pushed the test-component branch from cace10e to a5fc240 Compare October 12, 2023 12:19

korvin89 reviewed Nov 8, 2023

View reviewed changes

korvin89 removed the Work in progress label Nov 8, 2023

amje requested changes Nov 8, 2023

View reviewed changes

NasgulNexus added the Work in progress label Nov 10, 2023

amje reviewed Nov 10, 2023

View reviewed changes

playwright/playwright.config.ts Outdated Show resolved Hide resolved

playwright/playwright.config.ts Outdated Show resolved Hide resolved

NasgulNexus force-pushed the test-component branch from 8a1886c to a0a8580 Compare November 13, 2023 16:59

NasgulNexus removed the Work in progress label Nov 14, 2023

amje requested changes Nov 15, 2023

View reviewed changes

playwright/README.md Outdated Show resolved Hide resolved

amje requested changes Nov 15, 2023

View reviewed changes

playwright/playwright.config.ts Outdated Show resolved Hide resolved

amje changed the title ~~Test component~~ test: add visual tests infra Nov 17, 2023

NasgulNexus added 5 commits November 17, 2023 14:37

chore(TestComponent): made a new kind of component testing

51510f5

fix: ci

939da08

fix: ci

618723e

fix: ci

959179f

fix: ci

4513a35

NasgulNexus added 25 commits November 17, 2023 14:37

fix: upload reports

d2b3d9d

fix: retries 0

5929f42

fix: test styles

360212a

fix: config

425b89e

fix: test channel

18d1c9f

fix: delete channel

bc84b37

fix: add upload test-result

fbb9110

fix: add docker

5d8bb87

fix: delete test

a6d90e3

fix: change ci

5877113

fix: add always

f55102f

fix: add always

a6ba436

fix: delete container

9abae19

fix: test aws

e2202be

fix: test commit

aae8b1b

fix: docs

bbc692d

fix: folder tests

c7c9b3b

fix: ci

6c58de1

fix: fix broken test

485ed8a

fix: test tests

e8b903c

fix: rebase

ce44594

fix: test ci if

16c956a

fix: correct remarks

735383b

fix: fix docs

aa02617

fix: commit ci cd

9d7d11a

NasgulNexus force-pushed the test-component branch from 285fe30 to 9d7d11a Compare November 17, 2023 13:54

amje approved these changes Nov 17, 2023

View reviewed changes

NasgulNexus merged commit e80b088 into main Nov 18, 2023
4 checks passed

NasgulNexus deleted the test-component branch November 18, 2023 00:56

amje mentioned this pull request Nov 29, 2023

Add screenshot testing #283

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

test: add visual tests infra #1047

test: add visual tests infra #1047

NasgulNexus commented Oct 11, 2023

gravity-ui-bot commented Oct 11, 2023 •

edited

Loading

amje commented Oct 11, 2023

korvin89 left a comment

NasgulNexus commented Nov 8, 2023

amje Nov 8, 2023

NasgulNexus Nov 13, 2023

amje Nov 15, 2023

NasgulNexus Nov 16, 2023

amje Nov 8, 2023

amje Nov 10, 2023

amje Nov 8, 2023

amje Nov 8, 2023

NasgulNexus Nov 13, 2023

amje Nov 15, 2023

NasgulNexus Nov 16, 2023

amje commented Nov 8, 2023

gravity-ui-bot commented Nov 10, 2023

amje Nov 10, 2023

amje Nov 10, 2023

amje Nov 10, 2023

amje commented Nov 16, 2023

NasgulNexus commented Nov 16, 2023

	2. In the component folder, create a folder `__tests__`
	2. Inside the component folder, create the `__tests__` folder

	'{testDir}/{testFileDir}/{testFileName}-snapshots/{arg}{-projectName}-linux{ext}',
	'{testDir}/{testFileDir}/__snapshots__/{arg}{-projectName}-linux{ext}',

test: add visual tests infra #1047

test: add visual tests infra #1047

Conversation

NasgulNexus commented Oct 11, 2023

gravity-ui-bot commented Oct 11, 2023 • edited Loading

amje commented Oct 11, 2023

korvin89 left a comment

Choose a reason for hiding this comment

NasgulNexus commented Nov 8, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amje commented Nov 8, 2023

gravity-ui-bot commented Nov 10, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amje commented Nov 16, 2023

NasgulNexus commented Nov 16, 2023

gravity-ui-bot commented Oct 11, 2023 •

edited

Loading