@pyreon/compiler 0.24.5 → 0.24.6

package/src/tests/runtime/events.test.ts

@@ -1,301 +0,0 @@
-// @vitest-environment happy-dom
-/// <reference lib="dom" />
-import { signal } from '@pyreon/reactivity'
-import { describe, expect, it } from 'vitest'
-import { compileAndMount } from './harness'
-
-/**
- * Compiler-runtime tests — event handler emission.
- *
- * Coverage matrix: delegated (single-word common events) vs non-delegated
- * (multi-word + uncommon) × static handler ref vs inline arrow × event
- * dispatch hits the handler. The #352 event-name casing bug surfaced
- * because non-delegated events used the wrong casing; this file locks in
- * each shape independently.
- */
-
-describe('compiler-runtime — events', () => {
-  // ── Delegated events (single-word, common) ──────────────────────────
-  it('onClick fires on bubbled click', () => {
-    let fired = 0
-    const handler = () => {
-      fired++
-    }
-    const { container, unmount } = compileAndMount(
-      `<div><button id="b" onClick={handler}>x</button></div>`,
-      { handler },
-    )
-    container.querySelector<HTMLButtonElement>('#b')!.click()
-    expect(fired).toBe(1)
-    unmount()
-  })
-
-  it('onClick with inline arrow handler fires', () => {
-    const count = signal(0)
-    const { container, unmount } = compileAndMount(
-      `<div><button id="b" onClick={() => count.set(count() + 1)}>x</button></div>`,
-      { count },
-    )
-    const btn = container.querySelector<HTMLButtonElement>('#b')!
-    btn.click()
-    btn.click()
-    expect(count()).toBe(2)
-    unmount()
-  })
-
-  it('onInput fires on real input event', () => {
-    let value = ''
-    const handler = (e: Event) => {
-      value = (e.target as HTMLInputElement).value
-    }
-    const { container, unmount } = compileAndMount(
-      `<div><input id="i" onInput={handler} /></div>`,
-      { handler },
-    )
-    const input = container.querySelector<HTMLInputElement>('#i')!
-    input.value = 'hello'
-    input.dispatchEvent(new Event('input', { bubbles: true }))
-    expect(value).toBe('hello')
-    unmount()
-  })
-
-  it('onChange fires on real change event', () => {
-    let changed = 0
-    const handler = () => {
-      changed++
-    }
-    const { container, unmount } = compileAndMount(
-      `<div><input id="i" onChange={handler} /></div>`,
-      { handler },
-    )
-    container
-      .querySelector<HTMLInputElement>('#i')!
-      .dispatchEvent(new Event('change', { bubbles: true }))
-    expect(changed).toBe(1)
-    unmount()
-  })
-
-  it('onSubmit fires on form submit', () => {
-    let submitted = 0
-    const handler = (e: Event) => {
-      e.preventDefault()
-      submitted++
-    }
-    const { container, unmount } = compileAndMount(
-      `<div><form id="f" onSubmit={handler}><button type="submit">go</button></form></div>`,
-      { handler },
-    )
-    const form = container.querySelector<HTMLFormElement>('#f')!
-    form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }))
-    expect(submitted).toBe(1)
-    unmount()
-  })
-
-  it('onFocus fires on focus event', () => {
-    let focused = 0
-    const handler = () => {
-      focused++
-    }
-    const { container, unmount } = compileAndMount(
-      `<div><input id="i" onFocus={handler} /></div>`,
-      { handler },
-    )
-    container
-      .querySelector<HTMLInputElement>('#i')!
-      .dispatchEvent(new Event('focus', { bubbles: true }))
-    expect(focused).toBe(1)
-    unmount()
-  })
-
-  it('onBlur fires on blur event', () => {
-    let blurred = 0
-    const handler = () => {
-      blurred++
-    }
-    const { container, unmount } = compileAndMount(
-      `<div><input id="i" onBlur={handler} /></div>`,
-      { handler },
-    )
-    container
-      .querySelector<HTMLInputElement>('#i')!
-      .dispatchEvent(new Event('blur', { bubbles: true }))
-    expect(blurred).toBe(1)
-    unmount()
-  })
-
-  // ── Non-delegated events (multi-word — were broken pre-#352) ────────
-  it('onKeyDown fires (multi-word event-name lowercase regression)', () => {
-    let key = ''
-    const handler = (e: KeyboardEvent) => {
-      key = e.key
-    }
-    const { container, unmount } = compileAndMount(
-      `<div><input id="i" onKeyDown={handler} /></div>`,
-      { handler },
-    )
-    container
-      .querySelector<HTMLInputElement>('#i')!
-      .dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }))
-    expect(key).toBe('Tab')
-    unmount()
-  })
-
-  it('onKeyUp fires (multi-word event-name lowercase regression)', () => {
-    let key = ''
-    const handler = (e: KeyboardEvent) => {
-      key = e.key
-    }
-    const { container, unmount } = compileAndMount(
-      `<div><input id="i" onKeyUp={handler} /></div>`,
-      { handler },
-    )
-    container
-      .querySelector<HTMLInputElement>('#i')!
-      .dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter', bubbles: true }))
-    expect(key).toBe('Enter')
-    unmount()
-  })
-
-  it('onMouseEnter fires (non-bubbling event)', () => {
-    let entered = 0
-    const handler = () => {
-      entered++
-    }
-    const { container, unmount } = compileAndMount(
-      `<div><span id="s" onMouseEnter={handler}>hover</span></div>`,
-      { handler },
-    )
-    container
-      .querySelector<HTMLSpanElement>('#s')!
-      .dispatchEvent(new MouseEvent('mouseenter'))
-    expect(entered).toBe(1)
-    unmount()
-  })
-
-  it('onPointerLeave fires (non-bubbling event)', () => {
-    let left = 0
-    const handler = () => {
-      left++
-    }
-    const { container, unmount } = compileAndMount(
-      `<div><span id="s" onPointerLeave={handler}>hover</span></div>`,
-      { handler },
-    )
-    container
-      .querySelector<HTMLSpanElement>('#s')!
-      .dispatchEvent(new PointerEvent('pointerleave'))
-    expect(left).toBe(1)
-    unmount()
-  })
-
-  // Locks in the React→DOM event-name mapping for `onDoubleClick` →
-  // `dblclick`. The mapping lives in BOTH compiler backends:
-  //   - JS fallback: packages/core/compiler/src/jsx.ts (doubleclick → dblclick)
-  //   - Rust native: packages/core/compiler/native/src/lib.rs (same shape)
-  // `onContextMenu` lowercases correctly (contextmenu) — no remap needed.
-  it('onDoubleClick fires (multi-word + delegated)', () => {
-    let dbl = 0
-    const handler = () => {
-      dbl++
-    }
-    const { container, unmount } = compileAndMount(
-      `<div><button id="b" onDoubleClick={handler}>x</button></div>`,
-      { handler },
-    )
-    container
-      .querySelector<HTMLButtonElement>('#b')!
-      .dispatchEvent(new MouseEvent('dblclick', { bubbles: true }))
-    expect(dbl).toBe(1)
-    unmount()
-  })
-
-  it('onContextMenu fires (multi-word, lowercases to contextmenu)', () => {
-    let menu = 0
-    const handler = () => {
-      menu++
-    }
-    const { container, unmount } = compileAndMount(
-      `<div><button id="b" onContextMenu={handler}>x</button></div>`,
-      { handler },
-    )
-    container
-      .querySelector<HTMLButtonElement>('#b')!
-      .dispatchEvent(new MouseEvent('contextmenu', { bubbles: true }))
-    expect(menu).toBe(1)
-    unmount()
-  })
-
-  // Audit: every multi-word React event-prop in the official component-prop
-  // list either (a) has an entry in REACT_EVENT_REMAP, OR (b) lowercases
-  // correctly to the DOM event name. This sweep exercises the most common
-  // multi-word events from across the family categories (mouse, pointer,
-  // keyboard, drag, touch, animation, transition, media, composition, form)
-  // to lock in that lowercasing alone is the right rule for all of them.
-  // If a new React event-prop is added in a future release with a non-trivial
-  // mismatch, this sweep won't catch it — but the runtime test for the
-  // specific event will. Keep this sweep as the structural audit.
-  const lowercaseSweep: ReadonlyArray<{ prop: string; event: string }> = [
-    { prop: 'onKeyDown', event: 'keydown' },
-    { prop: 'onKeyUp', event: 'keyup' },
-    { prop: 'onMouseDown', event: 'mousedown' },
-    { prop: 'onMouseUp', event: 'mouseup' },
-    { prop: 'onMouseEnter', event: 'mouseenter' },
-    { prop: 'onMouseLeave', event: 'mouseleave' },
-    { prop: 'onMouseMove', event: 'mousemove' },
-    { prop: 'onMouseOut', event: 'mouseout' },
-    { prop: 'onMouseOver', event: 'mouseover' },
-    { prop: 'onPointerDown', event: 'pointerdown' },
-    { prop: 'onPointerMove', event: 'pointermove' },
-    { prop: 'onPointerUp', event: 'pointerup' },
-    { prop: 'onPointerCancel', event: 'pointercancel' },
-    { prop: 'onPointerEnter', event: 'pointerenter' },
-    { prop: 'onPointerLeave', event: 'pointerleave' },
-    { prop: 'onPointerOver', event: 'pointerover' },
-    { prop: 'onPointerOut', event: 'pointerout' },
-    { prop: 'onGotPointerCapture', event: 'gotpointercapture' },
-    { prop: 'onLostPointerCapture', event: 'lostpointercapture' },
-    { prop: 'onDragStart', event: 'dragstart' },
-    { prop: 'onDragEnd', event: 'dragend' },
-    { prop: 'onDragEnter', event: 'dragenter' },
-    { prop: 'onDragLeave', event: 'dragleave' },
-    { prop: 'onDragOver', event: 'dragover' },
-    { prop: 'onTouchStart', event: 'touchstart' },
-    { prop: 'onTouchEnd', event: 'touchend' },
-    { prop: 'onTouchMove', event: 'touchmove' },
-    { prop: 'onTouchCancel', event: 'touchcancel' },
-    { prop: 'onAnimationStart', event: 'animationstart' },
-    { prop: 'onAnimationEnd', event: 'animationend' },
-    { prop: 'onAnimationIteration', event: 'animationiteration' },
-    { prop: 'onTransitionEnd', event: 'transitionend' },
-    { prop: 'onCompositionStart', event: 'compositionstart' },
-    { prop: 'onCompositionEnd', event: 'compositionend' },
-    { prop: 'onCompositionUpdate', event: 'compositionupdate' },
-    { prop: 'onContextMenu', event: 'contextmenu' },
-    { prop: 'onBeforeInput', event: 'beforeinput' },
-    { prop: 'onTimeUpdate', event: 'timeupdate' },
-    { prop: 'onVolumeChange', event: 'volumechange' },
-    { prop: 'onCanPlayThrough', event: 'canplaythrough' },
-    { prop: 'onLoadedData', event: 'loadeddata' },
-    { prop: 'onLoadedMetadata', event: 'loadedmetadata' },
-    { prop: 'onLoadStart', event: 'loadstart' },
-    { prop: 'onRateChange', event: 'ratechange' },
-    { prop: 'onDurationChange', event: 'durationchange' },
-  ]
-  for (const { prop, event } of lowercaseSweep) {
-    it(`${prop} → ${event} (lowercase, no remap)`, () => {
-      let fired = 0
-      const handler = () => {
-        fired++
-      }
-      const { container, unmount } = compileAndMount(
-        `<div><button id="b" ${prop}={handler}>x</button></div>`,
-        { handler },
-      )
-      container
-        .querySelector<HTMLButtonElement>('#b')!
-        .dispatchEvent(new Event(event, { bubbles: true }))
-      expect(fired).toBe(1)
-      unmount()
-    })
-  }
-})

package/src/tests/runtime/harness.ts

@@ -1,94 +0,0 @@
-import { h } from '@pyreon/core'
-import * as reactivity from '@pyreon/reactivity'
-import * as runtimeDom from '@pyreon/runtime-dom'
-import { mountInBrowser } from '@pyreon/test-utils/browser'
-import type { MountInBrowserResult } from '@pyreon/test-utils/browser'
-import { transformJSX } from '../../jsx'
-
-/**
- * Compiler-runtime test harness.
- *
- * Bridges the gap between the compiler's unit tests (which assert on the
- * generated source string) and the e2e tests (which exercise full apps).
- * The unit tests in `jsx.test.ts` proved each of PR #352's 4 silent
- * compiler bugs produced syntactically valid output; nothing in the unit
- * suite caught that the output was *behaviorally* wrong. This layer
- * compiles a JSX snippet through the real compiler, drops it into a real
- * Chromium DOM, and asserts observable behavior — events fire, signals
- * propagate, props reflect on the right DOM channel.
- *
- * ## How it works
- *
- * 1. Wrap the snippet as `function App(props) { return ${jsxExpr} }`
- *    so the compiler emits a `function` declaration with a return.
- * 2. `transformJSX(source)` produces JS that imports specific helpers
- *    (`_tpl`, `_bind`, `_bindDirect`, `_bindText`, etc.) from
- *    `@pyreon/runtime-dom`.
- * 3. Strip the import statement and the `export` keyword.
- * 4. Build a `new Function(...args, code)` whose parameter list is the
- *    union of every runtime-dom export plus the keys of the test's
- *    `context` object (signals, event handlers). The compiled code uses
- *    those names directly and `new Function` resolves them via the
- *    closure-like parameter binding.
- * 5. Invoke the factory to get the `App` component back, then render
- *    via `h(App)` + `mountInBrowser`.
- *
- * ## Why not Vite / esbuild bundling
- *
- * The previous bundle-level treeshake tests (in `flow`, `runtime-dom`,
- * `styler`) use `vite.build()` — that's the right tool for asserting
- * tree-shaking but each invocation costs 100-500ms. This harness needs
- * to scale to ~50 tests in Phase B2; the `new Function` path runs in
- * single-digit ms per test.
- *
- * ## Caveats
- *
- * - Snippets must be self-contained JSX expressions (no external imports).
- * - All non-runtime-dom symbols (signals, handlers, components) must be
- *   passed in via the `context` parameter.
- * - The compiler is invoked in JS-fallback mode if the native binary isn't
- *   available — same as the rest of the test suite.
- */
-export function compileAndMount(
-  jsxExpr: string,
-  context: Record<string, unknown> = {},
-): MountInBrowserResult {
-  // Wrap as a function so the compiler emits a return statement.
-  const source = `export function App(props) { return ${jsxExpr} }`
-  const compiled = transformJSX(source, 'compile-runtime-test.tsx').code
-
-  // Strip ALL `@pyreon/*` imports — we inject the symbols by name
-  // through `new Function` parameters instead. Both runtime-dom and
-  // reactivity exports are unioned in below, so any compiler-emitted
-  // import (`_tpl`, `_bind`, `_bindDirect`, `_bindText`, `_applyProps`,
-  // etc.) resolves through the parameter binding. Strip the `export`
-  // keyword so `App` is in factory scope.
-  const code = compiled
-    .replace(/^\s*import\s*\{[^}]+\}\s*from\s*["']@pyreon\/[^"']+["'];?\s*$/gm, '')
-    .replace(/export\s+function\s+App/, 'function App')
-
-  // Union of runtime-dom + reactivity exports + test-supplied context,
-  // fed into the factory's parameter list. The compiled code uses these
-  // names directly (e.g. `_tpl(...)`, `_bind(...)`, `sig.set(...)`) —
-  // `new Function` binds them via closure-equivalent parameter resolution.
-  // Same-name overrides resolve in declaration order: later wins. We put
-  // user-supplied context LAST so a test can shadow a runtime export if
-  // it ever needs to (rare).
-  const runtimeKeys = Object.keys(runtimeDom)
-  const reactivityKeys = Object.keys(reactivity).filter((k) => !runtimeKeys.includes(k))
-  const contextKeys = Object.keys(context).filter(
-    (k) => !runtimeKeys.includes(k) && !reactivityKeys.includes(k),
-  )
-  const allKeys = [...runtimeKeys, ...reactivityKeys, ...contextKeys]
-  const allValues = [
-    ...runtimeKeys.map((k) => (runtimeDom as Record<string, unknown>)[k]),
-    ...reactivityKeys.map((k) => (reactivity as Record<string, unknown>)[k]),
-    ...contextKeys.map((k) => context[k]),
-  ]
-
-  // eslint-disable-next-line no-new-func
-  const factory = new Function(...allKeys, `${code}\nreturn App`)
-  const App = factory(...allValues) as (props: object) => unknown
-
-  return mountInBrowser(h(App as never, {}) as never)
-}

package/src/tests/runtime/pr-352-shapes.test.ts

@@ -1,121 +0,0 @@
-// @vitest-environment happy-dom
-/// <reference lib="dom" />
-import { signal } from '@pyreon/reactivity'
-import { describe, expect, it } from 'vitest'
-import { flush } from '@pyreon/test-utils/browser'
-import { compileAndMount } from './harness'
-
-/**
- * Compiler-runtime regression tests for the 4 bug shapes shipped in PR #352.
- *
- * Each test was bisect-verifiable when the corresponding compiler fix was
- * reverted. They are the proof-of-approach for the harness — small,
- * focused, observable-behavior assertions against compiled JSX in real
- * Chromium. Phase B2 expands this set to ~50 representative shapes.
- */
-
-describe('compiler-runtime — PR #352 bug shapes (real Chromium)', () => {
-  // ── Bug 1: event-name casing ────────────────────────────────────────
-  // Before #352 the compiler emitted `__ev_keyDown` (camelCase) instead
-  // of `__ev_keydown`. The browser dispatches lowercase event names
-  // exclusively, so multi-word handlers never fired. With the fix in
-  // place the keydown event correctly invokes the handler.
-  it('multi-word event names are lowercased so browser dispatch hits them', async () => {
-    let pressedKey = ''
-    const handleKey = (e: KeyboardEvent) => {
-      pressedKey = e.key
-    }
-    const { container, unmount } = compileAndMount(
-      `<div><input id="ev" onKeyDown={handleKey} /></div>`,
-      { handleKey },
-    )
-    const input = container.querySelector<HTMLInputElement>('#ev')!
-    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
-    expect(pressedKey).toBe('Enter')
-    unmount()
-  })
-
-  // ── Bug 2: signal-method auto-call ──────────────────────────────────
-  // Before #352 the compiler auto-called bare signal references in JSX
-  // event handlers, rewriting `input.set(x)` to `input().set(x)`. Click
-  // handlers calling `signal.set(...)` silently failed (TypeError on
-  // string `.set`). With the fix in place the click correctly invokes
-  // the setter.
-  it('signal.method() in event handlers is NOT double-called', async () => {
-    const count = signal(0)
-    const { container, unmount } = compileAndMount(
-      `<div><button id="b" onClick={() => count.set(count() + 1)}>+</button></div>`,
-      { count },
-    )
-    const btn = container.querySelector<HTMLButtonElement>('#b')!
-    btn.click()
-    btn.click()
-    btn.click()
-    expect(count()).toBe(3)
-    unmount()
-  })
-
-  // ── Bug 3: JSX text/expression whitespace ───────────────────────────
-  // Before #352 same-line whitespace adjacent to expressions was
-  // stripped: `<p>doubled: {x}</p>` rendered "doubled:0" not
-  // "doubled: 0". With the fix in place (React/Babel
-  // cleanJSXElementLiteralChild algorithm) the trailing space survives.
-  it('same-line whitespace before an expression is preserved', async () => {
-    const x = signal(7)
-    const { container, unmount } = compileAndMount(
-      `<div><p id="p">doubled: {x()}</p></div>`,
-      { x },
-    )
-    const p = container.querySelector('#p')!
-    expect(p.textContent).toBe('doubled: 7')
-    x.set(42)
-    await flush()
-    expect(p.textContent).toBe('doubled: 42')
-    unmount()
-  })
-
-  // ── Bug 4a: DOM-property assignment (value) ─────────────────────────
-  // Before #352 the compiler emitted `setAttribute("value", v)` for
-  // input value. The HTML attribute and the live `.value` property
-  // diverge after the user types — clearing the signal then only reset
-  // the attribute, leaving stale text. With the fix in place the
-  // compiler emits `el.value = v` so the live property reflects.
-  it('input value uses the .value property (not setAttribute)', async () => {
-    const text = signal('hello')
-    const { container, unmount } = compileAndMount(
-      `<div><input id="t" value={() => text()} /></div>`,
-      { text },
-    )
-    const input = container.querySelector<HTMLInputElement>('#t')!
-    expect(input.value).toBe('hello')
-    text.set('world')
-    await flush()
-    expect(input.value).toBe('world')
-    text.set('')
-    await flush()
-    expect(input.value).toBe('')
-    unmount()
-  })
-
-  // ── Bug 4b: DOM-property assignment (checked) ───────────────────────
-  // Before #352 the compiler used `setAttribute("checked", ...)` for
-  // checkbox state. Presence of the attribute means "checked" in HTML
-  // regardless of value, so toggling a signal didn't uncheck the box.
-  // With the fix in place the compiler emits `el.checked = v`.
-  it('checkbox checked uses the .checked property (not setAttribute)', async () => {
-    const done = signal(true)
-    const { container, unmount } = compileAndMount(
-      `<div><input id="c" type="checkbox" checked={() => done()} /></div>`,
-      { done },
-    )
-    const cb = container.querySelector<HTMLInputElement>('#c')!
-    expect(cb.checked).toBe(true)
-    done.set(false)
-    await flush()
-    expect(cb.checked).toBe(false)
-    done.set(true)
-    await flush()
-    expect(cb.checked).toBe(true)
-    unmount()
-  })
-})

package/src/tests/runtime/reactive-props.test.ts

@@ -1,81 +0,0 @@
-// @vitest-environment happy-dom
-/// <reference lib="dom" />
-import { signal } from '@pyreon/reactivity'
-import { describe, expect, it } from 'vitest'
-import { flush } from '@pyreon/test-utils/browser'
-import { compileAndMount } from './harness'
-
-/**
- * Compiler-runtime tests — reactive props inlining.
- *
- * The compiler auto-detects `const` variables derived from `props.*` /
- * `splitProps` results and inlines them at JSX use sites for
- * fine-grained reactivity. `const x = props.y ?? 'default'; return
- * <div>{x}</div>` compiles to `_bind(() => { t.data = (props.y ?? 'default') })`.
- *
- * This file pins the contract: the inlined expression really IS reactive
- * at the call site — changing the underlying signal updates the DOM
- * without re-rendering the component.
- */
-
-describe('compiler-runtime — reactive props inlining', () => {
-  it('text content from a signal updates reactively', async () => {
-    const value = signal('initial')
-    const { container, unmount } = compileAndMount(
-      `<div><p id="p">{value()}</p></div>`,
-      { value },
-    )
-    expect(container.querySelector('#p')!.textContent).toBe('initial')
-    value.set('updated')
-    await flush()
-    expect(container.querySelector('#p')!.textContent).toBe('updated')
-    unmount()
-  })
-
-  it('class attribute updates reactively', async () => {
-    const cls = signal('a')
-    const { container, unmount } = compileAndMount(
-      `<div><span id="s" class={cls()}>x</span></div>`,
-      { cls },
-    )
-    expect(container.querySelector('#s')!.className).toBe('a')
-    cls.set('b c')
-    await flush()
-    expect(container.querySelector('#s')!.className).toBe('b c')
-    unmount()
-  })
-
-  it('expression with multiple signals tracks all dependencies', async () => {
-    const a = signal('hello')
-    const b = signal('world')
-    const { container, unmount } = compileAndMount(
-      `<div><p id="p">{a() + ' ' + b()}</p></div>`,
-      { a, b },
-    )
-    expect(container.querySelector('#p')!.textContent).toBe('hello world')
-    a.set('hi')
-    await flush()
-    expect(container.querySelector('#p')!.textContent).toBe('hi world')
-    b.set('there')
-    await flush()
-    expect(container.querySelector('#p')!.textContent).toBe('hi there')
-    unmount()
-  })
-
-  it('nested signal access in template literal updates reactively', async () => {
-    const name = signal('Alice')
-    const count = signal(3)
-    const { container, unmount } = compileAndMount(
-      `<div><p id="p">{` + '`${name()} has ${count()} items`' + `}</p></div>`,
-      { name, count },
-    )
-    expect(container.querySelector('#p')!.textContent).toBe('Alice has 3 items')
-    count.set(7)
-    await flush()
-    expect(container.querySelector('#p')!.textContent).toBe('Alice has 7 items')
-    name.set('Bob')
-    await flush()
-    expect(container.querySelector('#p')!.textContent).toBe('Bob has 7 items')
-    unmount()
-  })
-})