vyndr/tests/unit/vyndrMobile.test.js

// VYNDR 2.0 — Phase F mobile parity (Session 37): 5-tab bar, More sheet,
// mobile CSS, PWA manifest/viewport. The manifest is required as JSON; the
// .tsx/.css are asserted against source text (plain-JS Jest, no transform).

const fs = require('fs');
const path = require('path');

const WEB = path.join(__dirname, '..', '..', 'web', 'src');
const read = (rel) => fs.readFileSync(path.join(WEB, rel), 'utf8');
const manifest = require('../../web/public/manifest.json');

describe('Phase F — BottomTabBar (5-tab spec)', () => {
  const src = read('components/BottomTabBar.tsx');
  // Session 57 (Phase 0) — Terminal tab retired (fabricated surface);
  // Explore holds its slot so the bar keeps 5 tabs.
  it('renders the five spec tabs', () => {
    ['Slate', 'Explore', 'Read', 'Ledger', 'More'].forEach((label) => {
      expect(src).toContain(`'${label}'`);
    });
  });
  it('routes the primary tabs to real pages', () => {
    ['/dashboard', '/explore', '/scan', '/ledger'].forEach((href) => expect(src).toContain(href));
  });
  it('does not link the retired /terminal surface', () => {
    expect(src).not.toContain('/terminal');
  });
  it('makes Scan the prominent (primary) action in grade-green', () => {
    expect(src).toContain('primary: true');
    expect(src).toContain("background: 'var(--g-a)'");
  });
  it('marks the active tab grade-green, inactive faint', () => {
    expect(src).toContain("'var(--g-a)'");
    expect(src).toContain("'var(--text-2)'");
  });
  it('respects the iOS safe area', () => {
    expect(src).toContain('env(safe-area-inset-bottom');
  });
  it('uses the mobile-only class so it hides on desktop', () => {
    expect(src).toContain("className=\"mobile-tab-bar\"");
  });
});

describe('Phase F — More bottom sheet', () => {
  const src = read('components/BottomTabBar.tsx');
  it('lists the secondary routes', () => {
    ['/compare', '/tracker', '/blog', '/invite', '/pricing', '/account', '/help', '/about', '/responsible-gambling'].forEach((href) =>
      expect(src).toContain(href),
    );
  });
  it('slides up with a dismissible backdrop', () => {
    expect(src).toContain('sheet-up');
    expect(src).toContain('rgba(6,6,11,.6)'); // backdrop
    expect(src).toContain('onClick={() => setMoreOpen(false)}'); // tap-to-dismiss
  });
  it('gives sheet items a ≥44px touch target', () => {
    expect(src).toContain('minHeight: 48');
  });
});

describe('Phase F — mobile CSS (globals.css)', () => {
  const css = read('app/globals.css');
  it('hides the tab bar at the desktop breakpoint', () => {
    expect(css).toMatch(/@media \(min-width: 768px\)[\s\S]*?\.mobile-tab-bar \{ display: none/);
  });
  it('pads main for the bottom bar on mobile with safe-area', () => {
    expect(css).toMatch(/@media \(max-width: 767px\)/);
    expect(css).toContain('env(safe-area-inset-bottom, 0px)');
  });
  it('shrinks the grade hero and stacks the terminal grid on mobile', () => {
    expect(css).toContain('.grade-hero { font-size: 74px');
    expect(css).toContain('.terminal-grid { grid-template-columns: 1fr');
  });
  it('enables horizontal scroll for book tables', () => {
    expect(css).toContain('.game-lines-grid');
    expect(css).toContain('overflow-x: auto');
  });
});

describe('Phase F — Nav mobile header', () => {
  it('retires the hamburger on mobile (tab bar owns nav)', () => {
    const src = read('components/Nav.tsx');
    expect(src).toMatch(/nav-mobile-toggle[\s\S]*?display: 'none'/);
  });
});

describe('Phase F — GradeResultCard mobile hook', () => {
  it('tags the grade letter with the grade-hero class', () => {
    expect(read('components/vyndr/GradeResultCard.tsx')).toContain('grade-hero');
  });
});

describe('Phase F — PWA manifest + viewport (§11)', () => {
  it('is a standalone PWA themed to the void', () => {
    expect(manifest.display).toBe('standalone');
    expect(manifest.theme_color.toLowerCase()).toBe('#06060b');
    expect(manifest.background_color.toLowerCase()).toBe('#06060b');
  });
  it('ships deep-link shortcuts for Slate / Scan / Ledger', () => {
    const urls = (manifest.shortcuts || []).map((s) => s.url);
    expect(urls).toContain('/dashboard');
    expect(urls).toContain('/scan');
    expect(urls).toContain('/ledger');
    expect(urls).not.toContain('/terminal'); // retired (Session 57, Phase 0)
  });
  it('declares its categories', () => {
    expect(manifest.categories).toContain('sports');
    expect(manifest.categories).toContain('productivity');
  });
  it('sets viewport-fit=cover for the notch', () => {
    expect(read('app/layout.tsx')).toContain("viewportFit: 'cover'");
  });
});

// ── Session 59 — work-order Phase 3 (mobile P0) + Phase 2 slate UX ──────────

describe('Phase 3.1 — the tab bar is the mobile nav EVERYWHERE except auth', () => {
  const src = read('components/BottomTabBar.tsx');
  it('does NOT hide on the landing (anon phones had zero navigation)', () => {
    const hideOn = src.match(/const HIDE_ON = new Set\(\[([^\]]*)\]\)/);
    expect(hideOn).toBeTruthy();
    expect(hideOn[1]).not.toContain("'/'");
    ['/login', '/signup', '/auth/callback'].forEach((p) => expect(hideOn[1]).toContain(p));
  });
});

describe('Phase 3.2 — overflow containment at 390px', () => {
  const css = read('app/globals.css');
  it('document never scrolls horizontally on phones', () => {
    expect(css).toMatch(/@media \(max-width: 767px\)[\s\S]*?html, body \{ overflow-x: hidden/);
  });
  it('venue drops first on phones (time/pitchers never truncate)', () => {
    expect(css).toContain('.gc-venue { display: none');
    expect(read('components/vyndr/GameCard.tsx')).toContain('className="gc-venue"');
  });
  it('book table collapses to a best-line summary with an expander below md', () => {
    expect(css).toContain('.gl-summary { display: none; }');
    expect(css).toContain('.gl-full:not(.gl-expanded) { display: none');
    const card = read('components/vyndr/GameCard.tsx');
    expect(card).toContain('gl-summary');
    expect(card).toContain('BOOKS {linesExpanded');
  });
});

describe('Phase 2.2 — card collapse (6-prop cap, ALL N READS)', () => {
  const card = read('components/vyndr/GameCard.tsx');
  it('caps visible graded props and sorts strips best-grade-first', () => {
    expect(card).toContain('MAX_VISIBLE_PROPS = 6');
    expect(card).toMatch(/sort\(\(a, b\) => stripBestRank\(a\) - stripBestRank\(b\)\)/);
  });
  it('offers the ALL N READS expander in place', () => {
    expect(card).toContain('ALL {collapsed.totalReads} READS →');
    expect(card).toContain('COLLAPSE ↑');
  });
});

describe('Phase 2.1 — sport tabs are THE filter, URL-driven', () => {
  const slate = read('components/Slate.tsx');
  it('reads and writes ?sport= on the URL', () => {
    expect(slate).toContain(".get('sport')"); // tabFromUrl reads the deep link
    expect(slate).toContain("url.searchParams.set('sport', t)");
    expect(slate).toContain('history.replaceState');
  });
  it('the dashboard has NO second tablist — it subscribes via onTabChange', () => {
    const dash = read('app/dashboard/page.tsx');
    expect(dash).toContain('onTabChange');
    expect(dash).not.toMatch(/role="tablist"\s+aria-label="Sport"/);
  });
});

describe('Phase 2.3 — honest waiting states', () => {
  it('awaiting props show the real next pipeline run, not passive mystery', () => {
    expect(read('components/vyndr/StatStrip.tsx')).toContain('nextRunLabelET');
    expect(read('app/dashboard/page.tsx')).toContain('nextRunLabelET');
  });
});