VueCraft NPM

Утилиты для тестирования ​

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

createPaletteContext ​

Создаёт полностью изолированный контекст палитры — без реального DOM, без плагина, без побочных эффектов localStorage:

ts
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 },
    })

    // Взаимодействие
    query.value = 'test'
    await wrapper.find('[data-testid="item"]').trigger('click')

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

Опции ​

commands ​

Command[] · по умолчанию: []

Команды для предварительной регистрации (без группы).

groups ​

CommandGroup[] · по умолчанию: []

Группы для предварительной регистрации.

persistRecent ​

boolean · по умолчанию: false

Включить персистентность в localStorage.

maxRecent ​

number · по умолчанию: 5

Лимит недавних команд.

maxRecentPerGroup ​

number · по умолчанию: 0

Лимит недавних на группу.

localStorageKey ​

string · по умолчанию: 'vcp:recent:test'

Ключ, если persistRecent равен true.

onOpen ​

() => void · по умолчанию: —

Мок-колбэк для событий открытия.

onClose ​

() => void · по умолчанию: —

Мок-колбэк для событий закрытия.

onError ​

(err, cmd) => void · по умолчанию: —

Мок-обработчик ошибок.

Возвращаемое значение ​

ts
const {
  ctx, // полный PaletteContext — передавайте в код на основе inject
  store, // CommandStore — регистрируйте/ищите команды напрямую
  isOpen, // Ref<boolean>
  query, // Ref<string>
  activeIndex, // Ref<number>
  provide, // объект для Vue Test Utils `global: { provide }`
} = createPaletteContext(options)

PaletteProvider ​

Компонент-обёртка, предоставляющий контекст своим дочерним элементам слота — полезен для тестов дерева компонентов:

ts
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,
  },
})