Mangalord/frontend/e2e/detail-bookmark.spec.ts

import { test, expect, type Page } from './fixtures';

// The detail-page bookmark toggle should feel instant (optimistic) and never
// fail silently: a rejected create/delete must roll the button back and
// surface a toast.

const mangaId = 'b1111111-1111-1111-1111-111111111111';

async function mockDetail(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/me/bookmarks*', (r) =>
        r.fulfill({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({ items: [], page: { limit: 50, offset: 0, total: 0 } })
        })
    );
    await page.route(`**/api/v1/mangas/${mangaId}/chapters*`, (r) =>
        r.fulfill({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({ items: [], page: { limit: 50, offset: 0, total: 0 } })
        })
    );
    await page.route(`**/api/v1/mangas/${mangaId}/similar`, (r) =>
        r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ items: [] }) })
    );
    await page.route(`**/api/v1/me/read-progress/${mangaId}`, (r) =>
        r.fulfill({ status: 404, contentType: 'application/json', body: '{"error":{"code":"x","message":"x"}}' })
    );
    await page.route(`**/api/v1/me/reactions/${mangaId}`, (r) =>
        r.fulfill({ status: 404, contentType: 'application/json', body: '{"error":{"code":"x","message":"x"}}' })
    );
    await page.route(`**/api/v1/mangas/${mangaId}`, (r) =>
        r.fulfill({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({
                id: mangaId, 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',
                authors: [], genres: [], tags: [], content_warnings: [], chapter_storage_bytes: 0
            })
        })
    );
}

test('bookmark toggles optimistically before the request resolves', async ({ page }) => {
    await mockDetail(page);

    // Hold the create request open so we can observe the pre-response state.
    let release: () => void = () => {};
    const gate = new Promise<void>((resolve) => {
        release = resolve;
    });
    await page.route('**/api/v1/bookmarks', async (route) => {
        await gate;
        await route.fulfill({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({
                id: 'bk1', user_id: 'u1', manga_id: mangaId, chapter_id: null, page: null,
                created_at: '2026-01-01T00:00:00Z'
            })
        });
    });

    await page.goto(`/manga/${mangaId}`);
    const btn = page.getByTestId('bookmark-toggle');
    await expect(btn).toHaveAttribute('aria-pressed', 'false');

    await btn.click();
    // Optimistic: reflects bookmarked state while the POST is still pending.
    await expect(btn).toHaveAttribute('aria-pressed', 'true');

    release();
    // Stays bookmarked once the server confirms.
    await expect(btn).toHaveAttribute('aria-pressed', 'true');
});

test('a failed bookmark rolls back and shows an error toast', async ({ page }) => {
    await mockDetail(page);
    await page.route('**/api/v1/bookmarks', (route) =>
        route.fulfill({
            status: 500,
            contentType: 'application/json',
            body: JSON.stringify({ error: { code: 'internal', message: 'boom' } })
        })
    );

    await page.goto(`/manga/${mangaId}`);
    const btn = page.getByTestId('bookmark-toggle');
    await btn.click();

    // Rolls back to un-bookmarked, and the failure is surfaced (not silent).
    await expect(btn).toHaveAttribute('aria-pressed', 'false');
    await expect(page.getByTestId('toast')).toBeVisible();
});