Mangalord/frontend/e2e/profile.spec.ts

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

const userFixture = {
    id: 'u1',
    username: 'alice',
    created_at: '2026-01-01T00:00:00Z'
};

async function stubAuthenticated(page: Page) {
    await page.route('**/api/v1/auth/me', (route) =>
        route.fulfill({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({ user: userFixture })
        })
    );
    // Profile overview hits these for the count cards — return zeros
    // unless a test overrides.
    await page.route('**/api/v1/me/bookmarks?*', (route) =>
        route.fulfill({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({ items: [], page: { limit: 1, offset: 0, total: 0 } })
        })
    );
    await page.route('**/api/v1/me/collections?*', (route) =>
        route.fulfill({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({ items: [], page: { limit: 1, offset: 0, total: 0 } })
        })
    );
}

test('Profile link in nav for authed users; landing shows counts', async ({ page }) => {
    await stubAuthenticated(page);
    await page.route('**/api/v1/mangas?*', (route) =>
        route.fulfill({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({ items: [], page: { limit: 50, offset: 0, total: 0 } })
        })
    );

    await page.goto('/');
    await expect(page.getByTestId('nav-profile')).toBeVisible();
    await page.getByTestId('nav-profile').click();
    await expect(page).toHaveURL(/\/profile$/);
    await expect(page.getByTestId('overview-bookmarks')).toBeVisible();
    await expect(page.getByTestId('overview-collections')).toBeVisible();
});

test('Page tags tab reaches the page-tags list on desktop', async ({ page }) => {
    // Page tags are a first-class Library section on mobile; desktop reaches
    // them through this profile tab.
    await stubAuthenticated(page);
    await page.route('**/api/v1/me/page-tags?*', (route) =>
        route.fulfill({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({ items: [], page: { limit: 100, offset: 0, total: 0 } })
        })
    );
    // Registered after the general route so distinct URLs resolve here.
    await page.route('**/api/v1/me/page-tags/distinct*', (route) =>
        route.fulfill({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({ items: [] })
        })
    );

    await page.goto('/profile');
    await expect(page.getByTestId('tab-page-tags')).toBeVisible();
    await page.getByTestId('tab-page-tags').click();
    await expect(page).toHaveURL(/\/profile\/page-tags$/);
    await expect(page.getByTestId('library-page-tags-empty')).toBeVisible();
});

test('Account tab reaches the password form', async ({ page }) => {
    await stubAuthenticated(page);
    await page.goto('/profile');
    await page.getByTestId('tab-account').click();
    await expect(page).toHaveURL(/\/profile\/account$/);
    await expect(page.getByTestId('password-form')).toBeVisible();
});

test('changing password shows success and clears the form', async ({ page }) => {
    await stubAuthenticated(page);
    let patchCalls = 0;
    let patchBody: unknown = null;
    await page.route('**/api/v1/auth/me/password', async (route) => {
        patchCalls += 1;
        patchBody = JSON.parse(route.request().postData() ?? '{}');
        await route.fulfill({ status: 204 });
    });

    await page.goto('/profile/account');
    await page.getByTestId('current-password').fill('hunter2hunter2');
    await page.getByTestId('new-password').fill('freshpassfreshpass');
    await page.getByTestId('confirm-password').fill('freshpassfreshpass');
    await page.getByTestId('password-submit').click();

    await expect(page.getByTestId('password-success')).toContainText('Password updated');
    expect(patchCalls).toBe(1);
    expect(patchBody).toEqual({
        current_password: 'hunter2hunter2',
        new_password: 'freshpassfreshpass'
    });
    await expect(page.getByTestId('current-password')).toHaveValue('');
});

test('wrong current password surfaces the 401 envelope inline', async ({ page }) => {
    await stubAuthenticated(page);
    await page.route('**/api/v1/auth/me/password', (route) =>
        route.fulfill({
            status: 401,
            contentType: 'application/json',
            body: JSON.stringify({
                error: { code: 'unauthenticated', message: 'unauthenticated' }
            })
        })
    );

    await page.goto('/profile/account');
    // Wait for the session to hydrate before submitting: a wrong current
    // password must be surfaced inline, which the form distinguishes from a
    // genuinely-signed-out state via session.user — so the user must be
    // known-authenticated first (as they always are on a real page load).
    await expect(page.getByText('Signed in as')).toBeVisible();
    await page.getByTestId('current-password').fill('definitelyNotIt');
    await page.getByTestId('new-password').fill('freshpassfreshpass');
    await page.getByTestId('confirm-password').fill('freshpassfreshpass');
    await page.getByTestId('password-submit').click();

    await expect(page.getByTestId('password-error')).toBeVisible();
    // Stays on the account page — a wrong current password is an inline
    // error, not a session expiry, so it must not bounce to /login.
    await expect(page).toHaveURL(/\/profile\/account$/);
});

test('mismatched new + confirm disables the submit button', async ({ page }) => {
    await stubAuthenticated(page);

    await page.goto('/profile/account');
    await page.getByTestId('current-password').fill('hunter2hunter2');
    await page.getByTestId('new-password').fill('freshpassfreshpass');
    await page.getByTestId('confirm-password').fill('different');

    await expect(page.getByTestId('mismatch')).toBeVisible();
    await expect(page.getByTestId('password-submit')).toBeDisabled();
});

test('anonymous user sees a profile sign-in prompt', async ({ page }) => {
    await page.route('**/api/v1/auth/me', (route) =>
        route.fulfill({
            status: 401,
            contentType: 'application/json',
            body: JSON.stringify({
                error: { code: 'unauthenticated', message: 'unauthenticated' }
            })
        })
    );
    // The /profile load pair-fetches these; a real backend returns 401 for a
    // guest, which the load maps to `authenticated: false`. Without the mock
    // the calls fall through to the dead proxy and 500, and the load rethrows
    // (only 401 is handled) → error page instead of the sign-in prompt.
    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/me/collections?*', (route) =>
        route.fulfill({
            status: 401,
            contentType: 'application/json',
            body: JSON.stringify({ error: { code: 'unauthenticated', message: 'unauthenticated' } })
        })
    );

    await page.goto('/profile');
    await expect(page.getByTestId('profile-signin')).toBeVisible();
    await expect(page.getByTestId('password-form')).toHaveCount(0);
});

test('/settings 308-redirects to /profile/preferences', async ({ page }) => {
    await stubAuthenticated(page);
    await page.goto('/settings');
    await expect(page).toHaveURL(/\/profile\/preferences$/);
    // The theme radio is visually hidden (decorated label wraps it), so
    // assert presence rather than CSS visibility.
    await expect(page.getByTestId('theme-radio-system')).toBeAttached();
});