Oier Bravo Urtasun
a0e00b8044
Closes 9.2 (desktop reading width). - (app)/+layout.svelte wraps detail routes (/lists/[id], /tasks/[id], /notes/[id]) in a max-w-2xl mx-auto container at the md breakpoint and up. Mobile (<md) keeps the existing full-width layout — the wrapper only kicks in via md:max-w-2xl. The shopping session (/lists/[id]/session) is explicitly excluded so the immersive mode still occupies the whole viewport. - A new readingRoutePattern lives alongside the existing detailRoutePattern so the two concerns stay independently testable (detail = hide global top bar; reading = cap width). - RW-01..RW-03 in tests/e2e/reading-width.test.ts measure the bounding box of [data-testid="reading-column"] under 1280px and 390px viewports, and confirm the wrapper is absent from /session. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
79 lines
3.2 KiB
TypeScript
79 lines
3.2 KiB
TypeScript
/**
|
|
* RW-series: Desktop reading-width cap (Fase 9.2).
|
|
*
|
|
* RW-01 detail routes (/lists/[id], /tasks/[id], /notes/[id]) cap the
|
|
* content column at max-w-2xl on >=md viewports — measured by the
|
|
* main element's bounding box being narrower than a 1280px viewport.
|
|
* RW-02 mobile viewports (<md) keep the content full-width.
|
|
* RW-03 shopping session (/lists/[id]/session) stays full-width on desktop
|
|
* because the mode is immersive.
|
|
*/
|
|
import { test, expect, type Page } from '@playwright/test';
|
|
import { USERS } from '../fixtures/users.js';
|
|
import { loginAs } from '../fixtures/login.js';
|
|
|
|
const DESKTOP = { width: 1280, height: 900 };
|
|
const MOBILE = { width: 390, height: 800 };
|
|
|
|
/** max-w-2xl in Tailwind = 42rem = 672px. */
|
|
const READING_WIDTH = 672;
|
|
|
|
async function firstListId(page: Page): Promise<string> {
|
|
await page.goto('/lists');
|
|
// Click any list card to get into a detail route.
|
|
const card = page.getByRole('heading', { level: 3 }).or(page.getByRole('heading', { level: 2 })).first();
|
|
await expect(card).toBeVisible({ timeout: 10_000 });
|
|
await card.click();
|
|
await page.waitForURL(/\/lists\/[0-9a-f-]+\/?$/, { timeout: 10_000 });
|
|
const url = new URL(page.url());
|
|
const segments = url.pathname.split('/');
|
|
return segments[segments.indexOf('lists') + 1];
|
|
}
|
|
|
|
test.describe('Reading width — desktop max-w-2xl cap', () => {
|
|
test('RW-01: list detail page caps content at max-w-2xl on desktop', async ({ browser }) => {
|
|
const ctx = await browser.newContext({ viewport: DESKTOP });
|
|
const page = await ctx.newPage();
|
|
await loginAs(page, USERS.ana);
|
|
await firstListId(page);
|
|
|
|
// The detail content should live inside an element whose width is
|
|
// capped at max-w-2xl (672px). We assert the inner scroll container
|
|
// reports a width <= 672 + slack for padding.
|
|
const wrapper = page.locator('[data-testid="reading-column"]').first();
|
|
await expect(wrapper).toBeVisible({ timeout: 10_000 });
|
|
const box = await wrapper.boundingBox();
|
|
expect(box).not.toBeNull();
|
|
expect(box!.width).toBeLessThanOrEqual(READING_WIDTH + 4);
|
|
|
|
await ctx.close();
|
|
});
|
|
|
|
test('RW-02: list detail page is full-width on mobile (<md)', async ({ browser }) => {
|
|
const ctx = await browser.newContext({ viewport: MOBILE });
|
|
const page = await ctx.newPage();
|
|
await loginAs(page, USERS.ana);
|
|
await firstListId(page);
|
|
|
|
const wrapper = page.locator('[data-testid="reading-column"]').first();
|
|
await expect(wrapper).toBeVisible({ timeout: 10_000 });
|
|
const box = await wrapper.boundingBox();
|
|
expect(box).not.toBeNull();
|
|
// Mobile viewport is 390 — wrapper should fill it (allow some padding).
|
|
expect(box!.width).toBeGreaterThan(380);
|
|
await ctx.close();
|
|
});
|
|
|
|
test('RW-03: shopping session stays full-width on desktop (immersive)', async ({ browser }) => {
|
|
const ctx = await browser.newContext({ viewport: DESKTOP });
|
|
const page = await ctx.newPage();
|
|
await loginAs(page, USERS.ana);
|
|
const id = await firstListId(page);
|
|
await page.goto(`/lists/${id}/session`);
|
|
// The session view is allowed to occupy the full viewport. The
|
|
// reading-column wrapper must NOT be present in this route.
|
|
await expect(page.locator('[data-testid="reading-column"]')).toHaveCount(0);
|
|
await ctx.close();
|
|
});
|
|
});
|