1import { test, expect } from '@playwright/test';
  2const offline = process.env.REEL_E2E_AUTH_MODE === 'offline';
  3
  4test('private review: login, navigation, years, responsive layout, logout', async ({ page }) => {
  5  const errors = [];
  6  const externalRequests = [];
  7  page.on('request', request => { if (new URL(request.url()).origin !== 'http://127.0.0.1:18180') externalRequests.push(request.url()); });
  8  page.on('pageerror', e => errors.push(e.message));
  9  await page.goto('/review/2025');
 10  await expect(page.getByRole('heading', { name: 'Your year, replayed.' })).toBeVisible();
 11  await expect(page.locator('header, footer, .login-intro')).toHaveCount(0);
 12  if (offline) await expect(page.getByText(/checked locally against a private Jellyfin account snapshot/)).toBeVisible();
 13  await page.getByLabel('Jellyfin username').fill(offline ? 'Alice' : 'fixture');
 14  await page.getByLabel('Password', { exact: true }).fill('fixture-only');
 15  await page.getByRole('button', { name: 'Roll the credits' }).click();
 16  await expect(page.getByRole('heading', { name: 'Your viewing recap' })).toBeVisible();
 17  await page.getByRole('button', { name: 'View my recap' }).click();
 18  await expect(page.getByText('hours watched', { exact: true })).toBeVisible();
 19  await page.getByRole('button', { name: '3. Movies watched', exact: true }).click();
 20  await expect(page.getByRole('heading', { name: 'The Last Lighthouse' }).first()).toBeVisible();
 21  const poster = page.getByRole('img', { name: 'Poster for The Last Lighthouse' }).first();
 22  await expect(poster).toBeVisible();
 23  await expect(poster).toHaveAttribute('src', /^\/art\/[a-f0-9]{64}\.jpg$/);
 24  await expect.poll(() => poster.evaluate(image => image.naturalWidth)).toBeGreaterThan(0);
 25  await page.locator('main').click({ position: { x: 5, y: 5 } });
 26  await page.keyboard.press('ArrowRight');
 27  await expect(page.getByRole('heading', { name: 'Orbit Station' }).first()).toBeVisible();
 28  await page.getByLabel('Review year').selectOption('2024');
 29  await expect(page).toHaveURL(/2024$/);
 30  await expect(page.getByRole('heading', { name: 'Your viewing recap' })).toBeVisible();
 31  await page.reload();
 32  await expect(page.getByLabel('Review year')).toHaveValue('2024');
 33  for (const label of [/Viewing by hour$/, /Your longest viewing session$/, /Your viewing profile$/, /Your year in summary$/]) {
 34    await page.getByRole('button', { name: label, exact: true }).click();
 35    await expect(page.locator('.story')).toBeVisible();
 36    expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBeTruthy();
 37  }
 38  await page.screenshot({ path: 'test-results/review-mobile.png', fullPage: true });
 39  await page.setViewportSize({ width: 1440, height: 1000 });
 40  await page.screenshot({ path: 'test-results/review-desktop.png', fullPage: true });
 41  await page.getByRole('button', { name: 'Sign out' }).click();
 42  await expect(page.getByLabel('Jellyfin username')).toBeVisible();
 43  await expect(page.locator('header, footer, .login-intro')).toHaveCount(0);
 44  expect((await page.request.get('/api/review?year=2025')).status()).toBe(401);
 45  expect(errors).toEqual([]);
 46  expect(externalRequests).toEqual([]);
 47});
 48
 49
 50test('unavailable cards are skipped and chapter navigation updates when changing years', async ({ page }) => {
 51  await page.route('**/api/review?year=*', async route => {
 52    const response = await route.fetch();
 53    const review = await response.json();
 54    for (const availability of Object.values(review.availability)) {
 55      availability.available = review.year !== 2025;
 56    }
 57    await route.fulfill({ response, json: review });
 58  });
 59  await page.goto('/review/2025');
 60  await page.getByLabel('Jellyfin username').fill(offline ? 'Alice' : 'fixture');
 61  await page.getByLabel('Password', { exact: true }).fill('fixture-only');
 62  await page.getByRole('button', { name: 'Roll the credits' }).click();
 63  const chapters = page.getByRole('navigation', { name: 'Review chapters' });
 64  await expect(chapters.getByRole('button')).toHaveCount(9);
 65  await expect(chapters.getByRole('button', { name: /Your watch time|Unfinished movies|Your longest viewing session|Your viewing profile|Your watch-time ranking/ })).toHaveCount(0);
 66  await page.getByRole('button', { name: 'View my recap' }).click();
 67  await expect(page.getByRole('heading', { name: 'Movies watched' })).toBeVisible();
 68  await page.locator('main').click({ position: { x: 5, y: 5 } });
 69  await page.keyboard.press('ArrowRight');
 70  await expect(page.getByRole('heading', { name: 'TV shows watched' })).toBeVisible();
 71  await page.getByRole('button', { name: 'Next chapter' }).click();
 72  await expect(page.getByRole('heading', { name: 'Your top genres' })).toBeVisible();
 73  await page.locator('main').click({ position: { x: 5, y: 5 } });
 74  await page.keyboard.press('End');
 75  await expect(page.getByRole('heading', { name: 'Your year in summary' })).toBeVisible();
 76  await expect(page.locator('.story-bottom')).toContainText('09 / 9');
 77  await expect(page.getByRole('button', { name: 'Next chapter' })).toBeDisabled();
 78  await expect(page.locator('.stat-grid')).not.toContainText('Your viewing profile');
 79  await page.getByLabel('Review year').selectOption('2024');
 80  await expect(chapters.getByRole('button')).toHaveCount(14);
 81  await expect(page.getByRole('heading', { name: 'Your viewing recap' })).toBeVisible();
 82  await chapters.getByRole('button', { name: '5. Unfinished movies', exact: true }).click();
 83  await expect(page.getByRole('heading', { name: 'Unfinished movies' })).toBeVisible();
 84  await page.getByLabel('Review year').selectOption('2025');
 85  await expect(chapters.getByRole('button')).toHaveCount(9);
 86  await expect(page.getByRole('heading', { name: 'Your viewing recap' })).toBeVisible();
 87});
 88
 89test('complete movie and show timelines include every title and support older exports', async ({ page }) => {
 90  let mode = 'timeline';
 91  await page.route('**/api/review?year=*', async route => {
 92    const response = await route.fetch();
 93    const review = await response.json();
 94    for (const [field, title] of [['movies', 'Movie'], ['shows', 'Show']]) {
 95      review[field] = mode === 'empty' ? [] : Array.from({ length: 7 }, (_, i) => ({
 96        id: `${field}-${i}`, title: `${title} ${i + 1}`, seconds: 3600, records: 1,
 97        ...(i === 0 && field === 'shows' ? { poster: review.shows[0]?.poster, posterSource: 'https://www.tvmaze.com/shows/42' } : {}),
 98        ...(mode === 'legacy' ? {} : { months: i === 0 ? [1, 3] : i === 6 ? [12] : [1] })
 99      }));
100    }
101    await route.fulfill({ response, json: review });
102  });
103  await page.goto('/review/2025');
104  await page.getByLabel('Jellyfin username').fill(offline ? 'Alice' : 'fixture');
105  await page.getByLabel('Password', { exact: true }).fill('fixture-only');
106  await page.getByRole('button', { name: 'Roll the credits' }).click();
107  for (const [label, title] of [['Movies watched', 'Movie'], ['TV shows watched', 'Show']]) {
108    await page.getByRole('button', { name: new RegExp(`${label}$`) }).click();
109    await expect(page.locator('.timeline-month > h3')).toHaveText(['January 2025', 'March 2025', 'December 2025']);
110    await expect(page.getByRole('region', { name: 'January 2025', exact: true }).getByRole('listitem')).toHaveCount(6);
111    await expect(page.getByRole('region', { name: 'March 2025', exact: true }).getByRole('heading', { name: `${title} 1`, exact: true })).toBeVisible();
112    await expect(page.getByRole('region', { name: 'December 2025', exact: true }).getByRole('heading', { name: `${title} 7` })).toBeVisible();
113    await expect(page.locator('.timeline-titles li')).toHaveCount(8);
114    expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBeTruthy();
115  }
116  await expect(page.getByRole('link', { name: 'TVmaze', exact: true })).toHaveCount(2);
117  await expect(page.getByRole('link', { name: 'TVmaze', exact: true }).first()).toHaveAttribute('href', 'https://www.tvmaze.com/shows/42');
118  mode = 'legacy';
119  await page.reload();
120  await page.getByRole('button', { name: /Movies watched$/ }).click();
121  await expect(page.getByRole('region', { name: 'Viewing dates unavailable' }).getByRole('listitem')).toHaveCount(7);
122  mode = 'empty';
123  await page.reload();
124  await page.getByRole('button', { name: /Movies watched$/ }).click();
125  await expect(page.getByText('No movies watched in 2025.')).toBeVisible();
126  await expect(page.locator('.viewing-timeline')).toHaveCount(0);
127});
128
129test('anonymous ranking highlights your position and handles ties and edge positions', async ({ page }) => {
130  let ranking = { rank: 3, cohort: 6, percentile: 40 };
131  await page.route('**/api/review?year=*', async route => {
132    const response = await route.fetch();
133    const review = await response.json();
134    review.ranking = ranking;
135    review.availability.ranking.available = true;
136    await route.fulfill({ response, json: review });
137  });
138  await page.goto('/review/2025');
139  await page.getByLabel('Jellyfin username').fill(offline ? 'Alice' : 'fixture');
140  await page.getByLabel('Password', { exact: true }).fill('fixture-only');
141  await page.getByRole('button', { name: 'Roll the credits' }).click();
142  const chart = page.locator('.ranking-position');
143  await expect(page.getByRole('heading', { name: 'Your viewing recap' })).toBeVisible();
144  for (const sample of [
145    { rank: 3, cohort: 6, percentile: 40, above: 2, tied: 1, below: 2 },
146    { rank: 1, cohort: 6, percentile: 100, above: 0, tied: 0, below: 5 },
147    { rank: 6, cohort: 6, percentile: 0, above: 5, tied: 0, below: 0 },
148    { rank: 1, cohort: 6, percentile: 0, above: 0, tied: 5, below: 0 },
149    { rank: 1, cohort: 1, percentile: 0, above: 0, tied: 0, below: 0 }
150  ]) {
151    ranking = { rank: sample.rank, cohort: sample.cohort, percentile: sample.percentile };
152    await page.reload();
153    await page.getByRole('button', { name: /Your watch-time ranking$/ }).click();
154    await expect(chart.getByRole('listitem')).toHaveCount(sample.cohort);
155    await expect(chart.getByRole('listitem', { name: `You: rank ${sample.rank} of ${sample.cohort}`, exact: true })).toHaveCount(1);
156    await expect(chart.locator('.above')).toHaveCount(sample.above);
157    await expect(chart.locator('.tied')).toHaveCount(sample.tied);
158    await expect(chart.locator('.below')).toHaveCount(sample.below);
159    await expect(chart).not.toContainText(offline ? 'Alice' : 'Fixture Viewer');
160    await expect(chart.locator('a')).toHaveCount(0);
161    if (sample.rank === 3) await chart.screenshot({ path: 'test-results/ranking-mobile.png' });
162    if (sample.cohort === 1) await expect(chart).toContainText('You are the only eligible viewer.');
163    expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBeTruthy();
164  }
165});