Mangalord/frontend/e2e/reader.spec.ts

import { test, expect, type Page } from '@playwright/test';

const mangaId = '11111111-1111-1111-1111-111111111111';
const chapterId = 'c1111111-1111-1111-1111-111111111111';
const mangaFixture = {
    id: mangaId,
    title: 'Berserk',
    author: 'Kentaro Miura',
    description: 'A dark fantasy.',
    cover_image_path: 'mangas/11111111-1111-1111-1111-111111111111/cover.png',
    created_at: '2026-01-01T00:00:00Z',
    updated_at: '2026-01-01T00:00:00Z'
};
const chaptersFixture = [
    {
        id: chapterId,
        manga_id: mangaId,
        number: 1,
        title: 'The Brand',
        page_count: 3,
        created_at: '2026-01-01T00:00:00Z'
    }
];
const pagesFixture = [
    {
        id: 'p1111111-1111-1111-1111-111111111111',
        chapter_id: chapterId,
        page_number: 1,
        storage_key: `mangas/${mangaId}/chapters/${chapterId}/pages/0001.png`,
        content_type: 'image/png'
    },
    {
        id: 'p2222222-1111-1111-1111-111111111111',
        chapter_id: chapterId,
        page_number: 2,
        storage_key: `mangas/${mangaId}/chapters/${chapterId}/pages/0002.png`,
        content_type: 'image/png'
    },
    {
        id: 'p3333333-1111-1111-1111-111111111111',
        chapter_id: chapterId,
        page_number: 3,
        storage_key: `mangas/${mangaId}/chapters/${chapterId}/pages/0003.png`,
        content_type: 'image/png'
    }
];

async function mockReaderApis(page: Page) {
    await page.route('**/api/v1/auth/me', (route) =>
        route.fulfill({
            status: 401,
            contentType: 'application/json',
            body: JSON.stringify({ error: { code: 'unauthenticated', message: 'unauthenticated' } })
        })
    );
    await page.route('**/api/v1/me/bookmarks*', (route) =>
        route.fulfill({
            status: 401,
            contentType: 'application/json',
            body: JSON.stringify({ error: { code: 'unauthenticated', message: 'unauthenticated' } })
        })
    );
    await page.route(`**/api/v1/mangas/${mangaId}`, (route) =>
        route.fulfill({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify(mangaFixture)
        })
    );
    await page.route(`**/api/v1/mangas/${mangaId}/chapters?*`, (route) =>
        route.fulfill({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({
                items: chaptersFixture,
                page: { limit: 50, offset: 0, total: null }
            })
        })
    );
    await page.route(`**/api/v1/mangas/${mangaId}/chapters`, (route) =>
        route.fulfill({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({
                items: chaptersFixture,
                page: { limit: 50, offset: 0, total: null }
            })
        })
    );
    await page.route(`**/api/v1/mangas/${mangaId}/chapters/${chapterId}`, (route) =>
        route.fulfill({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify(chaptersFixture[0])
        })
    );
    await page.route(
        `**/api/v1/mangas/${mangaId}/chapters/${chapterId}/pages`,
        (route) =>
            route.fulfill({
                status: 200,
                contentType: 'application/json',
                body: JSON.stringify({ pages: pagesFixture })
            })
    );
    // Stub image bytes so the <img> doesn't 404 (1x1 transparent PNG).
    const png = Buffer.from(
        '89504e470d0a1a0a0000000d49484452000000010000000108060000001f15c4890000000d49444154789c63000100000005000158a3b62a0000000049454e44ae426082',
        'hex'
    );
    await page.route('**/api/v1/files/**', (route) =>
        route.fulfill({ status: 200, contentType: 'image/png', body: png })
    );
}

test('manga overview shows title, cover, and a chapter list', async ({ page }) => {
    await mockReaderApis(page);
    await page.goto(`/manga/${mangaId}`);

    await expect(page.getByTestId('manga-title')).toHaveText('Berserk');
    await expect(page.getByTestId('manga-author')).toContainText('Kentaro Miura');
    await expect(page.getByTestId('manga-cover')).toBeVisible();
    await expect(page.getByTestId('chapter-list')).toContainText('The Brand');
    await expect(page.getByTestId('bookmark-signin')).toBeVisible();
});

test('reader paginates with arrow keys and j/k, and preloads the next page', async ({ page }) => {
    await mockReaderApis(page);
    await page.goto(`/manga/${mangaId}/chapter/${chapterId}`);

    // Page 1 shown, preload for page 2 in the DOM.
    await expect(page.getByTestId('page-indicator')).toHaveText('Page 1 / 3');
    await expect(page.getByTestId('reader-page')).toHaveAttribute(
        'src',
        /0001\.png$/
    );
    await expect(page.getByTestId('reader-preload')).toHaveAttribute(
        'src',
        /0002\.png$/
    );

    // ArrowRight → page 2.
    await page.keyboard.press('ArrowRight');
    await expect(page.getByTestId('page-indicator')).toHaveText('Page 2 / 3');
    await expect(page.getByTestId('reader-page')).toHaveAttribute(
        'src',
        /0002\.png$/
    );

    // j → page 3 (last).
    await page.keyboard.press('j');
    await expect(page.getByTestId('page-indicator')).toHaveText('Page 3 / 3');
    await expect(page.getByTestId('reader-next')).toBeDisabled();

    // k → page 2.
    await page.keyboard.press('k');
    await expect(page.getByTestId('page-indicator')).toHaveText('Page 2 / 3');

    // ArrowLeft → page 1.
    await page.keyboard.press('ArrowLeft');
    await expect(page.getByTestId('page-indicator')).toHaveText('Page 1 / 3');
    await expect(page.getByTestId('reader-prev')).toBeDisabled();
});