5b51bcf056
The search loader now awaits only the chip cloud (its auth gate) and streams the view-specific results, so switching tag / view / sort / text shows a SearchResultsSkeleton in place of the frozen previous list until the query resolves. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
75 lines
3.0 KiB
TypeScript
75 lines
3.0 KiB
TypeScript
import { test, expect, type Page } from './fixtures';
|
|
|
|
// The search page streams its results: the chip cloud / controls stay put
|
|
// while a re-query shows a results skeleton, which then swaps for the list.
|
|
|
|
const mangaId = 'a9999999-9999-9999-9999-999999999999';
|
|
const chapterId = 'c9999999-9999-9999-9999-999999999999';
|
|
const pageId = 'p11111111-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: 'tester', 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/me/page-tags/distinct*', (r) =>
|
|
r.fulfill({
|
|
status: 200,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify({ items: [{ tag: 'funny', count: 38 }] })
|
|
})
|
|
);
|
|
await page.route('**/api/v1/files/**', (r) => r.fulfill({ status: 200, body: '' }));
|
|
}
|
|
|
|
test('shows a results skeleton while the tagged pages stream, then the list', async ({ page }) => {
|
|
await mockCommon(page);
|
|
|
|
let release: () => void = () => {};
|
|
const gate = new Promise<void>((resolve) => {
|
|
release = resolve;
|
|
});
|
|
await page.route('**/api/v1/me/page-tags?**', async (route) => {
|
|
await gate;
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify({
|
|
items: [
|
|
{
|
|
tag: 'funny', page_id: pageId, chapter_id: chapterId, manga_id: mangaId,
|
|
page_number: 5, chapter_number: 1, chapter_title: null, manga_title: 'Berserk',
|
|
storage_key: `mangas/${mangaId}/chapters/${chapterId}/pages/0005.png`,
|
|
tagged_at: '2026-01-01T00:00:00Z'
|
|
}
|
|
],
|
|
page: { limit: 100, offset: 0, total: 1 }
|
|
})
|
|
});
|
|
});
|
|
|
|
await page.goto('/search?tag=funny');
|
|
// The chip cloud / active tag renders immediately (distinct resolved).
|
|
await expect(page.getByTestId('search-active-tag')).toBeVisible();
|
|
// Results skeleton while the tagged-pages query is pending.
|
|
await expect(page.getByTestId('search-results-skeleton')).toBeVisible();
|
|
await expect(page.getByTestId('search-pages-list')).toHaveCount(0);
|
|
|
|
release();
|
|
await expect(page.getByTestId('search-pages-list')).toContainText('Berserk');
|
|
await expect(page.getByTestId('search-results-skeleton')).toHaveCount(0);
|
|
});
|