NYM-1199: Update Node Families E2E openspec for CI and recent merges
This commit refines the design, proposal, and tasks for Node Families native webview E2E testing. It reconciles the plan with recent merges, including the `ci-nym-wallet-frontend.yml` workflow (detailing the separate E2E job), Figma Code Connect, and the Nym 2.0 theme swap. The updates provide clearer guidance on CI integration and potential feature interactions.
This commit is contained in:
@@ -45,6 +45,9 @@ The mock build seeds `buildOwnerFlowStore` / `buildOperatorFlowStore` and the pa
|
||||
**D5 — Skip-not-fail on unsupported platforms.**
|
||||
The WebdriverIO suite detects macOS (or a missing `tauri-driver`/`WebKitWebDriver`) and skips with a clear message, so `pnpm test:e2e:tauri` on a Mac is a no-op rather than a red failure. CI is the source of truth.
|
||||
|
||||
**D6 — Separate CI job, not a step in `build` (reconciled with recent merge).**
|
||||
The merged `ci-nym-wallet-frontend.yml` has one `build` job (ubuntu-22.04) doing install → tsc → lint → unit tests → build-storybook → upload. The native-webview suite is added as a **separate job** rather than appended to `build`: it additionally needs a Rust/Tauri compile, `WebKitWebDriver`, and `tauri-driver`, which would slow every `build` run and couple unrelated failures. It can `needs: build` (reuse nothing) or run independently. *Also reconciled:* the existing Playwright→Storybook suite (`test:e2e`) is **not yet in CI** — only unit tests + Storybook build are — so the "keep Playwright as the cross-platform check" intent means optionally wiring `test:e2e` into CI too, not assuming it already runs there.
|
||||
|
||||
## Risks / Trade-offs
|
||||
|
||||
- **Native-webview e2e can't run on the developer's Mac** → Keep the Playwright/Storybook suite as the local check (works everywhere); rely on Linux CI for native-webview coverage; D5 makes the local invocation a clean skip.
|
||||
@@ -52,6 +55,8 @@ The WebdriverIO suite detects macOS (or a missing `tauri-driver`/`WebKitWebDrive
|
||||
- **Build-flag branch could accidentally ship mock code** → Default flag off; add a check (bundle assertion or the existing `check:singletons`-style guard) and the spec scenario "Production build excludes mock code" to lock it in.
|
||||
- **`tauri-driver` + `WebKitWebDriver` version drift in CI** → Pin `tauri-driver` (`cargo install --locked`) and install a known WebKitGTK driver in the CI image; cache cargo bin.
|
||||
- **Duplicated journey logic across two suites drifts over time** → Both target identical `data-testid`s and assert identical outcomes (parity requirement); factor shared selector/step constants if drift appears.
|
||||
- **Provider seam breaks the merged Figma Code Connect mapping** (`FamilyPage.figma.tsx` does `example: () => <FamilyPage />`) → Keep the mock/real selection in a *separate* module (D2); never make `FamilyPage`'s own module depend on the flag or on Tauri, so it stays importable in isolation. The `src/**/*.figma.tsx` include is unaffected.
|
||||
- **Theme swap (Nym 2.0) changing appearance under test** → Confirmed color-only (no DOM/`data-testid` change, families components untouched by the merge); journeys assert visibility/test ids, not pixels, so parity holds across the palette change.
|
||||
|
||||
## Migration Plan
|
||||
|
||||
|
||||
@@ -24,6 +24,8 @@ The Node Families feature is fully built and exercised in Storybook, but its end
|
||||
- **Frontend (`nym-wallet/src`)**: provider-selection seam (build-time flag) around `FamiliesContextProvider` vs `MockFamiliesContextProvider`; a Family route/entry reachable in the mock build; webpack config gains a mock-flag-driven define + entry path.
|
||||
- **Build/config**: webpack (`webpack.dev.js` / a mock variant), Tauri (`tauri.conf.json` `devUrl`/`frontendDist` or a build profile) so the harness can launch the mock-wired app.
|
||||
- **Tests (`nym-wallet/e2e`)**: new WebdriverIO config + spec(s) mirroring `e2e/families.spec.ts` journeys; `tauri-driver` as a dev/CI dependency (`cargo install tauri-driver`).
|
||||
- **CI (`.github`)**: a Linux job that installs `WebKitWebDriver` + `tauri-driver`, builds the mock-wired binary, and runs the WebdriverIO suite.
|
||||
- **CI (`.github/workflows/ci-nym-wallet-frontend.yml`)**: the existing single `build` job (ubuntu-22.04: install → tsc → lint → unit tests → build-storybook → upload) gains a **separate** native-webview job that installs `WebKitWebDriver` + `tauri-driver`, builds the mock-wired binary, and runs the WebdriverIO suite (kept separate because it adds a Rust/Tauri build + system webdriver deps the `build` job doesn't need). Note: the Playwright→Storybook suite is currently **not** wired into CI — only unit tests + Storybook build are — so this change should also decide whether to add the existing Playwright suite as a CI step.
|
||||
- **Figma Code Connect (recently merged)**: `src/pages/families/FamilyPage.figma.tsx` maps `FamilyPage` via `example: () => <FamilyPage />`. The build-time provider seam MUST keep `FamilyPage` itself provider-agnostic and importable in isolation so this mapping (and the `src/**/*.figma.tsx` config) keeps resolving.
|
||||
- **Theme (recently merged Nym 2.0 swap)**: orthogonal — the swap changed only color values, no DOM/`data-testid`s, so journeys/selectors are unaffected; the mock-wired build simply renders the new dark palette.
|
||||
- **Dependencies**: add `webdriverio` (+ runner) to `nym-wallet` dev deps; `tauri-driver` via cargo. No production dependency or runtime change.
|
||||
- **Out of scope**: real IPC/chain wiring (still task 9.4/9.5 of the parent change); macOS native-webview e2e (unsupported by Tauri).
|
||||
- **Out of scope**: real IPC/chain wiring (still task 9.4/9.5 of the parent change); macOS native-webview e2e (unsupported by Tauri); Figma Code Connect publish (separate Tier-1/Hux-gated step).
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
## 1. Build-time mock provider seam
|
||||
|
||||
- [ ] 1.1 Add a webpack `DefinePlugin` constant for the families mock flag (e.g. `process.env.WALLET_MOCK_FAMILIES`, tri-state `owner|operator|off`, default `off`) in the dev/mock webpack config.
|
||||
- [ ] 1.2 Introduce a provider-selection module that exports either `FamiliesContextProvider` (real) or `MockFamiliesContextProvider` (mock) based on the compile-time flag, behind a `const` guard so the unused branch tree-shakes.
|
||||
- [ ] 1.2 Introduce a provider-selection module that exports either `FamiliesContextProvider` (real) or `MockFamiliesContextProvider` (mock) based on the compile-time flag, behind a `const` guard so the unused branch tree-shakes. Keep this seam in its **own** module — do NOT make `FamilyPage.tsx` depend on the flag or on Tauri, so the merged `FamilyPage.figma.tsx` Code Connect mapping (`example: () => <FamilyPage />`) still imports it in isolation.
|
||||
- [ ] 1.3 Have the Family route/entry consume the selection module instead of importing `FamiliesContextProvider` directly; in mock mode seed `buildOwnerFlowStore` / `buildOperatorFlowStore` per the persona flag (reuse `families.fixtures.ts`).
|
||||
- [ ] 1.4 Ensure the Family page is reachable via normal in-app navigation in the mock build and renders inside the app shell (not a Storybook iframe), keeping the existing `data-testid`s.
|
||||
- [ ] 1.5 Verify a default (flag `off`) production build excludes families mock-engine code (inspect bundle / add a guard); confirm the real provider still wires unchanged.
|
||||
@@ -29,14 +29,15 @@
|
||||
|
||||
## 5. CI integration
|
||||
|
||||
- [ ] 5.1 Add a Linux CI job that installs `WebKitWebDriver` (WebKitGTK) and `tauri-driver` (`cargo install --locked`, cached).
|
||||
- [ ] 5.2 In the job, build the mock-wired binary (per persona) and run `test:e2e:tauri`; fail the job on any owner/operator journey failure.
|
||||
- [ ] 5.3 Keep the existing Playwright/Storybook `test:e2e` job as the cross-platform check (unchanged); document the split in the e2e README/comment.
|
||||
- [ ] 5.4 Optionally gate the native-webview job as non-blocking initially if flaky, with a note to promote it to required once stable.
|
||||
- [ ] 5.1 Add a **separate** job to `.github/workflows/ci-nym-wallet-frontend.yml` (alongside the existing `build` job, not appended to it) running on `ubuntu-22.04`, installing `WebKitWebDriver` (WebKitGTK) and `tauri-driver` (`cargo install --locked`, cached) plus the Tauri/Rust build toolchain.
|
||||
- [ ] 5.2 In that job, build the mock-wired binary (per persona) and run `test:e2e:tauri`; fail the job on any owner/operator journey failure.
|
||||
- [ ] 5.3 Decide whether to also wire the existing Playwright→Storybook `test:e2e` into the `build` job as the cross-platform check (it is currently NOT in CI — only unit tests + `build-storybook` run); document the two-suite split in the e2e README/comment.
|
||||
- [ ] 5.4 Optionally gate the native-webview job as non-blocking (`continue-on-error`) initially if flaky, with a note to promote it to required once stable.
|
||||
|
||||
## 6. Verification & docs
|
||||
|
||||
- [ ] 6.1 Run the WebdriverIO suite in CI (Linux) and confirm both owner and operator journeys pass against the native webview.
|
||||
- [ ] 6.2 Confirm the macOS local invocation skips cleanly (no red failure).
|
||||
- [ ] 6.3 Confirm `tsc` + eslint stay clean and the production build is unaffected (no mock code, no behavior change).
|
||||
- [ ] 6.4a Confirm the provider seam didn't break Code Connect (`FamilyPage.figma.tsx` still type-checks / `figma connect` parse is clean) and that the Nym 2.0 theme swap left all journey `data-testid`s intact (selectors unchanged).
|
||||
- [ ] 6.4 Document the two-suite setup (Playwright→Storybook for local/cross-platform; WebdriverIO→tauri-driver for native-webview CI) and the mock-flag usage in the wallet README / e2e comments.
|
||||
|
||||
Reference in New Issue
Block a user