@pyreon/runtime-dom 0.22.0 → 0.24.0

package/src/tests/error-boundary-stack-leak-repro.test.tsx

@@ -0,0 +1,133 @@
+/**
+ * REPRODUCTION + REGRESSION: the `_errorBoundaryStack.pop()` cleanup is
+ * position-based — same bug class as the `popContext()` bug fixed in #725.
+ *
+ * Scenario: two or more sibling `<ErrorBoundary>` boundaries. When a NON-LAST
+ * boundary unmounts (keyed `<For>` removing the first item, `<Show>` flipping
+ * the first of several siblings, route nav unmounting the outer of nested
+ * routes, etc.), its `onUnmount` calls `popErrorBoundary()` → `stack.pop()`
+ * → pops the LAST (innermost) boundary's handler — the wrong one.
+ *
+ * Outcome:
+ *   - Subsequent errors in the SURVIVING boundary's children route to whatever
+ *     handler is now at `stack[length-1]`, which is the stale handler of an
+ *     ALREADY-UNMOUNTED boundary. Calling `error.set(err)` on that handler's
+ *     captured signal is a no-op → the error is silently swallowed AND the
+ *     surviving boundary's fallback never renders.
+ *
+ * Fix (#725-class): `popErrorBoundary(handler)` uses `lastIndexOf + splice`
+ * to remove by IDENTITY. Each ErrorBoundary's `onUnmount` passes its own
+ * handler reference, so unmount in any order correctly removes the right
+ * handler.
+ */
+import type { VNodeChild } from '@pyreon/core'
+import { ErrorBoundary, h, Show } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { mount } from '..'
+
+describe('ErrorBoundary — module-level stack cleanup is identity-safe (#725 class)', () => {
+  let container: HTMLElement
+  let errorSpy: ReturnType<typeof vi.spyOn>
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+    errorSpy = vi.spyOn(console, 'error').mockImplementation(() => undefined)
+  })
+  afterEach(() => {
+    container.remove()
+    errorSpy.mockRestore()
+  })
+
+  // Tiny `h`-builder helpers so the tests stay readable.
+  const eb = (testId: string, ...children: VNodeChild[]) =>
+    h(
+      ErrorBoundary,
+      {
+        fallback: (err: unknown) =>
+          h('div', { 'data-testid': `fb-${testId}` }, `caught(${testId}): ${String(err)}`),
+        children: children.length === 1 ? children[0] : children,
+      },
+    )
+
+  const showWhen = (when: () => boolean, child: () => VNodeChild) =>
+    h(Show, { when, children: child })
+
+  it('REGRESSION: surviving sibling boundary still catches errors after a sibling unmounts (FIRST unmounted)', () => {
+    const showA = signal(false)
+    const showB = signal(false)
+    const aliveA = signal(true)
+
+    function Bomb({ name }: { name: string }): never {
+      throw new Error(`boom-${name}`)
+    }
+
+    const App = () =>
+      h(
+        'div',
+        null,
+        // Boundary A — wrapped in Show so we can UNMOUNT it without
+        // touching boundary B.
+        showWhen(
+          () => aliveA(),
+          () => eb('A', showWhen(() => showA(), () => h(Bomb, { name: 'A' }))),
+        ),
+        // Boundary B — always mounted.
+        eb('B', showWhen(() => showB(), () => h(Bomb, { name: 'B' }))),
+      )
+
+    const unmount = mount(h(App, null), container)
+
+    expect(container.querySelector('[data-testid="fb-A"]')).toBeNull()
+    expect(container.querySelector('[data-testid="fb-B"]')).toBeNull()
+
+    // UNMOUNT boundary A (FIRST sibling). Pre-fix: popErrorBoundary() pops
+    // the LAST frame — B's handler — instead of A's.
+    aliveA.set(false)
+
+    // Now trigger a throw inside B's children. With B's handler correctly
+    // still on the stack (post-fix), B's fallback should render.
+    showB.set(true)
+
+    const fbB = container.querySelector('[data-testid="fb-B"]')
+    expect(fbB).toBeTruthy()
+    expect(fbB?.textContent).toContain('caught(B): Error: boom-B')
+
+    // And the throw must NOT have been routed to A's (stale) fallback.
+    expect(container.querySelector('[data-testid="fb-A"]')).toBeNull()
+
+    unmount()
+  })
+
+  it('LIFO case: surviving FIRST boundary catches errors after a LATER sibling unmounts', () => {
+    // Pre-fix this case worked (LIFO held for last-unmount). Included
+    // as a guard against the fix regressing the LIFO case.
+    const showA = signal(false)
+    const aliveB = signal(true)
+
+    function Bomb({ name }: { name: string }): never {
+      throw new Error(`boom-${name}`)
+    }
+
+    const App = () =>
+      h(
+        'div',
+        null,
+        eb('A', showWhen(() => showA(), () => h(Bomb, { name: 'A' }))),
+        showWhen(() => aliveB(), () => eb('B', null)),
+      )
+
+    const unmount = mount(h(App, null), container)
+
+    // Unmount B — LIFO case (last sibling). Both pre- and post-fix correct.
+    aliveB.set(false)
+
+    showA.set(true)
+    const fbA = container.querySelector('[data-testid="fb-A"]')
+    expect(fbA).toBeTruthy()
+    expect(fbA?.textContent).toContain('caught(A): Error: boom-A')
+
+    unmount()
+  })
+})

package/src/tests/keyed-array-in-for-batched-toggle.browser.test.ts

@@ -0,0 +1,140 @@
+import { For, h } from '@pyreon/core'
+import type { ForProps, VNode } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
+import { flush, mountInBrowser } from '@pyreon/test-utils/browser'
+import { describe, expect, it } from 'vitest'
+
+// Regression — same closure-captured-parent bug class as the For-of-Show
+// fix in #776, but exercising the SIBLING reactive entry point
+// `mountKeyedList` (the inline reactive keyed array shape).
+//
+// **Bug class (recap from #776):** any reactive mount loop that captures
+// `parent` in its setup closure breaks when a containing reconciler
+// creates the subtree in a `DocumentFragment` and then moves it via
+// `liveParent.insertBefore(frag, tailMarker)`. The markers move with
+// the fragment contents; the captured `parent` becomes a stale
+// reference to the now-empty fragment. Next signal flip → throw +
+// child-loss.
+//
+// **`mountKeyedList`'s exposure**: three sites in `nodes.ts:mountKeyedList`
+// use closure-captured `parent`:
+//   1. `parent.insertBefore(anchor, tailMarker)` in mountNewEntries
+//   2. `mountVNode(vnode, parent, tailMarker)` immediately after
+//   3. `keyedListReorder(..., parent, tailMarker)` → applyKeyedMoves
+//      → moveEntryBefore → `parent.insertBefore(node, before)`
+//
+// All three run inside the `effect(() => ...)` body, so any post-setup
+// move of the markers (via a containing mountFor's frag-then-move) plus
+// a subsequent signal-driven re-run (mount new entries OR reorder)
+// throws NotFoundError.
+//
+// **Trigger requires the keyed array to land DIRECTLY in the For's
+// fragment** (no wrapping Element). The cleanest shape: For children
+// returns a function `(i) => () => signal().map(...)` — mountFor's
+// renderInto calls `mountChild(fn, frag, before)`, mountChild's
+// function branch samples the result, sees a keyed array, and creates
+// `mountKeyedList(fn, frag, before, ...)`. Now `parent === frag` in
+// the closure, and the bug fires identically to the For-of-Show case.
+// A `<div>`-wrapped keyed array would NOT trigger the bug — the div
+// is the element parent, isolating mountKeyedList from the frag move.
+
+describe('mountKeyedList: inline keyed array as direct For child under batched signal additions', () => {
+  it('sanity: top-level inline keyed array handles add/reorder cycles correctly', async () => {
+    // No For wrapper — mountKeyedList is the top-level reconciler.
+    // Should always work — no frag-then-move pressure on the captured parent.
+    const items = signal<{ id: number }[]>([{ id: 0 }])
+    const { container, unmount } = mountInBrowser(
+      h(
+        'div',
+        { id: 'root' },
+        () => items().map((v) => h('span', { key: v.id, 'data-id': String(v.id) }, String(v.id))),
+      ),
+    )
+    await flush()
+    expect(container.querySelectorAll('span[data-id]')).toHaveLength(1)
+
+    items.set([{ id: 0 }, { id: 1 }, { id: 2 }])
+    await flush()
+    expect(container.querySelectorAll('span[data-id]')).toHaveLength(3)
+
+    // Reorder — exercises mountKeyedList's keyedListReorder path
+    items.set([{ id: 2 }, { id: 0 }, { id: 1 }])
+    await flush()
+    expect(container.querySelectorAll('span[data-id]')).toHaveLength(3)
+
+    items.set([])
+    await flush()
+    expect(container.querySelectorAll('span[data-id]')).toHaveLength(0)
+    unmount()
+  })
+
+  it('CONTRACT: <For> + DIRECT keyed-array function child does not throw NotFoundError or lose children', async () => {
+    // 10 For rows. Each row's children function returns a FUNCTION
+    // `() => signal().map(...)` directly — NOT wrapped in a `<div>`.
+    // mountFor's renderInto then calls `mountChild(fn, frag, before)`,
+    // mountChild creates `mountKeyedList(fn, frag, before, ...)` —
+    // capturing the For's DocumentFragment as `parent`. Once the frag
+    // moves to the live parent, the closure-captured `parent` is stale.
+    //
+    // The initial signal value MUST be a non-empty keyed array for
+    // `isKeyedArray(sample)` (mount.ts) to route into mountKeyedList;
+    // an empty initial array would route into mountReactive instead
+    // (already covered by the For-of-Show fix in #776). Each row starts
+    // with one item so we land on mountKeyedList, then we grow each
+    // row's array — mountKeyedList's mountNewEntries calls
+    // `parent.insertBefore(anchor, tailMarker)` which throws against
+    // the stale frag unless the live-parent fix is applied.
+    const itemSignals = Array.from({ length: 10 }, (_, rowIdx) =>
+      signal<{ id: number }[]>([{ id: rowIdx * 100 }]),
+    )
+    const indices = Array.from({ length: 10 }, (_, i) => i)
+
+    // Cast: ForProps.children narrows to `(item: T) => VNode | NativeItem`,
+    // but the runtime ALSO accepts a function return (mount.ts's mountChild
+    // function branch handles it). This shape is exactly what triggers
+    // mountKeyedList with frag-as-parent — the public type doesn't expose
+    // it, so we cast through an explicit ForProps<number> shape.
+    const forProps: ForProps<number> = {
+      each: indices,
+      by: (i: number) => i,
+      // children returns a FUNCTION (not a VNode). That function returns
+      // a keyed array — mountChild's function branch routes it to
+      // mountKeyedList with frag as parent.
+      children: ((rowIdx: number) =>
+        () =>
+          (itemSignals[rowIdx] as ReturnType<typeof signal<{ id: number }[]>>)().map((v) =>
+            h('span', { key: v.id, 'data-rowitem': `${rowIdx}-${v.id}` }, String(v.id)),
+          )) as unknown as (item: number) => VNode,
+    }
+    const { container, unmount } = mountInBrowser(
+      h('div', { id: 'root' }, For(forProps)),
+    )
+    await flush()
+    try {
+      // Sanity: one item per row at mount, 10 total.
+      expect(container.querySelectorAll('span[data-rowitem]')).toHaveLength(10)
+
+      // Grow every row's array to 5 items each — 10 rows × 5 = 50.
+      // Bug fires HERE on EVERY row: mountKeyedList's mountNewEntries
+      // calls `parent.insertBefore(anchor, tailMarker)` against the
+      // stale frag captured at the For's initial mount.
+      for (let r = 0; r < 10; r++) {
+        const s = itemSignals[r] as ReturnType<typeof signal<{ id: number }[]>>
+        s.set([0, 1, 2, 3, 4].map((id) => ({ id: r * 100 + id })))
+      }
+      await flush()
+
+      expect(container.querySelectorAll('span[data-rowitem]')).toHaveLength(50)
+
+      // Reorder one row — exercises mountKeyedList's reorder path
+      // (keyedListReorder → applyKeyedMoves → moveEntryBefore → stale
+      // `parent.insertBefore(startNode, before)`). All items must remain.
+      const s0 = itemSignals[0] as ReturnType<typeof signal<{ id: number }[]>>
+      s0.set([4, 0, 2, 1, 3].map((id) => ({ id: id })))
+      await flush()
+      expect(container.querySelectorAll('span[data-rowitem]')).toHaveLength(50)
+    } finally {
+      unmount()
+    }
+  })
+})

package/src/tests/rs-collapse-dyn-h.browser.test.ts

@@ -0,0 +1,303 @@
+import { signal } from '@pyreon/reactivity'
+import { flush } from '@pyreon/test-utils/browser'
+import { afterEach, describe, expect, it } from 'vitest'
+import { _rsCollapseDynH, mount } from '../index'
+
+// Runtime helper for the HANDLER-COMBINED dynamic-collapse slice — the
+// follow-up to the strict no-handler PR sequence (#765/#766/#767/#771).
+// Closes the largest remaining real-corpus dynamic-collapse gap: the
+// `<Button state={cond ? 'a' : 'b'} onClick={h}>` shape that PR #767's
+// `tryDynamicCollapse` BAILED by design ("PR 3 scope: no-handler only").
+//
+// Structurally the union of:
+//   - `_rsCollapseDyn`'s stride-2 value-major class dispatch
+//   - `_rsCollapseH`'s handler re-attachment via `_bindEvent`
+//
+// Proves what `_rsCollapseDynH` owns:
+//   1. Class dispatch identical to `_rsCollapseDyn` (value flip / mode
+//      flip / combined flip all patch className IN PLACE on SAME node)
+//   2. Handlers attached + dispatched correctly across value flips
+//      (handler identity preserved; same el; click fires once per click)
+//   3. Both dispatchers + handlers compose without interference —
+//      handler stays attached after a value flip, value dispatch keeps
+//      working after handler invocation, mode flip doesn't break handlers
+//   4. Disposers chained — class, all handlers, children all cleaned up
+//
+// Layer-pure: no @pyreon/styler import — CSS via plain <style> just
+// like the existing rs-collapse-dyn / rs-collapse-h suites.
+
+describe('_rsCollapseDynH (real browser)', () => {
+  const cleanup: Array<() => void> = []
+  afterEach(() => {
+    for (const u of cleanup.splice(0)) u()
+  })
+
+  function injectCss(css: string): void {
+    const el = document.createElement('style')
+    el.textContent = css
+    document.head.appendChild(el)
+    cleanup.push(() => el.remove())
+  }
+
+  function mountInto(node: ReturnType<typeof _rsCollapseDynH>): HTMLElement {
+    const root = document.createElement('div')
+    document.body.appendChild(root)
+    const dispose = mount(node as unknown as Parameters<typeof mount>[0], root)
+    cleanup.push(() => {
+      dispose()
+      root.remove()
+    })
+    return root
+  }
+
+  const ternaryClasses = (prefix: string): readonly string[] => [
+    `${prefix}-v0-light`,
+    `${prefix}-v0-dark`,
+    `${prefix}-v1-light`,
+    `${prefix}-v1-dark`,
+  ]
+
+  it('cold mount picks value=0 + light + attaches handlers', async () => {
+    injectCss(`
+      .rdh1-v0-light{color:rgb(1,1,1)}.rdh1-v0-dark{color:rgb(2,2,2)}
+      .rdh1-v1-light{color:rgb(3,3,3)}.rdh1-v1-dark{color:rgb(4,4,4)}
+    `)
+    const cond = signal(false)
+    const isDark = signal(false)
+    let clicks = 0
+    const root = mountInto(
+      _rsCollapseDynH(
+        '<button>Save</button>',
+        ternaryClasses('rdh1'),
+        () => (cond() ? 1 : 0),
+        () => isDark(),
+        { onClick: () => clicks++ },
+      ),
+    )
+    await flush()
+    const btn = root.querySelector('button') as HTMLElement
+    expect(btn.className).toBe('rdh1-v0-light')
+    btn.click()
+    expect(clicks).toBe(1)
+  })
+
+  it('value flip swaps class on SAME node — handler stays attached', async () => {
+    injectCss(`
+      .rdh2-v0-light{color:rgb(10,10,10)}.rdh2-v0-dark{color:rgb(20,20,20)}
+      .rdh2-v1-light{color:rgb(30,30,30)}.rdh2-v1-dark{color:rgb(40,40,40)}
+    `)
+    const cond = signal(false)
+    const isDark = signal(false)
+    let clicks = 0
+    const root = mountInto(
+      _rsCollapseDynH(
+        '<button>X</button>',
+        ternaryClasses('rdh2'),
+        () => (cond() ? 1 : 0),
+        () => isDark(),
+        { onClick: () => clicks++ },
+      ),
+    )
+    await flush()
+    const before = root.querySelector('button') as HTMLElement
+    before.click()
+    expect(clicks).toBe(1)
+
+    cond.set(true)
+    await flush()
+    const after = root.querySelector('button') as HTMLElement
+    expect(after).toBe(before) // node identity preserved
+    expect(after.className).toBe('rdh2-v1-light')
+
+    // Handler still attached post-value-flip — same closure, same callback identity
+    after.click()
+    expect(clicks).toBe(2)
+  })
+
+  it('mode flip swaps class on SAME node — handler stays attached (preserves _rsCollapseH contract)', async () => {
+    injectCss(`
+      .rdh3-v0-light{color:rgb(50,50,50)}.rdh3-v0-dark{color:rgb(60,60,60)}
+      .rdh3-v1-light{color:rgb(70,70,70)}.rdh3-v1-dark{color:rgb(80,80,80)}
+    `)
+    const cond = signal(true) // pin valueIndex to 1
+    const isDark = signal(false)
+    let clicks = 0
+    const root = mountInto(
+      _rsCollapseDynH(
+        '<button>Y</button>',
+        ternaryClasses('rdh3'),
+        () => (cond() ? 1 : 0),
+        () => isDark(),
+        { onClick: () => clicks++ },
+      ),
+    )
+    await flush()
+    const before = root.querySelector('button') as HTMLElement
+    expect(before.className).toBe('rdh3-v1-light')
+
+    isDark.set(true)
+    await flush()
+    const after = root.querySelector('button') as HTMLElement
+    expect(after).toBe(before)
+    expect(after.className).toBe('rdh3-v1-dark')
+    after.click()
+    expect(clicks).toBe(1)
+  })
+
+  it('combined value + mode flip lands on the right class — handler invariant across all 4 combinations', async () => {
+    injectCss(`
+      .rdh4-v0-light{color:rgb(11,11,11)}.rdh4-v0-dark{color:rgb(22,22,22)}
+      .rdh4-v1-light{color:rgb(33,33,33)}.rdh4-v1-dark{color:rgb(44,44,44)}
+    `)
+    const cond = signal(false)
+    const isDark = signal(false)
+    let clicks = 0
+    const root = mountInto(
+      _rsCollapseDynH(
+        '<button>Z</button>',
+        ternaryClasses('rdh4'),
+        () => (cond() ? 1 : 0),
+        () => isDark(),
+        { onClick: () => clicks++ },
+      ),
+    )
+    await flush()
+    const btn = root.querySelector('button') as HTMLElement
+
+    expect(btn.className).toBe('rdh4-v0-light')
+    btn.click()
+    isDark.set(true)
+    await flush()
+    expect(btn.className).toBe('rdh4-v0-dark')
+    btn.click()
+    cond.set(true)
+    await flush()
+    expect(btn.className).toBe('rdh4-v1-dark')
+    btn.click()
+    isDark.set(false)
+    await flush()
+    expect(btn.className).toBe('rdh4-v1-light')
+    btn.click()
+    // 4 clicks across 4 combinations, all on the SAME node
+    expect(clicks).toBe(4)
+  })
+
+  it('multiple handlers — all attach + survive value/mode flips', async () => {
+    injectCss(`.rdh5-v0-light{color:rgb(1,1,1)}.rdh5-v0-dark{color:rgb(2,2,2)}.rdh5-v1-light{color:rgb(3,3,3)}.rdh5-v1-dark{color:rgb(4,4,4)}`)
+    const cond = signal(false)
+    const isDark = signal(false)
+    let clicks = 0
+    let enters = 0
+    const root = mountInto(
+      _rsCollapseDynH(
+        '<button>M</button>',
+        ternaryClasses('rdh5'),
+        () => (cond() ? 1 : 0),
+        () => isDark(),
+        {
+          onClick: () => clicks++,
+          onPointerEnter: () => enters++,
+        },
+      ),
+    )
+    await flush()
+    const btn = root.querySelector('button') as HTMLElement
+    btn.click()
+    btn.dispatchEvent(new PointerEvent('pointerenter'))
+    expect(clicks).toBe(1)
+    expect(enters).toBe(1)
+
+    cond.set(true)
+    await flush()
+    btn.click()
+    btn.dispatchEvent(new PointerEvent('pointerenter'))
+    expect(clicks).toBe(2)
+    expect(enters).toBe(2)
+  })
+
+  it('out-of-range valueIndex coerces to empty className — handlers still work', async () => {
+    // Same graceful-degradation contract as `_rsCollapseDyn`: an out-
+    // of-range index is documented as "compiler is source of truth";
+    // empty className is the runtime fallback, never a crash. Handlers
+    // are orthogonal to class dispatch and must keep working.
+    injectCss(`.rdh6-v0-light{color:rgb(5,5,5)}.rdh6-v0-dark{color:rgb(6,6,6)}`)
+    let clicks = 0
+    const root = mountInto(
+      _rsCollapseDynH(
+        '<button>Bad</button>',
+        ['rdh6-v0-light', 'rdh6-v0-dark'], // only ONE value
+        () => 7, // BUG-shaped: out of range
+        () => false,
+        { onClick: () => clicks++ },
+      ),
+    )
+    await flush()
+    const btn = root.querySelector('button') as HTMLElement
+    expect(btn.className).toBe('') // graceful
+    btn.click()
+    expect(clicks).toBe(1) // handler unaffected
+  })
+
+  it('children binder runs alongside class + handlers; ALL three dispose with the host', async () => {
+    injectCss(`.rdh7-v0-light{color:rgb(7,7,7)}.rdh7-v0-dark{color:rgb(8,8,8)}.rdh7-v1-light{color:rgb(9,9,9)}.rdh7-v1-dark{color:rgb(11,11,11)}`)
+    const cond = signal(false)
+    const isDark = signal(false)
+    let clicks = 0
+    let childDisposed = false
+    const root = mountInto(
+      _rsCollapseDynH(
+        '<button><span></span></button>',
+        ternaryClasses('rdh7'),
+        () => (cond() ? 1 : 0),
+        () => isDark(),
+        { onClick: () => clicks++ },
+        (el) => {
+          const span = el.querySelector('span') as HTMLElement
+          span.textContent = 'child'
+          return () => {
+            childDisposed = true
+          }
+        },
+      ),
+    )
+    await flush()
+    expect((root.querySelector('span') as HTMLElement).textContent).toBe('child')
+    ;(root.querySelector('button') as HTMLElement).click()
+    expect(clicks).toBe(1)
+
+    // Disposing the host (via cleanup) must fire ALL three disposers:
+    // class binding, handler bindings, child binder. Bisect-load-bearing
+    // for the disposer-chain composition shape.
+    cleanup.splice(0).forEach((u) => u())
+    expect(childDisposed).toBe(true)
+  })
+
+  it('zero handlers (empty {}) degenerates to `_rsCollapseDyn`-equivalent shape', async () => {
+    // Useful structural assertion: `_rsCollapseDynH` with no handlers
+    // behaves identically to `_rsCollapseDyn`. Guards the union as a
+    // strict superset — emit can always route to DynH; lighter-weight
+    // Dyn is just the no-handler optimization.
+    injectCss(`.rdh8-v0-light{color:rgb(80,80,80)}.rdh8-v0-dark{color:rgb(90,90,90)}.rdh8-v1-light{color:rgb(100,100,100)}.rdh8-v1-dark{color:rgb(110,110,110)}`)
+    const cond = signal(false)
+    const isDark = signal(false)
+    const root = mountInto(
+      _rsCollapseDynH(
+        '<button>Solo</button>',
+        ternaryClasses('rdh8'),
+        () => (cond() ? 1 : 0),
+        () => isDark(),
+        {}, // no handlers
+      ),
+    )
+    await flush()
+    const btn = root.querySelector('button') as HTMLElement
+    expect(btn.className).toBe('rdh8-v0-light')
+
+    cond.set(true)
+    await flush()
+    expect(btn.className).toBe('rdh8-v1-light')
+    isDark.set(true)
+    await flush()
+    expect(btn.className).toBe('rdh8-v1-dark')
+  })
+})