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>
67 lines
2.6 KiB
TypeScript
67 lines
2.6 KiB
TypeScript
import { test, expect, type Page } from './fixtures';
|
|
|
|
// The author page streams its manga grid: the cheap author header renders
|
|
// immediately while the (potentially large) grid shows a skeleton, then swaps
|
|
// in without a layout shift.
|
|
|
|
const authorId = 'a1111111-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/authors/${authorId}`, (r) =>
|
|
r.fulfill({
|
|
status: 200,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify({ id: authorId, name: 'Kentaro Miura', manga_count: 1 })
|
|
})
|
|
);
|
|
}
|
|
|
|
test('shows a grid skeleton while the author mangas stream, then the grid', async ({ page }) => {
|
|
await mockCommon(page);
|
|
|
|
let release: () => void = () => {};
|
|
const gate = new Promise<void>((resolve) => {
|
|
release = resolve;
|
|
});
|
|
await page.route(`**/api/v1/authors/${authorId}/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: 50, offset: 0, total: 1 }
|
|
})
|
|
});
|
|
});
|
|
|
|
await page.goto(`/authors/${authorId}`);
|
|
// Header renders immediately (not blocked on the grid).
|
|
await expect(page.getByTestId('author-name')).toHaveText('Kentaro Miura');
|
|
// Grid skeleton stands in while the stream is pending.
|
|
await expect(page.getByTestId('manga-grid-skeleton')).toBeVisible();
|
|
await expect(page.getByTestId('author-manga-list')).toHaveCount(0);
|
|
|
|
release();
|
|
await expect(page.getByTestId('author-manga-list')).toContainText('Berserk');
|
|
await expect(page.getByTestId('manga-grid-skeleton')).toHaveCount(0);
|
|
});
|