create-tanqory-theme 0.0.0-stage → 0.2.2

package/templates/nova/tests/abi-render.test.tsx

@@ -0,0 +1,178 @@
+/**
+ * Nova v3 under Theme ABI v2, end to end in one process: the real `render(request, ctx)` per page
+ * kind, then the real browser entry hydrating that HTML.
+ *
+ *   - every page answers with the redesigned sections, wrapped in `data-tq-node` (the editor bridge);
+ *   - no `style=""` attribute reaches the browser (the platform CSP has `style-src-attr 'none'`):
+ *     dynamic values are class rules in one hashed <style>, announced in `x-tq-csp-style-hash`;
+ *   - the browser hydrates with no React mismatch and writes no style attribute;
+ *   - an unknown product is a real 404, and so is a policy the store has not published.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { act } from 'react'
+import { render } from '../entry.abi'
+import { abiCtx, collection, menu, pageOf, product, serverHtml, type Store } from './support/abi-ctx'
+
+;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+
+const P = [product('linen-duvet', 'Washed Linen Duvet', '240.00'), product('stone-mug', 'Stoneware Mug', '28.00'), product('oak-board', 'Oak Board', '64.00')]
+const STORE: Store = { menus: [menu('main-menu', [['Shop', '/collections/all'], ['About', '/pages/about']])], products: P, collections: [collection('all', 'All', P), collection('kitchen', 'Kitchen', P.slice(1))] }
+const chrome = (main: Record<string, unknown>[]) => [
+  { region: 'header', sections: [{ type: 'header', id: 'header' }] },
+  { region: 'main', sections: main },
+  { region: 'footer', sections: [{ type: 'footer', id: 'footer', blocks: [{ type: 'footer-brand', id: 'footer-brand' }] }] },
+]
+
+const PAGES = {
+  home: () => abiCtx({ kind: 'home', url: 'https://shop.example/', store: STORE, page: pageOf('index', chrome([
+    { type: 'hero', id: 's-hero', settings: { heading: 'Made to last', subtext: 'Linen and stoneware for every day.', buttonLabel: 'Shop now', buttonLink: '/collections/all', backgroundImage: 'https://cdn.example/hero.jpg' } },
+    { type: 'featured-collection', id: 's-fc', settings: { heading: 'New arrivals', collection: 'all', columns: 4 } },
+    { type: 'multicolumn', id: 's-mc', settings: { heading: 'Why us', columns: 3 } },
+  ])) }),
+  product: () => abiCtx({ kind: 'product', handle: 'linen-duvet', url: 'https://shop.example/products/linen-duvet', store: STORE, page: pageOf('product', chrome([
+    { type: 'product-details', id: 'main' },
+    { type: 'product-recommendations', id: 'recs', settings: { heading: 'You may also like' } },
+  ])) }),
+  collection: () => abiCtx({ kind: 'collection', handle: 'kitchen', url: 'https://shop.example/collections/kitchen', store: STORE, page: pageOf('collection', chrome([{ type: 'main-collection', id: 'main' }])) }),
+  cart: () => abiCtx({ kind: 'cart', url: 'https://shop.example/cart', store: STORE, page: pageOf('cart', chrome([{ type: 'cart-items', id: 'main' }])) }),
+  search: () => abiCtx({ kind: 'search', url: 'https://shop.example/search?q=linen', params: { q: 'linen' }, store: STORE, page: pageOf('search', chrome([{ type: 'search-results', id: 'main' }])) }),
+  // a sort the gateway did not forward as a route param: round 2 loads it, and the browser keys the same result
+  searchSorted: () => abiCtx({ kind: 'search', url: 'https://shop.example/search?q=linen&sort=price-asc', params: { q: 'linen' }, store: STORE, page: pageOf('search', chrome([{ type: 'search-results', id: 'main' }])) }),
+}
+
+async function hydrate(path: string, html: string): Promise<string[]> {
+  window.history.replaceState({}, '', path)
+  const head = html.match(/<style id="tq-style-rules">[\s\S]*?<\/style>/)?.[0] ?? ''
+  const body = html.match(/<body[^>]*>([\s\S]*)<\/body>/)?.[1] ?? ''
+  document.head.innerHTML = head
+  document.body.innerHTML = body
+  vi.stubGlobal('fetch', vi.fn(async () => new Response(JSON.stringify({ ok: true, data: null, dataVersion: 'x' }), { headers: { 'content-type': 'application/json' } })))
+  const errors: string[] = []
+  vi.spyOn(console, 'error').mockImplementation((...args: unknown[]) => { errors.push(args.map(String).join(' ')) })
+  vi.resetModules()
+  await act(async () => {
+    await import('../main.abi')
+    await new Promise((r) => setTimeout(r, 50))
+  })
+  return errors.filter((e) => /hydrat|did not match|Minified React error|#41[89]|#42[35]/i.test(e))
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+  document.head.innerHTML = ''
+  document.body.innerHTML = ''
+})
+
+describe('Nova v3 pages under ABI v2', () => {
+  for (const [name, make] of Object.entries(PAGES)) {
+    it(`${name}: 200, sections wrapped in data-tq-node, no style attributes, hydrates cleanly`, async () => {
+      const { ctx } = make()
+      const out = await serverHtml(render, ctx)
+      expect(out.status).toBe(200)
+      expect(out.root).toMatch(/data-tq-node="header"/)
+      expect(out.root).toMatch(/data-tq-node="main"|data-tq-node="s-hero"/)
+      expect(out.html).not.toMatch(/<[a-z][^>]*\sstyle="/i)
+      const hashes = out.headers.get('x-tq-csp-style-hash') ?? ''
+      if (out.rules) expect(hashes).toMatch(/sha256-/)
+      const errors = await hydrate(new URL(ctx.request.url).pathname + new URL(ctx.request.url).search, out.html)
+      expect(errors).toEqual([])
+      // nothing the browser renders writes a style attribute either (conformance checks the live DOM)
+      expect(document.querySelector('#root [style]')).toBeNull()
+      // the server's rule block names the classes the elements carry
+      for (const c of out.rules.match(/tqs-[0-9a-z]+/g) ?? []) expect(document.querySelector(`.${c}`), c).not.toBeNull()
+    })
+  }
+
+  it('home renders the hero copy and the collection products', async () => {
+    const { root } = await serverHtml(render, PAGES.home().ctx)
+    expect(root).toContain('Made to last')
+    expect(root).toContain('Washed Linen Duvet')
+    expect(root).toContain('href="/products/stone-mug"')
+  })
+
+  it('product renders title, price and the add-to-cart form', async () => {
+    const { root } = await serverHtml(render, PAGES.product().ctx)
+    expect(root).toContain('Washed Linen Duvet')
+    expect(root).toMatch(/\$240(\.00)?/)
+  })
+
+  it('an unknown product is a real 404', async () => {
+    const { ctx } = abiCtx({ kind: 'product', handle: 'nope', url: 'https://shop.example/products/nope', store: STORE, page: pageOf('product', chrome([{ type: 'product-details', id: 'main' }])) })
+    const { status } = await serverHtml(render, ctx)
+    expect(status).toBe(404)
+  })
+
+  it('an unknown product or collection shows the not-found section, not a blank page, and hydrates cleanly', async () => {
+    for (const [kind, url, main] of [
+      ['product', 'https://shop.example/products/nope', { type: 'product-details', id: 'main' }],
+      ['collection', 'https://shop.example/collections/nope', { type: 'main-collection', id: 'main' }],
+    ] as const) {
+      const { ctx } = abiCtx({ kind, handle: 'nope', url, store: STORE, page: pageOf(kind, chrome([main])) })
+      const out = await serverHtml(render, ctx)
+      expect(out.status).toBe(404)
+      expect(out.root).toContain('Page not found')
+      expect(out.root).toMatch(/data-tq-node="header"/)
+      expect(await hydrate(new URL(url).pathname, out.html)).toEqual([])
+    }
+  })
+
+  it('a policy the store has not published is a real 404 with the not-found section; a published one is 200', async () => {
+    const policyPage = () => pageOf('policy', chrome([{ type: 'policy-page', id: 'policy' }]))
+    const store: Store = { ...STORE, policies: [{ handle: 'refund-policy', title: 'Refund policy', body: '<p>Write to us within 30 days.</p>', url: 'https://shop.example/policies/refund-policy' }] }
+    const missing = await serverHtml(render, abiCtx({ kind: 'policy', handle: 'privacy-policy', url: 'https://shop.example/policies/privacy-policy', store, page: policyPage() }).ctx)
+    expect(missing.status).toBe(404)
+    expect(missing.root).toContain('Page not found')
+    expect(missing.root).not.toContain('data-state="unpublished"')
+    expect(missing.root).toMatch(/data-tq-node="header"/)
+    expect(await hydrate('/policies/privacy-policy', missing.html)).toEqual([])
+
+    const published = await serverHtml(render, abiCtx({ kind: 'policy', handle: 'refund-policy', url: 'https://shop.example/policies/refund-policy', store, page: policyPage() }).ctx)
+    expect(published.status).toBe(200)
+    expect(published.root).toContain('Write to us within 30 days.')
+    expect(published.root).not.toContain('Page not found')
+  })
+
+  it('the editor canvas keeps the policy section of an unpublished policy, with its own editor state', async () => {
+    const { ctx } = abiCtx({ kind: 'policy', handle: 'privacy-policy', url: 'https://shop.example/policies/privacy-policy', store: STORE, mode: 'preview', page: pageOf('policy', chrome([{ type: 'policy-page', id: 'policy' }])) })
+    const { root } = await serverHtml(render, ctx)
+    expect(root).not.toContain('Page not found')
+    expect(root).toMatch(/data-tq-node="policy"/)
+    expect(root).toContain('Choose a policy')
+  })
+
+  it('the editor canvas keeps the template of a route whose resource is missing', async () => {
+    const { ctx } = abiCtx({ kind: 'product', handle: 'nope', url: 'https://shop.example/products/nope', store: STORE, mode: 'preview', page: pageOf('product', chrome([{ type: 'product-details', id: 'main' }])) })
+    const { root } = await serverHtml(render, ctx)
+    expect(root).not.toContain('Page not found')
+    expect(root).toMatch(/data-tq-node="main"/)
+  })
+
+  it('a preview render (the editor canvas) shows starter copy a live page hides', async () => {
+    const starter = [{ type: 'hero', id: 's-hero', settings: { heading: 'Made for everyday use', subtext: 'Introduce your store in a sentence or two — what you make, and who it is for.' } }]
+    const live = await serverHtml(render, abiCtx({ kind: 'home', url: 'https://shop.example/', store: STORE, page: pageOf('index', chrome(starter)) }).ctx)
+    const preview = await serverHtml(render, abiCtx({ kind: 'home', url: 'https://shop.example/', store: STORE, mode: 'preview', page: pageOf('index', chrome(starter)) }).ctx)
+    expect(preview.root).toContain('Introduce your store')
+    expect(live.root).not.toContain('Introduce your store')
+  })
+
+  it('a live hero with the merchant\'s own copy renders, with only its untouched starter field left out', async () => {
+    // test-2, gen 9: heading and eyebrow written, subtext still the starter instruction — the whole hero vanished.
+    const hero = [{ type: 'hero', id: 's-hero', settings: {
+      layout: 'text-first', contentAlignment: 'left', eyebrow: 'Cat-tested, shopper-approved', heading: "If it survives a cat, it's built to last.",
+      subtext: 'Introduce your store in a sentence or two — what you make, and who it is for.',
+      buttonLabel: 'Shop now', buttonLink: '/collections/all', secondaryLabel: 'Browse all', secondaryLink: '/collections',
+    } }]
+    const { root } = await serverHtml(render, abiCtx({ kind: 'home', url: 'https://shop.example/', store: STORE, page: pageOf('index', chrome(hero)) }).ctx)
+    expect(root).toMatch(/If it survives a cat, it(&#x27;|')s built to last\./)
+    expect(root).toContain('Cat-tested, shopper-approved')
+    expect(root).toContain('Shop now')
+    expect(root).not.toContain('Introduce your store')
+  })
+
+  it('a live section whose copy is only starter text still renders nothing', async () => {
+    const starter = [{ type: 'hero', id: 's-hero', settings: { heading: '', eyebrow: '', buttonLabel: '', subtext: 'Introduce your store in a sentence or two — what you make, and who it is for.' } }]
+    const { root } = await serverHtml(render, abiCtx({ kind: 'home', url: 'https://shop.example/', store: STORE, page: pageOf('index', chrome(starter)) }).ctx)
+    expect(root).not.toContain('Introduce your store')
+    expect(root).not.toContain('data-nv-section="hero"')
+  })
+})

package/templates/nova/tests/abi-shop-links.test.tsx

@@ -0,0 +1,141 @@
+/**
+ * Theme ABI `Shop.socialLinks` and `Shop.paymentSettings.acceptedCardBrands` (storefront-query rev 2.20):
+ * present only when the store has them. The footer's utility row shows them; without them neither the
+ * social list nor the payment list renders — no empty row, no placeholder marks.
+ */
+import { render as rtl, screen, within } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import { render } from '../entry.abi'
+import { convert as convert } from '@tanqory/theme-kit/runtime'
+import { toShop } from '@tanqory/theme-kit/runtime'
+import { resolveSettings } from '@tanqory/theme-kit'
+import { Footer } from '../src/sections/Footer/Footer'
+import { footerSchema } from '../src/sections/Footer/schema'
+import { NovaProvider } from '../src/styles/NovaProvider'
+import type { NovaShop } from '@tanqory/theme-kit'
+import { SHOP, abiCtx, pageOf, serverHtml } from './support/abi-ctx'
+
+const SOCIAL = [
+  { platform: 'instagram', url: 'https://instagram.com/halden.co' },
+  { platform: 'twitter', url: 'https://x.com/haldenco' },
+  { platform: 'threads', url: 'https://www.threads.net/@halden.co' },
+  { platform: 'mastodon', url: 'https://mastodon.social/@halden' },
+  { platform: 'facebook', url: 'http://facebook.com/halden.co' },
+  { platform: 'youtube', url: 'javascript:alert(1)' },
+  { platform: 'tiktok', url: '/relative' },
+  { platform: 'instagram', url: 'https://instagram.com/second' },
+]
+const BRANDS = ['VISA', 'MASTERCARD', 'AMERICAN_EXPRESS', 'JCB', 'DISCOVER', 'DINERS_CLUB', 'UNIONPAY'] as const
+const WITH = { ...SHOP, socialLinks: SOCIAL, paymentSettings: { ...SHOP.paymentSettings, acceptedCardBrands: BRANDS } }
+
+describe('convert.shop: social links and card brands', () => {
+  it('both present: https links only, one per network; card brands kept', () => {
+    const s = convert.shop(WITH as never)
+    expect(s.socialLinks).toEqual([
+      { platform: 'instagram', url: 'https://instagram.com/halden.co' },
+      { platform: 'twitter', url: 'https://x.com/haldenco' },
+      { platform: 'threads', url: 'https://www.threads.net/@halden.co' },
+      { platform: 'mastodon', url: 'https://mastodon.social/@halden' },
+    ])
+    expect(s.paymentSettings?.acceptedCardBrands).toEqual([...BRANDS])
+  })
+  it('both absent: no socialLinks key, no card brands', () => {
+    const s = convert.shop(SHOP as never)
+    expect(s).not.toHaveProperty('socialLinks')
+    expect(s.paymentSettings?.acceptedCardBrands).toEqual([])
+  })
+  it('a list with nothing usable is absent too', () => {
+    const s = convert.shop({ ...SHOP, socialLinks: [{ platform: 'facebook', url: 'http://facebook.com/x' }, { platform: '', url: 'https://a.example' }, { platform: 'x', url: 'not a url' }] } as never)
+    expect(s).not.toHaveProperty('socialLinks')
+  })
+})
+
+describe('toShop: NovaShop social + payment marks', () => {
+  it('drawn networks by key (twitter → x), the rest as link marks with their names, unknown slugs capitalised', () => {
+    const shop = toShop(convert.shop(WITH as never))
+    expect(shop.social).toEqual({ instagram: 'https://instagram.com/halden.co', x: 'https://x.com/haldenco' })
+    expect(shop.otherSocial).toEqual([
+      { platform: 'threads', label: 'Threads', url: 'https://www.threads.net/@halden.co' },
+      { platform: 'mastodon', label: 'Mastodon', url: 'https://mastodon.social/@halden' },
+    ])
+    expect(shop.paymentMethods).toEqual(['visa', 'mastercard', 'amex', 'jcb', 'discover', 'diners-club', 'unionpay'])
+  })
+  it('x and twitter are one network: the first wins', () => {
+    const shop = toShop({ ...convert.shop(SHOP as never), socialLinks: [{ platform: 'x', url: 'https://x.com/a' }, { platform: 'twitter', url: 'https://twitter.com/b' }] })
+    expect(shop.social).toEqual({ x: 'https://x.com/a' })
+  })
+  it('every dashboard network maps: drawn mark or a named link mark', () => {
+    const slugs = ['facebook', 'threads', 'twitter', 'pinterest', 'instagram', 'tiktok', 'tumblr', 'snapchat', 'youtube', 'vimeo', 'linkedin', 'spotify', 'whatsapp', 'kakaotalk']
+    const shop = toShop({ ...convert.shop(SHOP as never), socialLinks: slugs.map((p) => ({ platform: p, url: `https://${p}.example/halden` })) })
+    expect(Object.keys(shop.social ?? {}).sort()).toEqual(['facebook', 'instagram', 'tiktok', 'x', 'youtube'])
+    expect(shop.otherSocial?.map((o) => o.label)).toEqual(['Threads', 'Pinterest', 'Tumblr', 'Snapchat', 'Vimeo', 'LinkedIn', 'Spotify', 'WhatsApp', 'KakaoTalk'])
+  })
+  it('absent: no social keys, no payment marks', () => {
+    const shop = toShop(convert.shop(SHOP as never))
+    expect(shop).not.toHaveProperty('social')
+    expect(shop).not.toHaveProperty('otherSocial')
+    expect(shop.paymentMethods ?? []).toEqual([])
+  })
+})
+
+const footerProps = (shop: NovaShop) => ({ ...resolveSettings(footerSchema, {}).settings, shop, blocks: [] })
+const renderFooter = (shop: NovaShop) =>
+  rtl(
+    <NovaProvider locale="en" dir="ltr" mode="storefront">
+      <Footer {...footerProps(shop)} />
+    </NovaProvider>,
+  )
+
+describe('Footer: the store data in the utility row', () => {
+  it('with data: social marks with hrefs and names, payment marks with names', () => {
+    const { container } = renderFooter(toShop(convert.shop(WITH as never)))
+    const social = screen.getByRole('list', { name: 'Follow us' })
+    const links = within(social).getAllByRole('link')
+    expect(links.map((a) => [a.getAttribute('aria-label'), a.getAttribute('href')])).toEqual([
+      ['Instagram', 'https://instagram.com/halden.co'],
+      ['X', 'https://x.com/haldenco'],
+      ['Threads', 'https://www.threads.net/@halden.co'],
+      ['Mastodon', 'https://mastodon.social/@halden'],
+    ])
+    for (const a of links) {
+      expect(a.getAttribute('target')).toBe('_blank')
+      expect(a.getAttribute('rel')).toContain('noopener')
+    }
+    const pay = screen.getByRole('list', { name: 'Payment methods' })
+    expect(within(pay).getAllByRole('img').map((i) => i.getAttribute('aria-label'))).toEqual(['Visa', 'Mastercard', 'American Express', 'JCB', 'Discover', 'Diners Club', 'UnionPay'])
+    expect(container.querySelector('.nv-footer__utility')).not.toBeNull()
+  })
+  it('without data: no social list, no payment list, no utility row', () => {
+    const { container } = renderFooter(toShop(convert.shop(SHOP as never)))
+    expect(screen.queryByRole('list', { name: 'Follow us' })).toBeNull()
+    expect(screen.queryByRole('list', { name: 'Payment methods' })).toBeNull()
+    expect(container.querySelector('.nv-footer__utility')).toBeNull()
+    expect(container.querySelector('.nv-social, .nv-payments')).toBeNull()
+  })
+})
+
+describe('ABI render: the footer from ctx.data.shop', () => {
+  const chrome = [
+    { region: 'header', sections: [{ type: 'header', id: 'header' }] },
+    { region: 'main', sections: [{ type: 'rich-text', id: 'main' }] },
+    { region: 'footer', sections: [{ type: 'footer', id: 'footer' }] },
+  ]
+  it('with data: the server html carries the links and marks', async () => {
+    const { ctx } = abiCtx({ kind: 'home', store: { shop: WITH }, page: pageOf('index', chrome) })
+    const out = await serverHtml(render, ctx)
+    expect(out.status).toBe(200)
+    expect(out.root).toContain('href="https://www.threads.net/@halden.co"')
+    expect(out.root).toContain('aria-label="Diners Club"')
+    expect(out.root).not.toContain('javascript:')
+    expect(out.root).not.toContain('http://facebook.com')
+  })
+  it('without data: no social or payment list in the server html', async () => {
+    const { ctx } = abiCtx({ kind: 'home', page: pageOf('index', chrome) })
+    const out = await serverHtml(render, ctx)
+    expect(out.status).toBe(200)
+    expect(out.root).not.toContain('nv-social')
+    expect(out.root).not.toContain('nv-payments')
+    // the row itself stays for the region control — its social side is empty, its payment side absent
+    expect(out.root).toContain('<div class="nv-footer__utility-start"></div>')
+  })
+})

package/templates/nova/tests/abi-storefront-basics.test.tsx

@@ -0,0 +1,233 @@
+/**
+ * What a shopper and a search engine get from a brand-new store's storefront:
+ *
+ *   - an empty main menu still gives a phone a Menu button, a drawer and Sign in (QA 2026-10-16, check 12);
+ *   - the home page carries a meta description, og/twitter description and image (check 13);
+ *   - `lang` follows the request's language everywhere on the page, never a hard-coded "en";
+ *   - the Region & language choice reaches the platform as `?country=` / `?locale=`, and each market
+ *     carries its own currency when the platform names the markets;
+ *   - a collection's sort and filters live in the URL and the server renders them (check 4).
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { act } from 'react'
+import { render } from '../entry.abi'
+import { localizationOf } from '@tanqory/theme-kit/runtime'
+import { convert } from '@tanqory/theme-kit/runtime'
+import { homeHead } from '@tanqory/theme-kit/runtime'
+import { toLocalization } from '@tanqory/theme-kit/runtime'
+import { localeHref } from '@tanqory/theme-kit/runtime'
+import { listingQueryOf, queryOfState, stateFromQuery, withListingQuery } from '@tanqory/theme-kit/runtime'
+import { abiCtx, collection, menu, money, pageOf, product, serverHtml, SHOP, type Store } from './support/abi-ctx'
+
+const { shopSeo } = convert
+
+;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+
+const P = [
+  { ...product('linen-duvet', 'Washed Linen Duvet', '240.00'), vendor: 'Halden' },
+  { ...product('stone-mug', 'Stoneware Mug', '28.00'), vendor: 'Kiln' },
+  { ...product('oak-board', 'Oak Board', '64.00'), vendor: 'Kiln' },
+]
+const FACETS = [
+  { id: 'filter.vendor', label: 'Vendor', type: 'LIST', values: [{ id: 'filter.vendor.Halden', label: 'Halden', count: 1, input: { key: 'vendor', value: 'Halden' } }, { id: 'filter.vendor.Kiln', label: 'Kiln', count: 2, input: { key: 'vendor', value: 'Kiln' } }] },
+  { id: 'filter.price', label: 'Price', type: 'PRICE_RANGE', values: [], range: { min: money('28.00'), max: money('240.00') } },
+]
+const KITCHEN = { ...collection('kitchen', 'Kitchen', P), filters: FACETS }
+const COLLECTIONS = [collection('all', 'All', P), KITCHEN, collection('bedroom', 'Bedroom', P.slice(0, 1))]
+const EMPTY_MENU: Store = { menus: [menu('main-menu', [])], products: P, collections: COLLECTIONS as never }
+const FULL_MENU: Store = { ...EMPTY_MENU, menus: [menu('main-menu', [['Shop', '/collections/all']])] }
+
+const chrome = (main: Record<string, unknown>[]) => [
+  { region: 'header', sections: [{ type: 'header', id: 'header' }] },
+  { region: 'main', sections: main },
+  { region: 'footer', sections: [{ type: 'footer', id: 'footer', blocks: [{ type: 'footer-brand', id: 'footer-brand' }] }] },
+]
+const HERO = { type: 'hero', id: 's-hero', settings: { heading: 'Made to last', subtext: 'Linen and stoneware for every day.', buttonLabel: 'Shop now', buttonLink: '/collections/all', backgroundImage: 'https://cdn.example/hero.jpg' } }
+const home = (store: Store, shop?: Record<string, unknown>, locale?: Record<string, unknown>) => {
+  const made = abiCtx({ kind: 'home', url: 'https://shop.example/', store: { ...store, ...(shop ? { shop } : {}) }, page: pageOf('index', chrome([HERO])) })
+  if (locale) Object.assign(made.ctx.locale as object, locale)
+  return made
+}
+const meta = (html: string, attr: 'name' | 'property', key: string) => html.match(new RegExp(`<meta ${attr}="${key.replace(/[.:]/g, '\\$&')}" content="([^"]*)">`))?.[1]
+
+async function hydrate(path: string, html: string): Promise<string[]> {
+  window.history.replaceState({}, '', path)
+  const head = html.match(/<style id="tq-style-rules">[\s\S]*?<\/style>/)?.[0] ?? ''
+  const body = html.match(/<body[^>]*>([\s\S]*)<\/body>/)?.[1] ?? ''
+  document.head.innerHTML = head
+  document.body.innerHTML = body
+  vi.stubGlobal('fetch', vi.fn(async () => new Response(JSON.stringify({ ok: true, data: null, dataVersion: 'x' }), { headers: { 'content-type': 'application/json' } })))
+  const errors: string[] = []
+  vi.spyOn(console, 'error').mockImplementation((...args: unknown[]) => { errors.push(args.map(String).join(' ')) })
+  vi.resetModules()
+  await act(async () => {
+    await import('../main.abi')
+    await new Promise((r) => setTimeout(r, 50))
+  })
+  return errors.filter((e) => /hydrat|did not match|Minified React error|#41[89]|#42[35]/i.test(e))
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+  document.head.innerHTML = ''
+  document.body.innerHTML = ''
+})
+
+describe('header with an empty main menu', () => {
+  it('renders the Menu button and loads the collections its drawer lists', async () => {
+    const { ctx, ops } = home(EMPTY_MENU)
+    const out = await serverHtml(render, ctx)
+    expect(out.status).toBe(200)
+    expect(out.root).toMatch(/<button[^>]*aria-label="Open menu"/)
+    // no desktop nav strip for an empty menu
+    expect(out.root).not.toContain('nv-header__nav-list')
+    expect(ops).toContain('catalog.collections')
+    expect(await hydrate('/', out.html)).toEqual([])
+    expect(document.querySelector('.nv-header__compact-start button[aria-label="Open menu"]')).not.toBeNull()
+  })
+
+  it('a store with a menu does not pay for the collections', async () => {
+    const { ctx, ops } = home(FULL_MENU)
+    const out = await serverHtml(render, ctx)
+    expect(out.root).toContain('nv-header__nav-list')
+    expect(ops).not.toContain('catalog.collections')
+  })
+})
+
+describe('home page head', () => {
+  it('uses the store\'s home SEO settings when the platform sends them', async () => {
+    const shop = { ...SHOP, seo: { title: 'Halden — linen & stoneware', description: 'Washed linen and handmade stoneware.', image: { url: 'https://cdn.example/share.jpg', altText: 'A linen bed', width: 1200, height: 630 } } }
+    const { html } = await serverHtml(render, home(FULL_MENU, shop).ctx)
+    expect(html).toContain('<title>Halden — linen &amp; stoneware</title>')
+    expect(meta(html, 'name', 'description')).toBe('Washed linen and handmade stoneware.')
+    expect(meta(html, 'property', 'og:description')).toBe('Washed linen and handmade stoneware.')
+    expect(meta(html, 'property', 'og:image')).toBe('https://cdn.example/share.jpg')
+    expect(meta(html, 'property', 'og:image:width')).toBe('1200')
+    expect(meta(html, 'property', 'og:image:alt')).toBe('A linen bed')
+    expect(meta(html, 'name', 'twitter:card')).toBe('summary_large_image')
+    expect(meta(html, 'name', 'twitter:image')).toBe('https://cdn.example/share.jpg')
+  })
+
+  it('without them: the shop description, then the brand logo, then the hero image', async () => {
+    const withLogo = { ...SHOP, brand: { squareLogo: { url: 'https://cdn.example/mark.png' }, logo: { url: 'https://cdn.example/logo.png' } } }
+    let { html } = await serverHtml(render, home(FULL_MENU, withLogo).ctx)
+    expect(html).toContain('<title>Halden &amp; Co.</title>')
+    expect(meta(html, 'name', 'description')).toBe('Linen and stoneware')
+    expect(meta(html, 'property', 'og:image')).toBe('https://cdn.example/mark.png')
+    ;({ html } = await serverHtml(render, home(FULL_MENU, { ...SHOP, description: null }).ctx))
+    expect(meta(html, 'name', 'description')).toBe('Shop Halden &amp; Co. online.')
+    expect(meta(html, 'property', 'og:description')).toBe('Shop Halden &amp; Co. online.')
+    expect(meta(html, 'property', 'og:image')).toBe('https://cdn.example/hero.jpg')
+    expect(meta(html, 'name', 'twitter:image')).toBe('https://cdn.example/hero.jpg')
+  })
+
+  it('reads Shop.seo defensively', () => {
+    expect(shopSeo(undefined)).toBeNull()
+    expect(shopSeo({ title: '  ', image: { url: 'http://insecure.example/x.jpg' } })).toBeNull()
+    expect(shopSeo({ image: { url: 'javascript:alert(1)' } })).toBeNull()
+    expect(shopSeo({ description: ' Hi ', image: { url: 'https://cdn.example/a.jpg', width: -1 } })).toEqual({ description: 'Hi', image: { url: 'https://cdn.example/a.jpg' } })
+    // a relative hero image is not a share image
+    expect(homeHead({ name: 'X', policies: {} } as never, 'X', [{ type: 'hero', settings: { backgroundImage: '/a.jpg' } }], 'Shop {name} online.').image).toBe('')
+  })
+})
+
+describe('lang', () => {
+  it('<html lang> and the theme root follow the request language, even one Nova has no strings for', async () => {
+    let { html } = await serverHtml(render, home(FULL_MENU, undefined, { language: 'th', availableLanguages: ['th'] }).ctx)
+    expect(html).toMatch(/<html lang="th"/)
+    expect(html).toMatch(/class="nv-root[^"]*"[^>]*lang="th"|lang="th"[^>]*class="nv-root/)
+    ;({ html } = await serverHtml(render, home(FULL_MENU, undefined, { language: 'vi', availableLanguages: ['vi'] }).ctx))
+    expect(html).toMatch(/<html lang="vi"/)
+    expect(html).not.toMatch(/lang="en"/)
+  })
+})
+
+describe('markets and languages', () => {
+  const ctx = (locale: Record<string, unknown>) => ({ locale: { language: 'en', country: 'US', market: 'us', currency: 'USD', availableLanguages: ['en', 'th'], timeZone: 'UTC', ...locale } }) as never
+
+  it('each country gets its own market and currency from ctx.locale.markets', () => {
+    const l = localizationOf(ctx({ markets: [{ id: 'th', currency: 'THB', countries: ['TH'], languages: ['th', 'en'] }, { id: 'us', currency: 'USD', countries: ['US'], languages: ['en'] }] }), ['US', 'TH'], true)
+    expect(l.availableCountries.map((c) => [c.isoCode, c.currency.isoCode, c.market?.id])).toEqual([['TH', 'THB', 'th'], ['US', 'USD', 'us']])
+    expect(l.country.currency.isoCode).toBe('USD')
+    const ui = toLocalization(l)!
+    // the US market offers English only; Thailand offers both
+    expect(ui.available.map((m) => `${m.countryCode}:${m.languageCode}:${m.currencyCode}`).sort()).toEqual(['TH:en:THB', 'TH:th:THB', 'US:en:USD'])
+  })
+
+  it('without markets: today\'s behaviour (one market, the locale currency)', () => {
+    const l = localizationOf(ctx({}), ['US', 'TH'], true)
+    expect(l.availableCountries.map((c) => [c.isoCode, c.currency.isoCode])).toEqual([['US', 'USD'], ['TH', 'USD']])
+    const bad = localizationOf(ctx({ markets: [{ id: '', currency: 'x' }, null, 'th'] }), ['US'], true)
+    expect(bad.availableCountries.map((c) => c.isoCode)).toEqual(['US'])
+  })
+
+  it('the choice is sent as ?country= / ?locale=, only what changed', () => {
+    const cur = { countryCode: 'TH', languageCode: 'th' }
+    expect(localeHref('https://shop.example/collections/all?page=2', { countryCode: 'TH', languageCode: 'en' }, cur)).toBe('https://shop.example/collections/all?locale=en')
+    expect(localeHref('https://shop.example/', { countryCode: 'US', languageCode: 'th' }, cur)).toBe('https://shop.example/?country=US')
+    expect(localeHref('https://shop.example/', { countryCode: 'US', languageCode: 'en' }, cur)).toBe('https://shop.example/?country=US&locale=en')
+    expect(localeHref('https://shop.example/', { countryCode: 'TH', languageCode: 'th' }, cur)).toBeNull()
+    expect(localeHref('https://shop.example/', { countryCode: 'x"y', languageCode: '<b>' }, cur)).toBeNull()
+  })
+})
+
+describe('collection sort and filters in the URL', () => {
+  const facets = [
+    { id: 'filter.vendor', type: 'LIST', values: [{ id: 'filter.vendor.Halden', input: '{"productVendor":"Halden"}' }, { id: 'filter.vendor.Kiln', input: '{"productVendor":"Kiln"}' }] },
+    { id: 'filter.price', type: 'PRICE_RANGE', values: [{ id: 'filter.price', input: '{"price":{"min":28,"max":240}}' }] },
+  ]
+
+  it('round-trips a selection, ignoring what this store has no facet for', () => {
+    const q = 'sort=price-desc&filter.vendor=Kiln&filter.vendor=nope&filter.price.gte=30&filter.color=red&utm_source=x'
+    const state = stateFromQuery(listingQueryOf(q), facets)
+    expect(state).toEqual({ sort: 'price-desc', values: { 'filter.vendor': ['filter.vendor.Kiln'] }, price: { from: 30 } })
+    expect(queryOfState(state, facets)).toBe('sort=price-desc&filter.vendor=Kiln&filter.price.gte=30')
+    expect(queryOfState({ sort: 'featured', values: {} }, facets)).toBe('')
+    expect(stateFromQuery('sort=__proto__', facets).sort).toBe('featured')
+    expect(withListingQuery('https://shop.example/collections/kitchen?utm_source=x&sort=title-asc&page=3#top', 'sort=price-asc')).toBe('https://shop.example/collections/kitchen?utm_source=x&sort=price-asc#top')
+  })
+
+  const page = (url: string, params: Record<string, string> = {}) =>
+    abiCtx({ kind: 'collection', handle: 'kitchen', url, params, store: { ...FULL_MENU, collections: [KITCHEN as never] }, page: pageOf('collection', chrome([{ type: 'main-collection', id: 'main' }])) })
+  const order = (root: string) => ['Washed Linen Duvet', 'Stoneware Mug', 'Oak Board'].map((t) => [t, root.indexOf(`>${t}<`)] as const).filter(([, i]) => i >= 0).sort((a, b) => a[1] - b[1]).map(([t]) => t)
+
+  it('?sort= renders sorted on the server and hydrates cleanly', async () => {
+    const { ctx } = page('https://shop.example/collections/kitchen?sort=price-asc')
+    const out = await serverHtml(render, ctx)
+    expect(order(out.root)).toEqual(['Stoneware Mug', 'Oak Board', 'Washed Linen Duvet'])
+    expect(await hydrate('/collections/kitchen?sort=price-asc', out.html)).toEqual([])
+    // the route param the edge forwards works the same
+    const fwd = await serverHtml(render, page('https://shop.example/collections/kitchen', { sort: 'price-desc' }).ctx)
+    expect(order(fwd.root)).toEqual(['Washed Linen Duvet', 'Oak Board', 'Stoneware Mug'])
+  })
+
+  it('a sort chosen in the browser is written to the URL (replaceState), other params kept', async () => {
+    const { ctx } = page('https://shop.example/collections/kitchen?utm_source=mail')
+    const out = await serverHtml(render, ctx)
+    expect(await hydrate('/collections/kitchen?utm_source=mail', out.html)).toEqual([])
+    const replace = vi.spyOn(window.history, 'replaceState')
+    const trigger = document.querySelector<HTMLButtonElement>('#root .nv-sort button')!
+    await act(async () => trigger.click())
+    const option = [...document.querySelectorAll<HTMLButtonElement>('#root .nv-sort__option')].find((b) => b.textContent?.includes('Price, high to low'))!
+    await act(async () => option.click())
+    expect(replace).toHaveBeenCalled()
+    expect(window.location.search).toBe('?utm_source=mail&sort=price-desc')
+  })
+
+  it('?filter.*= renders the filtered products on the server (one data call) and hydrates cleanly', async () => {
+    const made = page('https://shop.example/collections/kitchen?filter.vendor=Kiln&sort=price-desc')
+    const asked: unknown[] = []
+    const catalog = (made.ctx.data as unknown as { catalog: Record<string, (...a: unknown[]) => Promise<unknown>> }).catalog
+    catalog.collection = async (_h: unknown, opts: unknown) => {
+      asked.push(opts)
+      const vendor = (opts as { filters?: { key: string; value: string }[] })?.filters?.find((f) => f.key === 'vendor')?.value
+      return { ...KITCHEN, products: { nodes: P.filter((p) => !vendor || p.vendor === vendor), pageInfo: { hasNextPage: false }, totalCount: 2 } }
+    }
+    const out = await serverHtml(render, made.ctx)
+    expect(asked).toEqual([{ productsFirst: 24, filters: [{ key: 'vendor', value: 'Kiln' }] }])
+    expect(order(out.root)).toEqual(['Oak Board', 'Stoneware Mug'])
+    expect(out.root).not.toContain('aria-busy="true"')
+    expect(await hydrate('/collections/kitchen?filter.vendor=Kiln&sort=price-desc', out.html)).toEqual([])
+    expect(document.querySelectorAll('#root .nv-listing__grid > li')).toHaveLength(2)
+  })
+})

package/templates/nova/tests/abi-variant-url.test.tsx

@@ -0,0 +1,73 @@
+/**
+ * A product URL's `?variant=<id>` (a shared link, checkout's "back to product") renders THAT variant in
+ * the server HTML: its selected options, price and stock line, with no flash of the first variant
+ * before hydration. An id that is not a variant of the product is ignored (first available variant).
+ * The browser hydrates from the same location, so the first client render matches.
+ */
+import { describe, expect, it } from 'vitest'
+import { render } from '../entry.abi'
+import { pageParamsOf, variantOf } from '@tanqory/theme-kit/runtime'
+import { locationOf } from '@tanqory/theme-kit/runtime'
+import { abiCtx, conn, money, pageOf, product, serverHtml } from './support/abi-ctx'
+
+function blanket() {
+  const base = product('linen-blanket', 'Linen Blanket', '1290.00')
+  const colours = [
+    { id: 'v-oat', title: 'Oat', price: '1290.00', qty: 20 },
+    { id: 'v-charcoal', title: 'Charcoal', price: '1490.00', qty: 3 },
+  ]
+  return {
+    ...base,
+    options: [{ name: 'Colour', values: colours.map((c) => c.title) }],
+    priceRange: { minVariantPrice: money('1290.00'), maxVariantPrice: money('1490.00') },
+    variants: conn(colours.map((c) => ({ id: c.id, title: c.title, availableForSale: true, price: money(c.price), compareAtPrice: null, selectedOptions: [{ name: 'Colour', value: c.title }], sku: c.id, quantityAvailable: c.qty }))),
+  }
+}
+
+function pdp(query = '') {
+  const url = `https://shop.example/products/linen-blanket${query}`
+  return abiCtx({
+    kind: 'product', handle: 'linen-blanket', url,
+    store: { products: [blanket()] },
+    page: pageOf('product', [
+      { region: 'main', sections: [{ type: 'product-details', id: 'main', settings: { showInventory: 'low-only', lowStockThreshold: 5 }, blocks: [{ type: 'product-price', id: 'p' }, { type: 'variant-picker', id: 'vp' }, { type: 'add-to-cart', id: 'a' }, { type: 'product-inventory', id: 'i' }] }] },
+    ]),
+  })
+}
+// abiCtx puts the query only on the request URL, as the platform does.
+const withQuery = (q: string) => {
+  const { ctx } = pdp()
+  ;(ctx.request as { url: string }).url = `https://shop.example/products/linen-blanket${q}`
+  return ctx
+}
+const checked = (root: string) => [...root.matchAll(/<input[^>]*type="radio"[^>]*>/g)].map((m) => m[0]).filter((t) => /\bchecked\b/.test(t)).map((t) => /value="([^"]*)"/.exec(t)?.[1])
+
+describe('?variant= on a product URL', () => {
+  it('pure: read only on the product route, safe ids only', () => {
+    expect(variantOf(withQuery('?variant=v-charcoal'))).toBe('v-charcoal')
+    expect(variantOf(withQuery('?variant=%3Cscript%3E'))).toBeNull()
+    expect(variantOf(withQuery(''))).toBeNull()
+    expect(pageParamsOf(withQuery('?variant=v-charcoal'), null, null).variant).toBe('v-charcoal')
+    expect(locationOf('https://shop.example/products/linen-blanket', { variant: 'v-charcoal' })).toBe('/products/linen-blanket?variant=v-charcoal')
+  })
+
+  it('the server HTML opens on the named variant: option, price, stock line', async () => {
+    const { root, state } = await serverHtml(render, withQuery('?variant=v-charcoal'))
+    expect(checked(root)).toEqual(['Charcoal'])
+    expect(root).toContain('1,490.00')
+    expect(root).toMatch(/Only 3 left/)
+    // the browser hydrates the same location
+    expect(state).toContain('"variant":"v-charcoal"')
+  })
+
+  it('no ?variant: the first variant, as before', async () => {
+    const { root } = await serverHtml(render, withQuery(''))
+    expect(checked(root)).toEqual(['Oat'])
+    expect(root).not.toMatch(/Only 3 left/)
+  })
+
+  it('an id that is not a variant of this product is ignored', async () => {
+    const { root } = await serverHtml(render, withQuery('?variant=v-someone-else'))
+    expect(checked(root)).toEqual(['Oat'])
+  })
+})