diff --git a/.github/workflows/deploy-gh-pages.yml b/.github/workflows/deploy-gh-pages.yml index a7ae42c..d9e0e21 100644 --- a/.github/workflows/deploy-gh-pages.yml +++ b/.github/workflows/deploy-gh-pages.yml @@ -18,7 +18,34 @@ jobs: - run: npm ci - run: npm run build - run: npm test - - run: npm run cy:start-and-run + - name: Get Playwright version + id: playwright-version + run: echo "version=$(node -p "require('@playwright/test/package.json').version")" >> $GITHUB_OUTPUT + + - name: Cache Playwright Browsers + id: cache-playwright + uses: actions/cache@v4 + with: + path: ~/.cache/ms-playwright + key: playwright-${{ runner.os }}-${{ steps.playwright-version.outputs.version }} + + - name: Install Playwright System Dependencies + run: npx playwright install-deps chromium + + - name: Install Playwright Browsers (If Not Cached) + if: steps.cache-playwright.outputs.cache-hit != 'true' + run: npx playwright install chromium + + - name: Run E2E Tests + run: npm run test:e2e + + - name: Upload Playwright report + if: always() + uses: actions/upload-artifact@v4 + with: + name: playwright-report-gh-pages + path: playwright-report/ + retention-days: 30 - name: Deploy run: | git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git diff --git a/.github/workflows/deploy-wikitree-apps.yml b/.github/workflows/deploy-wikitree-apps.yml index a21aa2e..b4015b2 100644 --- a/.github/workflows/deploy-wikitree-apps.yml +++ b/.github/workflows/deploy-wikitree-apps.yml @@ -18,7 +18,34 @@ jobs: - run: npm ci - run: npm run build - run: npm test - - run: npm run cy:start-and-run + - name: Get Playwright version + id: playwright-version + run: echo "version=$(node -p "require('@playwright/test/package.json').version")" >> $GITHUB_OUTPUT + + - name: Cache Playwright Browsers + id: cache-playwright + uses: actions/cache@v4 + with: + path: ~/.cache/ms-playwright + key: playwright-${{ runner.os }}-${{ steps.playwright-version.outputs.version }} + + - name: Install Playwright System Dependencies + run: npx playwright install-deps chromium + + - name: Install Playwright Browsers (If Not Cached) + if: steps.cache-playwright.outputs.cache-hit != 'true' + run: npx playwright install chromium + + - name: Run E2E Tests + run: npm run test:e2e + + - name: Upload Playwright report + if: always() + uses: actions/upload-artifact@v4 + with: + name: playwright-report-wikitree + path: playwright-report/ + retention-days: 30 - name: Install lftp run: sudo apt-get install -y lftp - name: Set up ssh diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index 67ea166..4c8632e 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -28,10 +28,39 @@ jobs: cache: 'npm' - run: npm ci - name: Prettier Format Check - run: | - npm run prettier - git diff --exit-code + run: npx prettier --check "{src,tests}/**/*.{ts,tsx,json}" - run: npm run lint - run: npm run build - run: npm test - - run: npm run cy:start-and-run + + - name: Typecheck E2E Specs + run: npx tsc -p tests/tsconfig.json --noEmit + + - name: Get Playwright version + id: playwright-version + run: echo "version=$(node -p "require('@playwright/test/package.json').version")" >> $GITHUB_OUTPUT + + - name: Cache Playwright Browsers + id: cache-playwright + uses: actions/cache@v4 + with: + path: ~/.cache/ms-playwright + key: playwright-${{ runner.os }}-${{ steps.playwright-version.outputs.version }} + + - name: Install Playwright System Dependencies + run: npx playwright install-deps chromium + + - name: Install Playwright Browsers (If Not Cached) + if: steps.cache-playwright.outputs.cache-hit != 'true' + run: npx playwright install chromium + + - name: Run E2E Tests + run: npm run test:e2e + + - name: Upload Playwright report + if: always() + uses: actions/upload-artifact@v4 + with: + name: playwright-report-${{ matrix.node-version }} + path: playwright-report/ + retention-days: 30 diff --git a/.gitignore b/.gitignore index 2ce08e9..dc1deec 100644 --- a/.gitignore +++ b/.gitignore @@ -1,8 +1,8 @@ dist node_modules src/react-app-env.d.ts -cypress/fixtures/example.json -cypress/screenshots -cypress/videos +playwright-report/ +test-results/ +.playwright/ .idea .vscode diff --git a/PROJECT_STRUCTURE.md b/PROJECT_STRUCTURE.md index 68d63b8..83bf181 100644 --- a/PROJECT_STRUCTURE.md +++ b/PROJECT_STRUCTURE.md @@ -4,7 +4,7 @@ This directory is the root directory of the **Topola Genealogy Viewer** project. ## Purpose of this Directory -The root directory orchestrates the project. It contains configuration files for various tools (Vite, ESLint, Jest, Cypress, TypeScript), metadata about dependencies (`package.json`), and scripts for common tasks. It glues together the source code in `src`, the static assets in `public`, and the tests in `cypress`. +The root directory orchestrates the project. It contains configuration files for various tools (Vite, ESLint, Jest, Playwright, TypeScript), metadata about dependencies (`package.json`), and scripts for common tasks. It glues together the source code in `src`, the static assets in `public`, and the tests in `tests`. ## Files in this Directory (Categorized by Role) @@ -29,7 +29,7 @@ Here is an enumeration of the files in this directory, categorized by their role * **[tsconfig.json](tsconfig.json)**: Configuration file for the TypeScript compiler. ### Testing -* **[cypress.config.ts](cypress.config.ts)**: Configuration file for Cypress end-to-end testing framework. +* **[playwright.config.ts](playwright.config.ts)**: Configuration file for Playwright end-to-end testing framework. * **[jest.config.ts](jest.config.ts)**: Configuration file for the Jest testing framework used for unit tests. ### Documentation & Assets @@ -49,4 +49,4 @@ Based on the documentation in the subdirectories, here is a high-level overview * **[translations](src/translations)**: Holds localization JSON files. * **[util](src/util)**: Common utilities for dates, analytics, and data processing. * **[public](public)**: Contains static assets (like the favicon) served directly at the root path. -* **[cypress](cypress)**: Contains end-to-end tests in the `e2e` folder. +* **[tests](tests)**: Contains end-to-end tests. diff --git a/cypress.config.ts b/cypress.config.ts deleted file mode 100644 index b45ce7f..0000000 --- a/cypress.config.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { defineConfig } from 'cypress' - -export default defineConfig({ - viewportWidth: 1280, - viewportHeight: 1024, - chromeWebSecurity: false, - e2e: { - baseUrl: 'http://localhost:3000/#', - supportFile: false, - }, -}) diff --git a/cypress/e2e/README.md b/cypress/e2e/README.md deleted file mode 100644 index de53a48..0000000 --- a/cypress/e2e/README.md +++ /dev/null @@ -1,17 +0,0 @@ -# Cypress E2E Tests - -This directory contains End-to-End (E2E) tests for the Topola Viewer application, using the Cypress testing framework. The purpose of these tests is to verify the application's behavior from a user's perspective by simulating interactions in a real browser environment. - -## Test Files - -- [chart_view.cy.js](file:///home/pwiech/personal/github/topola-viewer/cypress/e2e/chart_view.cy.js) - Tests the core functionality of the chart view. It verifies that data can be loaded from a remote URL, that the chart can be interacted with (e.g., expanding nodes to show more people), and that the side panel displays correct information. - -- [embedded.cy.js](file:///home/pwiech/personal/github/topola-viewer/cypress/e2e/embedded.cy.js) - Tests the application in embedded mode. It verifies that Topola can be successfully loaded and run within an iframe, which is how it might be used when embedded in other websites. - -- [intro.cy.js](file:///home/pwiech/personal/github/topola-viewer/cypress/e2e/intro.cy.js) - Tests the application's landing page (intro page). It ensures that the introductory text is visible and that the main menu actions (like opening a file or loading from a URL) are present. - -- [search.cy.js](file:///home/pwiech/personal/github/topola-viewer/cypress/e2e/search.cy.js) - Tests the search functionality within the application. It verifies that users can search for individuals and that selecting a result correctly highlights or displays that person in the view. diff --git a/cypress/e2e/chart_view.cy.js b/cypress/e2e/chart_view.cy.js deleted file mode 100644 index 1ed6f7c..0000000 --- a/cypress/e2e/chart_view.cy.js +++ /dev/null @@ -1,19 +0,0 @@ -describe('Chart view', () => { - beforeEach(() => { - cy.visit('/view?handleCors=false&url=https%3A%2F%2Fraw.githubusercontent.com%2FPeWu%2Ftopola%2Fmaster%2Fdemo%2Fdata%2Ffamily.ged'); - }); - - it('loads data from URL', () => { - cy.contains('Bonifacy'); - }); - - it('Animates chart', () => { - cy.contains('Chike').should('not.exist'); - cy.contains('Radobod').click({force: true}); - cy.contains('Chike'); - }); - - it('shows the right panel', () => { - cy.contains('a random note'); - }); -}); diff --git a/cypress/e2e/embedded.cy.js b/cypress/e2e/embedded.cy.js deleted file mode 100644 index d8c37d1..0000000 --- a/cypress/e2e/embedded.cy.js +++ /dev/null @@ -1,11 +0,0 @@ -describe('Embedded mode', () => { - it('shows data', () => { - const url = 'https://pewu.github.io/topola-embedded/#' + Cypress.config('baseUrl'); - cy.visit(url); - cy.get('iframe') - .its('0.contentDocument.body').should('not.be.empty') - .then(cy.wrap) - .find('#root') - .contains('Bonifacy'); - }); -}); diff --git a/cypress/e2e/intro.cy.js b/cypress/e2e/intro.cy.js deleted file mode 100644 index 5f61936..0000000 --- a/cypress/e2e/intro.cy.js +++ /dev/null @@ -1,12 +0,0 @@ -describe('Intro page', () => { - beforeEach(() => { - cy.visit('/'); - }); - it('displays intro text', () => { - cy.contains('Examples'); - }); - it('displays menu', () => { - cy.contains('Open file'); - cy.contains('Load from URL'); - }); -}); diff --git a/cypress/e2e/search.cy.js b/cypress/e2e/search.cy.js deleted file mode 100644 index e1a91f0..0000000 --- a/cypress/e2e/search.cy.js +++ /dev/null @@ -1,12 +0,0 @@ -describe('Chart view', () => { - beforeEach(() => { - cy.visit('/view?handleCors=false&url=https%3A%2F%2Fraw.githubusercontent.com%2FPeWu%2Ftopola%2Fmaster%2Fdemo%2Fdata%2Ffamily.ged'); - }); - it('Search works', () => { - cy.contains('Chike').should('not.exist'); - cy.get('#search').type('chik'); - cy.contains('Chike'); - cy.get('#search').type('{enter}'); - cy.get('#content').contains('Chike'); - }); -}); diff --git a/cypress/e2e/webmcp.cy.js b/cypress/e2e/webmcp.cy.js deleted file mode 100644 index fb110b4..0000000 --- a/cypress/e2e/webmcp.cy.js +++ /dev/null @@ -1,37 +0,0 @@ -describe('WebMCP Integration', () => { - let registeredTools = []; - - beforeEach(() => { - registeredTools = []; - cy.visit('/view?handleCors=false&url=https%3A%2F%2Fraw.githubusercontent.com%2FPeWu%2Ftopola%2Fmaster%2Fdemo%2Fdata%2Ffamily.ged', { - onBeforeLoad(win) { - win.navigator.modelContext = { - registerTool: (tool) => { - registeredTools.push(tool); - } - }; - } - }); - }); - - it('registers tools to standard modelContext', () => { - cy.wrap(registeredTools).should('have.length', 7); - const toolNames = registeredTools.map(t => t.name); - expect(toolNames).to.include('get_selected_person'); - expect(toolNames).to.include('search_indi'); - expect(toolNames).to.include('inspect_indi'); - expect(toolNames).to.include('focus_indi'); - expect(toolNames).to.include('find_relationship_path'); - expect(toolNames).to.include('get_ancestors'); - expect(toolNames).to.include('get_descendants'); - }); - - it('allows running focus_indi tool', () => { - cy.contains('Radobod'); - cy.wrap(registeredTools).then((tools) => { - const focusTool = tools.find(t => t.name === 'focus_indi'); - // Radobod's ID or another valid ID. In topola sample data let's just grab selection - expect(focusTool).to.not.be.undefined; - }); - }); -}); diff --git a/docs/PLAYWRIGHT_DESIGN.md b/docs/PLAYWRIGHT_DESIGN.md new file mode 100644 index 0000000..abff9e3 --- /dev/null +++ b/docs/PLAYWRIGHT_DESIGN.md @@ -0,0 +1,267 @@ +# Playwright E2E Testing Design Document + +## 1. Business & Functional Problem Statement + +Topola Viewer currently relies on a Cypress end-to-end (E2E) test suite to verify critical user flows, such as interactive chart rendering, search capabilities, and experimental WebMCP integrations. However, the existing setup is brittle and hard to maintain because it depends on live, external internet connections to fetch remote GEDCOM trees, uses loosely-typed JavaScript spec files, and suffers from complex process orchestration. Additionally, Cypress's historical architectural limitations make testing cross-origin iframe structures in embedded mode slow and difficult to simulate locally. Migrating this testing suite to Playwright in TypeScript will establish a fast, fully type-safe, hermetic, and self-contained validation pipeline, ensuring absolute quality control and deployment confidence. + +## 2. The Technical Plan + +The technical solution relies on transitioning our testing engine from Cypress to Playwright, utilizing a self-contained, local-first execution model. Instead of relying on external servers or separate terminal scripts to boot up our application, Playwright will orchestrate the entire lifecycle from start to finish. + +Here is a block diagram of how the major components fit together during a test run: + +```mermaid +graph TD + subgraph "Orchestration & Testing (Playwright)" + Runner["Playwright Test Runner"] + BrowserContext["Virtual Browser Engine"] + NetworkRouter["Built-in Network Router"] + end + + subgraph "Local Application" + SilentServer["Local Web Server
(Vite booted silently)"] + App["Topola Viewer App
(React / SVG Charts)"] + end + + subgraph "Local Mock Data" + GedFixture["Local Sample File
(family.ged)"] + VirtualIframe["Virtual HTML Page
(Embedded Mode Wrapper)"] + end + + %% Execution connections + Runner -->|1. Launches| SilentServer + Runner -->|2. Controls| BrowserContext + BrowserContext -->|3. Loads App from| SilentServer + SilentServer -->|4. Serves Code to| BrowserContext + + %% Mocking connections + BrowserContext -->|5. Requests Data| NetworkRouter + NetworkRouter -->|6. Redirects to| GedFixture + BrowserContext -->|7. Simulates Embed with| VirtualIframe +``` + +### Breakdown of Major Components + +#### 1. The Playwright Test Runner +The central brain of our testing environment. It handles parsing our TypeScript test specifications, managing test execution, starting the local web server, controlling the virtual browser instances, and generating reports. + +#### 2. The Local Web Server (Vite / Preview) +A local server hosting the Topola Viewer application. To ensure E2E tests validate the exact production bundle that will be deployed, the test runner in CI environments boots the production-built files via Vite's preview server (`npx vite preview --port 3000 --strictPort`), with the build process decoupled and executed earlier in the CI workflow job. Local environments dynamically run Vite dev server (`npx vite --no-open --port 3000 --strictPort`) or reuse an existing running server to maintain fast iteration cycles. + +#### 3. The Built-in Network Router (Interception) +The central network traffic controller. When the application attempts to fetch the family tree, our network router intercepts the request and returns our offline sample data instead. To prevent browser CORS blocks, the mock response explicitly supplies the `Access-Control-Allow-Origin: *` header. Wildcard interceptors match any request ending with `/family.ged`, allowing E2E tests to load family tree data consistently from local mock data without hardcoding public GitHub URL paths or relying on CORS proxy overrides. + +#### 4. The Virtual Page Generator (Iframe Wrapper) +A mechanism for generating temporary webpage wrappers directly in-memory during test execution. To simulate how our app works inside an iframe, Playwright serves a dynamic wrapper page on a mock URL `/test-embedded-frame.html`. This wrapper page loads our app inside an iframe and handles standard bidirectional postMessage handshakes. Because the application uses `HashRouter`, the iframe source points to the hash route `/#/view?embedded=true&handleCors=false` to ensure React Router matches the `/view` route. + +#### 5. The Browser Environment Injector (Init Scripts) +Allows the test runner to pre-configure the browser's environment before the web page's own code executes. This is essential for simulating experimental features like WebMCP tool registration. The injector exposes a mock registration API that pushes registered tools to the browser's global `window.__registeredTools` array. The runner evaluates execution blocks *inside* the browser context to invoke these tools' non-serializable callbacks, asserting tool registration and visual UI updates. + +## 3. Alternatives Considered & Rejected + +To establish clear architectural guardrails and prevent future regressions or redundant work, this section documents the key design alternatives that were evaluated and subsequently ruled out. + +### A. Phased Migration (Coexistence) +* **Considered:** Running both Cypress and Playwright concurrently in the repository and migrating the five test specs one by one over time. +* **Rejected because:** Dual-framework coexistence introduces significant developer friction and technical debt. Developers would have to maintain duplicate configuration files, manage dual dependency pools in `package.json`, and configure complex dual execution stages in GitHub Actions. Given our E2E suite is compact, a "clean break" eliminates Cypress-related dependencies immediately. + +### B. Running E2E Tests Against Live URLs (Real-World Feeds) +* **Considered:** Continuing the Cypress pattern of loading the sample family tree directly from GitHub raw servers over the public internet. +* **Rejected because:** Live URL calls in automated E2E tests are a primary source of test flakiness. Tests can fail randomly due to DNS resolution lags, server downtime, or GitHub API rate-limiting, causing false negatives in our CI pipeline. Using Playwright's network routing to intercept these calls and fulfill them with a local fixture guarantees absolute hermeticity and consistency. + +### C. Maintaining Physical HTML Wrapper Files for Iframe Tests +* **Considered:** Storing a physical `tests/fixtures/embedded_frame.html` file in the repository to act as the container for iframe tests. +* **Rejected because:** Storing a physical, standalone test-only wrapper file can create environment port synchronization issues and static asset mapping overhead. +* **Actual Implementation Note:** The implementation adopted a hybrid approach. A physical template file [embedded_frame.html](file:///home/pwiech/personal/github/topola-viewer/tests/fixtures/embedded_frame.html) is maintained as the structural source of truth for the frame, but it is loaded in-memory and served virtually on `/test-embedded-frame.html` via the network router, keeping it on the same origin/port dynamically to bypass cross-origin iframe blocks. + +### D. Retaining `start-server-and-test` for Dev Server Bootstrapping +* **Considered:** Continuing to rely on `start-server-and-test` or a custom bash script to verify when port `3000` is responsive before running tests. +* **Rejected because:** Playwright's native `webServer` orchestrator is superior, highly optimized, and self-contained. It handles port polling, processes recycling on failures, and performs automatic process cleanups upon exit natively. Keeping `start-server-and-test` adds unnecessary external library dependencies and script complexity. + +### E. Initial Multi-Browser & Multi-Device Targets +* **Considered:** Configuring Chromium, Firefox, WebKit, and mobile emulation from Day One. +* **Rejected because:** The immediate goal is to achieve full, stable parity with the existing single-browser Cypress suite. Adding multiple engines right away increases execution time and CI resource consumption. Multi-browser testing can be easily enabled later by adjusting the configuration in `playwright.config.ts`. + +## 4. Detailed Implementation Plan + +This section defines the granular step-by-step instructions and enumerates **every single file** that will be created, modified, or deleted to ensure a flawless migration, including complete, copy-pasteable code contents for all configurations and test specifications matching the actual implementation. + +### A. Enumeration of Files + +#### 1. Files to [DELETE] + +* **[cypress.config.ts](../cypress.config.ts)** + * *Rationale:* Complete removal of Cypress configurations; no longer needed. +* **[cypress/e2e/chart_view.cy.js](../cypress/e2e/chart_view.cy.js)** + * *Rationale:* Outdated JavaScript test spec. Replaced by type-safe `tests/chart_view.spec.ts`. +* **[cypress/e2e/embedded.cy.js](../cypress/e2e/embedded.cy.js)** + * *Rationale:* Outdated JavaScript test spec. Replaced by type-safe `tests/embedded.spec.ts`. +* **[cypress/e2e/intro.cy.js](../cypress/e2e/intro.cy.js)** + * *Rationale:* Outdated JavaScript test spec. Replaced by type-safe `tests/intro.spec.ts`. +* **[cypress/e2e/search.cy.js](../cypress/e2e/search.cy.js)** + * *Rationale:* Outdated JavaScript test spec. Replaced by type-safe `tests/search.spec.ts`. +* **[cypress/e2e/webmcp.cy.js](../cypress/e2e/webmcp.cy.js)** + * *Rationale:* Outdated JavaScript test spec. Replaced by type-safe `tests/webmcp.spec.ts`. +* **`cypress/e2e/README.md`** + * *Rationale:* Legacy test documentation that is no longer applicable. + +#### 2. Files to [MODIFY] + +* **[package.json](../package.json)** + * *Rationale:* Uninstall `cypress` and `start-server-and-test` devDependencies. Install `@playwright/test` and `@types/node`. Add the silent `"preview": "vite preview"` script, replace the `cy:*` test scripts with Playwright E2E execution targets (`"test:e2e": "playwright test"` and `"test:e2e:ui": "playwright test --ui"`), and update the `"prettier"` and `"lint"` scripts to format and lint both the `src/` and `tests/` directories. +* **[jest.config.ts](../jest.config.ts)** + * *Rationale:* Add the `roots` configuration property to isolate Jest unit testing to the `src/` directory, preventing Jest from scanning or executing Playwright specs inside the `tests/` folder. +* **[.gitignore](../.gitignore)** + * *Rationale:* Ignore locally generated Playwright E2E testing artifacts (`playwright-report/`, `test-results/`, and `.playwright/`) to maintain a clean working tree. +* **[PROJECT_STRUCTURE.md](../PROJECT_STRUCTURE.md)** + * *Rationale:* Replace references to Cypress (`cypress/`, `cypress.config.ts`) with Playwright (`tests/`, `playwright.config.ts`) to keep the repository structural documentation fully accurate. +* **[.github/workflows/node.js.yml](../.github/workflows/node.js.yml)** + * *Rationale:* Replace `npm run cy:start-and-run` with cached Playwright execution. E2E tests are executed across all matrix Node environments to maximize testing coverage and parity across runtimes. +* **[.github/workflows/deploy-gh-pages.yml](../.github/workflows/deploy-gh-pages.yml)** + * *Rationale:* Replace `npm run cy:start-and-run` with cached Playwright execution. Critically, the production build step does NOT use `VITE_GOOGLE_ANALYTICS: "false"` so that Google Analytics is preserved on the deployed live site. Instead, we rely entirely on Playwright's network-level interception to block all tracking requests during E2E testing. +* **[.github/workflows/deploy-wikitree-apps.yml](../.github/workflows/deploy-wikitree-apps.yml)** + * *Rationale:* Replace `npm run cy:start-and-run` with cached Playwright execution, ensuring Google Analytics is NOT stripped from the deployed production bundle. Playwright's network interception handles all traffic isolation safely during E2E tests. + +#### 3. Files to [NEW] + +* **[playwright.config.ts](../playwright.config.ts)** + * *Rationale:* Central configuration for Playwright. Configures parallel execution, defines a single Desktop Chrome (Chromium) project, sets the base URL and locale to `'en-US'`, and manages the local dev or preview servers dynamically on port 3000 with strict port enforcement. +* **`tests/tsconfig.json`** + * *Rationale:* Custom localized compiler configuration for E2E tests that extends the root `tsconfig.json` but includes NodeJS environment types explicitly and isolates global types from Jest, keeping E2E environments perfectly isolated. It sets `"noEmit": true` because E2E tests do not need to output compiled JS files. +* **`tests/global.d.ts`** + * *Rationale:* Custom global type declaration file for E2E tests to safely declare `__registeredTools` on the `Window` interface without TypeScript compiler warnings. Redundant overrides for `Navigator` are omitted because the test suite inherits it from the application's core WebMCP declarations. +* **`tests/helpers.ts`** + * *Rationale:* Shared test utilities to encapsulate wildcard route mocking for family tree fetching (`setupGedcomRoute`) and tracking interception (`blockTracking`). This avoids code duplication across spec files. +* **`tests/fixtures/embedded_frame.html`** + * *Rationale:* Physical template wrapper file defining the iframe and message-passing structure for embedded view E2E verification. +* **`src/datasource/testdata/test.ged`** + * *Rationale:* Instead of checking in a duplicate fixture file, we directly read the existing version-controlled test GEDCOM dataset located at `src/datasource/testdata/test.ged` inside the Playwright interceptors. This eliminates file duplication, reduces repository footprint, and ensures a single source of truth. +* **`tests/intro.spec.ts`** + * *Rationale:* Type-safe TS spec checking landing page layout, menu items, and basic static DOM presence. +* **`tests/chart_view.spec.ts`** + * *Rationale:* Type-safe TS spec checking interactive tree navigation, relying on Playwright's auto-waiting to settle D3 transitions, drawer details panels, and routing interception to block analytics/third-party APIs. +* **`tests/search.spec.ts`** + * *Rationale:* Type-safe TS spec checking the search autocompletion (using robust, user-facing locators like `page.getByPlaceholder('Search for people')` to target the input, and Playwright's auto-waiting to handle search debouncing). +* **`tests/webmcp.spec.ts`** + * *Rationale:* Type-safe TS spec verifying WebMCP tools. Emulates out-of-process tool executions inside `navigator.modelContext` by evaluating execution blocks within the browser context, using polling assertions to avoid React `useEffect` mount race conditions. +* **`tests/embedded.spec.ts`** + * *Rationale:* Type-safe TS spec verifying iframe embedded views using a virtually served template file `tests/fixtures/embedded_frame.html` executing the bidirectional postMessage handshake (`ready` / `gedcom`) matching production. + +### B. Step-by-Step Execution Plan & Complete File Contents + +#### Step 1: Dependency Purge & Clean Break +1. Remove legacy Cypress and server-tester modules from `package.json`: + `npm uninstall cypress start-server-and-test` +2. Delete the `cypress.config.ts` configuration and the recursive `cypress/` folder from disk. +3. Install Playwright Test Framework and Node environment types: + `npm install -D @playwright/test @types/node` +4. Download the local browser binaries required for Playwright execution: + `npx playwright install chromium` +5. Update the `"prettier"` script in `package.json` to cover both `src/` and `tests/`: + `"prettier": "prettier --write \"{src,tests}/**/*.{ts,tsx,json}\""` +6. Modify `jest.config.ts` to isolate Jest testing to the `src/` directory and prevent test scanning collisions: + ```typescript + // Add this property to the exported config object in jest.config.ts + roots: ["/src"], + ``` +7. Update the repository structural documentation [PROJECT_STRUCTURE.md](../PROJECT_STRUCTURE.md) to replace Cypress details with Playwright details. + +#### Step 2: Script Alignment & Silent Configs +1. Update the `package.json` scripts: + * Add `"preview": "vite preview"` to support serving the production build in CI. + * Replace `cy:*` script targets with Playwright E2E commands: + * `"test:e2e": "playwright test"` + * `"test:e2e:ui": "playwright test --ui"` +2. Author `playwright.config.ts` to orchestrate the `webServer` dynamically based on execution context, and poll port `3000`. + +**Key Configuration Details for [playwright.config.ts](file:///home/pwiech/personal/github/topola-viewer/playwright.config.ts):** +* **Test Directory**: Target `./tests` folder. +* **Parallelism & CI Tuning**: Enable fully parallel execution (`fullyParallel: true`), disable `forbidOnly` locally but enforce it in CI, and configure retries (2 in CI, 0 locally). +* **Base Configuration**: Set the `baseURL` to `http://localhost:3000`, force the locale to `'en-US'` to ensure consistent translation keys across all runs, and capture traces on first retry. +* **Browsers**: Set up a single project using standard Chromium devices (`Desktop Chrome`). +* **Orchestrated WebServer**: Configure `webServer` to run the Vite dev server (`npx vite --no-open --port 3000 --strictPort`) locally or Vite preview (`npx vite preview --port 3000 --strictPort`) in CI, targeting port `3000` with strict port enforcement and reusing any existing local server instance only in local mode. + +#### Step 3: Establish Test Directories & Compile Settings +1. Create the folder path `tests/` and its subfolder `tests/fixtures/`. +2. Author `tests/tsconfig.json` to isolate test typings from the main application and Jest unit tests: + * **Inheritance & Target**: Extends the root `tsconfig.json`, setting `module` and `moduleResolution` to `NodeNext` and targeting `ES2022`. + * **Isolated Types**: Excludes Jest/app global typings and explicitly pulls in only the `"node"` types. + * **No Output**: Sets `"noEmit": true` as E2E specs do not need compilation output. +3. Author `tests/global.d.ts` to provide TypeScript type definitions for mocked window objects: + * **Type Extension**: Declares `__registeredTools?` on the global `Window` interface to prevent TypeScript compilation errors during WebMCP mocks. +4. Author `tests/helpers.ts` to provide reusable mock setups and routing interceptions: + * **Tracking Blockers**: Implements a `blockTracking(context)` helper that intercepts and aborts requests targeting Google Analytics and Tag Manager (`**/*google-analytics.com/**`, `**/*googletagmanager.com/**`) to guarantee hermetic and fast test execution. + * **GEDCOM Mocks**: Implements a `setupGedcomRoute(context)` helper that reads the version-controlled local dataset (`src/datasource/testdata/test.ged`) and routes all requests matching `**/family.ged` to be fulfilled with it, serving a `200 OK` response with CORS enablement headers (`Access-Control-Allow-Origin: *`). +5. Author the physical template wrapper file `tests/fixtures/embedded_frame.html` for testing embedded iframe communications: + * **Structure**: Defines a standard wrapper document housing an iframe that points to the app's embedded route: `/#/view?embedded=true&handleCors=false`. + * **Bidirectional Handshake**: Contains script block executing a `fetch()` to get the GEDCOM content. It listens for a `'ready'` postMessage from the child iframe, and posts the raw GEDCOM content back with a `'gedcom'` message once the handshake is complete. + +#### Step 4: Spec Translation & Spec Designs + +##### 1. Intro Test (`tests/intro.spec.ts`) +Checks the landing page layout, menu items, and basic static DOM presence: +* **Setup**: Leverages `beforeEach` to block analytics and tracking servers using the `blockTracking` helper, then loads the index page (`/`). +* **Assertions**: + * Verifies that the main intro landing text content (specifically checking for the presence of `'Examples'`) is visible on the page. + * Asserts that core action buttons in the menu (exact text `'Open file'` and `'Load from URL'`) are properly rendered and visible to the user. + +##### 2. Chart View Test (`tests/chart_view.spec.ts`) +Checks tree navigation, settles transitions, details panels, and routing interception: +* **Setup**: Employs `beforeEach` to configure route intercepts via `setupGedcomRoute` and navigates to the app passing a mock URL parameter (`/#/view?url=https%3A%2F%2Fexample.org%2Ffamily.ged`). +* **Assertions**: + * Verifies that the viewer loads and renders the chart nodes, asserting that the name `'Bonifacy'` is visible inside the `#content` container. + * Tests chart interactive capabilities by clicking an individual node (e.g., `'Radobod'`) with `{force: true}` to navigate, asserting that a child node (e.g., `'Chike'`) animates and renders. + * Verifies side-drawer details rendering by asserting that person-specific data (e.g., `'a random note'`) is visible. + +##### 3. Search Test (`tests/search.spec.ts`) +Checks search input, suggestion popups, debouncing, and navigation updates: +* **Setup**: Prepares GEDCOM routing via `setupGedcomRoute` and loads the chart view. +* **Assertions**: + * Targets the search input using the user-facing selector `page.getByPlaceholder('Search for people')`. + * Fills in search queries (e.g., `'chik'`), verifies the autocomplete results panel (`.results`) debounces and renders the target suggestion (`'Chike'`). + * Triggers selection by pressing `'Enter'` and asserts that the main chart view successfully shifts focus and renders the target person's node. + +##### 4. WebMCP Test (`tests/webmcp.spec.ts`) +Bridges out-of-process serialization, checks tool registrations, and asserts detail updates: +* **Setup**: Configures GEDCOM intercepts. Prior to navigation, it injects an early script (`page.addInitScript`) that mocks `navigator.modelContext.registerTool` and `navigator.modelContext.unregisterTool` APIs, populating tool metadata in a global `window.__registeredTools` list. +* **Assertions**: + * Verifies all core WebMCP tools (`get_selected_person`, `search_indi`, `inspect_indi`, `focus_indi`, `find_relationship_path`, `get_ancestors`, `get_descendants`) register correctly. Uses a polling assertion (`page.waitForFunction`) to safely wait for the React hook mounting cycle. + * Tests interactive integration by evaluating a script in the browser context that calls the registered `focus_indi` tool callback with target identifier (`{id: 'I21'}`), then asserts that the UI automatically updates the viewer focus to `'Chike'`. + +##### 5. Embedded Test (`tests/embedded.spec.ts`) +Serves local wrapper page template virtually and handles complete bidirectional postMessage handshake: +* **Setup**: Prepares standard GEDCOM routing. Reads the physical `embedded_frame.html` template from disk and registers a route interceptor serving it dynamically at `/test-embedded-frame.html` so both frames stay on the same origin. +* **Assertions**: + * Navigates to `/test-embedded-frame.html`. + * Targets the inner iframe using `page.frameLocator('#topolaFrame')`. + * Verifies that the bidirectional message passing functions correctly by asserting that the inner iframe successfully receives and renders the root family chart nodes (asserting the presence of `'Bonifacy'`). + +#### Step 5: CI Pipeline Alignment + +Modify the GitHub Actions YAML scripts in `.github/workflows/` to replace all legacy Cypress execution steps. E2E testing runs on all Node environments in the pipeline matrix for comprehensive validation. + +##### 1. Key Steps for `node.js.yml` +* **Prettier & Lint Checks**: Run formatting checks across both the application and the new tests using `npx prettier --check "{src,tests}/**/*.{ts,tsx,json}"` and run `npm run lint`. +* **Build & Test**: Run standard `npm run build` and unit tests via `npm test`. +* **E2E Spec Typecheck**: Run `npx tsc -p tests/tsconfig.json --noEmit` to guarantee complete E2E spec compilation/type correctness. +* **Playwright Browser Caching**: Extract the current Playwright version and cache the browser binaries (`~/.cache/ms-playwright`) dynamically using `actions/cache@v4` to prevent redundant downloads. +* **Execution**: Install necessary OS libraries using `npx playwright install-deps chromium`, install the browser binary, and run the test runner with `npm run test:e2e`. +* **Artifact Storage**: Archive the resulting `playwright-report/` directory on failure or completion using `actions/upload-artifact@v4` with a 30-day retention period. + +##### 2. Key Steps for `deploy-gh-pages.yml` & `deploy-wikitree-apps.yml` +* Integrate identical caching, dependency installation, execution (`npm run test:e2e`), and artifact storage steps to gate staging/production deployments. +* Crucially, do **NOT** disable Google Analytics during the app building phase (`VITE_GOOGLE_ANALYTICS` should not be modified), since Playwright's built-in network router handles isolating tracking traffic securely during testing. + +## 5. Future Considerations + +### A. Visual Regression (Screenshot) Testing +While the initial migration focuses on full parity with standard Cypress text-assertion specs, Topola Viewer is a highly visual, SVG-driven charting engine. In a future iteration, we should introduce Playwright visual snapshot/regression testing using `expect(page.locator('#content svg')).toHaveScreenshot('default-chart.png')`. This will automatically catch layout regressions, overlaps, and styled box positioning issues that DOM text assertions cannot detect. + +### B. File Upload Flow Testing +To ensure users can reliably upload their family trees locally, a future iteration should introduce E2E tests for local file ingestion: +* **Single File Upload (.ged)**: Simulating selection and upload of `.ged` text files using Playwright's `setInputFiles()` or `filechooser` events, verifying that the application correctly transitions to the visual chart view. +* **Multi-File / Image Upload**: Verifying that uploading a `.ged` file along with associated `.jpg` or `.png` image assets resolves and binds photos to individuals in the chart without errors. +* **Fixture Management**: This will require checking in small, 1x1 pixel dummy images to act as local mock visual resources. + +### C. CI/CD Pipeline Optimization (Shared E2E Gating Job) +Currently, the manual deployment workflow `deploy-everywhere.yml` triggers both `deploy-gh-pages.yml` and `deploy-wikitree-apps.yml` in parallel, which duplicates E2E test execution and results in running the slow Playwright test runner twice simultaneously. A future optimization should restructure the workflows to execute the E2E validation once as a gating pre-deploy job (`needs: e2e-validation`), or rely strictly on the main merge-to-master CI pipeline validation, ensuring manual deployments are fast, clean, and lightweight. diff --git a/jest.config.ts b/jest.config.ts index 7d9e0fd..b671ec1 100644 --- a/jest.config.ts +++ b/jest.config.ts @@ -1,6 +1,7 @@ import type { Config } from '@jest/types'; const config: Config.InitialOptions = { + roots: ["/src"], testEnvironment: "node", transform: { "^.+.tsx?$": ["ts-jest", {}], diff --git a/package-lock.json b/package-lock.json index 643427c..694b53d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -51,6 +51,7 @@ "@formatjs/fast-memoize": "^2.2.6", "@formatjs/intl": "^2.10.15", "@jest/globals": "^29.7.0", + "@playwright/test": "^1.59.1", "@types/adm-zip": "^0.5.0", "@types/array.prototype.flatmap": "^1.2.2", "@types/d3-array": "^3.2.1", @@ -65,12 +66,12 @@ "@types/js-cookie": "^3.0.6", "@types/lunr": "^2.3.3", "@types/md5": "^2.3.0", + "@types/node": "^25.6.0", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.0", "@typescript-eslint/eslint-plugin": "^5.62.0", "@typescript-eslint/parser": "^5.62.0", "@vitejs/plugin-react": "^4.3.4", - "cypress": "^13.17.0", "eslint": "^7.32.0", "eslint-plugin-react": "^7.37.5", "eslint-plugin-react-hooks": "^7.1.1", @@ -80,7 +81,6 @@ "prettier": "^3.8.3", "prettier-plugin-organize-imports": "^4.1.0", "run-script-os": "^1.1.6", - "start-server-and-test": "^2.0.9", "ts-jest": "^29.2.5", "ts-node": "^10.9.2", "typescript": "^5.7.3", @@ -758,15 +758,6 @@ "dev": true, "license": "MIT" }, - "node_modules/@colors/colors": { - "version": "1.5.0", - "dev": true, - "license": "MIT", - "optional": true, - "engines": { - "node": ">=0.1.90" - } - }, "node_modules/@cspotcode/source-map-support": { "version": "0.8.1", "dev": true, @@ -892,51 +883,6 @@ "node": ">=18" } }, - "node_modules/@cypress/request": { - "version": "3.0.10", - "dev": true, - "license": "Apache-2.0", - "dependencies": { - "aws-sign2": "~0.7.0", - "aws4": "^1.8.0", - "caseless": "~0.12.0", - "combined-stream": "~1.0.6", - "extend": "~3.0.2", - "forever-agent": "~0.6.1", - "form-data": "~4.0.4", - "http-signature": "~1.4.0", - "is-typedarray": "~1.0.0", - "isstream": "~0.1.2", - "json-stringify-safe": "~5.0.1", - "mime-types": "~2.1.19", - "performance-now": "^2.1.0", - "qs": "~6.14.1", - "safe-buffer": "^5.1.2", - "tough-cookie": "^5.0.0", - "tunnel-agent": "^0.6.0", - "uuid": "^8.3.2" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/@cypress/xvfb": { - "version": "1.2.4", - "dev": true, - "license": "MIT", - "dependencies": { - "debug": "^3.1.0", - "lodash.once": "^4.1.1" - } - }, - "node_modules/@cypress/xvfb/node_modules/debug": { - "version": "3.2.7", - "dev": true, - "license": "MIT", - "dependencies": { - "ms": "^2.1.1" - } - }, "node_modules/@esbuild/aix-ppc64": { "version": "0.25.1", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.1.tgz", @@ -1575,19 +1521,6 @@ "tslib": "2" } }, - "node_modules/@hapi/hoek": { - "version": "9.3.0", - "dev": true, - "license": "BSD-3-Clause" - }, - "node_modules/@hapi/topo": { - "version": "5.1.0", - "dev": true, - "license": "BSD-3-Clause", - "dependencies": { - "@hapi/hoek": "^9.0.0" - } - }, "node_modules/@humanwhocodes/config-array": { "version": "0.5.0", "dev": true, @@ -2027,6 +1960,22 @@ "node": ">= 8" } }, + "node_modules/@playwright/test": { + "version": "1.59.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.59.1.tgz", + "integrity": "sha512-PG6q63nQg5c9rIi4/Z5lR5IVF7yU5MqmKaPOe0HSc0O2cX1fPi96sUQu5j7eo4gKCkB2AnNGoWt7y4/Xx3Kcqg==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "playwright": "1.59.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/@popperjs/core": { "version": "2.11.8", "license": "MIT", @@ -2393,24 +2342,6 @@ "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" } }, - "node_modules/@sideway/address": { - "version": "4.1.5", - "dev": true, - "license": "BSD-3-Clause", - "dependencies": { - "@hapi/hoek": "^9.0.0" - } - }, - "node_modules/@sideway/formula": { - "version": "3.0.1", - "dev": true, - "license": "BSD-3-Clause" - }, - "node_modules/@sideway/pinpoint": { - "version": "2.0.0", - "dev": true, - "license": "BSD-3-Clause" - }, "node_modules/@sinclair/typebox": { "version": "0.27.8", "dev": true, @@ -2656,11 +2587,13 @@ "license": "MIT" }, "node_modules/@types/node": { - "version": "22.10.10", + "version": "25.6.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-25.6.0.tgz", + "integrity": "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ==", "dev": true, "license": "MIT", "dependencies": { - "undici-types": "~6.20.0" + "undici-types": "~7.19.0" } }, "node_modules/@types/pako": { @@ -2699,16 +2632,6 @@ "dev": true, "license": "MIT" }, - "node_modules/@types/sinonjs__fake-timers": { - "version": "8.1.1", - "dev": true, - "license": "MIT" - }, - "node_modules/@types/sizzle": { - "version": "2.3.9", - "dev": true, - "license": "MIT" - }, "node_modules/@types/stack-utils": { "version": "2.0.3", "dev": true, @@ -2736,15 +2659,6 @@ "dev": true, "license": "MIT" }, - "node_modules/@types/yauzl": { - "version": "2.10.3", - "dev": true, - "license": "MIT", - "optional": true, - "dependencies": { - "@types/node": "*" - } - }, "node_modules/@typescript-eslint/eslint-plugin": { "version": "5.62.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz", @@ -3070,18 +2984,6 @@ "node": ">= 14" } }, - "node_modules/aggregate-error": { - "version": "3.1.0", - "dev": true, - "license": "MIT", - "dependencies": { - "clean-stack": "^2.0.0", - "indent-string": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/ajv": { "version": "6.12.6", "dev": true, @@ -3153,30 +3055,6 @@ "node": ">= 8" } }, - "node_modules/arch": { - "version": "2.2.0", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ], - "license": "MIT" - }, - "node_modules/arg": { - "version": "5.0.2", - "dev": true, - "license": "MIT" - }, "node_modules/argparse": { "version": "1.0.10", "dev": true, @@ -3329,22 +3207,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/asn1": { - "version": "0.2.6", - "dev": true, - "license": "MIT", - "dependencies": { - "safer-buffer": "~2.1.0" - } - }, - "node_modules/assert-plus": { - "version": "1.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.8" - } - }, "node_modules/astral-regex": { "version": "2.0.0", "dev": true, @@ -3369,14 +3231,6 @@ "version": "0.4.0", "license": "MIT" }, - "node_modules/at-least-node": { - "version": "1.0.0", - "dev": true, - "license": "ISC", - "engines": { - "node": ">= 4.0.0" - } - }, "node_modules/available-typed-arrays": { "version": "1.0.7", "license": "MIT", @@ -3390,41 +3244,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/aws-sign2": { - "version": "0.7.0", - "dev": true, - "license": "Apache-2.0", - "engines": { - "node": "*" - } - }, - "node_modules/aws4": { - "version": "1.13.2", - "dev": true, - "license": "MIT" - }, - "node_modules/axios": { - "version": "1.15.2", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.15.2.tgz", - "integrity": "sha512-wLrXxPtcrPTsNlJmKjkPnNPK2Ihe0hn0wGSaTEiHRPxwjvJwT3hKmXF4dpqxmPO9SoNb2FsYXj/xEo0gHN+D5A==", - "dev": true, - "license": "MIT", - "dependencies": { - "follow-redirects": "^1.15.11", - "form-data": "^4.0.5", - "proxy-from-env": "^2.1.0" - } - }, - "node_modules/axios/node_modules/proxy-from-env": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz", - "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=10" - } - }, "node_modules/babel-jest": { "version": "29.7.0", "dev": true, @@ -3568,24 +3387,6 @@ ], "license": "MIT" }, - "node_modules/bcrypt-pbkdf": { - "version": "1.0.2", - "dev": true, - "license": "BSD-3-Clause", - "dependencies": { - "tweetnacl": "^0.14.3" - } - }, - "node_modules/blob-util": { - "version": "2.0.2", - "dev": true, - "license": "Apache-2.0" - }, - "node_modules/bluebird": { - "version": "3.7.2", - "dev": true, - "license": "MIT" - }, "node_modules/brace-expansion": { "version": "1.1.11", "dev": true, @@ -3678,26 +3479,10 @@ "ieee754": "^1.2.1" } }, - "node_modules/buffer-crc32": { - "version": "0.2.13", - "dev": true, - "license": "MIT", - "engines": { - "node": "*" - } - }, "node_modules/buffer-from": { "version": "1.1.2", "license": "MIT" }, - "node_modules/cachedir": { - "version": "2.4.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=6" - } - }, "node_modules/call-bind": { "version": "1.0.9", "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.9.tgz", @@ -3807,11 +3592,6 @@ "license": "MIT", "optional": true }, - "node_modules/caseless": { - "version": "0.12.0", - "dev": true, - "license": "Apache-2.0" - }, "node_modules/ccount": { "version": "2.0.1", "license": "MIT", @@ -3885,81 +3665,11 @@ "node": "*" } }, - "node_modules/check-more-types": { - "version": "2.24.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.8.0" - } - }, - "node_modules/ci-info": { - "version": "4.1.0", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/sibiraj-s" - } - ], - "license": "MIT", - "engines": { - "node": ">=8" - } - }, "node_modules/cjs-module-lexer": { "version": "1.4.3", "dev": true, "license": "MIT" }, - "node_modules/clean-stack": { - "version": "2.2.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=6" - } - }, - "node_modules/cli-cursor": { - "version": "3.1.0", - "dev": true, - "license": "MIT", - "dependencies": { - "restore-cursor": "^3.1.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/cli-table3": { - "version": "0.6.5", - "dev": true, - "license": "MIT", - "dependencies": { - "string-width": "^4.2.0" - }, - "engines": { - "node": "10.* || >= 12.*" - }, - "optionalDependencies": { - "@colors/colors": "1.5.0" - } - }, - "node_modules/cli-truncate": { - "version": "2.1.0", - "dev": true, - "license": "MIT", - "dependencies": { - "slice-ansi": "^3.0.0", - "string-width": "^4.2.0" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/cliui": { "version": "8.0.1", "dev": true, @@ -4010,11 +3720,6 @@ "dev": true, "license": "MIT" }, - "node_modules/colorette": { - "version": "2.0.20", - "dev": true, - "license": "MIT" - }, "node_modules/combined-stream": { "version": "1.0.8", "license": "MIT", @@ -4033,22 +3738,6 @@ "url": "https://github.com/sponsors/wooorm" } }, - "node_modules/commander": { - "version": "6.2.1", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 6" - } - }, - "node_modules/common-tags": { - "version": "1.8.2", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=4.0.0" - } - }, "node_modules/commondir": { "version": "1.0.1", "dev": true, @@ -4094,11 +3783,6 @@ "url": "https://opencollective.com/core-js" } }, - "node_modules/core-util-is": { - "version": "1.0.2", - "dev": true, - "license": "MIT" - }, "node_modules/create-jest": { "version": "29.7.0", "dev": true, @@ -4175,97 +3859,6 @@ "version": "3.1.3", "license": "MIT" }, - "node_modules/cypress": { - "version": "13.17.0", - "dev": true, - "hasInstallScript": true, - "license": "MIT", - "dependencies": { - "@cypress/request": "^3.0.6", - "@cypress/xvfb": "^1.2.4", - "@types/sinonjs__fake-timers": "8.1.1", - "@types/sizzle": "^2.3.2", - "arch": "^2.2.0", - "blob-util": "^2.0.2", - "bluebird": "^3.7.2", - "buffer": "^5.7.1", - "cachedir": "^2.3.0", - "chalk": "^4.1.0", - "check-more-types": "^2.24.0", - "ci-info": "^4.0.0", - "cli-cursor": "^3.1.0", - "cli-table3": "~0.6.1", - "commander": "^6.2.1", - "common-tags": "^1.8.0", - "dayjs": "^1.10.4", - "debug": "^4.3.4", - "enquirer": "^2.3.6", - "eventemitter2": "6.4.7", - "execa": "4.1.0", - "executable": "^4.1.1", - "extract-zip": "2.0.1", - "figures": "^3.2.0", - "fs-extra": "^9.1.0", - "getos": "^3.2.1", - "is-installed-globally": "~0.4.0", - "lazy-ass": "^1.6.0", - "listr2": "^3.8.3", - "lodash": "^4.17.21", - "log-symbols": "^4.0.0", - "minimist": "^1.2.8", - "ospath": "^1.2.2", - "pretty-bytes": "^5.6.0", - "process": "^0.11.10", - "proxy-from-env": "1.0.0", - "request-progress": "^3.0.0", - "semver": "^7.5.3", - "supports-color": "^8.1.1", - "tmp": "~0.2.3", - "tree-kill": "1.2.2", - "untildify": "^4.0.0", - "yauzl": "^2.10.0" - }, - "bin": { - "cypress": "bin/cypress" - }, - "engines": { - "node": "^16.0.0 || ^18.0.0 || >=20.0.0" - } - }, - "node_modules/cypress/node_modules/buffer": { - "version": "5.7.1", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ], - "license": "MIT", - "dependencies": { - "base64-js": "^1.3.1", - "ieee754": "^1.1.13" - } - }, - "node_modules/cypress/node_modules/semver": { - "version": "7.6.3", - "dev": true, - "license": "ISC", - "bin": { - "semver": "bin/semver.js" - }, - "engines": { - "node": ">=10" - } - }, "node_modules/d3": { "version": "6.7.0", "license": "BSD-3-Clause", @@ -4751,17 +4344,6 @@ "version": "1.0.1", "license": "ISC" }, - "node_modules/dashdash": { - "version": "1.14.1", - "dev": true, - "license": "MIT", - "dependencies": { - "assert-plus": "^1.0.0" - }, - "engines": { - "node": ">=0.10" - } - }, "node_modules/data-urls": { "version": "5.0.0", "dev": true, @@ -4819,11 +4401,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/dayjs": { - "version": "1.11.13", - "dev": true, - "license": "MIT" - }, "node_modules/debounce": { "version": "2.2.0", "license": "MIT", @@ -5029,20 +4606,6 @@ "node": ">= 0.4" } }, - "node_modules/duplexer": { - "version": "0.1.2", - "dev": true, - "license": "MIT" - }, - "node_modules/ecc-jsbn": { - "version": "0.1.2", - "dev": true, - "license": "MIT", - "dependencies": { - "jsbn": "~0.1.0", - "safer-buffer": "^2.1.0" - } - }, "node_modules/ejs": { "version": "3.1.10", "dev": true, @@ -5083,14 +4646,6 @@ "dev": true, "license": "MIT" }, - "node_modules/end-of-stream": { - "version": "1.4.4", - "dev": true, - "license": "MIT", - "dependencies": { - "once": "^1.4.0" - } - }, "node_modules/enquirer": { "version": "2.4.1", "dev": true, @@ -5672,58 +5227,6 @@ "node": ">=0.10.0" } }, - "node_modules/event-stream": { - "version": "3.3.4", - "dev": true, - "license": "MIT", - "dependencies": { - "duplexer": "~0.1.1", - "from": "~0", - "map-stream": "~0.1.0", - "pause-stream": "0.0.11", - "split": "0.3", - "stream-combiner": "~0.0.4", - "through": "~2.3.1" - } - }, - "node_modules/eventemitter2": { - "version": "6.4.7", - "dev": true, - "license": "MIT" - }, - "node_modules/execa": { - "version": "4.1.0", - "dev": true, - "license": "MIT", - "dependencies": { - "cross-spawn": "^7.0.0", - "get-stream": "^5.0.0", - "human-signals": "^1.1.1", - "is-stream": "^2.0.0", - "merge-stream": "^2.0.0", - "npm-run-path": "^4.0.0", - "onetime": "^5.1.0", - "signal-exit": "^3.0.2", - "strip-final-newline": "^2.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sindresorhus/execa?sponsor=1" - } - }, - "node_modules/executable": { - "version": "4.1.1", - "dev": true, - "license": "MIT", - "dependencies": { - "pify": "^2.2.0" - }, - "engines": { - "node": ">=4" - } - }, "node_modules/exenv": { "version": "1.2.2", "license": "BSD-3-Clause" @@ -5762,33 +5265,6 @@ "version": "3.0.2", "license": "MIT" }, - "node_modules/extract-zip": { - "version": "2.0.1", - "dev": true, - "license": "BSD-2-Clause", - "dependencies": { - "debug": "^4.1.1", - "get-stream": "^5.1.0", - "yauzl": "^2.10.0" - }, - "bin": { - "extract-zip": "cli.js" - }, - "engines": { - "node": ">= 10.17.0" - }, - "optionalDependencies": { - "@types/yauzl": "^2.9.1" - } - }, - "node_modules/extsprintf": { - "version": "1.3.0", - "dev": true, - "engines": [ - "node >=0.6.0" - ], - "license": "MIT" - }, "node_modules/family-chart": { "version": "0.2.1", "license": "ISC", @@ -5866,40 +5342,10 @@ "bser": "2.1.1" } }, - "node_modules/fd-slicer": { - "version": "1.1.0", - "dev": true, - "license": "MIT", - "dependencies": { - "pend": "~1.2.0" - } - }, "node_modules/fflate": { "version": "0.8.2", "license": "MIT" }, - "node_modules/figures": { - "version": "3.2.0", - "dev": true, - "license": "MIT", - "dependencies": { - "escape-string-regexp": "^1.0.5" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/figures/node_modules/escape-string-regexp": { - "version": "1.0.5", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.8.0" - } - }, "node_modules/file-entry-cache": { "version": "6.0.1", "dev": true, @@ -6033,27 +5479,6 @@ "dev": true, "license": "ISC" }, - "node_modules/follow-redirects": { - "version": "1.16.0", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz", - "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==", - "dev": true, - "funding": [ - { - "type": "individual", - "url": "https://github.com/sponsors/RubenVerborgh" - } - ], - "license": "MIT", - "engines": { - "node": ">=4.0" - }, - "peerDependenciesMeta": { - "debug": { - "optional": true - } - } - }, "node_modules/for-each": { "version": "0.3.5", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz", @@ -6069,14 +5494,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/forever-agent": { - "version": "0.6.1", - "dev": true, - "license": "Apache-2.0", - "engines": { - "node": "*" - } - }, "node_modules/form-data": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz", @@ -6093,25 +5510,6 @@ "node": ">= 6" } }, - "node_modules/from": { - "version": "0.1.7", - "dev": true, - "license": "MIT" - }, - "node_modules/fs-extra": { - "version": "9.1.0", - "dev": true, - "license": "MIT", - "dependencies": { - "at-least-node": "^1.0.0", - "graceful-fs": "^4.2.0", - "jsonfile": "^6.0.1", - "universalify": "^2.0.0" - }, - "engines": { - "node": ">=10" - } - }, "node_modules/fs.realpath": { "version": "1.0.0", "dev": true, @@ -6228,20 +5626,6 @@ "node": ">= 0.4" } }, - "node_modules/get-stream": { - "version": "5.2.0", - "dev": true, - "license": "MIT", - "dependencies": { - "pump": "^3.0.0" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/get-symbol-description": { "version": "1.1.0", "license": "MIT", @@ -6257,22 +5641,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/getos": { - "version": "3.2.1", - "dev": true, - "license": "MIT", - "dependencies": { - "async": "^3.2.0" - } - }, - "node_modules/getpass": { - "version": "0.1.7", - "dev": true, - "license": "MIT", - "dependencies": { - "assert-plus": "^1.0.0" - } - }, "node_modules/gh-pages": { "version": "6.3.0", "dev": true, @@ -6345,20 +5713,6 @@ "node": ">= 6" } }, - "node_modules/global-dirs": { - "version": "3.0.1", - "dev": true, - "license": "MIT", - "dependencies": { - "ini": "2.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/globals": { "version": "11.12.0", "dev": true, @@ -6609,19 +5963,6 @@ "node": ">= 14" } }, - "node_modules/http-signature": { - "version": "1.4.0", - "dev": true, - "license": "MIT", - "dependencies": { - "assert-plus": "^1.0.0", - "jsprim": "^2.0.2", - "sshpk": "^1.18.0" - }, - "engines": { - "node": ">=0.10" - } - }, "node_modules/https-proxy-agent": { "version": "7.0.6", "dev": true, @@ -6634,14 +5975,6 @@ "node": ">= 14" } }, - "node_modules/human-signals": { - "version": "1.1.1", - "dev": true, - "license": "Apache-2.0", - "engines": { - "node": ">=8.12.0" - } - }, "node_modules/iconv-lite": { "version": "0.4.24", "license": "MIT", @@ -6719,14 +6052,6 @@ "node": ">=0.8.19" } }, - "node_modules/indent-string": { - "version": "4.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, "node_modules/inflight": { "version": "1.0.6", "dev": true, @@ -6740,14 +6065,6 @@ "version": "2.0.4", "license": "ISC" }, - "node_modules/ini": { - "version": "2.0.0", - "dev": true, - "license": "ISC", - "engines": { - "node": ">=10" - } - }, "node_modules/internal-slot": { "version": "1.1.0", "license": "MIT", @@ -6973,21 +6290,6 @@ "node": ">=0.10.0" } }, - "node_modules/is-installed-globally": { - "version": "0.4.0", - "dev": true, - "license": "MIT", - "dependencies": { - "global-dirs": "^3.0.0", - "is-path-inside": "^3.0.2" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/is-map": { "version": "2.0.3", "license": "MIT", @@ -7032,14 +6334,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/is-path-inside": { - "version": "3.0.3", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, "node_modules/is-plain-obj": { "version": "4.1.0", "license": "MIT", @@ -7147,22 +6441,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/is-typedarray": { - "version": "1.0.0", - "dev": true, - "license": "MIT" - }, - "node_modules/is-unicode-supported": { - "version": "0.1.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/is-weakmap": { "version": "2.0.2", "license": "MIT", @@ -7211,11 +6489,6 @@ "dev": true, "license": "ISC" }, - "node_modules/isstream": { - "version": "0.1.2", - "dev": true, - "license": "MIT" - }, "node_modules/istanbul-lib-coverage": { "version": "3.2.2", "dev": true, @@ -8331,18 +7604,6 @@ "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } }, - "node_modules/joi": { - "version": "17.13.3", - "dev": true, - "license": "BSD-3-Clause", - "dependencies": { - "@hapi/hoek": "^9.3.0", - "@hapi/topo": "^5.1.0", - "@sideway/address": "^4.1.5", - "@sideway/formula": "^3.0.1", - "@sideway/pinpoint": "^2.0.0" - } - }, "node_modules/jquery": { "version": "3.7.1", "license": "MIT" @@ -8370,11 +7631,6 @@ "js-yaml": "bin/js-yaml.js" } }, - "node_modules/jsbn": { - "version": "0.1.1", - "dev": true, - "license": "MIT" - }, "node_modules/jsdom": { "version": "26.0.0", "dev": true, @@ -8435,11 +7691,6 @@ "dev": true, "license": "MIT" }, - "node_modules/json-schema": { - "version": "0.4.0", - "dev": true, - "license": "(AFL-2.1 OR BSD-3-Clause)" - }, "node_modules/json-schema-traverse": { "version": "0.4.1", "dev": true, @@ -8450,11 +7701,6 @@ "dev": true, "license": "MIT" }, - "node_modules/json-stringify-safe": { - "version": "5.0.1", - "dev": true, - "license": "ISC" - }, "node_modules/json5": { "version": "2.2.3", "dev": true, @@ -8492,20 +7738,6 @@ "html2canvas": "^1.0.0-rc.5" } }, - "node_modules/jsprim": { - "version": "2.0.2", - "dev": true, - "engines": [ - "node >=0.6.0" - ], - "license": "MIT", - "dependencies": { - "assert-plus": "1.0.0", - "extsprintf": "1.3.0", - "json-schema": "0.4.0", - "verror": "1.10.0" - } - }, "node_modules/jsx-ast-utils": { "version": "3.3.5", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz", @@ -8542,14 +7774,6 @@ "node": ">=6" } }, - "node_modules/lazy-ass": { - "version": "1.6.0", - "dev": true, - "license": "MIT", - "engines": { - "node": "> 0.8" - } - }, "node_modules/leven": { "version": "3.1.0", "dev": true, @@ -8582,32 +7806,6 @@ "uc.micro": "^1.0.1" } }, - "node_modules/listr2": { - "version": "3.14.0", - "dev": true, - "license": "MIT", - "dependencies": { - "cli-truncate": "^2.1.0", - "colorette": "^2.0.16", - "log-update": "^4.0.0", - "p-map": "^4.0.0", - "rfdc": "^1.3.0", - "rxjs": "^7.5.1", - "through": "^2.3.8", - "wrap-ansi": "^7.0.0" - }, - "engines": { - "node": ">=10.0.0" - }, - "peerDependencies": { - "enquirer": ">= 2.3.0 < 3" - }, - "peerDependenciesMeta": { - "enquirer": { - "optional": true - } - } - }, "node_modules/locate-path": { "version": "5.0.0", "dev": true, @@ -8637,77 +7835,11 @@ "dev": true, "license": "MIT" }, - "node_modules/lodash.once": { - "version": "4.1.1", - "dev": true, - "license": "MIT" - }, "node_modules/lodash.truncate": { "version": "4.4.2", "dev": true, "license": "MIT" }, - "node_modules/log-symbols": { - "version": "4.1.0", - "dev": true, - "license": "MIT", - "dependencies": { - "chalk": "^4.1.0", - "is-unicode-supported": "^0.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/log-update": { - "version": "4.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "ansi-escapes": "^4.3.0", - "cli-cursor": "^3.1.0", - "slice-ansi": "^4.0.0", - "wrap-ansi": "^6.2.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/log-update/node_modules/slice-ansi": { - "version": "4.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "ansi-styles": "^4.0.0", - "astral-regex": "^2.0.0", - "is-fullwidth-code-point": "^3.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/slice-ansi?sponsor=1" - } - }, - "node_modules/log-update/node_modules/wrap-ansi": { - "version": "6.2.0", - "dev": true, - "license": "MIT", - "dependencies": { - "ansi-styles": "^4.0.0", - "string-width": "^4.1.0", - "strip-ansi": "^6.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/loose-envify": { "version": "1.4.0", "license": "MIT", @@ -8761,10 +7893,6 @@ "tmpl": "1.0.5" } }, - "node_modules/map-stream": { - "version": "0.1.0", - "dev": true - }, "node_modules/math-intrinsics": { "version": "1.1.0", "license": "MIT", @@ -9294,14 +8422,6 @@ "node": "*" } }, - "node_modules/minimist": { - "version": "1.2.8", - "dev": true, - "license": "MIT", - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/ms": { "version": "2.1.3", "license": "MIT" @@ -9562,11 +8682,6 @@ "version": "1.2.0", "license": "Unlicense" }, - "node_modules/ospath": { - "version": "1.2.2", - "dev": true, - "license": "MIT" - }, "node_modules/own-keys": { "version": "1.0.1", "license": "MIT", @@ -9607,20 +8722,6 @@ "node": ">=8" } }, - "node_modules/p-map": { - "version": "4.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "aggregate-error": "^3.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/p-try": { "version": "2.2.0", "dev": true, @@ -9721,26 +8822,10 @@ "node": ">=8" } }, - "node_modules/pause-stream": { - "version": "0.0.11", - "dev": true, - "license": [ - "MIT", - "Apache2" - ], - "dependencies": { - "through": "~2.3" - } - }, - "node_modules/pend": { - "version": "1.2.0", - "dev": true, - "license": "MIT" - }, "node_modules/performance-now": { "version": "2.1.0", - "devOptional": true, - "license": "MIT" + "license": "MIT", + "optional": true }, "node_modules/picocolors": { "version": "1.1.1", @@ -9758,14 +8843,6 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, - "node_modules/pify": { - "version": "2.3.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/pirates": { "version": "4.0.6", "dev": true, @@ -9785,6 +8862,53 @@ "node": ">=8" } }, + "node_modules/playwright": { + "version": "1.59.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.59.1.tgz", + "integrity": "sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "playwright-core": "1.59.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, + "node_modules/playwright-core": { + "version": "1.59.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.59.1.tgz", + "integrity": "sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/playwright/node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/possible-typed-array-names": { "version": "1.0.0", "license": "MIT", @@ -9858,17 +8982,6 @@ } } }, - "node_modules/pretty-bytes": { - "version": "5.6.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=6" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/pretty-format": { "version": "26.6.2", "dev": true, @@ -9906,14 +9019,6 @@ "@types/yargs-parser": "*" } }, - "node_modules/process": { - "version": "0.11.10", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.6.0" - } - }, "node_modules/progress": { "version": "2.0.3", "dev": true, @@ -9955,34 +9060,6 @@ "url": "https://github.com/sponsors/wooorm" } }, - "node_modules/proxy-from-env": { - "version": "1.0.0", - "dev": true, - "license": "MIT" - }, - "node_modules/ps-tree": { - "version": "1.2.0", - "dev": true, - "license": "MIT", - "dependencies": { - "event-stream": "=3.3.4" - }, - "bin": { - "ps-tree": "bin/ps-tree.js" - }, - "engines": { - "node": ">= 0.10" - } - }, - "node_modules/pump": { - "version": "3.0.2", - "dev": true, - "license": "MIT", - "dependencies": { - "end-of-stream": "^1.1.0", - "once": "^1.3.1" - } - }, "node_modules/punycode": { "version": "2.3.1", "dev": true, @@ -10006,20 +9083,6 @@ ], "license": "MIT" }, - "node_modules/qs": { - "version": "6.14.2", - "dev": true, - "license": "BSD-3-Clause", - "dependencies": { - "side-channel": "^1.1.0" - }, - "engines": { - "node": ">=0.6" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/query-string": { "version": "9.1.1", "license": "MIT", @@ -10260,14 +9323,6 @@ "url": "https://opencollective.com/unified" } }, - "node_modules/request-progress": { - "version": "3.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "throttleit": "^1.0.0" - } - }, "node_modules/require-directory": { "version": "2.1.1", "dev": true, @@ -10338,18 +9393,6 @@ "node": ">=10" } }, - "node_modules/restore-cursor": { - "version": "3.1.0", - "dev": true, - "license": "MIT", - "dependencies": { - "onetime": "^5.1.0", - "signal-exit": "^3.0.2" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/reusify": { "version": "1.0.4", "dev": true, @@ -10359,11 +9402,6 @@ "node": ">=0.10.0" } }, - "node_modules/rfdc": { - "version": "1.4.1", - "dev": true, - "license": "MIT" - }, "node_modules/rgbcolor": { "version": "1.0.1", "license": "MIT OR SEE LICENSE IN FEEL-FREE.md", @@ -10469,14 +9507,6 @@ "version": "1.3.3", "license": "BSD-3-Clause" }, - "node_modules/rxjs": { - "version": "7.8.1", - "dev": true, - "license": "Apache-2.0", - "dependencies": { - "tslib": "^2.1.0" - } - }, "node_modules/safe-array-concat": { "version": "1.1.3", "license": "MIT", @@ -10750,19 +9780,6 @@ "node": ">=8" } }, - "node_modules/slice-ansi": { - "version": "3.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "ansi-styles": "^4.0.0", - "astral-regex": "^2.0.0", - "is-fullwidth-code-point": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/source-map": { "version": "0.6.1", "dev": true, @@ -10787,17 +9804,6 @@ "url": "https://github.com/sponsors/wooorm" } }, - "node_modules/split": { - "version": "0.3.3", - "dev": true, - "license": "MIT", - "dependencies": { - "through": "2" - }, - "engines": { - "node": "*" - } - }, "node_modules/split-on-first": { "version": "3.0.0", "license": "MIT", @@ -10813,30 +9819,6 @@ "dev": true, "license": "BSD-3-Clause" }, - "node_modules/sshpk": { - "version": "1.18.0", - "dev": true, - "license": "MIT", - "dependencies": { - "asn1": "~0.2.3", - "assert-plus": "^1.0.0", - "bcrypt-pbkdf": "^1.0.0", - "dashdash": "^1.12.0", - "ecc-jsbn": "~0.1.1", - "getpass": "^0.1.1", - "jsbn": "~0.1.0", - "safer-buffer": "^2.0.2", - "tweetnacl": "~0.14.0" - }, - "bin": { - "sshpk-conv": "bin/sshpk-conv", - "sshpk-sign": "bin/sshpk-sign", - "sshpk-verify": "bin/sshpk-verify" - }, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/stack-utils": { "version": "2.0.6", "dev": true, @@ -10864,70 +9846,6 @@ "node": ">=0.1.14" } }, - "node_modules/start-server-and-test": { - "version": "2.0.10", - "dev": true, - "license": "MIT", - "dependencies": { - "arg": "^5.0.2", - "bluebird": "3.7.2", - "check-more-types": "2.24.0", - "debug": "4.4.0", - "execa": "5.1.1", - "lazy-ass": "1.6.0", - "ps-tree": "1.2.0", - "wait-on": "8.0.2" - }, - "bin": { - "server-test": "src/bin/start.js", - "start-server-and-test": "src/bin/start.js", - "start-test": "src/bin/start.js" - }, - "engines": { - "node": ">=16" - } - }, - "node_modules/start-server-and-test/node_modules/execa": { - "version": "5.1.1", - "dev": true, - "license": "MIT", - "dependencies": { - "cross-spawn": "^7.0.3", - "get-stream": "^6.0.0", - "human-signals": "^2.1.0", - "is-stream": "^2.0.0", - "merge-stream": "^2.0.0", - "npm-run-path": "^4.0.1", - "onetime": "^5.1.2", - "signal-exit": "^3.0.3", - "strip-final-newline": "^2.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sindresorhus/execa?sponsor=1" - } - }, - "node_modules/start-server-and-test/node_modules/get-stream": { - "version": "6.0.1", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/start-server-and-test/node_modules/human-signals": { - "version": "2.1.0", - "dev": true, - "license": "Apache-2.0", - "engines": { - "node": ">=10.17.0" - } - }, "node_modules/stop-iteration-iterator": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz", @@ -10941,14 +9859,6 @@ "node": ">= 0.4" } }, - "node_modules/stream-combiner": { - "version": "0.0.4", - "dev": true, - "license": "MIT", - "dependencies": { - "duplexer": "~0.1.1" - } - }, "node_modules/string_decoder": { "version": "1.3.0", "license": "MIT", @@ -11254,19 +10164,6 @@ "dev": true, "license": "MIT" }, - "node_modules/throttleit": { - "version": "1.0.1", - "dev": true, - "license": "MIT", - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/through": { - "version": "2.3.8", - "dev": true, - "license": "MIT" - }, "node_modules/tinyglobby": { "version": "0.2.14", "dev": true, @@ -11329,14 +10226,6 @@ "dev": true, "license": "MIT" }, - "node_modules/tmp": { - "version": "0.2.4", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=14.14" - } - }, "node_modules/tmpl": { "version": "1.0.5", "dev": true, @@ -11402,14 +10291,6 @@ "node": ">=5" } }, - "node_modules/tree-kill": { - "version": "1.2.2", - "dev": true, - "license": "MIT", - "bin": { - "tree-kill": "cli.js" - } - }, "node_modules/trim-lines": { "version": "3.0.1", "license": "MIT", @@ -11588,26 +10469,10 @@ "dev": true, "license": "0BSD" }, - "node_modules/tunnel-agent": { - "version": "0.6.0", - "dev": true, - "license": "Apache-2.0", - "dependencies": { - "safe-buffer": "^5.0.1" - }, - "engines": { - "node": "*" - } - }, "node_modules/turbocommons-ts": { "version": "3.12.0", "license": "Apache-2.0" }, - "node_modules/tweetnacl": { - "version": "0.14.5", - "dev": true, - "license": "Unlicense" - }, "node_modules/type-check": { "version": "0.4.0", "dev": true, @@ -11741,7 +10606,9 @@ } }, "node_modules/undici-types": { - "version": "6.20.0", + "version": "7.19.2", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.19.2.tgz", + "integrity": "sha512-qYVnV5OEm2AW8cJMCpdV20CDyaN3g0AjDlOGf1OW4iaDEx8MwdtChUp4zu4H0VP3nDRF/8RKWH+IPp9uW0YGZg==", "dev": true, "license": "MIT" }, @@ -11828,14 +10695,6 @@ "node": ">= 10.0.0" } }, - "node_modules/untildify": { - "version": "4.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, "node_modules/update-browserslist-db": { "version": "1.1.2", "dev": true, @@ -11885,14 +10744,6 @@ "base64-arraybuffer": "^1.0.2" } }, - "node_modules/uuid": { - "version": "8.3.2", - "dev": true, - "license": "MIT", - "bin": { - "uuid": "dist/bin/uuid" - } - }, "node_modules/v8-compile-cache": { "version": "2.4.0", "dev": true, @@ -11916,19 +10767,6 @@ "node": ">=10.12.0" } }, - "node_modules/verror": { - "version": "1.10.0", - "dev": true, - "engines": [ - "node >=0.6.0" - ], - "license": "MIT", - "dependencies": { - "assert-plus": "^1.0.0", - "core-util-is": "1.0.2", - "extsprintf": "^1.2.0" - } - }, "node_modules/vfile": { "version": "6.0.3", "license": "MIT", @@ -12100,24 +10938,6 @@ "node": ">=18" } }, - "node_modules/wait-on": { - "version": "8.0.2", - "dev": true, - "license": "MIT", - "dependencies": { - "axios": "^1.7.9", - "joi": "^17.13.3", - "lodash": "^4.17.21", - "minimist": "^1.2.8", - "rxjs": "^7.8.1" - }, - "bin": { - "wait-on": "bin/wait-on" - }, - "engines": { - "node": ">=12.0.0" - } - }, "node_modules/walker": { "version": "1.0.8", "dev": true, @@ -12397,15 +11217,6 @@ "node": ">=12" } }, - "node_modules/yauzl": { - "version": "2.10.0", - "dev": true, - "license": "MIT", - "dependencies": { - "buffer-crc32": "~0.2.3", - "fd-slicer": "~1.1.0" - } - }, "node_modules/yn": { "version": "3.1.1", "dev": true, diff --git a/package.json b/package.json index 50b74ce..66621af 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "@formatjs/fast-memoize": "^2.2.6", "@formatjs/intl": "^2.10.15", "@jest/globals": "^29.7.0", + "@playwright/test": "^1.59.1", "@types/adm-zip": "^0.5.0", "@types/array.prototype.flatmap": "^1.2.2", "@types/d3-array": "^3.2.1", @@ -60,12 +61,12 @@ "@types/js-cookie": "^3.0.6", "@types/lunr": "^2.3.3", "@types/md5": "^2.3.0", + "@types/node": "^25.6.0", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.0", "@typescript-eslint/eslint-plugin": "^5.62.0", "@typescript-eslint/parser": "^5.62.0", "@vitejs/plugin-react": "^4.3.4", - "cypress": "^13.17.0", "eslint": "^7.32.0", "eslint-plugin-react": "^7.37.5", "eslint-plugin-react-hooks": "^7.1.1", @@ -75,7 +76,6 @@ "prettier": "^3.8.3", "prettier-plugin-organize-imports": "^4.1.0", "run-script-os": "^1.1.6", - "start-server-and-test": "^2.0.9", "ts-jest": "^29.2.5", "ts-node": "^10.9.2", "typescript": "^5.7.3", @@ -86,16 +86,15 @@ "start": "vite", "build": "tsc && vite build", "test": "jest", - "prettier": "prettier --write \"src/**/*.{ts,tsx,json}\"", - "lint": "eslint src --ext .ts,.tsx", + "prettier": "prettier --write \"{src,tests}/**/*.{ts,tsx,json}\"", + "lint": "eslint src tests --ext .ts,.tsx", "predeploy": "npm run build", "deploy": "gh-pages -d dist", "predeploy-wikitree": "npm run build", "deploy-wikitree": "./deploy-wikitree.sh", - "cy:run": "cypress run", - "cy:start-and-run": "run-script-os", - "cy:start-and-run:default": "BROWSER=none start-server-and-test start localhost:3000 cy:run", - "cy:start-and-run:windows": "set BROWSER=none && start-server-and-test start localhost:3000 cy:run" + "preview": "vite preview", + "test:e2e": "playwright test", + "test:e2e:ui": "playwright test --ui" }, "homepage": ".", "browserslist": [ diff --git a/playwright.config.ts b/playwright.config.ts new file mode 100644 index 0000000..3d735bf --- /dev/null +++ b/playwright.config.ts @@ -0,0 +1,32 @@ +import {defineConfig, devices} from '@playwright/test'; + +export default defineConfig({ + testDir: './tests', + fullyParallel: true, + forbidOnly: !!process.env.CI, + retries: process.env.CI ? 2 : 0, + workers: process.env.CI ? '100%' : undefined, + reporter: 'html', + use: { + baseURL: 'http://localhost:3000', + locale: 'en-US', // Forces consistent translation keys across locales for robust placeholder selectors + trace: 'on-first-retry', + }, + projects: [ + { + name: 'chromium', + use: { + ...devices['Desktop Chrome'], + }, + }, + ], + webServer: { + command: process.env.CI + ? 'npx vite preview --port 3000 --strictPort' // CI already builds the app; preview directly with strict port + : 'npx vite --no-open --port 3000 --strictPort', + port: 3000, + reuseExistingServer: !process.env.CI, + stdout: 'ignore', + stderr: 'pipe', + }, +}); diff --git a/screenshot.png b/screenshot.png deleted file mode 100644 index 624268b..0000000 Binary files a/screenshot.png and /dev/null differ diff --git a/src/app.tsx b/src/app.tsx index cbddabe..26606c9 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -473,7 +473,7 @@ export function App() { mcpBridge.setSetSelectionCallback((id: string) => { onSelection({id, generation: 0}); }); - }, [mcpBridge]); + }, [mcpBridge, location]); function updateUrl(args: queryString.ParsedQuery) { const search = queryString.parse(location.search); diff --git a/tests/chart_view.spec.ts b/tests/chart_view.spec.ts new file mode 100644 index 0000000..aff9f9a --- /dev/null +++ b/tests/chart_view.spec.ts @@ -0,0 +1,26 @@ +import {expect, test} from '@playwright/test'; +import {setupGedcomRoute} from './helpers'; + +test.describe('Chart view', () => { + test.beforeEach(async ({page, context}) => { + await setupGedcomRoute(context); + await page.goto('/#/view?url=https%3A%2F%2Fexample.org%2Ffamily.ged'); + }); + + test('loads data from URL', async ({page}) => { + await expect(page.locator('#content')).toContainText('Bonifacy'); + }); + + test('Animates chart', async ({page}) => { + await expect(page.locator('#content')).not.toContainText('Chike'); + + // Click Radobod's node. force: true is required because D3 wraps the text in a border + // that intercepts pointer events, which is expected SVG chart layout behavior. + await page.getByText('Radobod').click({force: true}); + await expect(page.locator('#content')).toContainText('Chike'); + }); + + test('shows the right panel', async ({page}) => { + await expect(page.locator('#content')).toContainText('a random note'); + }); +}); diff --git a/tests/embedded.spec.ts b/tests/embedded.spec.ts new file mode 100644 index 0000000..09d896c --- /dev/null +++ b/tests/embedded.spec.ts @@ -0,0 +1,33 @@ +import {expect, test} from '@playwright/test'; +import * as fs from 'fs'; +import {setupGedcomRoute} from './helpers'; + +test.describe('Embedded mode', () => { + test('shows data', async ({page, context}) => { + // Intercept family.ged requests coming from parent frame. + await setupGedcomRoute(context); + + // Read the physical HTML wrapper template file. + const wrapperHtml = fs.readFileSync( + 'tests/fixtures/embedded_frame.html', + 'utf-8', + ); + + // Route parent page wrapper virtually on the same origin/port dynamically. + await context.route(`**/test-embedded-frame.html`, async (route) => { + await route.fulfill({ + status: 200, + contentType: 'text/html', + body: wrapperHtml, + }); + }); + + // Load the virtual wrapper page. + await page.goto(`/test-embedded-frame.html`); + + // Assert child iframe successfully loaded Bonifacy Gibbs. + const iframe = page.frameLocator('#topolaFrame'); + + await expect(iframe.locator('#root')).toContainText('Bonifacy'); + }); +}); diff --git a/tests/fixtures/embedded_frame.html b/tests/fixtures/embedded_frame.html new file mode 100644 index 0000000..fe74920 --- /dev/null +++ b/tests/fixtures/embedded_frame.html @@ -0,0 +1,44 @@ + + + + Embedded Frame Test Wrapper + + + + + + diff --git a/tests/global.d.ts b/tests/global.d.ts new file mode 100644 index 0000000..c6eef78 --- /dev/null +++ b/tests/global.d.ts @@ -0,0 +1,3 @@ +interface Window { + __registeredTools?: any[]; +} diff --git a/tests/helpers.ts b/tests/helpers.ts new file mode 100644 index 0000000..6838292 --- /dev/null +++ b/tests/helpers.ts @@ -0,0 +1,33 @@ +import {BrowserContext} from '@playwright/test'; +import * as fs from 'fs'; + +/** + * Blocks external tracking services (like Google Analytics and Google Tag Manager) + * to guarantee a hermetic and fast test environment. + */ +export async function blockTracking(context: BrowserContext): Promise { + await context.route('**/*google-analytics.com/**', (route) => route.abort()); + await context.route('**/*googletagmanager.com/**', (route) => route.abort()); +} + +/** + * Sets up interception for raw GEDCOM requests, fulfills them with cached test data + * and sets up CORS proxy checks and analytics blocking. + */ +export async function setupGedcomRoute(context: BrowserContext): Promise { + const gedcomContent = fs.readFileSync( + 'src/datasource/testdata/test.ged', + 'utf-8', + ); + + await context.route('**/family.ged', async (route) => { + await route.fulfill({ + status: 200, + contentType: 'text/plain', + headers: {'Access-Control-Allow-Origin': '*'}, + body: gedcomContent, + }); + }); + + await blockTracking(context); +} diff --git a/tests/intro.spec.ts b/tests/intro.spec.ts new file mode 100644 index 0000000..39a5f24 --- /dev/null +++ b/tests/intro.spec.ts @@ -0,0 +1,18 @@ +import {expect, test} from '@playwright/test'; +import {blockTracking} from './helpers'; + +test.describe('Intro page', () => { + test.beforeEach(async ({page, context}) => { + await blockTracking(context); + await page.goto('/'); + }); + + test('displays intro text', async ({page}) => { + await expect(page.getByText('Examples')).toBeVisible(); + }); + + test('displays menu', async ({page}) => { + await expect(page.getByText('Open file', {exact: true})).toBeVisible(); + await expect(page.getByText('Load from URL', {exact: true})).toBeVisible(); + }); +}); diff --git a/tests/search.spec.ts b/tests/search.spec.ts new file mode 100644 index 0000000..74ec2fb --- /dev/null +++ b/tests/search.spec.ts @@ -0,0 +1,22 @@ +import {expect, test} from '@playwright/test'; +import {setupGedcomRoute} from './helpers'; + +test.describe('Search functionality', () => { + test.beforeEach(async ({context}) => { + await setupGedcomRoute(context); + }); + + test('Search works', async ({page}) => { + await page.goto('/#/view?url=https%3A%2F%2Fexample.org%2Ffamily.ged'); + await expect(page.locator('#content')).not.toContainText('Chike'); + + const searchInput = page.getByPlaceholder('Search for people'); + await searchInput.fill('chik'); + + // Wait for the debounced suggestion panel to render. + await expect(page.locator('.results')).toContainText('Chike'); + + await searchInput.press('Enter'); + await expect(page.locator('#content')).toContainText('Chike'); + }); +}); diff --git a/tests/tsconfig.json b/tests/tsconfig.json new file mode 100644 index 0000000..f8ed1e6 --- /dev/null +++ b/tests/tsconfig.json @@ -0,0 +1,11 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "module": "NodeNext", + "target": "ES2022", + "moduleResolution": "NodeNext", + "types": ["node"], + "noEmit": true + }, + "include": ["./**/*.ts", "./**/*.d.ts"] +} diff --git a/tests/webmcp.spec.ts b/tests/webmcp.spec.ts new file mode 100644 index 0000000..e66affe --- /dev/null +++ b/tests/webmcp.spec.ts @@ -0,0 +1,73 @@ +import {expect, test} from '@playwright/test'; +import {setupGedcomRoute} from './helpers'; + +const EXPECTED_TOOL_NAMES = [ + 'get_selected_person', + 'search_indi', + 'inspect_indi', + 'focus_indi', + 'find_relationship_path', + 'get_ancestors', + 'get_descendants', +]; + +test.describe('WebMCP Integration', () => { + test.beforeEach(async ({page, context}) => { + await setupGedcomRoute(context); + + // Add init script to expose modelContext mock BEFORE application boots. + await page.addInitScript(() => { + const registeredTools: any[] = []; + window.__registeredTools = registeredTools; + window.navigator.modelContext = { + registerTool: (tool: any) => { + registeredTools.push(tool); + }, + unregisterTool: (name: string) => { + const idx = registeredTools.findIndex((t) => t.name === name); + if (idx !== -1) registeredTools.splice(idx, 1); + }, + }; + }); + }); + + test('registers tools to standard modelContext', async ({page}) => { + await page.goto('/#/view?url=https%3A%2F%2Fexample.org%2Ffamily.ged'); + + // Polling assertion to avoid React useEffect registration race condition. + await page.waitForFunction( + (expectedCount) => window.__registeredTools?.length === expectedCount, + EXPECTED_TOOL_NAMES.length, + ); + + const toolNames = await page.evaluate(() => + window.__registeredTools + ? window.__registeredTools.map((t: any) => t.name) + : [], + ); + expect(toolNames.sort()).toEqual([...EXPECTED_TOOL_NAMES].sort()); + }); + + test('allows running focus_indi tool', async ({page}) => { + await page.goto('/#/view?url=https%3A%2F%2Fexample.org%2Ffamily.ged'); + await page.waitForFunction( + (expectedCount) => window.__registeredTools?.length === expectedCount, + EXPECTED_TOOL_NAMES.length, + ); + + await expect(page.locator('#content')).toContainText('Radobod'); + await expect(page.locator('#content')).not.toContainText('Chike'); + + // Execute the non-serializable callback inside the browser environment. + await page.evaluate(async () => { + const focusTool = window.__registeredTools + ? window.__registeredTools.find((t: any) => t.name === 'focus_indi') + : null; + if (!focusTool) throw new Error('focus_indi tool not found'); + await focusTool.execute({id: 'I21'}); // Shifts view focus to Chike. + }); + + // Verify that the UI updated automatically in response to the tool action. + await expect(page.locator('#content')).toContainText('Chike'); + }); +});