31 lines
1.7 KiB
Markdown
31 lines
1.7 KiB
Markdown
|
# end-to-end testing
|
||
|
|
|
||
|
|
End-to-end tests (short <abbr title="end-to-end">e2e</abbr>) are split into two parts:
|
||
|
|
|
||
|
|
1. The rendered UI (short: fixture)
|
||
|
|
2. Instrumentation of that UI
|
||
|
|
|
||
|
|
## Rendered UI
|
||
|
|
|
||
|
|
The composition of all tests happens in `./index.js`.
|
||
|
|
The rendered UI is located inside a separate file in `./fixtures` and written as a React component.
|
||
|
|
If you're adding a new test prefer a new component instead of editing existing files since that might unknowingly alter existing tests.
|
||
|
|
|
||
|
|
## Instrumentation
|
||
|
|
|
||
|
|
We're using [`playwright`](https://playwright.dev) to replay user actions.
|
||
|
|
Each test tests only a single fixture.
|
||
|
|
A fixture can be loaded with `await renderFixture(fixturePath)`, for example `renderFixture('FocusTrap/OpenFocusTrap')`.
|
||
|
|
|
||
|
|
## Commands
|
||
|
|
|
||
|
|
For development `pnpm test:e2e:dev` and `pnpm test:e2e:run --watch` in separate terminals is recommended.
|
||
|
|
|
||
|
|
| command | description |
|
||
|
|
| :--------------------- | :-------------------------------------------------------------------------------------------- |
|
||
|
|
| `pnpm test:e2e` | Full run |
|
||
|
|
| `pnpm test:e2e:dev` | Prepares the fixtures to be able to test in watchmode |
|
||
|
|
| `pnpm test:e2e:run` | Runs the tests (requires `pnpm test:e2e:dev` or `pnpm test:e2e:build`+`pnpm test:e2e:server`) |
|
||
|
|
| `pnpm test:e2e:build` | Builds the webpack bundle for viewing the fixtures |
|
||
|
|
| `pnpm test:e2e:server` | Serves the fixture bundle. |
|