cee1e73f98
Both loaders now stream their manga grid instead of blocking on it: the cheap header renders immediately (and still handles 404/401 in the loader) while a MangaGridSkeleton stands in until the grid resolves, then swaps in without a layout shift. Collection detail seeds its optimistic-removal state from the stream via a guarded effect. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
68 lines
2.8 KiB
TypeScript
68 lines
2.8 KiB
TypeScript
import { test, expect, type Page } from './fixtures';
|
|
|
|
// The collection detail page streams its manga/page grids: the header renders
|
|
// immediately while a grid skeleton stands in, then the real grid swaps in.
|
|
|
|
const collectionId = 'd1111111-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: 200,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify({ user: { id: 'u1', username: 'reader', created_at: '2026-01-01T00:00:00Z', is_admin: false } })
|
|
})
|
|
);
|
|
await page.route('**/api/v1/auth/me/preferences', (r) =>
|
|
r.fulfill({ status: 200, contentType: 'application/json', body: '{}' })
|
|
);
|
|
await page.route(`**/api/v1/collections/${collectionId}`, (r) =>
|
|
r.fulfill({
|
|
status: 200,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify({ id: collectionId, name: 'Favourites', description: null, manga_count: 1 })
|
|
})
|
|
);
|
|
await page.route(`**/api/v1/collections/${collectionId}/pages*`, (r) =>
|
|
r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ items: [], page: { limit: 200, offset: 0, total: 0 } }) })
|
|
);
|
|
}
|
|
|
|
test('streams a grid skeleton on the collection detail then the manga grid', async ({ page }) => {
|
|
await mockCommon(page);
|
|
|
|
let release: () => void = () => {};
|
|
const gate = new Promise<void>((resolve) => {
|
|
release = resolve;
|
|
});
|
|
await page.route(`**/api/v1/collections/${collectionId}/mangas*`, async (route) => {
|
|
await gate;
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify({
|
|
items: [
|
|
{ id: 'm1', 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' }
|
|
],
|
|
page: { limit: 200, offset: 0, total: 1 }
|
|
})
|
|
});
|
|
});
|
|
|
|
await page.goto(`/collections/${collectionId}`);
|
|
await expect(page.getByRole('heading', { name: 'Favourites' })).toBeVisible();
|
|
await expect(page.getByTestId('manga-grid-skeleton')).toBeVisible();
|
|
await expect(page.getByTestId('collection-manga-list')).toHaveCount(0);
|
|
|
|
release();
|
|
await expect(page.getByTestId('collection-manga-list')).toContainText('Berserk');
|
|
await expect(page.getByTestId('manga-grid-skeleton')).toHaveCount(0);
|
|
});
|