987d1ba235
Eager-load every page of the current chapter rather than a bounded rolling window, so pages are fetched up front (the browser paces them over its per-origin connection limit, top-to-bottom = reading order) instead of filling in as they're scrolled onto. This drops the scrollLeadIdx/eagerThrough machinery in favour of a plain `loading="eager"`. The first few pages of the *next* chapter are already warmed when the reader nears the end of the current one (the next-chapter preloader), so flipping over stays instant. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
239 lines
8.3 KiB
TypeScript
239 lines
8.3 KiB
TypeScript
import { test, expect, type Page } from './fixtures';
|
|
|
|
// 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();
|
|
|
|
// The whole chapter is eager, so the scroll target (page 4) and
|
|
// every page before it have settled heights before the
|
|
// scroll-to-`?page=N` effect runs — the target can't be pushed
|
|
// past the viewport by later pages loading in.
|
|
for (const n of [1, 2, 3, 4, 5, 6]) {
|
|
await expect(page.getByTestId(`reader-page-${n}`)).toHaveAttribute(
|
|
'loading',
|
|
'eager'
|
|
);
|
|
}
|
|
});
|
|
|
|
test('continuous mode: eager-loads the whole chapter up front', async ({
|
|
page
|
|
}) => {
|
|
await mockReader(page, 'continuous');
|
|
await page.goto(`/manga/${mangaId}/chapter/${chapterId}`);
|
|
|
|
await expect(page.getByTestId('reader-continuous')).toBeVisible();
|
|
// Every page is eager — the whole current chapter is preloaded so
|
|
// pages don't pop in / reflow as the reader scrolls onto them.
|
|
for (const n of [1, 2, 3, 4, 5, 6]) {
|
|
await expect(page.getByTestId(`reader-page-${n}`)).toHaveAttribute(
|
|
'loading',
|
|
'eager'
|
|
);
|
|
}
|
|
});
|
|
|
|
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'
|
|
);
|
|
});
|
|
});
|