Mangalord/frontend/e2e/reader-mode.spec.ts

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

const mangaId = '22222222-2222-2222-2222-222222222222';
const chapterId = 'c2222222-2222-2222-2222-222222222222';
const mangaFixture = {
    id: mangaId,
    title: 'Vagabond',
    author: 'Takehiko Inoue',
    description: null,
    cover_image_path: null,
    created_at: '2026-01-01T00:00:00Z',
    updated_at: '2026-01-01T00:00:00Z'
};
const chapterFixture = {
    id: chapterId,
    manga_id: mangaId,
    number: 1,
    title: null,
    page_count: 3,
    created_at: '2026-01-01T00:00:00Z'
};
const pagesFixture = [
    {
        id: 'p1111111-2222-2222-2222-222222222222',
        chapter_id: chapterId,
        page_number: 1,
        storage_key: `mangas/${mangaId}/chapters/${chapterId}/pages/0001.png`,
        content_type: 'image/png'
    },
    {
        id: 'p2222222-2222-2222-2222-222222222222',
        chapter_id: chapterId,
        page_number: 2,
        storage_key: `mangas/${mangaId}/chapters/${chapterId}/pages/0002.png`,
        content_type: 'image/png'
    },
    {
        id: 'p3333333-2222-2222-2222-222222222222',
        chapter_id: chapterId,
        page_number: 3,
        storage_key: `mangas/${mangaId}/chapters/${chapterId}/pages/0003.png`,
        content_type: 'image/png'
    }
];

async function mockReaderApis(page: Page) {
    // Anonymous user — both `me` and preferences fall back to localStorage.
    await page.route('**/api/v1/auth/me', (route) =>
        route.fulfill({
            status: 401,
            contentType: 'application/json',
            body: JSON.stringify({ error: { code: 'unauthenticated', message: '' } })
        })
    );
    await page.route('**/api/v1/auth/me/preferences', (route) =>
        route.fulfill({
            status: 401,
            contentType: 'application/json',
            body: JSON.stringify({ error: { code: 'unauthenticated', message: '' } })
        })
    );
    await page.route('**/api/v1/me/bookmarks*', (route) =>
        route.fulfill({
            status: 401,
            contentType: 'application/json',
            body: JSON.stringify({ error: { code: 'unauthenticated', message: '' } })
        })
    );
    // Anonymous reader: read-progress reads/writes are unauthenticated. Without
    // this the GET/PUT fall through to the (absent) backend and stall the load.
    await page.route('**/api/v1/me/read-progress/**', (route) =>
        route.fulfill({
            status: 401,
            contentType: 'application/json',
            body: JSON.stringify({ error: { code: 'unauthenticated', message: '' } })
        })
    );
    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: [chapterFixture],
                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: [chapterFixture],
                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(chapterFixture)
        })
    );
    await page.route(
        `**/api/v1/mangas/${mangaId}/chapters/${chapterId}/pages`,
        (route) =>
            route.fulfill({
                status: 200,
                contentType: 'application/json',
                body: JSON.stringify({ pages: pagesFixture })
            })
    );
    const png = Buffer.from(
        '89504e470d0a1a0a0000000d49484452000000010000000108060000001f15c4890000000d49444154789c63000100000005000158a3b62a0000000049454e44ae426082',
        'hex'
    );
    await page.route('**/api/v1/files/**', (route) =>
        route.fulfill({ status: 200, contentType: 'image/png', body: png })
    );
}

test.beforeEach(async ({ context }) => {
    // Clear the localStorage shadow so each test starts in the default
    // single-page mode regardless of order.
    await context.clearCookies();
    await context.addInitScript(() => {
        try {
            localStorage.removeItem('mangalord-reader-mode');
            localStorage.removeItem('mangalord-reader-gap');
            localStorage.removeItem('mangalord-reader-brightness');
        } catch {
            // ignore — about:blank doesn't expose localStorage yet.
        }
    });
});

test('switching to continuous mode stacks all pages and hides chevrons', async ({ page }) => {
    await mockReaderApis(page);
    await page.goto(`/manga/${mangaId}/chapter/${chapterId}`);

    // Default single-page mode is active.
    await expect(page.getByTestId('reader-page')).toBeVisible();
    await expect(page.getByTestId('page-indicator')).toHaveText('Page 1 / 3');

    await page.getByTestId('reader-mode-continuous').click();

    await expect(page.getByTestId('reader-continuous')).toBeVisible();
    await expect(page.getByTestId('reader-page-1')).toBeVisible();
    await expect(page.getByTestId('reader-page-3')).toBeVisible();
    await expect(page.getByTestId('reader-prev')).toHaveCount(0);
    await expect(page.getByTestId('reader-next')).toHaveCount(0);
    await expect(page.getByTestId('page-indicator')).toHaveText('3 pages');
});

test('arrow keys do not paginate while in continuous mode', async ({ page }) => {
    await mockReaderApis(page);
    await page.goto(`/manga/${mangaId}/chapter/${chapterId}`);
    await page.getByTestId('reader-mode-continuous').click();
    await expect(page.getByTestId('reader-continuous')).toBeVisible();

    await page.keyboard.press('ArrowRight');
    await page.keyboard.press('j');

    // Still in continuous mode, still showing every page.
    await expect(page.getByTestId('reader-continuous')).toBeVisible();
    await expect(page.getByTestId('reader-page-1')).toBeVisible();
    await expect(page.getByTestId('reader-page-3')).toBeVisible();
});

test('gap select updates the inline gap on the continuous container', async ({ page }) => {
    await mockReaderApis(page);
    await page.goto(`/manga/${mangaId}/chapter/${chapterId}`);
    await page.getByTestId('reader-mode-continuous').click();

    const container = page.getByTestId('reader-continuous');
    // Default gap is "none" → 0px.
    await expect(container).toHaveAttribute('style', /gap:\s*0px/);

    await page.getByTestId('reader-gap').selectOption('medium');
    await expect(container).toHaveAttribute('style', /gap:\s*32px/);

    await page.getByTestId('reader-gap').selectOption('large');
    await expect(container).toHaveAttribute('style', /gap:\s*64px/);
});

test('desktop reader nav exposes a brightness control that dims and undims the reader', async ({
    page
}) => {
    // The brightness slider used to live only in the mobile settings sheet,
    // so desktop users couldn't dim — and could be stuck dimmed by a value a
    // phone had persisted. The desktop nav now carries its own slider.
    await mockReaderApis(page);
    await page.goto(`/manga/${mangaId}/chapter/${chapterId}`);

    const slider = page.getByTestId('reader-brightness-desktop');
    await expect(slider).toBeVisible();

    const dim = () =>
        page.evaluate(() =>
            document.documentElement.style.getPropertyValue('--reader-dim')
        );

    // Default brightness is full → no dim overlay.
    await expect.poll(async () => Number(await dim())).toBe(0);

    // Dimming raises the overlay opacity…
    await slider.fill('0.3');
    await expect.poll(async () => Number(await dim())).toBeGreaterThan(0);

    // …and restoring it clears the dim, so a desktop user is never stuck.
    await slider.fill('1');
    await expect.poll(async () => Number(await dim())).toBe(0);
});

test('a brightness value persisted by a phone is recoverable on desktop', async ({
    page,
    context
}) => {
    // Seed a dimmed value as if set on mobile, then open the reader on a
    // desktop viewport: the dim applies and the desktop control reflects it.
    await context.addInitScript(() => {
        try {
            localStorage.setItem('mangalord-reader-brightness', '0.3');
        } catch {
            // about:blank — ignore
        }
    });
    await mockReaderApis(page);
    await page.goto(`/manga/${mangaId}/chapter/${chapterId}`);

    const slider = page.getByTestId('reader-brightness-desktop');
    await expect(slider).toHaveValue('0.3');
    await expect
        .poll(async () =>
            Number(
                await page.evaluate(() =>
                    document.documentElement.style.getPropertyValue('--reader-dim')
                )
            )
        )
        .toBeGreaterThan(0);
});

test('reader-mode preference set on one page is honored when the reader opens', async ({
    page,
    context
}) => {
    // Simulate a user who has already chosen continuous + medium on the
    // settings page (which writes through the preferences store to
    // localStorage). The reader should pick up that choice on first
    // render without any in-tab navigation.
    await context.addInitScript(() => {
        localStorage.setItem('mangalord-reader-mode', 'continuous');
        localStorage.setItem('mangalord-reader-gap', 'medium');
    });
    await mockReaderApis(page);

    await page.goto(`/manga/${mangaId}/chapter/${chapterId}`);
    await expect(page.getByTestId('reader-continuous')).toBeVisible();
    await expect(page.getByTestId('page-indicator')).toHaveText('3 pages');
    await expect(page.getByTestId('reader-continuous')).toHaveAttribute(
        'style',
        /gap:\s*32px/
    );
});

test('preferences page hides the gap picker while in single-page mode', async ({ page }) => {
    // Visually verifies the conditional render. The radio-click semantics
    // are exercised in src/lib/preferences.svelte.test.ts; the visible
    // mode toggle in the reader top bar covers the cross-route propagation
    // path in the test above.
    await mockReaderApis(page);
    await page.goto('/profile/preferences');

    await expect(page.getByTestId('reader-mode-radio-single')).toBeAttached();
    await expect(page.getByTestId('reader-mode-radio-continuous')).toBeAttached();
    await expect(page.getByTestId('reader-gap-radio-medium')).toHaveCount(0);
});