Responsive app shell, routes and navigation (#38)

Co-authored-by: dev_agent <dev_agent@cubecraftlabs.com>
Co-committed-by: dev_agent <dev_agent@cubecraftlabs.com>

web/src/test/cssRules.ts

@@ -48,3 +48,28 @@ export function animationKeyframes(element: Element): CSSKeyframesRule {
   if (!keyframes) throw new Error(`no @keyframes named ${JSON.stringify(name)}`)
   return keyframes
 }
+
+function px(value: string, what: string): number {
+  if (value === '') return 0
+  const match = /^(\d+(?:\.\d+)?)px$/.exec(value)
+  if (!match) throw new Error(`${what} ${JSON.stringify(value)} is not a px length`)
+  return Number(match[1])
+}
+
+// The border-box size the element's declared rules give it on one axis:
+// width or height, plus padding and border unless box-sizing is border-box.
+// jsdom does no layout (getBoundingClientRect is all zeros), so this is the
+// way to catch padding that would push a fixed box past its specified size.
+export function outerSize(element: Element, axis: 'width' | 'height'): number {
+  const style = declaredStyle(element)
+  const size = px(style.getPropertyValue(axis), axis)
+  if (style.boxSizing === 'border-box') return size
+  const sides = axis === 'width' ? ['left', 'right'] : ['top', 'bottom']
+  return sides.reduce(
+    (total, side) =>
+      total +
+      px(style.getPropertyValue(`padding-${side}`), `padding-${side}`) +
+      px(style.getPropertyValue(`border-${side}-width`), `border-${side}-width`),
+    size,
+  )
+}

web/src/test/matchMedia.ts

@@ -0,0 +1,49 @@
+import { act } from '@testing-library/react'
+
+type Listener = (event: MediaQueryListEvent) => void
+
+// Replaces window.matchMedia with one that answers min-width / max-width
+// queries for a pretend viewport width (jsdom has no matchMedia and no
+// layout). Returns a function that resizes the pretend viewport and notifies
+// every query whose answer changed.
+export function mockViewport(initialWidth: number): (width: number) => void {
+  let width = initialWidth
+  const lists: { list: MediaQueryList; listeners: Set<Listener> }[] = []
+
+  function evaluate(query: string): boolean {
+    const min = /\(min-width:\s*(\d+)px\)/.exec(query)
+    const max = /\(max-width:\s*(\d+)px\)/.exec(query)
+    if (!min && !max) throw new Error(`mockViewport cannot evaluate ${JSON.stringify(query)}`)
+    return (!min || width >= Number(min[1])) && (!max || width <= Number(max[1]))
+  }
+
+  window.matchMedia = (query: string) => {
+    const listeners = new Set<Listener>()
+    const list = {
+      media: query,
+      get matches() {
+        return evaluate(query)
+      },
+      onchange: null,
+      addEventListener: (_type: string, listener: Listener) => listeners.add(listener),
+      removeEventListener: (_type: string, listener: Listener) => listeners.delete(listener),
+      addListener: (listener: Listener) => listeners.add(listener),
+      removeListener: (listener: Listener) => listeners.delete(listener),
+      dispatchEvent: () => true,
+    } as unknown as MediaQueryList
+    lists.push({ list, listeners })
+    return list
+  }
+
+  return (next: number) => {
+    const before = lists.map(({ list }) => list.matches)
+    width = next
+    act(() => {
+      lists.forEach(({ list, listeners }, i) => {
+        if (list.matches === before[i]) return
+        const event = { matches: list.matches, media: list.media } as MediaQueryListEvent
+        listeners.forEach((listener) => listener(event))
+      })
+    })
+  }
+}