mirror of https://github.com/PostHog/posthog.git synced 2024-11-30 19:41:46 +01:00

chore(storybook): upgrade storybook to 7.3 (#17078 )

* feat(kea): typegen path cleanup and delete unused files

* bump

* 3.2.2

* typegen upgrade to 3.3.0

* storybook 7.3

* upgrade storybook to 7.3

* try using #storybook-root instead of #root

* try using #storybook-root instead of #root (2)

* try using #storybook-root instead of #root (3)

* try using #storybook-root instead of #root (4)

* switch out argTypes.defaultValue with args

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (1)

---------

Co-authored-by: Thomas Obermüller <thomas.obermueller@gmail.com>
Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

2023-08-21 09:32:49 +02:00

3.1 KiB

Raw Blame History

Visual Regression Tests

We're using Playwright to run visual regression tests against Storybook. To create reference images that are consistent between development and CI we run Playwright in an Ubuntu Docker container.

Workflow

Writing or updating a test

Use fixtures

tbd
Perform the actions to get to the state
- Get inspiration from one of the existing tests. Lemon Button and Insights scene are good examples.
- Use Playwright's codegen feature to record user interactions interactively e.g. pnpm playwright codegen "http://localhost:6006/iframe.html?args=&id=scenes-app-insights--trends-line&viewMode=story".
- Use Playwright's debug mode to inspect an existing test in a headed browser e.g. pnpm playwright test --debug e2e-vrt/scenes-app/mytest.spec.ts:17:5. Sprinkle in await page.pause() in your test to stop at specific lines.
Add screenshot expectations:
- Capture the whole page (we rarely use this):
```
await expect(page).toHaveScreenshot({ fullPage: true })
```
- Capture content within a container element:
```
const locator = page.locator('#storybook-root')
await expect(locator).toHaveScreenshot()
```
- Suggested Storybook container elements:
  - #root for components and
  - .main-app-content for scenes
Generate the reference images (you need to have Storybook running locally, i.e. on the Docker host machine):
```
docker compose -f docker-compose.playwright.yml run -it --build -e STORYBOOK_URL=http://host.docker.internal:6006 playwright pnpm test:visual-regression
```
If your docker compose version is lower than 2.13, you won't be able to use the --build flag. Instead, first run docker compose -f docker-compose.playwright.yml build playwright, and then the above run command - without the --build arg.

Open the generated report locally with pnpm dlx playwright show-report to see test results (they are mounted local in docker volume)

Renaming or deleting tests

When deleting or renaming a test, (re-)move the respective reference images as well or delete rm -rf playwright/**/*.png and re-create (see above) them.

Troubleshooting

The CI run on GitHub fails for any reason

Troubleshoot by viewing the Playwright report: Click on "Details" next to the failing workflow, click on "Summary" and download the artifact file. Extract this file and navigate to it in a terminal to then run pnpm dlx playwright show-report.

Your locally generated images, don't verify CI checks

GitHub is running tests against a temporary merge commit (to ensure tests still pass after being merged), meaning any changes currently in master will be present in the images generated in the CI run. If you suspect this is the case, merge master into your branch and push again.

The screenshots look wrong and I want to debug it live

If you run any playwright command with PWDEBUG=1 then it will run in "headfull" mode so that you can see the browser and look into what is going on

3.1 KiB Raw Blame History