feat(home): add a Continue-reading shelf with new-chapter badges
Surface a horizontal "Continue reading" shelf at the top of the homepage, fed by the user's read-progress history. Each card jumps back to the exact page they left off (deep-linking `?page=N` past the first) and flags how many chapters have landed since — the personal new_chapters_count from the read-progress list. The shelf is fetched after the catalogue load so the public browse path stays unauthenticated; guests get an empty list (401 swallowed) and the shelf stays hidden. Add new_chapters_count to the frontend ReadProgressSummary type to match the backend. Component unit tests cover href/deep-link, badge visibility, and the no-chapter fallback; e2e covers signed-in (shelf + badge) and anonymous (hidden). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
89
frontend/e2e/continue-reading-shelf.spec.ts
Normal file
89
frontend/e2e/continue-reading-shelf.spec.ts
Normal file
@@ -0,0 +1,89 @@
|
||||
import { test, expect, type Page } from './fixtures';
|
||||
|
||||
// The homepage "Continue reading" shelf: visible with a per-manga new-chapter
|
||||
// badge when the user has reading history, and absent for anonymous visitors
|
||||
// (the read-progress fetch 401s → empty → hidden).
|
||||
|
||||
const emptyMangas = { items: [], page: { limit: 50, offset: 0, total: 0 } };
|
||||
|
||||
async function mockCommon(page: Page) {
|
||||
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/genres*', (route) =>
|
||||
route.fulfill({ status: 200, contentType: 'application/json', body: '[]' })
|
||||
);
|
||||
await page.route('**/api/v1/mangas*', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(emptyMangas)
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
test('shows the continue-reading shelf with a new-chapter badge when signed in', async ({ page }) => {
|
||||
await mockCommon(page);
|
||||
await page.route('**/api/v1/auth/me', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ user: { id: 'u1', username: 'reader', is_admin: false } })
|
||||
})
|
||||
);
|
||||
await page.route('**/api/v1/me/read-progress*', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
items: [
|
||||
{
|
||||
manga_id: 'm1',
|
||||
manga_title: 'Berserk',
|
||||
manga_cover_image_path: null,
|
||||
chapter_id: 'c1',
|
||||
chapter_number: 3,
|
||||
page: 4,
|
||||
updated_at: '2026-01-01T00:00:00Z',
|
||||
new_chapters_count: 2
|
||||
}
|
||||
],
|
||||
page: { limit: 50, offset: 0, total: 1 }
|
||||
})
|
||||
})
|
||||
);
|
||||
|
||||
await page.goto('/');
|
||||
|
||||
const card = page.getByTestId('continue-card-m1');
|
||||
await expect(card).toBeVisible();
|
||||
await expect(card).toHaveAttribute('href', '/manga/m1/chapter/c1?page=4');
|
||||
await expect(page.getByTestId('continue-new-badge-m1')).toContainText('2');
|
||||
});
|
||||
|
||||
test('hides the continue-reading shelf for anonymous visitors', async ({ page }) => {
|
||||
await mockCommon(page);
|
||||
await page.route('**/api/v1/auth/me', (route) =>
|
||||
route.fulfill({
|
||||
status: 401,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ error: { code: 'unauthenticated', message: 'no' } })
|
||||
})
|
||||
);
|
||||
await page.route('**/api/v1/me/read-progress*', (route) =>
|
||||
route.fulfill({
|
||||
status: 401,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ error: { code: 'unauthenticated', message: 'no' } })
|
||||
})
|
||||
);
|
||||
|
||||
await page.goto('/');
|
||||
// The catalogue heading confirms the page rendered before asserting absence.
|
||||
await expect(page.getByRole('heading', { name: 'Mangas' })).toBeVisible();
|
||||
await expect(page.getByTestId('continue-shelf')).toHaveCount(0);
|
||||
});
|
||||
Reference in New Issue
Block a user