feat(overview): create overview page / 创建总览页面 (#611)

Author: edwingao28

packages/app/cypress/component/header.cy.tsx

@@ -5,10 +5,22 @@ import { PathnameContext } from 'next/dist/shared/lib/hooks-client-context.share
 import { Header } from '@/components/header/header';
 import { ThemeProvider } from '@/components/ui/theme-provider';
 
+// Mounted outside the Next app shell; next-style-loader inserts the global
+// stylesheet before this anchor, so it must exist before the import below.
+const cssAnchor = document.createElement('noscript');
+cssAnchor.id = '__next_css__DO_NOT_USE__';
+document.head.append(cssAnchor);
+require('@/app/globals.css');
+
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 });
 
+/** Minimum touch target, per WCAG 2.5.8 and the `size-11` / `min-h-11` utilities. */
+const MIN_TOUCH_PX = 44;
+/** Tolerance for sub-pixel layout rounding. */
+const EPSILON = 0.5;
+
 function createMockRouter() {
   return {
     push: cy.stub(),
@@ -20,6 +32,10 @@ function createMockRouter() {
   };
 }
 
+function rectOf(selector: string) {
+  return cy.get(selector).then(($el) => $el[0].getBoundingClientRect());
+}
+
 describe('Header', () => {
   beforeEach(() => {
     const mockRouter = createMockRouter();
@@ -84,4 +100,87 @@ describe('Header', () => {
       cy.contains('a', 'Supporters').should('be.visible').and('have.attr', 'href', '/quotes');
     });
   });
+
+  describe('at 320x700', () => {
+    beforeEach(() => {
+      cy.viewport(320, 700);
+    });
+
+    it('hides the GitHub star control', () => {
+      cy.get('[data-testid="header-star-button"]').should('not.be.visible');
+    });
+
+    it('keeps the remaining controls inside the header bounds', () => {
+      cy.get('[data-testid="header"]').then(($header) => {
+        const bounds = $header[0].getBoundingClientRect();
+        const selectors = [
+          '[data-testid="header-brand"]',
+          '[data-testid="language-toggle"]',
+          '[data-testid="theme-toggle"]',
+          '[data-testid="mobile-menu-toggle"]',
+        ];
+        selectors.forEach((selector) => {
+          rectOf(selector).then((rect) => {
+            expect(rect.left, `${selector} left edge`).to.be.at.least(bounds.left - EPSILON);
+            expect(rect.right, `${selector} right edge`).to.be.at.most(bounds.right + EPSILON);
+          });
+        });
+      });
+    });
+
+    it('gives the brand and language controls a 44px touch height', () => {
+      ['[data-testid="header-brand"]', '[data-testid="language-toggle"]'].forEach((selector) => {
+        rectOf(selector).then((rect) => {
+          expect(rect.height, `${selector} height`).to.be.at.least(MIN_TOUCH_PX - EPSILON);
+        });
+      });
+    });
+
+    it('gives the icon controls a 44px touch target in both dimensions', () => {
+      ['[data-testid="theme-toggle"]', '[data-testid="mobile-menu-toggle"]'].forEach((selector) => {
+        rectOf(selector).then((rect) => {
+          expect(rect.width, `${selector} width`).to.be.at.least(MIN_TOUCH_PX - EPSILON);
+          expect(rect.height, `${selector} height`).to.be.at.least(MIN_TOUCH_PX - EPSILON);
+        });
+      });
+    });
+
+    it('does not overflow horizontally', () => {
+      cy.get('[data-testid="header"]').then(($header) => {
+        const header = $header[0];
+        expect(header.scrollWidth, 'header scrollWidth').to.be.at.most(header.clientWidth);
+      });
+    });
+
+    it('still opens the menu and exposes its links', () => {
+      cy.get('[data-testid="mobile-menu-toggle"]').click();
+      cy.get('[data-testid="mobile-menu"]').should('be.visible');
+      cy.get('[data-testid="mobile-menu"]').within(() => {
+        ['Home', 'Dashboard', 'Comparisons', 'Supporters', 'Datasets', 'Articles', 'About'].forEach(
+          (label) => {
+            cy.contains('a', label).should('be.visible');
+          },
+        );
+      });
+      cy.get('[data-testid="mobile-menu"] a').each(($link) => {
+        const rect = $link[0].getBoundingClientRect();
+        expect(rect.height, `${$link.text()} link height`).to.be.at.least(MIN_TOUCH_PX - EPSILON);
+      });
+    });
+
+    it('exposes the minecraft audio toggles in the mobile menu without overflowing', () => {
+      cy.get('[data-testid="theme-toggle"]').click();
+      cy.get('[data-testid="theme-toggle"]').click();
+      cy.get('html').should('have.class', 'minecraft');
+      cy.get('[data-testid="mobile-menu-toggle"]').click();
+      cy.get('[data-testid="mobile-menu"]').within(() => {
+        cy.get('button[aria-label="Mute music"]').should('be.visible');
+        cy.get('button[aria-label="Mute click sounds"]').should('be.visible');
+      });
+      cy.get('[data-testid="header"]').then(($header) => {
+        const header = $header[0];
+        expect(header.scrollWidth, 'header scrollWidth').to.be.at.most(header.clientWidth);
+      });
+    });
+  });
 });

packages/app/cypress/component/tab-nav.cy.tsx

@@ -48,13 +48,19 @@ describe('TabNav — unofficialrun URL preservation (issue #319)', () => {
 
   it('renders bare hrefs when the URL has no unofficialrun param', () => {
     mountTabNav({});
+    cy.get('[data-testid="tab-trigger-overview"]').should('have.attr', 'href', '/overview');
     cy.get('[data-testid="tab-trigger-evaluation"]').should('have.attr', 'href', '/evaluation');
     cy.get('[data-testid="tab-trigger-historical"]').should('have.attr', 'href', '/historical');
     cy.get('[data-testid="tab-trigger-calculator"]').should('have.attr', 'href', '/calculator');
   });
 
   it('appends unofficialruns to every tab href when the URL has the param', () => {
     mountTabNav({ search: '?unofficialruns=12345' });
+    cy.get('[data-testid="tab-trigger-overview"]').should(
+      'have.attr',
+      'href',
+      '/overview?unofficialruns=12345',
+    );
     cy.get('[data-testid="tab-trigger-evaluation"]').should(
       'have.attr',
       'href',

packages/app/cypress/e2e/navigation.cy.ts

@@ -10,6 +10,9 @@ describe('Chart Section Tabs — E2E', () => {
   });
 
   it('updates the URL path when switching tabs', () => {
+    cy.get('[data-testid="tab-trigger-overview"]').click();
+    cy.url().should('include', '/overview');
+
     cy.get('[data-testid="tab-trigger-evaluation"]').click();
     cy.url().should('include', '/evaluation');