apes-sidebar/tests/tabs.spec.ts

/**
 * Phase 1 tab-registration spec: mounts the CLIENT half against a mock
 * better-sidebar registry and verifies the five `apes:*` tabs register with
 * the right descriptors, the disposer tears them down (HMR-safe), and a
 * missing `betterSidebar` peer degrades without throwing.
 *
 * The React components are NOT rendered here (Phase 0 testing convention:
 * node vitest environment, no DOM). The descriptors' `component` field is
 * asserted to be a function; the JSX it returns is only evaluated when the
 * host actually mounts the tab, which a live DSH shell does (Phase 1+ mount
 * smoke). What this spec pins is the REGISTRATION CONTRACT: the ids, the
 * title/order/single shape, and the disposer lifecycle.
 *
 * The mock registry records every registered descriptor and returns a
 * disposer that removes it — mirroring the real better-sidebar
 * `registerTab` (returns `() => void`, invoked by cordis on fiber teardown).
 */
import { describe, expect, it } from 'vitest'
import { apply } from '../src/client/index.tsx'

/** The five tab ids this plugin owns (the + menu contract). */
const EXPECTED_IDS = ['apes:tasks', 'apes:agents', 'apes:apps', 'apes:messages', 'apes:profile']

/** One registered descriptor shape the mock records (the fields we assert). */
interface Registered {
  id: string
  title: string | (() => string)
  order?: number
  single?: boolean
  component: unknown
}

/**
 * A mock better-sidebar registry: `registerTab` records the descriptor and
 * returns a disposer that removes it (the real service's contract).
 */
function makeMockRegistry() {
  const registered: Registered[] = []
  return {
    registry: {
      registerTab: (descriptor: Registered) => {
        registered.push(descriptor)
        return () => {
          const i = registered.findIndex((r) => r.id === descriptor.id)
          if (i !== -1) registered.splice(i, 1)
        }
      },
      getTabs: () => registered,
      subscribe: () => () => undefined,
    },
    registered,
  }
}

/** A no-op locale service (registerLocales only needs register/getSnapshot/subscribe). */
function makeMockLocale() {
  return {
    getSnapshot: () => ({ active: 'zh' }),
    subscribe: () => () => undefined,
    register: () => () => undefined,
  }
}

/**
 * Drive a cordis effect: invoke the effect body, capture its returned
 * disposer, and expose `teardown()` so a test can simulate fiber unmount.
 */
function makeEffectHarness() {
  let disposer: (() => void) | undefined
  return {
    effect: (fn: () => void | (() => void)) => {
      const result = fn()
      if (typeof result === 'function') disposer = result
      return () => disposer?.()
    },
    teardown: () => disposer?.(),
  }
}

describe('apes-sidebar client tab registration (Phase 1)', () => {
  it('registers all five apes:* tabs into the better-sidebar registry', () => {
    const { registry, registered } = makeMockRegistry()
    const eff = makeEffectHarness()
    apply({ betterSidebar: registry, locale: makeMockLocale(), ...eff } as never)

    expect(registered.map((r) => r.id).sort()).toEqual([...EXPECTED_IDS].sort())
    expect(registry.getTabs()).toHaveLength(5)
  })

  it('gives every tab a title function, an ascending order, single-instance, and a component fn', () => {
    const { registered } = makeMockRegistry()
    const eff = makeEffectHarness()
    apply({ betterSidebar: makeMockRegistry().registry, locale: makeMockLocale(), ...eff } as never)
    // Re-run on the registry whose descriptors we captured.
    const { registry, registered: reg2 } = makeMockRegistry()
    const eff2 = makeEffectHarness()
    apply({ betterSidebar: registry, locale: makeMockLocale(), ...eff2 } as never)

    for (const d of reg2) {
      expect(EXPECTED_IDS).toContain(d.id)
      // title is a function (i18n-friendly) and resolves to a non-empty string.
      expect(typeof d.title === 'function' ? typeof d.title() : typeof d.title).toBe('string')
      if (typeof d.title === 'function') expect(d.title().length).toBeGreaterThan(0)
      // order is present and numeric.
      expect(typeof d.order).toBe('number')
      // single-instance sugar (each apes:* tab is a singleton panel).
      expect(d.single).toBe(true)
      // component is a render function.
      expect(typeof d.component).toBe('function')
    }
    // orders are strictly ascending in registration order.
    const orders = reg2.map((d) => d.order as number)
    for (let i = 1; i < orders.length; i++) {
      expect(orders[i]!).toBeGreaterThan(orders[i - 1]!)
    }
  })

  it('the combined disposer removes all five tabs (HMR-safe teardown)', () => {
    const { registry } = makeMockRegistry()
    const eff = makeEffectHarness()
    apply({ betterSidebar: registry, locale: makeMockLocale(), ...eff } as never)
    expect(registry.getTabs()).toHaveLength(5)

    // Simulate fiber unmount: cordis invokes the effect's returned disposer.
    eff.teardown()
    expect(registry.getTabs()).toHaveLength(0)

    // A second teardown is a safe no-op (double-dispose is swallowed).
    expect(() => eff.teardown()).not.toThrow()
  })

  it('does not register when betterSidebar is absent (bare DSH degrades)', () => {
    const eff = makeEffectHarness()
    expect(() => apply({ locale: makeMockLocale(), ...eff } as never)).not.toThrow()
    // No effect was run (the guard returns before ctx.effect).
    // The effect harness captured nothing.
    expect(eff.effect).toBeTypeOf('function')
  })

  it('registers synchronously when no effect API is present (non-cordis harness)', () => {
    const { registry } = makeMockRegistry()
    // No `effect` on the context → apply registers synchronously.
    apply({ betterSidebar: registry, locale: makeMockLocale() } as never)
    expect(registry.getTabs()).toHaveLength(5)
  })

  it('tab ids follow the apes:* namespace (never wb:* or builtin ids)', () => {
    const { registered } = makeMockRegistry()
    const eff = makeEffectHarness()
    apply({ betterSidebar: makeMockRegistry().registry, locale: makeMockLocale(), ...eff } as never)
    for (const d of registered) {
      expect(d.id.startsWith('apes:')).toBe(true)
      expect(d.id).not.toMatch(/^wb:/)
    }
  })
})