create-tanqory-theme 0.0.0-stage → 0.2.3

package/templates/nova/tests/add-refused-no-success.test.tsx

@@ -0,0 +1,193 @@
+/**
+ * A cart add the store refused never says Added. The platform's `cart.add` resolves `false` (never
+ * rejects) and has already toasted why (the add-to-cart limit, theme-abi Cart-1). The buy button
+ * goes straight back to its normal label: no "✓ Added" / "เพิ่มแล้ว", not even for a frame. The
+ * success path still says Added, so the watch below is known to see it.
+ */
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it } from 'vitest'
+import { setThemeBundle } from '@tanqory/theme-kit/runtime'
+import { sectionModules } from '@tanqory/theme-kit/runtime'
+import { registerSections } from '@tanqory/theme-kit/runtime'
+import { DataProvider } from '@tanqory/theme-kit/runtime'
+import { ThemeProvider } from '@tanqory/theme-kit/runtime'
+import { localeStrings } from '@tanqory/theme-kit/runtime'
+import { defaultsOf, useThemeActions } from '@tanqory/theme-kit'
+import { bundle } from '../lib/bundle'
+import { AbiShell } from '@tanqory/theme-kit/runtime'
+import { AbiCartProvider } from '@tanqory/theme-kit/runtime'
+import type { AbiRemote, WireEnvelope } from '@tanqory/theme-kit/runtime'
+import type { PageData } from '@tanqory/theme-kit/runtime'
+import { createDataApi } from '@tanqory/theme-kit/runtime'
+import { locationOf } from '@tanqory/theme-kit/runtime'
+import { AddToCart } from '../src/components/commerce/AddToCart'
+import { ProductDetails } from '../src/sections/ProductDetails/ProductDetails'
+import { productDetailsSchema } from '../src/sections/ProductDetails/schema'
+import { FeaturedProduct } from '../src/sections/FeaturedProduct/FeaturedProduct'
+import { featuredProductSchema } from '../src/sections/FeaturedProduct/schema'
+import { ShopTheLook } from '../src/sections/ShopTheLook/ShopTheLook'
+import { shopTheLookSchema } from '../src/sections/ShopTheLook/schema'
+import * as fx from './fixtures/index'
+import * as sc from './support/story-content'
+
+setThemeBundle(bundle)
+registerSections(Object.values(sectionModules()).map((m) => m.default))
+
+const LOCALES = Object.fromEntries(
+  Object.entries(bundle.locales).map(([path, mod]) => [path.match(/\/([^/]+)\.json$/)?.[1] ?? 'en', (mod as { default: Record<string, string> }).default]),
+)
+
+const PAGE_DATA = {
+  route: 'product',
+  shop: { name: 'Demo', description: null, brand: null, policies: {}, primaryDomain: { host: 'demo.example', url: 'https://demo.example', sslEnabled: true } },
+  menus: {}, products: {}, collections: {}, collectionList: null, pages: {}, blogs: {}, articles: {},
+  search: null, recommendations: {}, policyHandle: null, accountUrls: null, cart: null,
+  localization: { country: { isoCode: 'US', name: 'United States', currency: { isoCode: 'USD', name: 'US Dollar', symbol: '$' } }, language: { isoCode: 'EN', name: 'English' }, availableCountries: [], availableLanguages: [] },
+  signedIn: null, unresolved: [], routeMissing: false,
+} as unknown as PageData
+
+const money = (amount: string) => ({ amount, currencyCode: 'USD' })
+const LINE = { id: 'l1', quantity: 2, cost: { subtotalAmount: money('24.00'), totalAmount: money('24.00') }, attributes: {},
+  merchandise: { id: 'v1', title: 'Default Title', availableForSale: true, price: money('12.00'), selectedOptions: [], image: null, product: { id: 'p1', handle: 'mug', title: 'Mug', featuredImage: null } } }
+const CART = { id: 'c1', version: 1, checkoutUrl: '/checkout/t1', totalQuantity: 2, note: null, discountCodes: [], cost: { subtotalAmount: money('24.00'), totalAmount: money('24.00') }, lines: [LINE] }
+
+const refused = (refusal?: unknown): WireEnvelope<unknown> => ({ ok: true, data: { ok: false, reason: 'invalid', ...(refusal ? { refusal } : {}) }, dataVersion: 'd1' })
+const LIMIT_2 = { code: 'cart_limit_exceeded', maxQuantity: 2 }
+const accepted: WireEnvelope<unknown> = { ok: true, data: { ok: true, cart: { ...CART, version: 2, totalQuantity: 3, lines: [{ ...LINE, quantity: 3 }] } }, dataVersion: 'd2' }
+
+function remoteOf(answer: () => WireEnvelope<unknown> | Promise<WireEnvelope<unknown>>): AbiRemote {
+  return { data: async () => CART, action: async () => answer() }
+}
+
+/** The buy box's wiring (ProductDetails' data binding): the button's onAdd is the platform's cart.add. */
+function Buy(): JSX.Element {
+  const actions = useThemeActions()
+  return <AddToCart onAdd={() => actions.cart.add('v1', 1)} />
+}
+
+function mount(remote: AbiRemote, ui = 'en') {
+  return render(
+    <DataProvider value={createDataApi(PAGE_DATA, null)}>
+      <ThemeProvider settings={{}} locale={localeStrings(ui, LOCALES)}>
+        <AbiCartProvider initial={CART as never} remote={remote}>
+          <AbiShell location={locationOf('https://demo.example/products/mug', {})} locale={ui} settings={{}} preview={false}>
+            <Buy />
+          </AbiShell>
+        </AbiCartProvider>
+      </ThemeProvider>
+    </DataProvider>,
+  )
+}
+
+/** Every state and label the buy buttons ever render, frame by frame (catches a transient Added). */
+function watchButtons(): { states: string[]; labels: string[]; stop: () => void } {
+  const states: string[] = []
+  const labels: string[] = []
+  const read = () => {
+    for (const el of document.querySelectorAll('.nv-atc')) {
+      states.push(el.getAttribute('data-state') ?? '')
+      labels.push(el.querySelector('button')?.textContent?.trim() ?? '')
+    }
+  }
+  read()
+  const obs = new MutationObserver(read)
+  obs.observe(document.body, { subtree: true, childList: true, attributes: true, characterData: true })
+  return { states, labels, stop: () => obs.disconnect() }
+}
+
+const toastTexts = () => [...document.querySelectorAll('.nv-toast__title')].map((e) => e.textContent?.replace(/\s+/g, ' ').trim() ?? '')
+
+let watch: ReturnType<typeof watchButtons> | null = null
+afterEach(() => {
+  watch?.stop()
+  watch = null
+})
+
+async function click(el: HTMLElement) {
+  await act(async () => {
+    fireEvent.click(el)
+    // let the add, its toast and every state change settle
+    for (let i = 0; i < 5; i++) await Promise.resolve()
+  })
+}
+
+describe('a refused add never says Added (full ABI stack)', () => {
+  for (const [ui, label, added, reason] of [
+    ['en', 'Add to cart', 'Added', 'You can buy up to 2 of this item.'],
+    ['th', 'เพิ่มลงตะกร้า', 'เพิ่มแล้ว', 'ซื้อสินค้านี้ได้สูงสุด 2 ชิ้น'],
+  ] as const) {
+    it(`over the limit (${ui}): back to "${label}", the toast says why, "${added}" never renders`, async () => {
+      mount(remoteOf(() => refused(LIMIT_2)), ui)
+      const button = screen.getByRole('button', { name: label })
+      watch = watchButtons()
+      await click(button)
+      expect(watch.states).not.toContain('added')
+      expect(watch.labels.some((l) => l.includes(added))).toBe(false)
+      expect(document.querySelector('.nv-atc')?.getAttribute('data-state')).toBe('idle')
+      expect(button.textContent?.trim()).toBe(label)
+      expect(toastTexts()).toContain(reason)
+      // one error display: the toast, not the button's own "Couldn't add" line as well
+      expect(document.querySelector('.nv-atc__error')).toBeNull()
+    })
+  }
+
+  it('refused without a reason: the generic toast, the button back to normal, never Added', async () => {
+    mount(remoteOf(() => refused()))
+    watch = watchButtons()
+    await click(screen.getByRole('button', { name: 'Add to cart' }))
+    expect(watch.states).not.toContain('added')
+    expect(document.querySelector('.nv-atc')?.getAttribute('data-state')).toBe('idle')
+    expect(toastTexts()).toContain("Couldn't add. Try again.")
+  })
+
+  it('a platform that cannot be reached (cart.add resolves false): never Added', async () => {
+    mount(remoteOf(() => ({ ok: false, error: { code: 'unavailable', requestId: 'r1' } }) as WireEnvelope<unknown>))
+    watch = watchButtons()
+    await click(screen.getByRole('button', { name: 'Add to cart' }))
+    expect(watch.states).not.toContain('added')
+    expect(document.querySelector('.nv-atc')?.getAttribute('data-state')).toBe('idle')
+  })
+
+  it('an add that goes through still says Added (the watch sees it)', async () => {
+    mount(remoteOf(() => accepted))
+    watch = watchButtons()
+    await click(screen.getByRole('button', { name: 'Add to cart' }))
+    expect(watch.states).toContain('added')
+    expect(toastTexts()).toEqual([])
+  })
+})
+
+describe('every buy button passes the result through', () => {
+  const refusedAdd = async () => false
+
+  it('product details (buy box and sticky bar)', async () => {
+    const product = fx.merchDuvet
+    const variant = product.variants.find((v) => v.available)!
+    render(<ProductDetails {...defaultsOf(productDetailsSchema)} product={product} blocks={[{ type: 'add-to-cart' }]} initialVariantId={variant.id} onAddToCart={refusedAdd} />)
+    watch = watchButtons()
+    for (const button of screen.getAllByRole('button', { name: 'Add to cart' })) await click(button)
+    expect(watch.states.length).toBeGreaterThan(0)
+    expect(watch.states).not.toContain('added')
+    expect(watch.labels.some((l) => l.includes('Added'))).toBe(false)
+  })
+
+  it('featured product', async () => {
+    render(<FeaturedProduct {...defaultsOf(featuredProductSchema)} product={fx.merchPourOver} onAddToCart={refusedAdd} />)
+    watch = watchButtons()
+    await click(screen.getByRole('button', { name: 'Add to cart' }))
+    expect(watch.states).not.toContain('added')
+    expect(document.querySelector('.nv-atc')?.getAttribute('data-state')).toBe('idle')
+  })
+
+  it('shop the look: Add all never reports the look added when an add was refused', async () => {
+    const hotspots = sc.storyHotspots
+    render(<ShopTheLook {...defaultsOf(shopTheLookSchema)} image={sc.storyLookImage} hotspots={hotspots} onAddAll={async (ps) => ps.map((_, i) => i !== 0)} />)
+    await click(screen.getByRole('button', { name: /add all to cart/i }))
+    expect(document.querySelector('.nv-look__message')?.textContent).toBe('')
+
+    // all accepted: the summary as before
+    const { container } = render(<ShopTheLook {...defaultsOf(shopTheLookSchema)} image={sc.storyLookImage} hotspots={hotspots} onAddAll={async (ps) => ps.map(() => true)} />)
+    await click(container.querySelector<HTMLElement>('.nv-look__all button')!)
+    expect(container.querySelector('.nv-look__message')?.textContent).toMatch(/added/)
+  })
+})

package/templates/nova/tests/architecture.test.ts

@@ -0,0 +1,63 @@
+import { readdirSync, readFileSync, statSync } from 'node:fs'
+import { join } from 'node:path'
+import { describe, expect, it } from 'vitest'
+import { checkArchitecture } from './architecture'
+
+describe('architecture: dependencies flow downward', () => {
+  const report = checkArchitecture(join(__dirname, '../src'))
+
+  it('every source file belongs to a layer', () => expect(report.unclassified).toEqual([]))
+  it('no lower layer imports a higher one', () => {
+    expect(report.violations.map((v) => `${v.fromLayer} → ${v.toLayer}: ${v.from} → ${v.to}`)).toEqual([])
+  })
+  it('no import cycles', () => expect(report.cycles.map((c) => c.join(' → '))).toEqual([]))
+  it('covers the whole tree', () => expect(report.edges).toBeGreaterThan(100))
+})
+
+describe('the architecture gate catches what it claims to', () => {
+  it('flags an upward import and the cycle it creates', async () => {
+    const { mkdtempSync, mkdirSync, writeFileSync } = await import('node:fs')
+    const { tmpdir } = await import('node:os')
+    const root = mkdtempSync(join(tmpdir(), 'nova-arch-'))
+    mkdirSync(join(root, 'components/base'), { recursive: true })
+    mkdirSync(join(root, 'sections'))
+    writeFileSync(join(root, 'components/base/Button.tsx'), "import { Header } from '../../sections/Header'\nexport const Button = Header\n")
+    writeFileSync(join(root, 'sections/Header.tsx'), "import { Button } from '../components/base/Button'\nexport const Header = Button\n")
+    const r = checkArchitecture(root)
+    expect(r.violations).toEqual([{ from: 'components/base/Button.tsx', to: 'sections/Header.tsx', fromLayer: 'base', toLayer: 'sections' }])
+    expect(r.cycles.length).toBe(1)
+  })
+})
+
+/**
+ * Section vs block vs component — by definition, not by folder name alone:
+ *   section    a page-level unit the MERCHANT adds; persisted settings (kind 'section')
+ *   block      a unit the merchant adds INSIDE a section; persisted settings (kind 'block')
+ *   component  a building part developers compose; props only, NO merchant schema
+ * Styles, components (outside a blocks/ folder) and layouts must never declare
+ * merchant settings.
+ */
+describe('section · block · component boundaries', () => {
+  const src = join(__dirname, '../src')
+  const files: string[] = []
+  const walk = (d: string) => {
+    for (const n of readdirSync(d)) {
+      const p = join(d, n)
+      if (statSync(p).isDirectory()) walk(p)
+      else if (/\.tsx?$/.test(n) && !/\.(stories|test|typetest)\.tsx?$/.test(n)) files.push(p.slice(src.length + 1))
+    }
+  }
+  walk(src)
+  const kindOf = (f: string) => /defineSchema\(\s*\{\s*kind:\s*'(section|block|global)'/.exec(readFileSync(join(src, f), 'utf8'))?.[1]
+
+  it('every section schema lives in sections/', () => expect(files.filter((f) => kindOf(f) === 'section' && !f.startsWith('sections/'))).toEqual([]))
+  it('no theme-setting (global) schema lives in src/ — theme settings are config/', () => expect(files.filter((f) => kindOf(f) === 'global')).toEqual([]))
+  it('every block schema lives in a blocks/ folder', () => expect(files.filter((f) => kindOf(f) === 'block' && !/(^|\/)blocks\//.test(f))).toEqual([]))
+  it('styles, components and layouts declare no merchant settings (blocks/ aside)', () => {
+    const lower = /^(styles|components|layouts)\//
+    expect(files.filter((f) => lower.test(f) && !/(^|\/)blocks\//.test(f) && /defineSchema\(/.test(readFileSync(join(src, f), 'utf8')))).toEqual([])
+  })
+  it('every section schema is the schema.ts of its own folder, sections/<Name>/', () => {
+    expect(files.filter((f) => kindOf(f) === 'section' && !/^sections\/[A-Z]\w+\/schema\.ts$/.test(f))).toEqual([])
+  })
+})

package/templates/nova/tests/architecture.ts

@@ -0,0 +1,160 @@
+/**
+ * The library's dependency rules, as data + a checker (used by
+ * architecture.test.ts, and runnable against any source tree).
+ *
+ *   STYLES → COMPONENTS → SECTIONS → LAYOUTS
+ *
+ *   styles/                    tokens, NovaProvider, icons, strings — imports nothing but types
+ *   components/base/           the base building blocks (button, input, tabs…)
+ *   components/states/media/   the Nova 14 media placeholder system
+ *   components/states/         loading · empty · error · unavailable · editor setup (may use media)
+ *   components/<family>/       content · commerce · navigation · forms — compose base + states
+ *   components/overlays/       modal, drawer, popover… — compose components
+ *   components/listing/        the product listing (grid + filter drawer/modal) — composes overlays
+ *   <any>/blocks/              merchant-addable blocks (persisted schemas). A block used by one
+ *                              section lives in that section's folder; a reusable one in components/
+ *   sections/<Name>/           merchant-composable sections: blocks + components (+ the overlay
+ *                              they own, header → MobileNavDrawer); sections/data.ts = binding helpers
+ *   layouts/                   the page layout around the sections (never in the Add section picker)
+ *
+ * A lower layer never imports a higher one — components never import sections,
+ * sections never import layouts — and there are no import cycles.
+ */
+import { readFileSync, readdirSync, statSync } from 'node:fs'
+import { dirname, join, normalize, relative } from 'node:path'
+
+export type Layer =
+  | 'styles'
+  | 'types'
+  | 'contracts'
+  | 'base'
+  | 'media'
+  | 'states'
+  | 'components'
+  | 'overlays'
+  | 'composites'
+  | 'blocks'
+  | 'sections'
+  | 'layouts'
+  | 'registry'
+  | 'adapters'
+  | 'fixtures'
+  | 'tooling'
+
+const BELOW_SECTIONS = ['blocks', 'composites', 'components', 'overlays', 'styles', 'base', 'media', 'states', 'contracts', 'types'] as const
+
+/** What each layer may import (besides itself). */
+export const ALLOWED: Record<Layer, readonly Layer[]> = {
+  styles: ['types'],
+  types: [],
+  contracts: ['types'],
+  base: ['styles', 'types'],
+  media: ['styles', 'base', 'types'],
+  states: ['styles', 'base', 'media', 'types'],
+  components: ['styles', 'base', 'media', 'states', 'types'],
+  overlays: ['components', 'styles', 'base', 'media', 'states', 'types'],
+  composites: ['components', 'overlays', 'styles', 'base', 'media', 'states', 'types'],
+  blocks: ['composites', 'components', 'overlays', 'styles', 'base', 'media', 'states', 'contracts', 'types'],
+  sections: BELOW_SECTIONS,
+  layouts: ['sections', ...BELOW_SECTIONS],
+  registry: ['sections', ...BELOW_SECTIONS],
+  adapters: ['registry', 'sections', ...BELOW_SECTIONS],
+  fixtures: ['media', 'types'],
+  tooling: [],
+}
+
+/** Stories, tests, the contract registry, Storybook helpers and the status ledger may import anything. */
+function isTooling(rel: string): boolean {
+  return /\.cases\.tsx?$|\.test\.tsx?$|\.typetest\.ts$/.test(rel) || /^test\//.test(rel) || rel === 'contracts/registry.ts' || rel === 'status.ts' || rel === 'index.ts'
+}
+
+export type Classifier = (rel: string) => Layer | null
+
+/** The current tree: the folder names the layer. */
+export const classify: Classifier = (rel) => {
+  if (isTooling(rel)) return 'tooling'
+  if (/(^|\/)blocks\//.test(rel)) return 'blocks'
+  if (rel.startsWith('components/base/')) return 'base'
+  if (rel.startsWith('components/states/media/')) return 'media'
+  if (rel.startsWith('components/states/')) return 'states'
+  if (rel.startsWith('components/overlays/')) return 'overlays'
+  if (rel.startsWith('components/listing/')) return 'composites'
+  const top = rel.split('/')[0]
+  const layers: Layer[] = ['styles', 'types', 'contracts', 'components', 'sections', 'layouts', 'registry', 'adapters', 'fixtures']
+  return (layers as string[]).includes(top) ? (top as Layer) : null
+}
+
+export interface Violation {
+  from: string
+  to: string
+  fromLayer: Layer
+  toLayer: Layer
+}
+
+export interface ArchitectureReport {
+  files: number
+  edges: number
+  violations: Violation[]
+  cycles: string[][]
+  unclassified: string[]
+}
+
+const IMPORT = /(?:import|export)\s+(?:type\s+)?(?:[^'";]*?\sfrom\s+)?['"](\.{1,2}\/[^'"]+)['"]/g
+
+function walk(dir: string, root: string, out: string[] = []): string[] {
+  for (const name of readdirSync(dir)) {
+    const p = join(dir, name)
+    if (statSync(p).isDirectory()) walk(p, root, out)
+    else if (/\.(ts|tsx)$/.test(name)) out.push(relative(root, p))
+  }
+  return out
+}
+
+function resolve(files: Set<string>, from: string, spec: string): string | null {
+  const base = normalize(join(dirname(from), spec))
+  for (const ext of ['', '.ts', '.tsx', '/index.ts', '/index.tsx']) if (files.has(base + ext)) return base + ext
+  return null
+}
+
+export function checkArchitecture(root: string, classifier: Classifier = classify): ArchitectureReport {
+  const list = walk(root, root)
+  const files = new Set(list)
+  const graph = new Map<string, string[]>()
+  const violations: Violation[] = []
+  const unclassified: string[] = []
+  let edges = 0
+  for (const f of list) {
+    const fromLayer = classifier(f)
+    if (!fromLayer) unclassified.push(f)
+    const src = readFileSync(join(root, f), 'utf8')
+    const deps: string[] = []
+    for (const m of src.matchAll(IMPORT)) {
+      const to = resolve(files, f, m[1])
+      if (!to) continue
+      deps.push(to)
+      edges++
+      const toLayer = classifier(to)
+      if (!fromLayer || !toLayer || fromLayer === 'tooling' || toLayer === fromLayer) continue
+      if (!ALLOWED[fromLayer].includes(toLayer)) violations.push({ from: f, to, fromLayer, toLayer })
+    }
+    graph.set(f, deps)
+  }
+  // Cycles among runtime files (tooling excluded: a story importing its component is not a cycle).
+  const cycles: string[][] = []
+  const state = new Map<string, 0 | 1 | 2>()
+  const stack: string[] = []
+  const visit = (n: string) => {
+    state.set(n, 1)
+    stack.push(n)
+    for (const d of graph.get(n) ?? []) {
+      if (classifier(d) === 'tooling') continue
+      const s = state.get(d) ?? 0
+      if (s === 1) cycles.push([...stack.slice(stack.indexOf(d)), d])
+      else if (s === 0) visit(d)
+    }
+    stack.pop()
+    state.set(n, 2)
+  }
+  for (const f of list) if (classifier(f) !== 'tooling' && !state.get(f)) visit(f)
+  return { files: list.length, edges, violations, cycles, unclassified }
+}

package/templates/nova/tests/audit-guards.test.ts

@@ -0,0 +1,31 @@
+/**
+ * Guards for the things a green gate did not catch (theme audit, 2026-09-25):
+ * a section root that forgets the shared props, an interface string that
+ * bypasses the locale layer, and the editor's section preview answering on
+ * the published storefront.
+ */
+import { readFileSync, readdirSync } from 'node:fs'
+import { join } from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+const ROOT = join(import.meta.dirname ?? __dirname, '..')
+const read = (p: string) => readFileSync(join(ROOT, p), 'utf8')
+/** Every .ts(x) under a directory, recursively — fixtures and test cases excluded. */
+const list = (dir: string): string[] =>
+  readdirSync(join(ROOT, dir), { withFileTypes: true }).flatMap((e) =>
+    e.isDirectory()
+      ? e.name === 'fixtures' || e.name === 'test' ? [] : list(`${dir}/${e.name}`)
+      : /\.tsx?$/.test(e.name) && !e.name.includes('.test.') ? [`${dir}/${e.name}`] : [],
+  )
+
+describe('interface strings come from the string maps', () => {
+  it('no aria-label or placeholder is a literal English string', () => {
+    const hits: string[] = []
+    for (const f of list('src')) {
+      for (const m of read(f).matchAll(/(aria-label|placeholder)="[A-Z][^"]*"/g)) hits.push(`${f}: ${m[0]}`)
+    }
+    expect(hits).toEqual([])
+  })
+})
+
+// The server entry is entry.abi.tsx (Theme ABI v2); its behaviour is covered by tests/abi-*.test.tsx.

package/templates/nova/tests/bundle-split.test.ts

@@ -0,0 +1,29 @@
+/**
+ * lib/bundle.ts (server, tests) and lib/bundle.client.ts (browser) share lib/bundle-core.ts. The browser bundle
+ * carries only the 404 template, and the locales are default imports: these keep the split honest.
+ */
+import { readdirSync } from 'node:fs'
+import { join } from 'node:path'
+import { describe, expect, it } from 'vitest'
+import { bundle } from '../lib/bundle'
+import { clientBundle } from '../lib/bundle.client'
+import { LOCALE_FILES } from '../lib/bundle-core'
+
+const ROOT = join(__dirname, '..')
+
+describe('theme bundle split', () => {
+  it('lists every locales/*.json file, with its contents', () => {
+    const onDisk = readdirSync(join(ROOT, 'locales')).filter((f) => f.endsWith('.json')).map((f) => `../locales/${f}`).sort()
+    expect(Object.keys(LOCALE_FILES).sort()).toEqual(onDisk)
+    for (const k of onDisk) expect(Object.keys(LOCALE_FILES[k]!.default as object).length).toBeGreaterThan(100)
+  })
+
+  it('the browser bundle is the server bundle with only the 404 template', () => {
+    const { templates: serverTemplates, ...serverRest } = bundle
+    const { templates: clientTemplates, ...clientRest } = clientBundle
+    expect(clientRest).toEqual(serverRest)
+    expect(Object.keys(clientTemplates)).toEqual(['../templates/404.json'])
+    expect(clientTemplates['../templates/404.json']!.default).toEqual(serverTemplates['../templates/404.json']!.default)
+    expect(Object.keys(serverTemplates).length).toBeGreaterThan(10)
+  })
+})