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:
HarelM
2026-07-08 12:42:32 +03:00
parent f7b48139a4
commit c3dd253737
33 changed files with 1908 additions and 3879 deletions
+43 -81
View File
@@ -1,124 +1,86 @@
import { MaputnikDriver } from "./maputnik-driver";
import { test, setupMaputnik } from "./fixtures";
test.describe("history", () => {
const { beforeAndAfter, when, get, then } = new MaputnikDriver();
beforeAndAfter();
setupMaputnik();
let undoKeyCombo: string;
let redoKeyCombo: string;
const undoKeyCombo = process.platform === "darwin" ? "{meta}z" : "{ctrl}z";
const redoKeyCombo = process.platform === "darwin" ? "{meta}{shift}z" : "{ctrl}y";
before(() => {
const isMac = get.isMac();
undoKeyCombo = isMac ? "{meta}z" : "{ctrl}z";
redoKeyCombo = isMac ? "{meta}{shift}z" : "{ctrl}y";
});
test("undo/redo", async ({ driver }) => {
const { get, when, then } = driver;
await when.setStyle("geojson");
await when.modal.open();
test("undo/redo", () => {
when.setStyle("geojson");
when.modal.open();
when.modal.fillLayers({
await when.modal.fillLayers({
id: "step 1",
type: "background",
});
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: "step 1",
type: "background",
},
],
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [{ id: "step 1", type: "background" }],
});
when.modal.open();
when.modal.fillLayers({
await when.modal.open();
await when.modal.fillLayers({
id: "step 2",
type: "background",
});
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: "step 1",
type: "background",
},
{
id: "step 2",
type: "background",
},
{ id: "step 1", type: "background" },
{ id: "step 2", type: "background" },
],
});
when.typeKeys(undoKeyCombo);
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: "step 1",
type: "background",
},
],
await when.typeKeys(undoKeyCombo);
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [{ id: "step 1", type: "background" }],
});
when.typeKeys(undoKeyCombo);
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ layers: [] });
await when.typeKeys(undoKeyCombo);
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ layers: [] });
when.typeKeys(redoKeyCombo);
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: "step 1",
type: "background",
},
],
await when.typeKeys(redoKeyCombo);
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [{ id: "step 1", type: "background" }],
});
when.typeKeys(redoKeyCombo);
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
await when.typeKeys(redoKeyCombo);
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: "step 1",
type: "background",
},
{
id: "step 2",
type: "background",
},
{ id: "step 1", type: "background" },
{ id: "step 2", type: "background" },
],
});
});
test("should not redo after undo and value change", () => {
when.setStyle("geojson");
when.modal.open();
when.modal.fillLayers({
test("should not redo after undo and value change", async ({ driver }) => {
const { get, when, then } = driver;
await when.setStyle("geojson");
await when.modal.open();
await when.modal.fillLayers({
id: "step 1",
type: "background",
});
when.modal.open();
when.modal.fillLayers({
await when.modal.open();
await when.modal.fillLayers({
id: "step 2",
type: "background",
});
when.typeKeys(undoKeyCombo);
when.typeKeys(undoKeyCombo);
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ layers: [] });
await when.typeKeys(undoKeyCombo);
await when.typeKeys(undoKeyCombo);
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ layers: [] });
when.modal.open();
when.modal.fillLayers({
await when.modal.open();
await when.modal.fillLayers({
id: "step 3",
type: "background",
});
when.typeKeys(redoKeyCombo);
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: "step 3",
type: "background",
},
],
await when.typeKeys(redoKeyCombo);
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [{ id: "step 3", type: "background" }],
});
});
});