[PR #752] [MERGED] test: E2E verification for layout persistence flat payload pipeline #816

New issue

Closed

opened 2026-05-06 13:10:16 +02:00 by BreizhHardware · 0 comments

BreizhHardware commented

2026-05-06 13:10:16 +02:00

Owner

📋 Pull Request Information

Original PR: https://github.com/cloudflare/vinext/pull/752
Author: @NathanDrake2406
Created: 4/2/2026
Status: ✅ Merged
Merged: 4/10/2026
Merged by: @james-elicx

Base: main ← Head: feat/layout-persistence-pr-3-verification

📝 Commits (6)

ef318c2 test: add E2E verification for layout persistence flat payload pipeline
a04bf15 test: harden layout persistence hydration assertions
e32ebfb test: address layout-persistence spec gaps
92be4cf test: tighten not.toBeAttached() assertions for absent elements
7a73a1d chore: trigger CI
3bb92cd test: address review feedback on layout-persistence spec

📊 Changes

8 files changed (+379 additions, -0 deletions)

View changed files

➕ tests/e2e/app-router/layout-persistence.spec.ts (+311 -0)
➕ tests/fixtures/app-basic/app/components/layout-counter.tsx (+21 -0)
➕ tests/fixtures/app-basic/app/components/template-counter.tsx (+22 -0)
📝 tests/fixtures/app-basic/app/dashboard/layout.tsx (+9 -0)
📝 tests/fixtures/app-basic/app/dashboard/page.tsx (+5 -0)
📝 tests/fixtures/app-basic/app/error-test/error.tsx (+5 -0)
📝 tests/fixtures/app-basic/app/page.tsx (+3 -0)
📝 tests/fixtures/app-basic/app/template.tsx (+3 -0)

📄 Description

Summary

Part of #726 (PR 3). Pure test code — zero production changes. Proves the flat keyed map payload pipeline from PR 2c actually works end-to-end in a real browser.

Every test answers: "would a real user notice if this broke?" Layout state surviving navigation, template state resetting on segment change, errors clearing on re-navigation — these are observable user behaviors, not implementation details.

What's tested

Behavior	Method
Layout state persists across sibling navigation	Client counter in dashboard layout survives dashboard → settings → dashboard
Layout state resets on hard navigation	`page.goto()` resets counter vs Link click preserving it
Template remounts on segment boundary change	Root template counter resets on `/` → `/about` (segment changes)
Template persists within same segment	Root template counter survives `/dashboard` → `/dashboard/settings` (same top-level segment)
Error clears on navigate-away-and-back	Trigger error → client-nav to home → client-nav back → fresh page
Back/forward preserves layout state	Counter survives `goBack()` / `goForward()` through dashboard history
Parallel slots persist on soft nav	`@team` and `@analytics` slot content survives `/dashboard` → `/dashboard/settings`
Parallel slots show default on hard nav	Direct load of `/dashboard/settings` renders `default.tsx` instead of page slot content

What's NOT tested here (and why)

Root layout switch — requires restructuring fixtures into route groups with separate root layouts. Already unit-tested via shouldHardNavigate in tests/app-browser-entry.test.ts
RSC payload structure — implementation detail, covered by unit tests in PR 2c
Reducer dispatch types — wiring, not user-observable behavior

Fixture changes

Minimal additions to tests/fixtures/app-basic/ to make behaviors observable:

app/components/layout-counter.tsx — "use client" counter proving layout persistence
app/components/template-counter.tsx — "use client" counter proving template remount
app/dashboard/layout.tsx — added LayoutCounter + nav links between dashboard pages
app/template.tsx — added TemplateCounter
app/error-test/error.tsx — added "Go home" Link for error recovery navigation
app/page.tsx — added "Error Test" Link

All existing E2E tests (navigation, error-handling, navigation-flows — 25 tests) still pass with these fixture changes.

Test plan

tests/e2e/app-router/layout-persistence.spec.ts — 8 E2E tests, all passing
Existing navigation/error-handling/navigation-flows E2E — 25 tests, no regressions
tests/app-router.test.ts -t "not-found|forbidden|unauthorized" — 5 SSR integration tests, all passing
vp check — 0 lint/type errors

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/cloudflare/vinext/pull/752 **Author:** [@NathanDrake2406](https://github.com/NathanDrake2406) **Created:** 4/2/2026 **Status:** ✅ Merged **Merged:** 4/10/2026 **Merged by:** [@james-elicx](https://github.com/james-elicx) **Base:** `main` ← **Head:** `feat/layout-persistence-pr-3-verification` --- ### 📝 Commits (6) - [`ef318c2`](https://github.com/cloudflare/vinext/commit/ef318c2294a518a0379c107fd29f6e752e8470d6) test: add E2E verification for layout persistence flat payload pipeline - [`a04bf15`](https://github.com/cloudflare/vinext/commit/a04bf15549192e5198d1f7f47ec0043db7123333) test: harden layout persistence hydration assertions - [`e32ebfb`](https://github.com/cloudflare/vinext/commit/e32ebfbb7bb0c901c03d6ec2ede86e97fc602429) test: address layout-persistence spec gaps - [`92be4cf`](https://github.com/cloudflare/vinext/commit/92be4cf58533808f1346271688b2256a27d7dd5c) test: tighten not.toBeAttached() assertions for absent elements - [`7a73a1d`](https://github.com/cloudflare/vinext/commit/7a73a1d6e71a3fccbeaa011184dc0eaad4bb9031) chore: trigger CI - [`3bb92cd`](https://github.com/cloudflare/vinext/commit/3bb92cdc45022ffe27bae73b0baa74a3ac6b0813) test: address review feedback on layout-persistence spec ### 📊 Changes **8 files changed** (+379 additions, -0 deletions) <details> <summary>View changed files</summary> ➕ `tests/e2e/app-router/layout-persistence.spec.ts` (+311 -0) ➕ `tests/fixtures/app-basic/app/components/layout-counter.tsx` (+21 -0) ➕ `tests/fixtures/app-basic/app/components/template-counter.tsx` (+22 -0) 📝 `tests/fixtures/app-basic/app/dashboard/layout.tsx` (+9 -0) 📝 `tests/fixtures/app-basic/app/dashboard/page.tsx` (+5 -0) 📝 `tests/fixtures/app-basic/app/error-test/error.tsx` (+5 -0) 📝 `tests/fixtures/app-basic/app/page.tsx` (+3 -0) 📝 `tests/fixtures/app-basic/app/template.tsx` (+3 -0) </details> ### 📄 Description ## Summary Part of #726 (PR 3). Pure test code — zero production changes. Proves the flat keyed map payload pipeline from PR 2c actually works end-to-end in a real browser. Every test answers: "would a real user notice if this broke?" Layout state surviving navigation, template state resetting on segment change, errors clearing on re-navigation — these are observable user behaviors, not implementation details. ### What's tested | Behavior | Method | |----------|--------| | Layout state persists across sibling navigation | Client counter in dashboard layout survives dashboard → settings → dashboard | | Layout state resets on hard navigation | `page.goto()` resets counter vs Link click preserving it | | Template remounts on segment boundary change | Root template counter resets on `/` → `/about` (segment changes) | | Template persists within same segment | Root template counter survives `/dashboard` → `/dashboard/settings` (same top-level segment) | | Error clears on navigate-away-and-back | Trigger error → client-nav to home → client-nav back → fresh page | | Back/forward preserves layout state | Counter survives `goBack()` / `goForward()` through dashboard history | | Parallel slots persist on soft nav | `@team` and `@analytics` slot content survives `/dashboard` → `/dashboard/settings` | | Parallel slots show default on hard nav | Direct load of `/dashboard/settings` renders `default.tsx` instead of page slot content | ### What's NOT tested here (and why) - **Root layout switch** — requires restructuring fixtures into route groups with separate root layouts. Already unit-tested via `shouldHardNavigate` in `tests/app-browser-entry.test.ts` - **RSC payload structure** — implementation detail, covered by unit tests in PR 2c - **Reducer dispatch types** — wiring, not user-observable behavior ### Fixture changes Minimal additions to `tests/fixtures/app-basic/` to make behaviors observable: - `app/components/layout-counter.tsx` — `"use client"` counter proving layout persistence - `app/components/template-counter.tsx` — `"use client"` counter proving template remount - `app/dashboard/layout.tsx` — added LayoutCounter + nav links between dashboard pages - `app/template.tsx` — added TemplateCounter - `app/error-test/error.tsx` — added "Go home" Link for error recovery navigation - `app/page.tsx` — added "Error Test" Link All existing E2E tests (navigation, error-handling, navigation-flows — 25 tests) still pass with these fixture changes. ## Test plan - [x] `tests/e2e/app-router/layout-persistence.spec.ts` — 8 E2E tests, all passing - [x] Existing navigation/error-handling/navigation-flows E2E — 25 tests, no regressions - [x] `tests/app-router.test.ts -t "not-found|forbidden|unauthorized"` — 5 SSR integration tests, all passing - [x] `vp check` — 0 lint/type errors --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>