feat(search): tag-based page search surface + per-page tags & collections
Add the /search surface (Pages / Chapters / Mangas tabs) backed by per-user page tags and per-page collections: schema (migration 0023), backend endpoints for page tags/collections and tagged-page aggregations (with the OCR text-search param reserved at 501), plus the frontend API clients, library Page-tags tab, collection page sections, page context menu / AddTagsSheet, and reader long-press wiring. Includes the continuous-reader navigation fixes (?page=N handling, chapter-reset timing, back-button pops history) and tag-normalization hardening accumulated on the branch. Bump version 0.60.2 -> 0.62.0. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
@@ -53,7 +53,13 @@ async function mockApis(page: Page) {
|
||||
);
|
||||
// Catalog returns a single card whose href points at MID so the
|
||||
// SPA-click walk lands on the manga we've mocked downstream.
|
||||
await page.route('**/api/v1/mangas', (r) =>
|
||||
// `**/api/v1/mangas` alone doesn't intercept query strings
|
||||
// (`?limit=&sort=`), so the catalog request would fall through
|
||||
// to a real backend if one is running on :8080 and seed the
|
||||
// page with real-manga IDs that don't match the mock body.
|
||||
// `**/api/v1/mangas?**` (and the same suffix on the catch-all
|
||||
// below) makes the intercept query-tolerant.
|
||||
await page.route('**/api/v1/mangas?**', (r) =>
|
||||
r.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
@@ -163,4 +169,56 @@ test('phone viewport: reader back pops history (does not push), then detail back
|
||||
await page.waitForURL((url) => url.pathname === '/');
|
||||
});
|
||||
|
||||
test('reader cover+title pushes detail when arrived from a non-detail page', async ({
|
||||
page
|
||||
}) => {
|
||||
// The smart-cover-title fix: if the user got to the reader from
|
||||
// a page OTHER than this manga's detail (search, library,
|
||||
// direct link, etc.), the cover+title should push the detail
|
||||
// page so browser-back returns to the reader. The arrow stays
|
||||
// a pure "go back".
|
||||
//
|
||||
// We simulate "non-detail arrival" with a deep-link load
|
||||
// straight to the reader. That covers cold-tab + shared-link +
|
||||
// search-result cases — afterNavigate fires with from=null and
|
||||
// lastInternalPath stays null, so the cover+title click sees
|
||||
// a mismatch and pushes the detail page.
|
||||
await mockApis(page);
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
|
||||
await page.goto(`/manga/${MID}/chapter/${CID}`);
|
||||
await page.waitForSelector('[data-testid="back-to-manga"]');
|
||||
const lenAtReader = await page.evaluate(() => window.history.length);
|
||||
|
||||
await page.getByTestId('back-to-manga').click();
|
||||
await page.waitForURL(/\/manga\/[^/]+$/);
|
||||
const lenAfter = await page.evaluate(() => window.history.length);
|
||||
// PUSH (not pop) — lenAtReader + 1.
|
||||
expect(lenAfter).toBe(lenAtReader + 1);
|
||||
|
||||
// Browser-back from detail returns to reader (proves it was a
|
||||
// push, not a replace).
|
||||
await page.goBack();
|
||||
await page.waitForURL(/\/chapter\//);
|
||||
});
|
||||
|
||||
test('reader arrow always pops history', async ({ page }) => {
|
||||
await mockApis(page);
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
|
||||
await page.goto('/');
|
||||
await page.locator('[data-testid="manga-list"] a').first().click();
|
||||
await page.waitForURL(/\/manga\/[^/]+$/);
|
||||
await page.locator('[data-testid="chapter-list"] a').first().click();
|
||||
await page.waitForURL(/\/chapter\//);
|
||||
|
||||
const lenAtReader = await page.evaluate(() => window.history.length);
|
||||
|
||||
// Click the arrow — always pops, regardless of previous page.
|
||||
await page.getByTestId('reader-back-arrow').click();
|
||||
await page.waitForURL(/\/manga\/[^/]+$/);
|
||||
const lenAfter = await page.evaluate(() => window.history.length);
|
||||
expect(lenAfter).toBe(lenAtReader);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
330
frontend/e2e/page-context-menu.spec.ts
Normal file
330
frontend/e2e/page-context-menu.spec.ts
Normal file
@@ -0,0 +1,330 @@
|
||||
import { test, expect, type Page } from '@playwright/test';
|
||||
|
||||
// E2E for the per-page collection + tag flow added in v0.61.0. Mocks
|
||||
// the entire API so the spec runs without a backend. The same
|
||||
// fixtures + mockReader scaffolding as `mobile-reader.spec.ts`;
|
||||
// kept inline so the file stays self-contained.
|
||||
|
||||
const MOBILE = { width: 390, height: 844 } as const;
|
||||
const DESKTOP = { width: 1280, height: 720 } as const;
|
||||
|
||||
const mangaId = 'a9999999-9999-9999-9999-999999999999';
|
||||
const chapterId = 'c9999999-9999-9999-9999-999999999999';
|
||||
const pageId = 'p11111111-1111-1111-1111-111111111111';
|
||||
const collectionId = 'cc111111-1111-1111-1111-111111111111';
|
||||
|
||||
const mangaFixture = {
|
||||
id: mangaId,
|
||||
title: 'Berserk',
|
||||
status: 'ongoing',
|
||||
alt_titles: [],
|
||||
description: null,
|
||||
cover_image_path: `mangas/${mangaId}/cover.png`,
|
||||
created_at: '2026-01-01T00:00:00Z',
|
||||
updated_at: '2026-01-01T00:00:00Z',
|
||||
authors: [{ id: 'au1', name: 'Kentaro Miura' }],
|
||||
genres: [],
|
||||
tags: []
|
||||
};
|
||||
|
||||
const chapterFixture = {
|
||||
id: chapterId,
|
||||
manga_id: mangaId,
|
||||
number: 1,
|
||||
title: 'The Brand',
|
||||
page_count: 1,
|
||||
created_at: '2026-01-01T00:00:00Z'
|
||||
};
|
||||
|
||||
const pagesFixture = [
|
||||
{
|
||||
id: pageId,
|
||||
chapter_id: chapterId,
|
||||
page_number: 1,
|
||||
storage_key: `mangas/${mangaId}/chapters/${chapterId}/pages/0001.png`,
|
||||
content_type: 'image/png'
|
||||
}
|
||||
];
|
||||
|
||||
const userFixture = {
|
||||
id: 'u11111111-1111-1111-1111-111111111111',
|
||||
username: 'tester',
|
||||
created_at: '2026-01-01T00:00:00Z',
|
||||
is_admin: false
|
||||
};
|
||||
|
||||
const collectionFixture = {
|
||||
id: collectionId,
|
||||
user_id: userFixture.id,
|
||||
name: 'Favorite panels',
|
||||
description: null,
|
||||
created_at: '2026-01-01T00:00:00Z',
|
||||
updated_at: '2026-01-01T00:00:00Z',
|
||||
manga_count: 0,
|
||||
sample_covers: []
|
||||
};
|
||||
|
||||
/**
|
||||
* Wire the full mock surface for the reader plus the new
|
||||
* `pages/:id/my-collections`, `pages/:id/my-tags`, `me/collections`,
|
||||
* and `collections/:id/pages` endpoints. `myCollectionsState` lets a
|
||||
* test mutate what /my-collections returns mid-flow so the "re-open
|
||||
* menu after add → In 1 collection" assertion is exercised.
|
||||
*/
|
||||
async function mockReader(
|
||||
page: Page,
|
||||
state: { collectionsContainingPage: string[]; tagsOnPage: string[] }
|
||||
) {
|
||||
await page.route('**/api/v1/auth/config', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ self_register_enabled: true, private_mode: false })
|
||||
})
|
||||
);
|
||||
await page.route('**/api/v1/auth/me', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ user: userFixture })
|
||||
})
|
||||
);
|
||||
await page.route('**/api/v1/auth/me/preferences', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
reader_mode: 'single',
|
||||
reader_page_gap: 'small'
|
||||
})
|
||||
})
|
||||
);
|
||||
await page.route('**/api/v1/me/bookmarks*', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ items: [], page: { limit: 50, offset: 0, total: 0 } })
|
||||
})
|
||||
);
|
||||
await page.route(`**/api/v1/mangas/${mangaId}`, (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(mangaFixture)
|
||||
})
|
||||
);
|
||||
await page.route(`**/api/v1/mangas/${mangaId}/chapters`, (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
items: [chapterFixture],
|
||||
page: { limit: 50, offset: 0, total: 1 }
|
||||
})
|
||||
})
|
||||
);
|
||||
await page.route(`**/api/v1/mangas/${mangaId}/chapters\\?*`, (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
items: [chapterFixture],
|
||||
page: { limit: 50, offset: 0, total: 1 }
|
||||
})
|
||||
})
|
||||
);
|
||||
await page.route(`**/api/v1/mangas/${mangaId}/chapters/${chapterId}`, (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(chapterFixture)
|
||||
})
|
||||
);
|
||||
await page.route(
|
||||
`**/api/v1/mangas/${mangaId}/chapters/${chapterId}/pages`,
|
||||
(route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ pages: pagesFixture })
|
||||
})
|
||||
);
|
||||
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: 'not found' } })
|
||||
})
|
||||
);
|
||||
|
||||
// The new endpoints — these are what the context menu hits.
|
||||
await page.route(`**/api/v1/pages/${pageId}/my-collections`, (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ collection_ids: state.collectionsContainingPage })
|
||||
})
|
||||
);
|
||||
await page.route(`**/api/v1/pages/${pageId}/my-tags`, (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ tags: state.tagsOnPage })
|
||||
})
|
||||
);
|
||||
await page.route('**/api/v1/me/collections*', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
items: [collectionFixture],
|
||||
page: { limit: 200, offset: 0, total: 1 }
|
||||
})
|
||||
})
|
||||
);
|
||||
await page.route(
|
||||
`**/api/v1/collections/${collectionId}/pages`,
|
||||
async (route) => {
|
||||
if (route.request().method() === 'POST') {
|
||||
state.collectionsContainingPage = [collectionId];
|
||||
return route.fulfill({ status: 201, body: '' });
|
||||
}
|
||||
return route.continue();
|
||||
}
|
||||
);
|
||||
|
||||
const png = Buffer.from(
|
||||
'89504e470d0a1a0a0000000d49484452000000010000000108060000001f15c4890000000d49444154789c63000100000005000158a3b62a0000000049454e44ae426082',
|
||||
'hex'
|
||||
);
|
||||
await page.route('**/api/v1/files/**', (route) =>
|
||||
route.fulfill({ status: 200, contentType: 'image/png', body: png })
|
||||
);
|
||||
}
|
||||
|
||||
test.describe('page context menu (desktop right-click)', () => {
|
||||
test('right-click opens the menu with empty-state hints', async ({ page }) => {
|
||||
const state = { collectionsContainingPage: [], tagsOnPage: [] };
|
||||
await mockReader(page, state);
|
||||
await page.setViewportSize(DESKTOP);
|
||||
await page.goto(`/manga/${mangaId}/chapter/${chapterId}`);
|
||||
|
||||
await expect(page.getByTestId('reader-page')).toBeVisible();
|
||||
await expect(page.getByTestId('page-context-menu')).toBeHidden();
|
||||
|
||||
await page.getByTestId('reader-page').click({ button: 'right' });
|
||||
|
||||
const menu = page.getByTestId('page-context-menu');
|
||||
await expect(menu).toBeVisible();
|
||||
await expect(
|
||||
page.getByTestId('page-context-collections-line')
|
||||
).toHaveText('Not in any collection');
|
||||
await expect(page.getByTestId('page-context-tags-line')).toHaveText(
|
||||
'No tags yet'
|
||||
);
|
||||
});
|
||||
|
||||
test('Escape closes the menu', async ({ page }) => {
|
||||
await mockReader(page, { collectionsContainingPage: [], tagsOnPage: [] });
|
||||
await page.setViewportSize(DESKTOP);
|
||||
await page.goto(`/manga/${mangaId}/chapter/${chapterId}`);
|
||||
|
||||
await page.getByTestId('reader-page').click({ button: 'right' });
|
||||
await expect(page.getByTestId('page-context-menu')).toBeVisible();
|
||||
|
||||
await page.keyboard.press('Escape');
|
||||
await expect(page.getByTestId('page-context-menu')).toBeHidden();
|
||||
});
|
||||
|
||||
test('add-to-collection → modal → toggle → re-open menu shows "In 1 collection"', async ({
|
||||
page
|
||||
}) => {
|
||||
const state = { collectionsContainingPage: [], tagsOnPage: [] };
|
||||
await mockReader(page, state);
|
||||
await page.setViewportSize(DESKTOP);
|
||||
await page.goto(`/manga/${mangaId}/chapter/${chapterId}`);
|
||||
|
||||
await page.getByTestId('reader-page').click({ button: 'right' });
|
||||
await page.getByTestId('page-context-add-to-collection').click();
|
||||
|
||||
// Modal opens with the user's one collection unchecked.
|
||||
const modal = page.getByTestId('add-to-collection-modal');
|
||||
await expect(modal).toBeVisible();
|
||||
const checkbox = modal.getByTestId(`collection-toggle-${collectionId}`);
|
||||
await expect(checkbox).not.toBeChecked();
|
||||
|
||||
await checkbox.check();
|
||||
// The mock flips containing-page state on POST. Close + re-open
|
||||
// the menu to verify the contextual line reflects the new
|
||||
// server state.
|
||||
await page.keyboard.press('Escape');
|
||||
await expect(modal).toBeHidden();
|
||||
|
||||
await page.getByTestId('reader-page').click({ button: 'right' });
|
||||
await expect(page.getByTestId('page-context-collections-line')).toHaveText(
|
||||
'In 1 collection'
|
||||
);
|
||||
});
|
||||
|
||||
test('Shift+right-click falls through to the browser native menu', async ({
|
||||
page
|
||||
}) => {
|
||||
await mockReader(page, { collectionsContainingPage: [], tagsOnPage: [] });
|
||||
await page.setViewportSize(DESKTOP);
|
||||
await page.goto(`/manga/${mangaId}/chapter/${chapterId}`);
|
||||
|
||||
// Hold Shift while right-clicking. The reader's
|
||||
// `oncontextmenu` returns early on shiftKey, so the in-app
|
||||
// menu must NOT open. (Playwright doesn't surface the
|
||||
// native browser menu, but we can assert ours stays hidden.)
|
||||
await page.keyboard.down('Shift');
|
||||
await page.getByTestId('reader-page').click({ button: 'right' });
|
||||
await page.keyboard.up('Shift');
|
||||
|
||||
await expect(page.getByTestId('page-context-menu')).toBeHidden();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('page action sheet (mobile long-press)', () => {
|
||||
test('long-press on a page image opens the action sheet', async ({ page }) => {
|
||||
await mockReader(page, { collectionsContainingPage: [], tagsOnPage: [] });
|
||||
await page.setViewportSize(MOBILE);
|
||||
await page.goto(`/manga/${mangaId}/chapter/${chapterId}`);
|
||||
|
||||
// Switch to continuous mode so the per-image long-press
|
||||
// handler is wired (single mode goes through TapZone). Both
|
||||
// codepaths funnel into the same Sheet, but the per-image
|
||||
// wiring is the riskier of the two — it's the one the audit
|
||||
// flagged for the multitouch fix.
|
||||
await page.getByTestId('reader-settings-btn').click();
|
||||
await page
|
||||
.getByTestId('reader-settings-sheet')
|
||||
.getByRole('radio', { name: 'Continuous' })
|
||||
.click();
|
||||
// Close the settings sheet so its scrim isn't blocking.
|
||||
await page.keyboard.press('Escape');
|
||||
|
||||
const pageEl = page.getByTestId('reader-page-1');
|
||||
await expect(pageEl).toBeVisible();
|
||||
|
||||
// Synthesize a touch pointerdown, wait past the 450ms timer.
|
||||
const box = await pageEl.boundingBox();
|
||||
if (!box) throw new Error('page image has no bounding box');
|
||||
const cx = box.x + box.width / 2;
|
||||
const cy = box.y + box.height / 2;
|
||||
|
||||
await pageEl.dispatchEvent('pointerdown', {
|
||||
pointerType: 'touch',
|
||||
clientX: cx,
|
||||
clientY: cy,
|
||||
bubbles: true
|
||||
});
|
||||
await page.waitForTimeout(550);
|
||||
|
||||
await expect(page.getByTestId('page-action-sheet')).toBeVisible();
|
||||
await expect(page.getByTestId('page-action-add-to-collection')).toBeVisible();
|
||||
await expect(page.getByTestId('page-action-add-tag')).toBeVisible();
|
||||
await expect(page.getByTestId('page-action-save-image')).toBeVisible();
|
||||
await expect(page.getByTestId('page-action-copy-link')).toBeVisible();
|
||||
});
|
||||
});
|
||||
250
frontend/e2e/reader-page-deep-link.spec.ts
Normal file
250
frontend/e2e/reader-page-deep-link.spec.ts
Normal file
@@ -0,0 +1,250 @@
|
||||
import { test, expect, type Page } from '@playwright/test';
|
||||
|
||||
// E2E for the `?page=N` deep-link path in both reader modes. The
|
||||
// single-mode case has been working since v0.x; the continuous-mode
|
||||
// scroll-to-page landed in v0.62.0 alongside the /search Pages tab.
|
||||
|
||||
const mangaId = 'a9999999-9999-9999-9999-999999999999';
|
||||
const chapterId = 'c9999999-9999-9999-9999-999999999999';
|
||||
const chapterBId = 'c8888888-8888-8888-8888-888888888888';
|
||||
|
||||
const sixPages = Array.from({ length: 6 }, (_, i) => ({
|
||||
id: `p${i + 1}1111111-1111-1111-1111-111111111111`,
|
||||
chapter_id: chapterId,
|
||||
page_number: i + 1,
|
||||
storage_key: `mangas/${mangaId}/chapters/${chapterId}/pages/000${i + 1}.png`,
|
||||
content_type: 'image/png'
|
||||
}));
|
||||
|
||||
const fourPages = Array.from({ length: 4 }, (_, i) => ({
|
||||
id: `p${i + 1}2222222-2222-2222-2222-222222222222`,
|
||||
chapter_id: chapterBId,
|
||||
page_number: i + 1,
|
||||
storage_key: `mangas/${mangaId}/chapters/${chapterBId}/pages/000${i + 1}.png`,
|
||||
content_type: 'image/png'
|
||||
}));
|
||||
|
||||
const userFixture = {
|
||||
id: 'u11111111-1111-1111-1111-111111111111',
|
||||
username: 'tester',
|
||||
created_at: '2026-01-01T00:00:00Z',
|
||||
is_admin: false
|
||||
};
|
||||
|
||||
const mangaFixture = {
|
||||
id: mangaId,
|
||||
title: 'Berserk',
|
||||
status: 'ongoing',
|
||||
alt_titles: [],
|
||||
description: null,
|
||||
cover_image_path: `mangas/${mangaId}/cover.png`,
|
||||
created_at: '2026-01-01T00:00:00Z',
|
||||
updated_at: '2026-01-01T00:00:00Z',
|
||||
authors: [{ id: 'au1', name: 'Kentaro Miura' }],
|
||||
genres: [],
|
||||
tags: []
|
||||
};
|
||||
|
||||
const chapterFixture = {
|
||||
id: chapterId,
|
||||
manga_id: mangaId,
|
||||
number: 1,
|
||||
title: 'The Brand',
|
||||
page_count: sixPages.length,
|
||||
created_at: '2026-01-01T00:00:00Z'
|
||||
};
|
||||
|
||||
const chapterBFixture = {
|
||||
id: chapterBId,
|
||||
manga_id: mangaId,
|
||||
number: 2,
|
||||
title: 'Guardians of Desire',
|
||||
page_count: fourPages.length,
|
||||
created_at: '2026-01-02T00:00:00Z'
|
||||
};
|
||||
|
||||
async function mockReader(page: Page, mode: 'single' | 'continuous') {
|
||||
await page.route('**/api/v1/auth/config', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ self_register_enabled: true, private_mode: false })
|
||||
})
|
||||
);
|
||||
await page.route('**/api/v1/auth/me', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ user: userFixture })
|
||||
})
|
||||
);
|
||||
// Critical for this spec: the server-stored preference seeds
|
||||
// `preferences.readerMode` at hydration time. The new continuous-
|
||||
// mode scroll-to-page effect re-fires when `mode` flips from
|
||||
// its initial 'single' default to the hydrated value.
|
||||
await page.route('**/api/v1/auth/me/preferences', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ reader_mode: mode, reader_page_gap: 'small' })
|
||||
})
|
||||
);
|
||||
await page.route('**/api/v1/me/bookmarks*', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ items: [], page: { limit: 50, offset: 0, total: 0 } })
|
||||
})
|
||||
);
|
||||
await page.route(`**/api/v1/mangas/${mangaId}`, (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(mangaFixture)
|
||||
})
|
||||
);
|
||||
await page.route(`**/api/v1/mangas/${mangaId}/chapters*`, (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
items: [chapterFixture, chapterBFixture],
|
||||
page: { limit: 50, offset: 0, total: 2 }
|
||||
})
|
||||
})
|
||||
);
|
||||
await page.route(`**/api/v1/mangas/${mangaId}/chapters/${chapterId}`, (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(chapterFixture)
|
||||
})
|
||||
);
|
||||
await page.route(`**/api/v1/mangas/${mangaId}/chapters/${chapterBId}`, (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(chapterBFixture)
|
||||
})
|
||||
);
|
||||
await page.route(
|
||||
`**/api/v1/mangas/${mangaId}/chapters/${chapterId}/pages`,
|
||||
(route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ pages: sixPages })
|
||||
})
|
||||
);
|
||||
await page.route(
|
||||
`**/api/v1/mangas/${mangaId}/chapters/${chapterBId}/pages`,
|
||||
(route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ pages: fourPages })
|
||||
})
|
||||
);
|
||||
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: 'not found' } })
|
||||
})
|
||||
);
|
||||
const png = Buffer.from(
|
||||
'89504e470d0a1a0a0000000d49484452000000010000000108060000001f15c4890000000d49444154789c63000100000005000158a3b62a0000000049454e44ae426082',
|
||||
'hex'
|
||||
);
|
||||
await page.route('**/api/v1/files/**', (route) =>
|
||||
route.fulfill({ status: 200, contentType: 'image/png', body: png })
|
||||
);
|
||||
}
|
||||
|
||||
test.describe('reader ?page=N deep link', () => {
|
||||
test('continuous mode: pages 1..N are eager-loaded so the scroll target has settled height', async ({
|
||||
page
|
||||
}) => {
|
||||
await mockReader(page, 'continuous');
|
||||
await page.goto(`/manga/${mangaId}/chapter/${chapterId}?page=4`);
|
||||
|
||||
await expect(page.getByTestId('reader-continuous')).toBeVisible();
|
||||
|
||||
// Pages 1..=4 (1-indexed in the testid, 0-indexed in the
|
||||
// template; initialIndex = 3 means we eager-load 0..=3, i.e.
|
||||
// testids 1..4). Without this guard, page 2+ would be lazy
|
||||
// and their 0×0 placeholders would let the scroll target
|
||||
// appear far above its final position.
|
||||
for (const n of [1, 2, 3, 4]) {
|
||||
await expect(page.getByTestId(`reader-page-${n}`)).toHaveAttribute(
|
||||
'loading',
|
||||
'eager'
|
||||
);
|
||||
}
|
||||
// Pages beyond the target stay lazy.
|
||||
for (const n of [5, 6]) {
|
||||
await expect(page.getByTestId(`reader-page-${n}`)).toHaveAttribute(
|
||||
'loading',
|
||||
'lazy'
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
test('continuous mode: no ?page= eager-loads only the first two', async ({
|
||||
page
|
||||
}) => {
|
||||
await mockReader(page, 'continuous');
|
||||
await page.goto(`/manga/${mangaId}/chapter/${chapterId}`);
|
||||
|
||||
await expect(page.getByTestId('reader-continuous')).toBeVisible();
|
||||
await expect(page.getByTestId('reader-page-1')).toHaveAttribute(
|
||||
'loading',
|
||||
'eager'
|
||||
);
|
||||
await expect(page.getByTestId('reader-page-2')).toHaveAttribute(
|
||||
'loading',
|
||||
'eager'
|
||||
);
|
||||
await expect(page.getByTestId('reader-page-3')).toHaveAttribute(
|
||||
'loading',
|
||||
'lazy'
|
||||
);
|
||||
});
|
||||
|
||||
test('single mode: ?page=N opens at the requested page', async ({ page }) => {
|
||||
await mockReader(page, 'single');
|
||||
await page.goto(`/manga/${mangaId}/chapter/${chapterId}?page=5`);
|
||||
|
||||
await expect(page.getByTestId('reader-page')).toBeVisible();
|
||||
await expect(page.getByTestId('page-indicator')).toHaveText('Page 5 / 6');
|
||||
});
|
||||
|
||||
test('in-reader chapter selector resets state for the new chapter', async ({
|
||||
page
|
||||
}) => {
|
||||
// Deep-link into chapter A at page 5. SvelteKit reuses the
|
||||
// component when we navigate to chapter B via the chapter
|
||||
// selector, so `index` (and the read-progress sentinel)
|
||||
// have to be reset by the page's chapter-change effect.
|
||||
// Without it, page-indicator would read "Page 5 / 4" (old
|
||||
// index, new pages.length) and the next progress flush would
|
||||
// poison chapter B's stored read-progress with chapter A's
|
||||
// high-water mark.
|
||||
await mockReader(page, 'single');
|
||||
await page.goto(`/manga/${mangaId}/chapter/${chapterId}?page=5`);
|
||||
await expect(page.getByTestId('page-indicator')).toHaveText(
|
||||
'Page 5 / 6'
|
||||
);
|
||||
|
||||
await page
|
||||
.getByTestId('reader-chapter-select')
|
||||
.selectOption(chapterBId);
|
||||
|
||||
await expect(page).toHaveURL(
|
||||
new RegExp(`/manga/${mangaId}/chapter/${chapterBId}$`)
|
||||
);
|
||||
await expect(page.getByTestId('page-indicator')).toHaveText(
|
||||
'Page 1 / 4'
|
||||
);
|
||||
});
|
||||
});
|
||||
251
frontend/e2e/search.spec.ts
Normal file
251
frontend/e2e/search.spec.ts
Normal file
@@ -0,0 +1,251 @@
|
||||
import { test, expect, type Page } from '@playwright/test';
|
||||
|
||||
// E2E for the /search page shipped in v0.62.0. Five scenarios against
|
||||
// mocked endpoints — no backend needed.
|
||||
|
||||
const DESKTOP = { width: 1280, height: 720 } as const;
|
||||
|
||||
const userFixture = {
|
||||
id: 'u11111111-1111-1111-1111-111111111111',
|
||||
username: 'tester',
|
||||
created_at: '2026-01-01T00:00:00Z',
|
||||
is_admin: false
|
||||
};
|
||||
|
||||
const mangaId = 'a9999999-9999-9999-9999-999999999999';
|
||||
const chapterId = 'c9999999-9999-9999-9999-999999999999';
|
||||
const pageId = 'p11111111-1111-1111-1111-111111111111';
|
||||
|
||||
const distinct = [
|
||||
{ tag: 'funny', count: 38 },
|
||||
{ tag: 'fight', count: 24 }
|
||||
];
|
||||
|
||||
const pagesResponse = {
|
||||
items: [
|
||||
{
|
||||
tag: 'funny',
|
||||
page_id: pageId,
|
||||
chapter_id: chapterId,
|
||||
manga_id: mangaId,
|
||||
page_number: 5,
|
||||
chapter_number: 1,
|
||||
chapter_title: null,
|
||||
manga_title: 'Berserk',
|
||||
storage_key: `mangas/${mangaId}/chapters/${chapterId}/pages/0005.png`,
|
||||
tagged_at: '2026-01-01T00:00:00Z'
|
||||
}
|
||||
],
|
||||
page: { limit: 100, offset: 0, total: 1 }
|
||||
};
|
||||
|
||||
const chaptersDesc = {
|
||||
items: [
|
||||
{
|
||||
chapter_id: chapterId,
|
||||
manga_id: mangaId,
|
||||
manga_title: 'Berserk',
|
||||
chapter_number: 1,
|
||||
chapter_title: null,
|
||||
match_count: 12,
|
||||
sample_storage_keys: [
|
||||
`mangas/${mangaId}/chapters/${chapterId}/pages/0001.png`,
|
||||
`mangas/${mangaId}/chapters/${chapterId}/pages/0002.png`,
|
||||
`mangas/${mangaId}/chapters/${chapterId}/pages/0003.png`
|
||||
]
|
||||
},
|
||||
{
|
||||
chapter_id: 'c8888888-8888-8888-8888-888888888888',
|
||||
manga_id: mangaId,
|
||||
manga_title: 'Berserk',
|
||||
chapter_number: 2,
|
||||
chapter_title: null,
|
||||
match_count: 3,
|
||||
sample_storage_keys: []
|
||||
}
|
||||
],
|
||||
page: { limit: 100, offset: 0, total: 2 }
|
||||
};
|
||||
|
||||
// Same fixture reversed by the mock when `order=asc` is requested,
|
||||
// so the test can assert the order flip end-to-end.
|
||||
const chaptersAsc = {
|
||||
items: [...chaptersDesc.items].reverse(),
|
||||
page: chaptersDesc.page
|
||||
};
|
||||
|
||||
const mangasResponse = {
|
||||
items: [
|
||||
{
|
||||
manga_id: mangaId,
|
||||
manga_title: 'Berserk',
|
||||
manga_cover_image_path: `mangas/${mangaId}/cover.png`,
|
||||
match_count: 28,
|
||||
sample_storage_keys: [
|
||||
`mangas/${mangaId}/chapters/${chapterId}/pages/0005.png`
|
||||
]
|
||||
}
|
||||
],
|
||||
page: { limit: 100, offset: 0, total: 1 }
|
||||
};
|
||||
|
||||
async function mockSearch(page: Page) {
|
||||
await page.route('**/api/v1/auth/config', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ self_register_enabled: true, private_mode: false })
|
||||
})
|
||||
);
|
||||
await page.route('**/api/v1/auth/me', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ user: userFixture })
|
||||
})
|
||||
);
|
||||
await page.route('**/api/v1/auth/me/preferences', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ reader_mode: 'single', reader_page_gap: 'small' })
|
||||
})
|
||||
);
|
||||
await page.route('**/api/v1/me/bookmarks*', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ items: [], page: { limit: 50, offset: 0, total: 0 } })
|
||||
})
|
||||
);
|
||||
await page.route('**/api/v1/me/page-tags/distinct*', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ items: distinct })
|
||||
})
|
||||
);
|
||||
await page.route('**/api/v1/me/page-tags?**', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(pagesResponse)
|
||||
})
|
||||
);
|
||||
await page.route('**/api/v1/me/page-tags/chapters*', (route) => {
|
||||
const u = new URL(route.request().url());
|
||||
const body =
|
||||
u.searchParams.get('order') === 'asc' ? chaptersAsc : chaptersDesc;
|
||||
return route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
});
|
||||
await page.route('**/api/v1/me/page-tags/mangas*', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(mangasResponse)
|
||||
})
|
||||
);
|
||||
|
||||
// PNG stub for fileUrl(storage_key) thumbnails.
|
||||
const png = Buffer.from(
|
||||
'89504e470d0a1a0a0000000d49484452000000010000000108060000001f15c4890000000d49444154789c63000100000005000158a3b62a0000000049454e44ae426082',
|
||||
'hex'
|
||||
);
|
||||
await page.route('**/api/v1/files/**', (route) =>
|
||||
route.fulfill({ status: 200, contentType: 'image/png', body: png })
|
||||
);
|
||||
}
|
||||
|
||||
test.describe('/search', () => {
|
||||
test('empty /search renders the chip cloud; clicking a chip sets ?tag=', async ({
|
||||
page
|
||||
}) => {
|
||||
await mockSearch(page);
|
||||
await page.setViewportSize(DESKTOP);
|
||||
await page.goto('/search');
|
||||
|
||||
await expect(page.getByTestId('search-chip-cloud')).toBeVisible();
|
||||
await expect(page.getByTestId('search-chip-funny')).toBeVisible();
|
||||
await expect(page.getByTestId('search-chip-fight')).toBeVisible();
|
||||
|
||||
await page.getByTestId('search-chip-funny').click();
|
||||
await expect(page).toHaveURL(/[?&]tag=funny/);
|
||||
await expect(page.getByTestId('search-active-tag')).toContainText('funny');
|
||||
});
|
||||
|
||||
test('Pages tab shows results; clicking a row navigates to reader at ?page=N', async ({
|
||||
page
|
||||
}) => {
|
||||
await mockSearch(page);
|
||||
await page.setViewportSize(DESKTOP);
|
||||
await page.goto('/search?tag=funny');
|
||||
|
||||
await expect(page.getByTestId('search-pages-list')).toBeVisible();
|
||||
const row = page.getByTestId(`search-page-row-${pageId}`);
|
||||
await expect(row).toBeVisible();
|
||||
|
||||
// The breadcrumb link goes to the reader at ?page=5.
|
||||
const breadcrumbLink = row.locator('a.target');
|
||||
await expect(breadcrumbLink).toHaveAttribute(
|
||||
'href',
|
||||
`/manga/${mangaId}/chapter/${chapterId}?page=5`
|
||||
);
|
||||
});
|
||||
|
||||
test('Chapters tab calls /chapters endpoint and renders ranked rows', async ({
|
||||
page
|
||||
}) => {
|
||||
await mockSearch(page);
|
||||
await page.setViewportSize(DESKTOP);
|
||||
await page.goto('/search?tag=funny&view=chapters');
|
||||
|
||||
await expect(page.getByTestId('search-chapters-list')).toBeVisible();
|
||||
// Default desc order — first row = highest match count (12).
|
||||
const rows = page.getByTestId('search-chapters-list').locator('li');
|
||||
await expect(rows.nth(0)).toContainText('12 pages');
|
||||
await expect(rows.nth(1)).toContainText('3 pages');
|
||||
|
||||
// Chapter row links to the reader at the chapter root.
|
||||
const firstTitle = rows.nth(0).locator('a.title').first();
|
||||
await expect(firstTitle).toHaveAttribute(
|
||||
'href',
|
||||
`/manga/${mangaId}/chapter/${chapterId}`
|
||||
);
|
||||
});
|
||||
|
||||
test('Order toggle flips chapter rows', async ({ page }) => {
|
||||
await mockSearch(page);
|
||||
await page.setViewportSize(DESKTOP);
|
||||
await page.goto('/search?tag=funny&view=chapters');
|
||||
|
||||
// Click the "Fewest pages" segmented control.
|
||||
await page
|
||||
.getByTestId('search-sort')
|
||||
.getByRole('radio', { name: 'Fewest pages' })
|
||||
.click();
|
||||
|
||||
await expect(page).toHaveURL(/[?&]order=asc/);
|
||||
const rows = page.getByTestId('search-chapters-list').locator('li');
|
||||
await expect(rows.nth(0)).toContainText('3 pages');
|
||||
await expect(rows.nth(1)).toContainText('12 pages');
|
||||
});
|
||||
|
||||
test('Mangas tab renders rows linking to manga detail', async ({ page }) => {
|
||||
await mockSearch(page);
|
||||
await page.setViewportSize(DESKTOP);
|
||||
await page.goto('/search?tag=funny&view=mangas');
|
||||
|
||||
await expect(page.getByTestId('search-mangas-list')).toBeVisible();
|
||||
const row = page.getByTestId(`search-manga-row-${mangaId}`);
|
||||
await expect(row).toContainText('Berserk');
|
||||
await expect(row).toContainText('28 pages');
|
||||
await expect(row.locator('a.title')).toHaveAttribute(
|
||||
'href',
|
||||
`/manga/${mangaId}`
|
||||
);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user