fabi/Mangalord
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test(e2e): realign mocks + assertions with the current API and OCR-era UI

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
MechaCat02
2026-07-01 20:11:23 +02:00
parent 0865659ab3
commit 4d02b56b77
8 changed files with 206 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/e2e/admin-analysis.spec.ts
View File

@@ -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 }) => {

6
frontend/e2e/back-nav-flow.spec.ts
View File

@@ -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) =>

43
frontend/e2e/bookmarks.spec.ts
View File

@@ -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();

32
frontend/e2e/manga-list.spec.ts
View File

@@ -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();

18
frontend/e2e/mobile-account-library.spec.ts
View File

@@ -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', () => {

26
frontend/e2e/profile.spec.ts
View File

@@ -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();

33
frontend/e2e/reader-chapter-select.spec.ts
View File

@@ -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'
]);
});

33
frontend/e2e/reader.spec.ts
View File

@@ -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 <img> 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();