Mangalord/frontend/e2e/reaction-buttons.spec.ts

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

// Detail-page like/dislike toggle: reflects initial state, sets/switches via
// PUT, and clears the active reaction via DELETE.

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

type Captured = { method: string; reaction?: string };

async function mockDetail(page: Page, captured: Captured[]) {
    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: JSON.stringify({ error: { code: 'not_found', message: 'no' } }) })
    );
    // Reaction: initially unset; capture writes.
    await page.route(`**/api/v1/me/reactions/${mangaId}`, (r) =>
        r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ manga_id: mangaId, reaction: null }) })
    );
    await page.route(`**/api/v1/mangas/${mangaId}/reaction`, (route) => {
        const method = route.request().method();
        if (method === 'PUT') {
            const reaction = route.request().postDataJSON()?.reaction as string;
            captured.push({ method, reaction });
            return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ manga_id: mangaId, reaction }) });
        }
        captured.push({ method });
        return route.fulfill({ status: 204, body: '' });
    });
    // getManga last so it wins over the chapters glob.
    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('like, switch to dislike, then clear', async ({ page }) => {
    const captured: Captured[] = [];
    await mockDetail(page, captured);
    await page.goto(`/manga/${mangaId}`);

    const like = page.getByTestId('reaction-like');
    const dislike = page.getByTestId('reaction-dislike');
    await expect(like).toHaveAttribute('aria-pressed', 'false');
    await expect(dislike).toHaveAttribute('aria-pressed', 'false');

    // Like.
    await like.click();
    await expect(like).toHaveAttribute('aria-pressed', 'true');
    await expect.poll(() => captured.at(-1)).toEqual({ method: 'PUT', reaction: 'like' });

    // Switch to dislike.
    await dislike.click();
    await expect(dislike).toHaveAttribute('aria-pressed', 'true');
    await expect(like).toHaveAttribute('aria-pressed', 'false');
    await expect.poll(() => captured.at(-1)).toEqual({ method: 'PUT', reaction: 'dislike' });

    // Click the active dislike again → clear.
    await dislike.click();
    await expect(dislike).toHaveAttribute('aria-pressed', 'false');
    await expect.poll(() => captured.at(-1)?.method).toBe('DELETE');
});