eho/atomic-design-poc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(fp): WP-19 — Playwright e2e smoke against the real FE+backend

Browse Source 
Adds a happy-path spec (login → dashboard → registratie wizard, including
a real identity-document upload → real submit) and a degraded-path spec
(?scenario=error → <app-async> error slot → retry), both driving the real
app against the real .NET backend, plus a CI job that boots both.

Writing the retry spec surfaced a real bug: AsyncComponent's retry() only
reloads a [resource]-fed instance, so every real page (all [data]-fed via
a store's RemoteData) had a silently no-op retry button. Added a
retryClicked output and wired it on the dashboard's two async blocks.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Edwin van den Houdt
2026-07-04 10:13:40 +02:00
parent e272869f00
commit 26c2c5acd0
14 changed files with 754 additions and 498 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
e2e/error-state.spec.ts Normal file
View File

@@ -0,0 +1,32 @@
import { expect, test } from '@playwright/test';
// The dev-only `?scenario=error` toggle forces the scenario.interceptor to fail
// the request WITHOUT ever reaching the real HTTP transport (it substitutes a
// `throwError` in the rxjs pipe before `next(req)` runs) — so this is not
// observable as a browser network request. It IS observable as a real resource
// reload: `retry()` calls `resource.reload()`, which flips <app-async> back to
// its Loading (`aria-busy="true"`) state before failing again 400ms later.
// `currentScenario()` re-reads `window.location.search` on every call, not a
// one-shot value, so as long as the query param is still there, the retry
// genuinely re-runs and genuinely fails the same way — that's what's asserted
// here: a real reload cycle, not a no-op button.
test('dashboard error state renders, retry re-fetches (and fails again)', async ({ page }) => {
await page.goto('/login');
await page.getByLabel('BSN').fill('123456789');
await page.getByRole('button', { name: 'Inloggen met DigiD' }).click();
await expect(page).toHaveURL(/\/dashboard$/);
await page.goto('/dashboard?scenario=error');
// The dashboard has more than one independent <app-async> (profile,
// aantekeningen) — both fail under the blanket ?scenario=error, so this text
// legitimately appears more than once. Assert at least one, not exactly one.
const errorAlert = page.getByText('Er ging iets mis bij het laden van de gegevens.').first();
await expect(errorAlert).toBeVisible();
const retry = page.getByRole('button', { name: 'Opnieuw proberen' }).first();
await expect(retry).toBeVisible();
await retry.click();
// A real reload cycle: back to Loading (aria-busy) before failing again.
await expect(page.locator('[aria-busy="true"]').first()).toBeAttached({ timeout: 1_000 });
await expect(errorAlert).toBeVisible({ timeout: 5_000 });
});