feat: polish homepage catalog stats

2026-06-09 03:54:26 -05:00
parent e566ef4a51
commit 759d4a6b86
4 changed files with 495 additions and 20 deletions
@@ -1,5 +1,88 @@
 import { expect, test } from '@playwright/test';

+test('homepage presents balanced navigation and facet summaries', async ({ page }) => {
+  await page.goto('/');
+
+  const primaryNav = page.getByRole('navigation', { name: 'Primary navigation' });
+  await expect(primaryNav.getByRole('link', { name: 'Catalog' })).toHaveAttribute('href', '/');
+  await expect(primaryNav.getByRole('link', { name: 'Browse' })).toHaveAttribute('href', '/#browse');
+  await expect(primaryNav.getByRole('link', { name: 'Play Queue' })).toHaveAttribute('href', '/queue/');
+  await expect(primaryNav.getByRole('link', { name: 'GBA' })).toHaveCount(0);
+  await expect(primaryNav.getByRole('link', { name: 'Difficulty' })).toHaveCount(0);
+
+  const heroStats = page.locator('.hero-stats');
+  await expect(heroStats).toContainText('368');
+  await expect(heroStats).toContainText('hacks');
+  await expect(heroStats).toContainText('Platforms');
+  await expect(heroStats).toContainText('GBA 188');
+  await expect(heroStats).toContainText('NDS 47');
+  await expect(heroStats).toContainText('PC 40');
+  await expect(heroStats).toContainText('GBC 22');
+  await expect(heroStats).toContainText('Types');
+  await expect(heroStats).toContainText('Expansion 143');
+  await expect(heroStats).toContainText('New Experience 129');
+  await expect(heroStats).toContainText('Difficulty 105');
+  await expect(heroStats).toContainText('QoL 50');
+  await expect(heroStats).toContainText('Status');
+  await expect(heroStats).toContainText('Complete 168');
+  await expect(heroStats).toContainText('Ongoing 28');
+  await expect(heroStats).toContainText('Beta 10');
+  await expect(heroStats).toContainText('Unclassified 161');
+});
+
+test('homepage stat cards are polished and responsive', async ({ page }) => {
+  await page.goto('/');
+
+  const totalCard = page.locator('.stat-card-total');
+  await expect(totalCard).toHaveCSS('text-align', 'center');
+  await expect(totalCard.locator('strong')).toHaveCSS('font-size', /^(4[0-9]|5[0-9])px$/);
+
+  const firstStatItem = page.locator('.stat-list li').first();
+  await expect(firstStatItem.locator('.stat-icon')).toBeVisible();
+  await expect(firstStatItem.locator('.stat-label')).toHaveCSS('white-space', 'nowrap');
+
+  await page.setViewportSize({ width: 390, height: 844 });
+  await page.goto('/');
+
+  const statsPanel = page.locator('.hero-stats-panel');
+  await expect(statsPanel.locator('summary')).toBeVisible();
+  await expect(statsPanel).toHaveAttribute('open', '');
+
+  const mobileMetrics = await page.locator('.hero-stats').evaluate((element) => {
+    const styles = window.getComputedStyle(element);
+    const cards = Array.from(element.querySelectorAll('.stat-card')).map((card) => card.getBoundingClientRect());
+    return {
+      columns: styles.gridAutoFlow,
+      overflowX: styles.overflowX,
+      firstTop: cards[0]?.top,
+      allSameRow: cards.every((card) => Math.abs(card.top - cards[0].top) < 2),
+      scrollWidth: element.scrollWidth,
+      clientWidth: element.clientWidth,
+    };
+  });
+
+  expect(mobileMetrics.columns).toBe('column');
+  expect(mobileMetrics.overflowX).toBe('auto');
+  expect(mobileMetrics.allSameRow).toBe(true);
+  expect(mobileMetrics.scrollWidth).toBeGreaterThan(mobileMetrics.clientWidth);
+});
+
+test('homepage browse summary links to grouped facet pages', async ({ page }) => {
+  await page.goto('/');
+
+  const browse = page.getByRole('region', { name: 'Browse by catalog facets' });
+  await expect(browse.getByRole('heading', { name: 'Browse the archive' })).toBeVisible();
+  await expect(browse.getByRole('link', { name: /GBA\s+188/ })).toHaveAttribute('href', '/browse/platform/gba/');
+  await expect(browse.getByRole('link', { name: /Difficulty\s+105/ })).toHaveAttribute(
+    'href',
+    '/browse/type/difficulty/',
+  );
+  await expect(browse.getByRole('link', { name: /Complete\s+168/ })).toHaveAttribute(
+    'href',
+    '/browse/status/complete/',
+  );
+});
+
 test('catalog search and filters update visible card count', async ({ page }) => {
  await page.goto('/');

@@ -21,6 +104,38 @@ test('catalog search and filters update visible card count', async ({ page }) =>
  await expect(page.locator('[data-result-count]')).toContainText('shown');
 });

+test('desktop filter rail scrolls independently from the catalog page', async ({ page }) => {
+  await page.setViewportSize({ width: 1280, height: 720 });
+  await page.goto('/');
+
+  const rail = page.locator('.filter-rail');
+  await expect(rail).toBeVisible();
+
+  const metrics = await rail.evaluate((element) => {
+    const styles = window.getComputedStyle(element);
+    const firstList = element.querySelector('.filter-list');
+    const listStyles = firstList ? window.getComputedStyle(firstList) : null;
+    return {
+      clientHeight: element.clientHeight,
+      overflowY: styles.overflowY,
+      scrollHeight: element.scrollHeight,
+      railScrollbarColor: styles.scrollbarColor,
+      railScrollbarWidth: styles.scrollbarWidth,
+      listScrollbarColor: listStyles?.scrollbarColor,
+      listScrollbarWidth: listStyles?.scrollbarWidth,
+      viewportHeight: window.innerHeight,
+    };
+  });
+
+  expect(metrics.overflowY).toBe('auto');
+  expect(metrics.scrollHeight).toBeGreaterThan(metrics.clientHeight);
+  expect(metrics.clientHeight).toBeLessThan(metrics.viewportHeight);
+  expect(metrics.railScrollbarWidth).toBe('thin');
+  expect(metrics.listScrollbarWidth).toBe('thin');
+  expect(metrics.railScrollbarColor).not.toBe('auto');
+  expect(metrics.listScrollbarColor).not.toBe('auto');
+});
+
 test('detail page renders metadata and private file links', async ({ page }) => {
  await page.goto('/hack/radical-red/');