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');
  it('renders the five spec tabs', () => {
    ['Slate', 'Terminal', 'Scan', 'Ledger', 'More'].forEach((label) => {
      expect(src).toContain(`'${label}'`);
    });
  });
  it('routes the primary tabs to real pages', () => {
    ['/dashboard', '/terminal', '/scan', '/ledger'].forEach((href) => expect(src).toContain(href));
  });
  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: 80px');
    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 / Terminal', () => {
    const urls = (manifest.shortcuts || []).map((s) => s.url);
    expect(urls).toContain('/dashboard');
    expect(urls).toContain('/scan');
    expect(urls).toContain('/terminal');
  });
  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'");
  });
});