mirror of
https://github.com/maputnik/editor.git
synced 2026-07-09 15:37:28 +00:00
test: migrate e2e to Playwright and component test to Vitest browser mode
Replace Cypress with Playwright for the end-to-end suite and drop
@shellygo/cypress-test-utils in favour of a hand-written MaputnikDriver
page object that keeps the fluent then(...).shouldX() assertion style
(now async). The InputAutocomplete component test moves to Vitest browser
mode using the Playwright provider.
- e2e/maputnik-driver.ts: driver + MaputnikAssertable over Playwright
- e2e/{fixtures,coverage,global-setup,global-teardown}.ts: test fixture,
istanbul coverage collection, and nyc report generation
- playwright.config.ts / vitest.config.ts
- Code coverage preserved: dev server is istanbul-instrumented, per-test
window.__coverage__ is merged via nyc into coverage/coverage-final.json
- CI: Cypress jobs replaced with Playwright; docker e2e runs against the
container via E2E_NO_WEBSERVER
- Remove Cypress deps, config and support files; update docs and .nycrc
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -79,26 +79,45 @@ npm run sort-styles
|
||||
```
|
||||
|
||||
## Tests
|
||||
For E2E testing we use [Cypress](https://www.cypress.io/)
|
||||
|
||||
[Cypress](https://www.cypress.io/) doesn't start a server so you'll need to start one manually by running `npm run start`.
|
||||
### End-to-end tests
|
||||
|
||||
Now open a terminal and run the following using *chrome*:
|
||||
For E2E testing we use [Playwright](https://playwright.dev/). The tests live in the [`e2e`](/e2e) directory and drive the app through the `MaputnikDriver` page object.
|
||||
|
||||
The first time you run the tests, install the browser:
|
||||
|
||||
```
|
||||
npx playwright install chromium
|
||||
```
|
||||
|
||||
Playwright automatically starts the dev server (`npm run start`) for you, so you can just run:
|
||||
|
||||
```
|
||||
npm run test
|
||||
```
|
||||
or *firefox*:
|
||||
```
|
||||
npm run test -- --browser firefox
|
||||
```
|
||||
|
||||
See the following docs for more info: (Launching Browsers)[https://docs.cypress.io/guides/guides/launching-browsers]
|
||||
|
||||
You can also see the tests as they run or select which suites to run by executing:
|
||||
Some useful options:
|
||||
|
||||
```
|
||||
npm run cy:open
|
||||
# see the tests run in a headed browser
|
||||
npm run test -- --headed
|
||||
|
||||
# run a single spec / filter by title
|
||||
npm run test -- e2e/map.spec.ts
|
||||
npm run test -- -g "zoom level"
|
||||
|
||||
# open the interactive UI mode
|
||||
npx playwright test --ui
|
||||
```
|
||||
|
||||
Running the E2E tests also produces a code-coverage report in `coverage/` (collected via istanbul instrumentation of the dev server).
|
||||
|
||||
### Unit & component tests
|
||||
|
||||
Unit tests and component tests run with [Vitest](https://vitest.dev/); component tests (`*.browser.test.tsx`) use Vitest's browser mode with the Playwright provider.
|
||||
|
||||
```
|
||||
npm run test-unit
|
||||
```
|
||||
|
||||
## Release process
|
||||
|
||||
Reference in New Issue
Block a user