test(home): rewrite view and loader tests for new layout

Author: danielnaab

docs/views/home.md

@@ -2,25 +2,25 @@
 
 ## Purpose
 
-First impression for every visitor. Explains what Flexion Labs is, highlights featured labs, grounds the pitch with real numbers, and hands visitors off to the right next step.
+First impression for every visitor. Introduces Flexion Labs with a hero, showcases the three Flexion Solutions offerings as featured labs, and hands visitors off to the commitment and about pages.
 
 ## Inputs
 
-- `catalog` — the merged catalog.
-- `hero` — `{ hero, intro }` read from `content/home.md` front-matter.
+- `hero` — `{ title, subtitle, intro, learnMore }` read from `content/home.md` front-matter. `intro` is pre-rendered HTML; the others are strings.
+- `featured` — array of `FeaturedLab` loaded from `content/featured/*.md` sorted by `order` ascending.
 - `config` — base path, build time.
 
 ## Behavior
 
-- **When the page loads, then** the hero statement is the `<h1>`, followed by the intro paragraph.
-- **When there are repos flagged `featured: true` and not hidden, then** one card is rendered per featured repo in the order they appear in the catalog.
-- **When there are no featured repos, then** the featured section renders its heading and an empty grid (acceptable for v1; may be hardened later).
-- **When the catalog has N non-hidden repos, then** the stats strip renders `N public projects`, the count of `tier: active` repos as `actively maintained`, and the count of distinct languages.
-- **When the page loads, then** three audience paths link to `/work/`, `/commitment/`, and `/about/`.
+- **When the page loads, then** the hero renders the `title` as `<h1>`, the `subtitle` as a tagline paragraph, and the rendered `intro` HTML as the intro block.
+- **When there are featured labs, then** one `LabCard` is rendered per lab in `order` ascending.
+- **When the page loads, then** a "Learn more" section renders two teasers linking to `/commitment/` and `/about/` respectively.
+- **The stats strip is not rendered.** The catalog directory is disabled in this pass.
 
 ## Fallbacks
 
-- None — every section renders; empty collections produce empty grids.
+- If `content/featured/` is empty or missing, the featured section renders its heading with no cards.
+- If `subtitle` or `intro` is empty, that element is omitted.
 
 ## Tests
 

tests/build/hero.test.ts

@@ -4,16 +4,48 @@ import { writeFileSync, mkdtempSync, mkdirSync } from 'node:fs'
 import { tmpdir } from 'node:os'
 import { join } from 'node:path'
 
+function makeRoot(home: string): string {
+  const root = mkdtempSync(join(tmpdir(), 'flexion-labs-'))
+  mkdirSync(join(root, 'content'), { recursive: true })
+  writeFileSync(join(root, 'content', 'home.md'), home)
+  return root
+}
+
 describe('loadHero', () => {
-  test('reads hero and intro from content/home.md front-matter', async () => {
-    const root = mkdtempSync(join(tmpdir(), 'flexion-labs-'))
-    mkdirSync(join(root, 'content'), { recursive: true })
-    writeFileSync(
-      join(root, 'content', 'home.md'),
-      '---\nhero: Test hero.\nintro: Test intro.\n---\n',
+  test('reads title, subtitle, intro (rendered) and learnMore from front-matter', async () => {
+    const root = makeRoot(
+      [
+        '---',
+        'title: Site Title',
+        'subtitle: The subtitle',
+        'intro: |',
+        '  First paragraph with a [link](https://example.com/).',
+        '',
+        '  Second paragraph.',
+        'learnMore:',
+        '  commitment: Commitment teaser.',
+        '  about: About teaser.',
+        '---',
+        '',
+      ].join('\n'),
     )
     const hero = await loadHero(root)
-    expect(hero.hero).toBe('Test hero.')
-    expect(hero.intro).toBe('Test intro.')
+    expect(hero.title).toBe('Site Title')
+    expect(hero.subtitle).toBe('The subtitle')
+    expect(hero.intro).toContain('<a href="https://example.com/">link</a>')
+    expect(hero.intro).toContain('First paragraph')
+    expect(hero.intro).toContain('Second paragraph')
+    expect(hero.learnMore.commitment).toBe('Commitment teaser.')
+    expect(hero.learnMore.about).toBe('About teaser.')
+  })
+
+  test('falls back to defaults when front-matter is empty', async () => {
+    const root = makeRoot('---\n---\n')
+    const hero = await loadHero(root)
+    expect(hero.title).toBe('Flexion Labs')
+    expect(hero.subtitle).toBe('')
+    expect(hero.intro).toBe('')
+    expect(hero.learnMore.commitment).toBe('')
+    expect(hero.learnMore.about).toBe('')
   })
 })

tests/views/home.test.tsx

@@ -1,47 +1,93 @@
 import { describe, test, expect } from 'bun:test'
 import { renderToHtml } from '../../src/build/render'
 import { Home } from '../../src/pages/home'
-import { fixtureCatalog } from '../fixtures/catalog'
+import type { FeaturedLab } from '../../src/build/featured'
 
-const config = { basePath: '/', buildTime: '2026-04-27T12:00:00Z' }
-const heroContent = {
-  hero: 'Public infrastructure, in the open.',
-  intro: 'Flexion Labs gathers our open source work in one place.',
+const config = { basePath: '/', buildTime: '2026-05-01T12:00:00Z' }
+
+const hero = {
+  title: 'Flexion Labs',
+  subtitle: 'Solutions for the public, in the open',
+  intro: '<p>Flexion is committed to <a href="https://flexion.us/contact-us/">reach out to us</a> excellence.</p>',
+  learnMore: {
+    commitment: 'Flexion is open by default.',
+    about: 'We help organizations stay future-ready.',
+  },
 }
 
+const featured: FeaturedLab[] = [
+  {
+    title: 'Forms Lab',
+    tagline: 'Digitize forms to create modern, accessible experiences for public outreach.',
+    order: 1,
+    links: [
+      { label: 'Demo (Forms Platform)', url: 'https://pp4cc7kwbf.us-east-1.awsapprunner.com/' },
+      { label: 'GitHub repository — Forms Platform', url: 'https://github.com/flexion/forms' },
+    ],
+  },
+  {
+    title: 'Messaging Lab',
+    tagline: 'Text messaging services to deliver critical updates to the people you serve.',
+    order: 2,
+    links: [
+      { label: 'GitHub repository', url: 'https://github.com/flexion/flexion-notify' },
+    ],
+  },
+  {
+    title: 'Document Extractor Lab',
+    tagline: 'Accurately extract data from PDFs and images for faster application processing.',
+    order: 3,
+    links: [
+      { label: 'GitHub repository', url: 'https://github.com/flexion/document-extractor' },
+    ],
+  },
+]
+
 describe('Home', () => {
-  test('renders the hero statement as the h1', async () => {
-    const html = await renderToHtml(
-      <Home catalog={fixtureCatalog} hero={heroContent} config={config} />,
-    )
-    expect(html).toMatch(/<h1[^>]*>Public infrastructure, in the open\.<\/h1>/)
+  test('renders the site title as the h1', async () => {
+    const html = await renderToHtml(<Home hero={hero} featured={featured} config={config} />)
+    expect(html).toMatch(/<h1[^>]*>Flexion Labs<\/h1>/)
+  })
+
+  test('renders the subtitle', async () => {
+    const html = await renderToHtml(<Home hero={hero} featured={featured} config={config} />)
+    expect(html).toContain('Solutions for the public, in the open')
   })
 
-  test('renders one card per featured entry', async () => {
-    const html = await renderToHtml(
-      <Home catalog={fixtureCatalog} hero={heroContent} config={config} />,
-    )
-    expect(html).toContain('messaging')
-    expect(html).toContain('forms')
-    expect(html).toContain('document-extractor')
-    expect(html).not.toContain('old-prototype')
+  test('renders the intro markdown as HTML including the reach-out link', async () => {
+    const html = await renderToHtml(<Home hero={hero} featured={featured} config={config} />)
+    expect(html).toContain('href="https://flexion.us/contact-us/"')
   })
 
-  test('renders quick stats reflecting the catalog', async () => {
-    const html = await renderToHtml(
-      <Home catalog={fixtureCatalog} hero={heroContent} config={config} />,
-    )
-    // 7 total repos in the fixture; 3 active.
-    expect(html).toMatch(/7<\/strong>\s*public projects/)
-    expect(html).toMatch(/3<\/strong>\s*actively maintained/)
+  test('renders one LabCard per featured lab in order', async () => {
+    const html = await renderToHtml(<Home hero={hero} featured={featured} config={config} />)
+    const indexOf = (s: string) => html.indexOf(s)
+    expect(indexOf('Forms Lab')).toBeGreaterThan(-1)
+    expect(indexOf('Messaging Lab')).toBeGreaterThan(-1)
+    expect(indexOf('Document Extractor Lab')).toBeGreaterThan(-1)
+    expect(indexOf('Forms Lab')).toBeLessThan(indexOf('Messaging Lab'))
+    expect(indexOf('Messaging Lab')).toBeLessThan(indexOf('Document Extractor Lab'))
   })
 
-  test('renders the three audience paths', async () => {
-    const html = await renderToHtml(
-      <Home catalog={fixtureCatalog} hero={heroContent} config={config} />,
-    )
-    expect(html).toContain('href="/work/"')
+  test('renders each labs links inside its card', async () => {
+    const html = await renderToHtml(<Home hero={hero} featured={featured} config={config} />)
+    expect(html).toContain('href="https://github.com/flexion/forms"')
+    expect(html).toContain('href="https://github.com/flexion/flexion-notify"')
+    expect(html).toContain('href="https://github.com/flexion/document-extractor"')
+  })
+
+  test('renders the Learn more section with commitment and about teasers', async () => {
+    const html = await renderToHtml(<Home hero={hero} featured={featured} config={config} />)
+    expect(html).toContain('Learn more')
+    expect(html).toContain('Our open source commitment')
+    expect(html).toContain('About Flexion')
     expect(html).toContain('href="/commitment/"')
     expect(html).toContain('href="/about/"')
   })
+
+  test('does not render the stats strip', async () => {
+    const html = await renderToHtml(<Home hero={hero} featured={featured} config={config} />)
+    expect(html).not.toContain('home-stats')
+    expect(html).not.toContain('public projects')
+  })
 })