feat(reader): chapter select dropdown for direct chapter jumps (0.51.0)
Adds a chapter `<select>` to the reader's top nav listing every chapter of the current manga, defaulting to the open chapter; picking another entry navigates straight to it without going back to the manga detail page. Options use the "Ch. N — Title" form to match the existing chapter tile and prev/next buttons in the reader bar. Covered by a new Playwright spec. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
167
frontend/e2e/reader-chapter-select.spec.ts
Normal file
167
frontend/e2e/reader-chapter-select.spec.ts
Normal file
@@ -0,0 +1,167 @@
|
||||
import { test, expect, type Page } from '@playwright/test';
|
||||
|
||||
const mangaId = '33333333-3333-3333-3333-333333333333';
|
||||
const chapter1Id = 'c1111111-3333-3333-3333-333333333333';
|
||||
const chapter2Id = 'c2222222-3333-3333-3333-333333333333';
|
||||
const chapter3Id = 'c3333333-3333-3333-3333-333333333333';
|
||||
|
||||
const mangaFixture = {
|
||||
id: mangaId,
|
||||
title: 'Vinland Saga',
|
||||
author: 'Makoto Yukimura',
|
||||
description: null,
|
||||
cover_image_path: null,
|
||||
created_at: '2026-01-01T00:00:00Z',
|
||||
updated_at: '2026-01-01T00:00:00Z'
|
||||
};
|
||||
|
||||
const chaptersFixture = [
|
||||
{
|
||||
id: chapter1Id,
|
||||
manga_id: mangaId,
|
||||
number: 1,
|
||||
title: 'Somewhere, Not Here',
|
||||
page_count: 1,
|
||||
created_at: '2026-01-01T00:00:00Z'
|
||||
},
|
||||
{
|
||||
id: chapter2Id,
|
||||
manga_id: mangaId,
|
||||
number: 2,
|
||||
title: null,
|
||||
page_count: 1,
|
||||
created_at: '2026-01-02T00:00:00Z'
|
||||
},
|
||||
{
|
||||
id: chapter3Id,
|
||||
manga_id: mangaId,
|
||||
number: 3,
|
||||
title: 'Sword Dance',
|
||||
page_count: 1,
|
||||
created_at: '2026-01-03T00:00:00Z'
|
||||
}
|
||||
];
|
||||
|
||||
function pageFixture(chapterId: string) {
|
||||
return [
|
||||
{
|
||||
id: `p1111111-${chapterId.slice(1, 8)}-3333-3333-333333333333`,
|
||||
chapter_id: chapterId,
|
||||
page_number: 1,
|
||||
storage_key: `mangas/${mangaId}/chapters/${chapterId}/pages/0001.png`,
|
||||
content_type: 'image/png'
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
async function mockReaderApis(page: Page) {
|
||||
// Force public mode so the layout doesn't bounce anonymous visitors
|
||||
// to /login (the dev backend on this machine runs with
|
||||
// PRIVATE_MODE=true, which the layout's universal load respects).
|
||||
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: 401,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ error: { code: 'unauthenticated', message: '' } })
|
||||
})
|
||||
);
|
||||
await page.route('**/api/v1/auth/me/preferences', (route) =>
|
||||
route.fulfill({
|
||||
status: 401,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ error: { code: 'unauthenticated', message: '' } })
|
||||
})
|
||||
);
|
||||
await page.route('**/api/v1/me/bookmarks*', (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,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(mangaFixture)
|
||||
})
|
||||
);
|
||||
await page.route(new RegExp(`/api/v1/mangas/${mangaId}/chapters(\\?.*)?$`), (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
items: chaptersFixture,
|
||||
page: { limit: 200, offset: 0, total: chaptersFixture.length }
|
||||
})
|
||||
})
|
||||
);
|
||||
for (const c of chaptersFixture) {
|
||||
await page.route(`**/api/v1/mangas/${mangaId}/chapters/${c.id}`, (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(c)
|
||||
})
|
||||
);
|
||||
await page.route(
|
||||
`**/api/v1/mangas/${mangaId}/chapters/${c.id}/pages`,
|
||||
(route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ pages: pageFixture(c.id) })
|
||||
})
|
||||
);
|
||||
}
|
||||
const png = Buffer.from(
|
||||
'89504e470d0a1a0a0000000d49484452000000010000000108060000001f15c4890000000d49444154789c63000100000005000158a3b62a0000000049454e44ae426082',
|
||||
'hex'
|
||||
);
|
||||
await page.route('**/api/v1/files/**', (route) =>
|
||||
route.fulfill({ status: 200, contentType: 'image/png', body: png })
|
||||
);
|
||||
}
|
||||
|
||||
test('reader chapter select lists every chapter with the manga-detail-style label', async ({
|
||||
page
|
||||
}) => {
|
||||
await mockReaderApis(page);
|
||||
await page.goto(`/manga/${mangaId}/chapter/${chapter2Id}`);
|
||||
|
||||
const select = page.getByTestId('reader-chapter-select');
|
||||
await expect(select).toBeVisible();
|
||||
|
||||
// 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.
|
||||
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'
|
||||
]);
|
||||
});
|
||||
|
||||
test('choosing a chapter from the select navigates to that chapter', async ({ page }) => {
|
||||
await mockReaderApis(page);
|
||||
await page.goto(`/manga/${mangaId}/chapter/${chapter1Id}`);
|
||||
|
||||
await expect(page.getByTestId('reader-chapter-select')).toHaveValue(chapter1Id);
|
||||
|
||||
await page.getByTestId('reader-chapter-select').selectOption(chapter3Id);
|
||||
|
||||
await expect(page).toHaveURL(
|
||||
new RegExp(`/manga/${mangaId}/chapter/${chapter3Id}$`)
|
||||
);
|
||||
await expect(page.getByTestId('reader-chapter-select')).toHaveValue(chapter3Id);
|
||||
});
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "mangalord-frontend",
|
||||
"version": "0.50.0",
|
||||
"version": "0.51.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
||||
@@ -459,6 +459,27 @@
|
||||
</a>
|
||||
|
||||
<div class="controls" role="group" aria-label="reader options">
|
||||
<label class="chapter-field">
|
||||
<span class="visually-hidden">Jump to chapter</span>
|
||||
<select
|
||||
class="chapter-select"
|
||||
value={chapter.id}
|
||||
onchange={(e) => {
|
||||
const target = (e.currentTarget as HTMLSelectElement).value;
|
||||
if (target && target !== chapter.id) {
|
||||
void goto(`/manga/${manga.id}/chapter/${target}`);
|
||||
}
|
||||
}}
|
||||
data-testid="reader-chapter-select"
|
||||
>
|
||||
{#each sortedChapters as c (c.id)}
|
||||
<option value={c.id}>
|
||||
Ch. {c.number}{c.title ? ` — ${c.title}` : ''}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<div class="mode-toggle" role="radiogroup" aria-label="layout">
|
||||
<button
|
||||
type="button"
|
||||
@@ -801,7 +822,8 @@
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.gap-field select {
|
||||
.gap-field select,
|
||||
.chapter-select {
|
||||
height: 32px;
|
||||
padding: 0 var(--space-2);
|
||||
background: var(--surface);
|
||||
@@ -811,6 +833,13 @@
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
|
||||
/* Cap the chapter dropdown's resting width so long titles don't
|
||||
push the rest of the nav off-screen; the native control's
|
||||
expanded menu still shows full option text on focus. */
|
||||
.chapter-select {
|
||||
max-width: 16rem;
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
|
||||
Reference in New Issue
Block a user