Testing Utilities

import { createPaletteContext, PaletteProvider } from '@macrulez/vue-command-palette/testing'

createPaletteContext

Creates a fully isolated palette context — no real DOM, no plugin, no localStorage side-effects:

import { createPaletteContext } from '@macrulez/vue-command-palette/testing'
import { mount } from '@vue/test-utils'
import { describe, it, expect, vi } from 'vitest'
import MyComponent from './MyComponent.vue'

describe('MyComponent', () => {
  it('executes the command', async () => {
    const performFn = vi.fn()

    const { provide, isOpen, query, store } = createPaletteContext({
      commands: [{ id: 'test-cmd', label: 'Test Command', perform: performFn }],
    })

    const wrapper = mount(MyComponent, {
      global: { provide },
    })

    // Interact
    query.value = 'test'
    await wrapper.find('[data-testid="item"]').trigger('click')

    expect(performFn).toHaveBeenCalledOnce()
  })
})

Options

commands

Command[] · default: []

Commands to pre-register (no group).

groups

CommandGroup[] · default: []

Groups to pre-register.

persistRecent

boolean · default: false

Enable localStorage persistence.

maxRecent

number · default: 5

Recent command limit.

maxRecentPerGroup

number · default: 0

Per-group recent limit.

localStorageKey

string · default: 'vcp:recent:test'

Key used if persistRecent is true.

onOpen

() => void · default: —

Mock callback for open events.

onClose

() => void · default: —

Mock callback for close events.

onError

(err, cmd) => void · default: —

Mock error handler.

Return value

const {
  ctx, // full PaletteContext — pass to inject-based code
  store, // CommandStore — register/search commands directly
  isOpen, // Ref<boolean>
  query, // Ref<string>
  activeIndex, // Ref<number>
  provide, // Record for Vue Test Utils `global: { provide }`
} = createPaletteContext(options)

PaletteProvider

A wrapper component that provides context to its slot children — useful for component tree tests:

import { PaletteProvider } from '@macrulez/vue-command-palette/testing'
import { mount } from '@vue/test-utils'

const wrapper = mount(PaletteProvider, {
  props: {
    commands: [{ id: 'cmd', label: 'My Command', perform: vi.fn() }],
    groups: [],
  },
  slots: {
    default: MyConsumerComponent,
  },
})