forked/topola-viewer
1
0
Fork 0
mirror of https://github.com/PeWu/topola-viewer.git synced 2026-05-26 15:16:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Embed font hoping that this will make the visual tests reproducible

Browse Source
This commit is contained in:
Przemek Więch
2026-05-12 18:08:32 +02:00
parent 9af5aa966a
commit 328008f8e9
8 changed files with 54 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/PLAYWRIGHT_DESIGN.md
View File

@@ -131,7 +131,7 @@ This section defines the granular step-by-step instructions and enumerates **eve
* **`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.
* *Rationale:* Shared test utilities to encapsulate wildcard route mocking for family tree fetching (`setupGedcomRoute`) and hermetic context routing (`setupHermeticEnvironment`). 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`**
@@ -190,7 +190,7 @@ This section defines the granular step-by-step instructions and enumerates **eve
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.
* **Hermetic Routing**: Implements a `setupHermeticEnvironment(context)` helper that intercepts tracking services (`**/*google-analytics.com/**`, `**/*googletagmanager.com/**`) and embeds baseline web fonts to guarantee deterministic 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`.
@@ -200,7 +200,7 @@ This section defines the granular step-by-step instructions and enumerates **eve
##### 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 (`/`).
* **Setup**: Leverages `beforeEach` to configure hermetic routes using the `setupHermeticEnvironment` 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.

6
docs/SCREENSHOT_TESTS_DESIGN.md
View File

@@ -51,7 +51,7 @@ This section defines the granular, step-by-step implementation steps and enumera
#### 2. Files to [NEW]
* **`tests/helpers.ts`**
* *Rationale:* Provide shared E2E/visual testing helper utilities. Features `blockTracking()` to abort external Google Analytics and Google Tag Manager network requests (ensuring offline hermetic execution) and `setupGedcomRoute()` to serve a standard mock `.ged` dataset.
* *Rationale:* Provide shared E2E/visual testing helper utilities. Features `setupHermeticEnvironment()` to abort external tracking requests and embed local fonts (ensuring offline hermetic execution) and `setupGedcomRoute()` to serve a standard mock `.ged` dataset.
* **`tests/intro_visual.spec.ts`**
* *Rationale:* Verify the landing page layout, copy block positions, and logo alignments. Employs an in-browser DOM script to overwrite dynamic footer versioning and dynamic changelog blocks prior to capture, ensuring baseline immunity.
* **`tests/charts_visual.spec.ts`**
@@ -74,7 +74,7 @@ This section defines the granular, step-by-step implementation steps and enumera
* `"test:visual:update": "playwright test --project=visual --update-snapshots"` to automatically regenerate baseline reference files.
#### Step 2: Landing Page Visual Validation Spec (`tests/intro_visual.spec.ts`)
1. Define a test block marked with the `@visual` tag, utilizing `blockTracking` helper in `beforeEach`.
1. Define a test block marked with the `@visual` tag, utilizing `setupHermeticEnvironment` helper in `beforeEach`.
2. Instruct the browser to navigate to the root path `/`.
3. Right before assertion, trigger `page.evaluate` to clean dynamic elements:
* Target the `.version` class element and set `.innerText = "version: 2026-01-01 00:00 (testcommit)"`.
@@ -91,7 +91,7 @@ This section defines the granular, step-by-step implementation steps and enumera
* Capture the isolated canvas screenshot: `expect(container).toHaveScreenshot('chart-[type].png')`.
#### Step 4: Details Panel Layouts Spec (`tests/details_visual.spec.ts`)
1. Set up a `beforeEach` block to block analytics via `blockTracking(context)`.
1. Set up a `beforeEach` block to establish hermetic routes via `setupHermeticEnvironment(context)`.
2. Define isolated test blocks with the `@visual` tag, each loading its own dedicated inline micro-GEDCOM dataset:
* **Complex Names Test:**
* Mock `**/family.ged` with a GEDCOM string containing prefix/suffix/rufname tags.