From 4d02b56b779fdf5ee7f335cf0cafab965e53a21e Mon Sep 17 00:00:00 2001 From: MechaCat02 Date: Wed, 1 Jul 2026 20:11:23 +0200 Subject: [PATCH] test(e2e): realign mocks + assertions with the current API and OCR-era UI MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The route-mocked E2E specs had drifted from the app they exercise, so each rendered an empty/500 page and timed out on missing elements: - Manga detail + reader loads now also fetch read-progress/{id} and /similar; several specs never mocked them, so the load's Promise.all rejected. Add the mocks and fill the manga fixtures out to a real MangaDetail (status/alt_titles/authors/genres/tags/... ) so the components stop throwing mid-render. - back-nav + library: widen `read-progress*`/`page-tags` globs — `*` doesn't cross `/`, so `/me/read-progress/{id}` fell through to the proxy and 500'd; mock the library page-tags pair too. - manga-list search: wait for the initial load to settle before searching so the search fetch can't race the mount-time load. - reader-chapter-select: assert the shared `chapterLabel` output. - admin-analysis: the active OCR backend extracts text only, so the detail modal shows OCR (no tags/NSFW) and metrics shows tiles + trend charts (no by-model) — assert what the OCR-era UI renders. - profile: assert the wrong-password 401 stays inline (guards the fix in the preceding commit) and mock the guest bookmark/collection fetches the /profile load maps to the sign-in prompt. Co-Authored-By: Claude Opus 4.8 --- frontend/e2e/admin-analysis.spec.ts | 37 ++++++++++++++---- frontend/e2e/back-nav-flow.spec.ts | 6 ++- frontend/e2e/bookmarks.spec.ts | 43 ++++++++++++++++++++- frontend/e2e/manga-list.spec.ts | 32 ++++++++++++++- frontend/e2e/mobile-account-library.spec.ts | 18 +++++++++ frontend/e2e/profile.spec.ts | 26 +++++++++++++ frontend/e2e/reader-chapter-select.spec.ts | 33 ++++++++++++---- frontend/e2e/reader.spec.ts | 33 ++++++++++++++-- 8 files changed, 206 insertions(+), 22 deletions(-) diff --git a/frontend/e2e/admin-analysis.spec.ts b/frontend/e2e/admin-analysis.spec.ts index abb76ae..6d5702a 100644 --- a/frontend/e2e/admin-analysis.spec.ts +++ b/frontend/e2e/admin-analysis.spec.ts @@ -196,6 +196,21 @@ async function mockAdmin(page: Page, cap: Captured) { }) }) ); + // The metrics tab also pulls a per-bucket time series for the trend + // charts. Registered after the aggregate `metrics**` route so it wins + // for the more specific `/metrics/series` path. + await page.route('**/api/v1/admin/analysis/metrics/series**', (r) => + r.fulfill({ + status: 200, + contentType: 'application/json', + body: JSON.stringify({ + buckets: [ + { t: '2026-06-12T00:00:00Z', n: 1600, ok: 1580, failed: 20, avg_ms: 2300 }, + { t: '2026-06-13T00:00:00Z', n: 1604, ok: 1579, failed: 25, avg_ms: 2500 } + ] + }) + }) + ); // Default: keep the SSE connection pending (no events) so tests that // don't care about live updates don't trigger reconnect churn. The @@ -264,11 +279,12 @@ test.describe('/admin/analysis', () => { await expect( page.getByTestId('admin-analysis-detail-status') ).toContainText('Analyzed'); + await expect(modal).toContainText('model test-model'); + // OCR-only backend: the detail surfaces the extracted OCR lines (with + // their kind) — tags / scene / NSFW belong to the dormant vision + // backend and are intentionally not shown here. + await expect(modal).toContainText('OCR text'); await expect(modal).toContainText('Hello there'); - await expect(modal).toContainText('action'); - await expect(page.getByTestId('admin-analysis-detail-warnings')).toContainText( - 'gore' - ); }); test('live SSE events drive the indicator and activity ticker', async ({ @@ -367,8 +383,9 @@ test.describe('/admin/analysis', () => { await page.getByTestId('admin-analysis-tab-history').click(); const row = page.getByTestId(`analysis-history-row-${pageDone}`); await expect(row).toContainText('Berserk · Ch 1 · p1'); - await expect(row).toContainText('NSFW'); + await expect(row).toContainText('test-model'); // model column await expect(row).toContainText('2.4s'); // duration column + // (No NSFW flag: the active OCR backend extracts text only.) await row.click(); await expect(page.getByTestId('admin-analysis-detail')).toBeVisible(); @@ -377,16 +394,22 @@ test.describe('/admin/analysis', () => { ); }); - test('metrics tab shows aggregate timing + by-model', async ({ page }) => { + test('metrics tab shows aggregate timing + trend charts', async ({ page }) => { const cap: Captured = { reenqueue: null, analyzeCalls: 0 }; await mockAdmin(page, cap); await page.setViewportSize(DESKTOP); await page.goto('/admin/analysis'); await page.getByTestId('admin-analysis-tab-metrics').click(); + // Aggregate tiles for the selected window. await expect(page.getByTestId('analysis-metrics-n')).toContainText('3204'); await expect(page.getByTestId('analysis-metrics-avg')).toContainText('2.4s'); - await expect(page.getByTestId('analysis-metrics')).toContainText('qwen2-vl-7b'); + const metrics = page.getByTestId('analysis-metrics'); + await expect(metrics).toContainText('Success'); + await expect(metrics).toContainText('99%'); // 3159/3204 + await expect(metrics).toContainText('45'); // failed + // The per-bucket trend charts render from the series endpoint. + await expect(page.getByTestId('analysis-metrics-charts')).toBeVisible(); }); test('queue an unanalyzed page from its detail modal', async ({ page }) => { diff --git a/frontend/e2e/back-nav-flow.spec.ts b/frontend/e2e/back-nav-flow.spec.ts index d27168a..6a92042 100644 --- a/frontend/e2e/back-nav-flow.spec.ts +++ b/frontend/e2e/back-nav-flow.spec.ts @@ -45,7 +45,11 @@ async function mockApis(page: Page) { await page.route('**/api/v1/me/bookmarks*', (r) => r.fulfill({ status: 401, contentType: 'application/json', body: '{}' }) ); - await page.route('**/api/v1/me/read-progress*', (r) => + // `**` (not `*`) so this also matches the per-manga path + // `/me/read-progress/{id}` — Playwright's `*` stops at `/`, so a + // single-star glob would let that request fall through to the (dead) + // backend proxy and 500 the reader/detail load. + await page.route('**/api/v1/me/read-progress**', (r) => r.fulfill({ status: 404, contentType: 'application/json', body: '{}' }) ); await page.route('**/api/v1/genres*', (r) => diff --git a/frontend/e2e/bookmarks.spec.ts b/frontend/e2e/bookmarks.spec.ts index c81c29f..5388241 100644 --- a/frontend/e2e/bookmarks.spec.ts +++ b/frontend/e2e/bookmarks.spec.ts @@ -6,14 +6,23 @@ const userFixture = { username: 'alice', created_at: '2026-01-01T00:00:00Z' }; +// Faithful `MangaDetail` (GET /v1/mangas/:id). The detail page reads +// authors/genres/tags/alt_titles/content_warnings during render, so these +// must be present or the component throws before painting. const mangaFixture = { id: mangaId, title: 'Berserk', - author: 'Kentaro Miura', + status: 'ongoing', + alt_titles: [], description: null, cover_image_path: null, created_at: '2026-01-01T00:00:00Z', - updated_at: '2026-01-01T00:00:00Z' + updated_at: '2026-01-01T00:00:00Z', + authors: [{ id: 'a2222222-2222-2222-2222-222222222222', name: 'Kentaro Miura' }], + genres: [], + tags: [], + content_warnings: [], + chapter_storage_bytes: 0 }; const bookmarkFixture = { id: 'b1', @@ -74,6 +83,22 @@ async function setupAuthenticatedBookmarkFlow(page: Page) { }) }) ); + // Authed but no saved position (404 → null) + empty recommendations — + // both fetched by the manga-detail load's Promise.all. + await page.route(`**/api/v1/me/read-progress/${mangaId}`, (route) => + route.fulfill({ + status: 404, + contentType: 'application/json', + body: JSON.stringify({ error: { code: 'not_found', message: 'no progress' } }) + }) + ); + await page.route(`**/api/v1/mangas/${mangaId}/similar`, (route) => + route.fulfill({ + status: 200, + contentType: 'application/json', + body: JSON.stringify({ items: [] }) + }) + ); await page.route('**/api/v1/bookmarks', (route) => { if (route.request().method() === 'POST') { // List endpoint is enriched (BookmarkSummary), POST returns @@ -163,6 +188,20 @@ test('anonymous user sees a sign-in CTA instead of a toggle', async ({ page }) = body: JSON.stringify({ error: { code: 'unauthenticated', message: 'unauthenticated' } }) }) ); + await page.route(`**/api/v1/me/read-progress/${mangaId}`, (route) => + route.fulfill({ + status: 401, + contentType: 'application/json', + body: JSON.stringify({ error: { code: 'unauthenticated', message: 'unauthenticated' } }) + }) + ); + await page.route(`**/api/v1/mangas/${mangaId}/similar`, (route) => + route.fulfill({ + status: 200, + contentType: 'application/json', + body: JSON.stringify({ items: [] }) + }) + ); await page.goto(`/manga/${mangaId}`); await expect(page.getByTestId('bookmark-signin')).toBeVisible(); diff --git a/frontend/e2e/manga-list.spec.ts b/frontend/e2e/manga-list.spec.ts index 2304ecf..752cae3 100644 --- a/frontend/e2e/manga-list.spec.ts +++ b/frontend/e2e/manga-list.spec.ts @@ -27,6 +27,24 @@ async function mockAnonymous(page: Page) { body: JSON.stringify({ error: { code: 'unauthenticated', message: 'unauthenticated' } }) }); }); + await page.route('**/api/v1/auth/me/preferences', async (route) => { + await route.fulfill({ + status: 401, + contentType: 'application/json', + body: JSON.stringify({ error: { code: 'unauthenticated', message: 'unauthenticated' } }) + }); + }); + // The home page fetches genres on mount (filter UI). Mocking it keeps + // `onMount` fast and deterministic — otherwise the unmocked call stalls + // against the dead dev proxy, and the late-resolving initial load races + // (and clobbers) a load kicked off by an early search interaction. + await page.route('**/api/v1/genres*', async (route) => { + await route.fulfill({ + status: 200, + contentType: 'application/json', + body: JSON.stringify([]) + }); + }); } test('home page renders the Mangalord heading and search input', async ({ page }) => { @@ -86,11 +104,16 @@ test('search updates the manga list', async ({ page }) => { { id: 'b1', title: 'Berserk', - author: 'Kentaro Miura', + status: 'ongoing', + alt_titles: [], description: null, cover_image_path: null, created_at: '2026-01-01T00:00:00Z', - updated_at: '2026-01-01T00:00:00Z' + updated_at: '2026-01-01T00:00:00Z', + // MangaCard = Manga & { authors, genres }; the card + // component maps over both, so they must be present. + authors: [{ id: 'a1', name: 'Kentaro Miura' }], + genres: [] } ] : []; @@ -102,6 +125,11 @@ test('search updates the manga list', async ({ page }) => { }); await page.goto('/'); + // Wait for the initial (empty) catalogue to settle before searching, so + // the search's fetch can't race the mount-time load — mirrors how the + // pagination test waits for the first render before interacting. + await expect(page.getByTestId('empty')).toBeVisible(); + await page.getByTestId('search-input').fill('berserk'); await page.getByRole('button', { name: 'Search' }).click(); diff --git a/frontend/e2e/mobile-account-library.spec.ts b/frontend/e2e/mobile-account-library.spec.ts index 1890f4f..70831cd 100644 --- a/frontend/e2e/mobile-account-library.spec.ts +++ b/frontend/e2e/mobile-account-library.spec.ts @@ -88,6 +88,24 @@ async function mockLibraryData(page: Page, opts: { authed?: boolean } = {}) { body: opts.authed ? emptyPage : unauth }) ); + // The /library load also pulls page-tags + distinct page-tags in the same + // Promise.all; leaving them unmocked 500s the whole load (caught as an + // error state, not the empty sub-tabs). General route first, the more + // specific `/distinct` after so it takes precedence for that path. + await page.route('**/api/v1/me/page-tags?*', (route) => + route.fulfill({ + status, + contentType: 'application/json', + body: opts.authed ? emptyPage : unauth + }) + ); + await page.route('**/api/v1/me/page-tags/distinct*', (route) => + route.fulfill({ + status, + contentType: 'application/json', + body: opts.authed ? JSON.stringify({ items: [] }) : unauth + }) + ); } test.describe('mobile library', () => { diff --git a/frontend/e2e/profile.spec.ts b/frontend/e2e/profile.spec.ts index 163a9e1..7a63283 100644 --- a/frontend/e2e/profile.spec.ts +++ b/frontend/e2e/profile.spec.ts @@ -123,12 +123,20 @@ test('wrong current password surfaces the 401 envelope inline', async ({ page }) ); await page.goto('/profile/account'); + // Wait for the session to hydrate before submitting: a wrong current + // password must be surfaced inline, which the form distinguishes from a + // genuinely-signed-out state via session.user — so the user must be + // known-authenticated first (as they always are on a real page load). + await expect(page.getByText('Signed in as')).toBeVisible(); await page.getByTestId('current-password').fill('definitelyNotIt'); await page.getByTestId('new-password').fill('freshpassfreshpass'); await page.getByTestId('confirm-password').fill('freshpassfreshpass'); await page.getByTestId('password-submit').click(); await expect(page.getByTestId('password-error')).toBeVisible(); + // Stays on the account page — a wrong current password is an inline + // error, not a session expiry, so it must not bounce to /login. + await expect(page).toHaveURL(/\/profile\/account$/); }); test('mismatched new + confirm disables the submit button', async ({ page }) => { @@ -153,6 +161,24 @@ test('anonymous user sees a profile sign-in prompt', async ({ page }) => { }) }) ); + // The /profile load pair-fetches these; a real backend returns 401 for a + // guest, which the load maps to `authenticated: false`. Without the mock + // the calls fall through to the dead proxy and 500, and the load rethrows + // (only 401 is handled) → error page instead of the sign-in prompt. + await page.route('**/api/v1/me/bookmarks?*', (route) => + route.fulfill({ + status: 401, + contentType: 'application/json', + body: JSON.stringify({ error: { code: 'unauthenticated', message: 'unauthenticated' } }) + }) + ); + await page.route('**/api/v1/me/collections?*', (route) => + route.fulfill({ + status: 401, + contentType: 'application/json', + body: JSON.stringify({ error: { code: 'unauthenticated', message: 'unauthenticated' } }) + }) + ); await page.goto('/profile'); await expect(page.getByTestId('profile-signin')).toBeVisible(); diff --git a/frontend/e2e/reader-chapter-select.spec.ts b/frontend/e2e/reader-chapter-select.spec.ts index 0313f63..7e6944a 100644 --- a/frontend/e2e/reader-chapter-select.spec.ts +++ b/frontend/e2e/reader-chapter-select.spec.ts @@ -5,14 +5,22 @@ const chapter1Id = 'c1111111-3333-3333-3333-333333333333'; const chapter2Id = 'c2222222-3333-3333-3333-333333333333'; const chapter3Id = 'c3333333-3333-3333-3333-333333333333'; +// Faithful `MangaDetail` (GET /v1/mangas/:id) so getManga in the reader +// load returns a shape the components can consume without throwing. const mangaFixture = { id: mangaId, title: 'Vinland Saga', - author: 'Makoto Yukimura', + status: 'ongoing', + alt_titles: [], description: null, cover_image_path: null, created_at: '2026-01-01T00:00:00Z', - updated_at: '2026-01-01T00:00:00Z' + updated_at: '2026-01-01T00:00:00Z', + authors: [{ id: 'a3333333-3333-3333-3333-333333333333', name: 'Makoto Yukimura' }], + genres: [], + tags: [], + content_warnings: [], + chapter_storage_bytes: 0 }; const chaptersFixture = [ @@ -86,6 +94,16 @@ async function mockReaderApis(page: Page) { body: JSON.stringify({ error: { code: 'unauthenticated', message: '' } }) }) ); + // The reader load reads saved position; guest → 401 → null. Without + // this the fetch falls through to the (absent) backend and the load + // rejects before the reader renders. + await page.route(`**/api/v1/me/read-progress/${mangaId}`, (route) => + route.fulfill({ + status: 401, + contentType: 'application/json', + body: JSON.stringify({ error: { code: 'unauthenticated', message: '' } }) + }) + ); await page.route(`**/api/v1/mangas/${mangaId}`, (route) => route.fulfill({ status: 200, @@ -142,13 +160,14 @@ test('reader chapter select lists every chapter with the manga-detail-style labe // The current chapter is preselected. await expect(select).toHaveValue(chapter2Id); - // Each chapter rendered as "Ch. N — Title" (or "Ch. N" when title is null), - // in ascending number order — matching the prev/next sort. + // Each chapter rendered via the shared `chapterLabel` helper — the + // chapter title, or "Chapter N" when the title is null — in ascending + // number order, matching the prev/next sort and the manga-detail list. const labels = await select.locator('option').allTextContents(); expect(labels.map((l) => l.trim())).toEqual([ - 'Ch. 1 — Somewhere, Not Here', - 'Ch. 2', - 'Ch. 3 — Sword Dance' + 'Somewhere, Not Here', + 'Chapter 2', + 'Sword Dance' ]); }); diff --git a/frontend/e2e/reader.spec.ts b/frontend/e2e/reader.spec.ts index f9a346d..a98bd47 100644 --- a/frontend/e2e/reader.spec.ts +++ b/frontend/e2e/reader.spec.ts @@ -2,14 +2,23 @@ import { test, expect, type Page } from '@playwright/test'; const mangaId = '11111111-1111-1111-1111-111111111111'; const chapterId = 'c1111111-1111-1111-1111-111111111111'; +// A faithful `MangaDetail` (GET /v1/mangas/:id) — the detail page reads +// authors/genres/tags/alt_titles/content_warnings, so a minimal shape makes +// the component throw mid-render and nothing paints. const mangaFixture = { id: mangaId, title: 'Berserk', - author: 'Kentaro Miura', + status: 'ongoing', + alt_titles: [], description: 'A dark fantasy.', cover_image_path: 'mangas/11111111-1111-1111-1111-111111111111/cover.png', created_at: '2026-01-01T00:00:00Z', - updated_at: '2026-01-01T00:00:00Z' + updated_at: '2026-01-01T00:00:00Z', + authors: [{ id: 'a1111111-1111-1111-1111-111111111111', name: 'Kentaro Miura' }], + genres: [], + tags: [], + content_warnings: [], + chapter_storage_bytes: 0 }; const chaptersFixture = [ { @@ -103,6 +112,24 @@ async function mockReaderApis(page: Page) { body: JSON.stringify({ pages: pagesFixture }) }) ); + // Guest: no saved read position. The manga-detail + reader loads both + // call this; a 401 maps to `null` in getMyReadProgressForManga, matching + // a real unauthenticated request. + await page.route(`**/api/v1/me/read-progress/${mangaId}`, (route) => + route.fulfill({ + status: 401, + contentType: 'application/json', + body: JSON.stringify({ error: { code: 'unauthenticated', message: 'unauthenticated' } }) + }) + ); + // Recommendations: a real `{ items }` top-N (empty is a valid result). + await page.route(`**/api/v1/mangas/${mangaId}/similar`, (route) => + route.fulfill({ + status: 200, + contentType: 'application/json', + body: JSON.stringify({ items: [] }) + }) + ); // Stub image bytes so the doesn't 404 (1x1 transparent PNG). const png = Buffer.from( '89504e470d0a1a0a0000000d49484452000000010000000108060000001f15c4890000000d49444154789c63000100000005000158a3b62a0000000049454e44ae426082', @@ -118,7 +145,7 @@ test('manga overview shows title, cover, and a chapter list', async ({ page }) = await page.goto(`/manga/${mangaId}`); await expect(page.getByTestId('manga-title')).toHaveText('Berserk'); - await expect(page.getByTestId('manga-author')).toContainText('Kentaro Miura'); + await expect(page.getByTestId('manga-authors')).toContainText('Kentaro Miura'); await expect(page.getByTestId('manga-cover')).toBeVisible(); await expect(page.getByTestId('chapter-list')).toContainText('The Brand'); await expect(page.getByTestId('bookmark-signin')).toBeVisible();