fee68dd9ac
The detail loader now streams its six-call bundle instead of blocking
navigation on it. The page component is a thin {#await} wrapper: it shows a
MangaDetailSkeleton (cover + meta + chapter rows) while the bundle loads,
renders the extracted DetailView once resolved, and shows an inline
not-found on a 404 (previously the framework error page). Extracting
DetailView also makes it remount per navigation, so its tag/bookmark/reaction
state re-seeds cleanly on manga-to-manga moves.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
78 lines
3.5 KiB
TypeScript
78 lines
3.5 KiB
TypeScript
import { test, expect, type Page } from './fixtures';
|
|
|
|
// The manga detail page streams its data bundle: a MangaDetailSkeleton shows
|
|
// while the six calls load, then DetailView swaps in. A missing manga (404)
|
|
// resolves to an inline not-found instead of the happy-path markup.
|
|
|
|
const mangaId = 'f1111111-1111-1111-1111-111111111111';
|
|
|
|
async function mockCommon(page: Page) {
|
|
await page.route('**/api/v1/auth/config', (r) =>
|
|
r.fulfill({
|
|
status: 200,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify({ self_register_enabled: true, private_mode: false })
|
|
})
|
|
);
|
|
await page.route('**/api/v1/auth/me', (r) =>
|
|
r.fulfill({ status: 401, contentType: 'application/json', body: '{"error":{"code":"x","message":"x"}}' })
|
|
);
|
|
await page.route('**/api/v1/auth/me/preferences', (r) =>
|
|
r.fulfill({ status: 401, contentType: 'application/json', body: '{"error":{"code":"x","message":"x"}}' })
|
|
);
|
|
await page.route('**/api/v1/me/bookmarks*', (r) =>
|
|
r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ items: [], page: { limit: 50, offset: 0, total: 0 } }) })
|
|
);
|
|
await page.route(`**/api/v1/mangas/${mangaId}/chapters*`, (r) =>
|
|
r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ items: [], page: { limit: 50, offset: 0, total: 0 } }) })
|
|
);
|
|
await page.route(`**/api/v1/mangas/${mangaId}/similar`, (r) =>
|
|
r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ items: [] }) })
|
|
);
|
|
await page.route(`**/api/v1/me/read-progress/${mangaId}`, (r) =>
|
|
r.fulfill({ status: 404, contentType: 'application/json', body: '{"error":{"code":"x","message":"x"}}' })
|
|
);
|
|
await page.route(`**/api/v1/me/reactions/${mangaId}`, (r) =>
|
|
r.fulfill({ status: 404, contentType: 'application/json', body: '{"error":{"code":"x","message":"x"}}' })
|
|
);
|
|
}
|
|
|
|
test('shows a detail skeleton while the bundle streams, then the page', async ({ page }) => {
|
|
await mockCommon(page);
|
|
|
|
let release: () => void = () => {};
|
|
const gate = new Promise<void>((resolve) => {
|
|
release = resolve;
|
|
});
|
|
await page.route(`**/api/v1/mangas/${mangaId}`, async (route) => {
|
|
await gate;
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify({
|
|
id: mangaId, title: 'Berserk', status: 'ongoing', alt_titles: [], description: null,
|
|
cover_image_path: null, created_at: '2026-01-01T00:00:00Z', updated_at: '2026-01-01T00:00:00Z',
|
|
authors: [], genres: [], tags: [], content_warnings: [], chapter_storage_bytes: 0
|
|
})
|
|
});
|
|
});
|
|
|
|
await page.goto(`/manga/${mangaId}`);
|
|
await expect(page.getByTestId('manga-detail-skeleton')).toBeVisible();
|
|
await expect(page.getByTestId('manga-title')).toHaveCount(0);
|
|
|
|
release();
|
|
await expect(page.getByTestId('manga-title')).toHaveText('Berserk');
|
|
await expect(page.getByTestId('manga-detail-skeleton')).toHaveCount(0);
|
|
});
|
|
|
|
test('renders an inline not-found for a missing manga (404)', async ({ page }) => {
|
|
await mockCommon(page);
|
|
await page.route(`**/api/v1/mangas/${mangaId}`, (route) =>
|
|
route.fulfill({ status: 404, contentType: 'application/json', body: JSON.stringify({ error: { code: 'not_found', message: 'no' } }) })
|
|
);
|
|
|
|
await page.goto(`/manga/${mangaId}`);
|
|
await expect(page.getByTestId('detail-error')).toContainText('Manga not found');
|
|
});
|