@glossarist/concept-browser 0.3.4 → 0.3.7

package/src/__tests__/search-bar.test.ts

@@ -0,0 +1,219 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import { createRouter, createMemoryHistory } from 'vue-router';
+import SearchBar from '../components/SearchBar.vue';
+import { useVocabularyStore } from '../stores/vocabulary';
+import { useUiStore } from '../stores/ui';
+import type { Manifest, SearchHit } from '../adapters/types';
+
+function makeManifest(): Manifest {
+  return {
+    id: 'test',
+    datasetUri: 'https://glossarist.org/test/concept',
+    title: 'Test Dataset',
+    description: 'A test dataset',
+    owner: 'ISO',
+    baseUrl: '/data/test',
+    languages: ['eng'],
+    conceptCount: 10,
+    conceptUrlTemplate: '/data/test/concepts/{id}.json',
+    indexUrl: '/data/test/index.json',
+    contextUrl: '/data/test/context.json',
+    uriBase: 'https://glossarist.org',
+    status: 'published',
+    schemaVersion: '1.0',
+    tags: [],
+    lastUpdated: '2025-01-01',
+    sourceRepo: 'https://example.com/repo',
+    chunkSize: 1000,
+    color: '#3366ff',
+  };
+}
+
+function makeHit(overrides: Partial<SearchHit> = {}): SearchHit {
+  return {
+    conceptId: '3.1.1.1',
+    registerId: 'test',
+    designation: 'test term',
+    language: 'eng',
+    matchField: 'designation',
+    ...overrides,
+  };
+}
+
+async function createTestRouter() {
+  return createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/', name: 'home', component: { template: '<div/>' } },
+      { path: '/search', name: 'search', component: { template: '<div/>' } },
+      { path: '/dataset/:registerId/concept/:conceptId', name: 'concept', component: { template: '<div/>' } },
+    ],
+  });
+}
+
+describe('SearchBar', () => {
+  let pinia: ReturnType<typeof createPinia>;
+  let router: Awaited<ReturnType<typeof createTestRouter>>;
+  let store: ReturnType<typeof useVocabularyStore>;
+
+  beforeEach(async () => {
+    pinia = createPinia();
+    setActivePinia(pinia);
+    router = await createTestRouter();
+    router.push('/search');
+    await router.isReady();
+    store = useVocabularyStore();
+    store.manifests.set('test', makeManifest());
+    store.datasets.set('test', { index: [], getConceptCount: () => 0, getConcepts: () => [], search: () => [] } as any);
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  function mountSearch() {
+    return mount(SearchBar, {
+      global: { plugins: [pinia, router] },
+    });
+  }
+
+  it('renders search input with placeholder', () => {
+    const wrapper = mountSearch();
+    const input = wrapper.find('input');
+    expect(input.exists()).toBe(true);
+    expect(input.attributes('placeholder')).toContain('Search terms');
+  });
+
+  it('shows clear button when query is entered', async () => {
+    const wrapper = mountSearch();
+    const input = wrapper.find('input');
+    await input.setValue('road');
+    const clearBtn = wrapper.findAll('button').find(b => b.element.closest('.relative')?.querySelector('input'));
+    // There should be a close/X button visible
+    expect(wrapper.html()).toContain('M6 18L18 6M6 6l12 12');
+  });
+
+  it('clears search on clear button click', async () => {
+    const wrapper = mountSearch();
+    const input = wrapper.find('input');
+    await input.setValue('road');
+    // Find and click the clear button (the one inside the relative div, after the input)
+    const clearBtn = wrapper.findAll('button').find(b => b.text() === '' && b.find('svg').exists() && b.element.closest('.relative') !== null);
+    if (clearBtn) {
+      await clearBtn.trigger('click');
+      expect(wrapper.find('input').element.value).toBe('');
+    }
+  });
+
+  it('shows loading spinner during search', async () => {
+    const wrapper = mountSearch();
+    // Mock a slow search
+    store.searchAcrossDatasets = vi.fn(() => new Promise<SearchHit[]>(() => {}));
+    const input = wrapper.find('input');
+    await input.setValue('road');
+    const form = wrapper.find('form');
+    await form.trigger('submit');
+    await flushPromises();
+    // Should show spinner SVG
+    expect(wrapper.html()).toContain('animate-spin');
+  });
+
+  it('shows results after search', async () => {
+    const hits: SearchHit[] = [
+      makeHit({ conceptId: '3.1.1.1', designation: 'road network' }),
+      makeHit({ conceptId: '3.1.1.2', designation: 'road user' }),
+    ];
+    store.searchAcrossDatasets = vi.fn(async () => hits);
+    const wrapper = mountSearch();
+    const input = wrapper.find('input');
+    await input.setValue('road');
+    await wrapper.find('form').trigger('submit');
+    await flushPromises();
+    expect(wrapper.text()).toContain('2 results');
+    expect(wrapper.text()).toContain('road network');
+    expect(wrapper.text()).toContain('road user');
+  });
+
+  it('shows empty state when no results', async () => {
+    store.searchAcrossDatasets = vi.fn(async () => []);
+    const wrapper = mountSearch();
+    const input = wrapper.find('input');
+    await input.setValue('zzzznonexistent');
+    await wrapper.find('form').trigger('submit');
+    await flushPromises();
+    expect(wrapper.text()).toContain('0 results');
+    expect(wrapper.text()).toContain('No concepts found');
+  });
+
+  it('groups results by dataset', async () => {
+    const hits: SearchHit[] = [
+      makeHit({ registerId: 'test', designation: 'term1' }),
+      makeHit({ registerId: 'other', designation: 'term2' }),
+    ];
+    store.manifests.set('other', { ...makeManifest(), id: 'other', title: 'Other Dataset' });
+    store.datasets.set('other', { index: [], getConceptCount: () => 0, getConcepts: () => [] } as any);
+    store.searchAcrossDatasets = vi.fn(async () => hits);
+    const wrapper = mountSearch();
+    await wrapper.find('input').setValue('term');
+    await wrapper.find('form').trigger('submit');
+    await flushPromises();
+    expect(wrapper.text()).toContain('Test Dataset');
+    expect(wrapper.text()).toContain('Other Dataset');
+  });
+
+  it('navigates to concept on result click', async () => {
+    const hits: SearchHit[] = [makeHit()];
+    store.searchAcrossDatasets = vi.fn(async () => hits);
+    const wrapper = mountSearch();
+    await wrapper.find('input').setValue('road');
+    await wrapper.find('form').trigger('submit');
+    await flushPromises();
+    const hitBtn = wrapper.findAll('button').find(b => b.text().includes('test term'));
+    expect(hitBtn).toBeDefined();
+    await hitBtn!.trigger('click');
+    await flushPromises();
+    expect(router.currentRoute.value.name).toBe('concept');
+    expect(router.currentRoute.value.params.conceptId).toBe('3.1.1.1');
+  });
+
+  it('shows ID match badge for ID-based matches', async () => {
+    const hits: SearchHit[] = [makeHit({ matchField: 'id' })];
+    store.searchAcrossDatasets = vi.fn(async () => hits);
+    const wrapper = mountSearch();
+    await wrapper.find('input').setValue('3.1');
+    await wrapper.find('form').trigger('submit');
+    await flushPromises();
+    expect(wrapper.text()).toContain('ID match');
+  });
+
+  it('updates URL query parameter on search', async () => {
+    store.searchAcrossDatasets = vi.fn(async () => []);
+    const wrapper = mountSearch();
+    await wrapper.find('input').setValue('road');
+    await wrapper.find('form').trigger('submit');
+    await flushPromises();
+    expect(router.currentRoute.value.query.q).toBe('road');
+  });
+
+  it('shows error state on search failure', async () => {
+    store.searchAcrossDatasets = vi.fn(async () => { throw new Error('Network error'); });
+    const wrapper = mountSearch();
+    await wrapper.find('input').setValue('road');
+    await wrapper.find('form').trigger('submit');
+    await flushPromises();
+    expect(wrapper.text()).toContain('Search failed');
+    expect(wrapper.text()).toContain('Network error');
+  });
+
+  it('shows retry button on error', async () => {
+    store.searchAcrossDatasets = vi.fn(async () => { throw new Error('fail'); });
+    const wrapper = mountSearch();
+    await wrapper.find('input').setValue('road');
+    await wrapper.find('form').trigger('submit');
+    await flushPromises();
+    expect(wrapper.text()).toContain('Retry');
+  });
+});

package/src/__tests__/search-view.test.ts

@@ -0,0 +1,41 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import SearchView from '../views/SearchView.vue';
+import { useVocabularyStore } from '../stores/vocabulary';
+import { createTestRouter, setupPinia, makeManifest, makeAdapterStub } from './test-helpers';
+
+describe('SearchView', () => {
+  let pinia: ReturnType<typeof setupPinia>;
+  let router: Awaited<ReturnType<typeof createTestRouter>>;
+
+  beforeEach(async () => {
+    pinia = setupPinia();
+    router = await createTestRouter('search', '/search');
+    const store = useVocabularyStore();
+    store.manifests.set('test', makeManifest());
+    store.datasets.set('test', makeAdapterStub());
+  });
+
+  function mountView() {
+    return mount(SearchView, {
+      global: { plugins: [pinia, router], stubs: { SearchBar: true } },
+    });
+  }
+
+  it('renders breadcrumb navigation', () => {
+    const wrapper = mountView();
+    expect(wrapper.text()).toContain('Home');
+    expect(wrapper.text()).toContain('Search');
+  });
+
+  it('renders SearchBar component', () => {
+    const wrapper = mountView();
+    expect(wrapper.findComponent({ name: 'SearchBar' }).exists()).toBe(true);
+  });
+
+  it('renders breadcrumb with Home link', () => {
+    const wrapper = mountView();
+    const homeLink = wrapper.findAll('a').find(a => a.text() === 'Home');
+    expect(homeLink).toBeDefined();
+  });
+});

package/src/__tests__/stats-view.test.ts

@@ -0,0 +1,77 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import StatsView from '../views/StatsView.vue';
+import { useVocabularyStore } from '../stores/vocabulary';
+import { createTestRouter, setupPinia, makeManifest, makeAdapterStub } from './test-helpers';
+
+const testManifest = makeManifest({
+  languages: ['eng', 'fra', 'deu'],
+  conceptCount: 100,
+  languageStats: {
+    eng: { terms: 100, definitions: 95 },
+    fra: { terms: 80, definitions: 70 },
+    deu: { terms: 60, definitions: 50 },
+  },
+});
+
+describe('StatsView', () => {
+  let pinia: ReturnType<typeof setupPinia>;
+  let router: Awaited<ReturnType<typeof createTestRouter>>;
+
+  beforeEach(async () => {
+    pinia = setupPinia();
+    router = await createTestRouter('dataset', '/dataset/test/stats');
+    const store = useVocabularyStore();
+    store.manifests.set('test', testManifest);
+    store.datasets.set('test', makeAdapterStub());
+  });
+
+  function mountStats() {
+    return mount(StatsView, {
+      global: { plugins: [pinia, router] },
+      props: { registerId: 'test' },
+    });
+  }
+
+  it('renders statistics heading', async () => {
+    const wrapper = mountStats();
+    await flushPromises();
+    expect(wrapper.text()).toContain('Statistics');
+  });
+
+  it('shows total concept count', async () => {
+    const wrapper = mountStats();
+    await flushPromises();
+    expect(wrapper.text()).toContain('100 concepts');
+  });
+
+  it('shows language count', async () => {
+    const wrapper = mountStats();
+    await flushPromises();
+    expect(wrapper.text()).toContain('3 languages');
+  });
+
+  it('shows language stats table', async () => {
+    const wrapper = mountStats();
+    await flushPromises();
+    expect(wrapper.text()).toContain('English');
+    expect(wrapper.text()).toContain('French');
+    expect(wrapper.text()).toContain('German');
+  });
+
+  it('shows term and definition counts', async () => {
+    const wrapper = mountStats();
+    await flushPromises();
+    expect(wrapper.text()).toContain('100');
+    expect(wrapper.text()).toContain('95');
+    expect(wrapper.text()).toContain('80');
+  });
+
+  it('renders breadcrumb navigation', async () => {
+    const wrapper = mountStats();
+    await flushPromises();
+    expect(wrapper.text()).toContain('Home');
+    expect(wrapper.text()).toContain('Test Dataset');
+    expect(wrapper.text()).toContain('Statistics');
+  });
+});

package/src/__tests__/test-helpers.ts

@@ -0,0 +1,168 @@
+import { createPinia, setActivePinia } from 'pinia';
+import { createRouter, createMemoryHistory } from 'vue-router';
+import type { Manifest, ConceptSummary, LocalizedConcept, SearchHit } from '../adapters/types';
+
+// ── Manifest Factory ──────────────────────────────────────────────────
+
+const STUB_COMPONENT = { template: '<div/>' };
+
+export function makeManifest(overrides: Partial<Manifest> = {}): Manifest {
+  return {
+    id: 'test',
+    datasetUri: 'https://glossarist.org/test/concept',
+    title: 'Test Dataset',
+    description: 'A test dataset',
+    owner: 'ISO',
+    baseUrl: '/data/test',
+    languages: ['eng'],
+    conceptCount: 10,
+    conceptUrlTemplate: '/data/test/concepts/{id}.json',
+    indexUrl: '/data/test/index.json',
+    contextUrl: '/data/test/context.json',
+    uriBase: 'https://glossarist.org',
+    status: 'published',
+    schemaVersion: '1.0',
+    tags: [],
+    lastUpdated: '2025-01-01',
+    sourceRepo: 'https://example.com/repo',
+    chunkSize: 1000,
+    color: '#3366ff',
+    ...overrides,
+  };
+}
+
+// ── Adapter Stub ──────────────────────────────────────────────────────
+
+export interface AdapterStubOptions {
+  concepts?: ConceptSummary[];
+  search?: () => SearchHit[];
+  fetchConcept?: () => Promise<any>;
+  getAdjacentConcepts?: () => { prev: string | null; next: string | null };
+  getConceptPosition?: () => number;
+  isRangeLoaded?: () => boolean;
+  ensureChunksForRange?: () => Promise<void>;
+  ensureAllChunksLoaded?: () => Promise<void>;
+  extractEdges?: () => any[];
+  getIndexEntry?: () => any;
+}
+
+export function makeAdapterStub(options: AdapterStubOptions = {}): any {
+  return {
+    index: options.concepts ?? [],
+    manifest: null,
+    registerId: 'test',
+    getConceptCount: () => (options.concepts ?? []).length,
+    getConcepts: () => options.concepts ?? [],
+    search: options.search ?? (() => []),
+    fetchConcept: options.fetchConcept ?? (() => Promise.resolve(null)),
+    getAdjacentConcepts: options.getAdjacentConcepts ?? (() => ({ prev: null, next: null })),
+    getConceptPosition: options.getConceptPosition ?? (() => -1),
+    isRangeLoaded: options.isRangeLoaded ?? (() => true),
+    ensureChunksForRange: options.ensureChunksForRange ?? (() => Promise.resolve()),
+    ensureAllChunksLoaded: options.ensureAllChunksLoaded ?? (() => Promise.resolve()),
+    extractEdges: options.extractEdges ?? (() => []),
+    getIndexEntry: options.getIndexEntry ?? (() => null),
+  };
+}
+
+// ── Concept Data Factories ────────────────────────────────────────────
+
+export function makeLocalizedConcept(overrides: Partial<LocalizedConcept> = {}): LocalizedConcept {
+  return {
+    '@id': 'https://glossarist.org/test/concept/1/eng',
+    '@type': 'gl:LocalizedConcept',
+    'gl:languageCode': 'eng',
+    'gl:entryStatus': 'valid',
+    ...overrides,
+  };
+}
+
+export function makeConceptSummary(overrides: Partial<ConceptSummary> = {}): ConceptSummary {
+  return {
+    id: '1',
+    eng: 'test concept',
+    status: 'valid',
+    ...overrides,
+  };
+}
+
+export function makeSearchHit(overrides: Partial<SearchHit> = {}): SearchHit {
+  return {
+    conceptId: '1',
+    registerId: 'test',
+    designation: 'test',
+    language: 'eng',
+    matchField: 'designation',
+    ...overrides,
+  };
+}
+
+// ── Router Factory ────────────────────────────────────────────────────
+
+export type RouteSet = 'minimal' | 'search' | 'dataset' | 'full' | 'resolve' | 'news' | 'pages' | 'contributors' | 'graph';
+
+const ROUTE_SETS: Record<RouteSet, any[]> = {
+  minimal: [{ path: '/', name: 'home', component: STUB_COMPONENT }],
+  search: [
+    { path: '/', name: 'home', component: STUB_COMPONENT },
+    { path: '/search', name: 'search', component: STUB_COMPONENT },
+  ],
+  dataset: [
+    { path: '/', name: 'home', component: STUB_COMPONENT },
+    { path: '/dataset/:registerId', name: 'dataset', component: STUB_COMPONENT },
+    { path: '/dataset/:registerId/concept/:conceptId', name: 'concept', component: STUB_COMPONENT },
+    { path: '/dataset/:registerId/stats', name: 'stats', component: STUB_COMPONENT },
+    { path: '/dataset/:registerId/about', name: 'about', component: STUB_COMPONENT },
+  ],
+  full: [
+    { path: '/', name: 'home', component: STUB_COMPONENT },
+    { path: '/dataset/:registerId', name: 'dataset', component: STUB_COMPONENT },
+    { path: '/dataset/:registerId/concept/:conceptId', name: 'concept', component: STUB_COMPONENT },
+    { path: '/dataset/:registerId/stats', name: 'stats', component: STUB_COMPONENT },
+    { path: '/dataset/:registerId/about', name: 'about', component: STUB_COMPONENT },
+    { path: '/search', name: 'search', component: STUB_COMPONENT },
+    { path: '/graph', name: 'graph', component: STUB_COMPONENT },
+  ],
+  resolve: [
+    { path: '/', name: 'home', component: STUB_COMPONENT },
+    { path: '/dataset/:registerId/concept/:conceptId', name: 'concept', component: STUB_COMPONENT },
+    { path: '/resolve/:uri(.*)', name: 'resolve', component: STUB_COMPONENT },
+  ],
+  news: [
+    { path: '/', name: 'home', component: STUB_COMPONENT },
+    { path: '/news', name: 'news', component: STUB_COMPONENT },
+  ],
+  pages: [
+    { path: '/', name: 'home', component: STUB_COMPONENT },
+    { path: '/pages/:slug', name: 'page', component: STUB_COMPONENT },
+  ],
+  contributors: [
+    { path: '/', name: 'home', component: STUB_COMPONENT },
+    { path: '/contributors', name: 'contributors', component: STUB_COMPONENT },
+  ],
+  graph: [
+    { path: '/', name: 'home', component: STUB_COMPONENT },
+    { path: '/graph', name: 'graph', component: STUB_COMPONENT },
+  ],
+};
+
+export async function createTestRouter(
+  routeSet: RouteSet = 'minimal',
+  initialPath = '/',
+) {
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: ROUTE_SETS[routeSet],
+  });
+  router.push(initialPath);
+  await router.isReady();
+  return router;
+}
+
+// ── Pinia Setup ───────────────────────────────────────────────────────
+
+export function setupPinia() {
+  const pinia = createPinia();
+  setActivePinia(pinia);
+  return pinia;
+}

package/src/__tests__/ui-store.test.ts

@@ -0,0 +1,100 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { setActivePinia, createPinia } from 'pinia';
+import { useUiStore, type Theme } from '../stores/ui';
+
+describe('useUiStore', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    localStorage.clear();
+    document.documentElement.classList.remove('dark');
+  });
+
+  it('initializes with sidebar closed', () => {
+    const ui = useUiStore();
+    expect(ui.sidebarOpen).toBe(false);
+  });
+
+  it('initializes with eng language selected', () => {
+    const ui = useUiStore();
+    expect(ui.selectedLang).toBe('eng');
+  });
+
+  it('initializes with empty search query', () => {
+    const ui = useUiStore();
+    expect(ui.searchQuery).toBe('');
+  });
+
+  it('toggles sidebar open/closed', () => {
+    const ui = useUiStore();
+    expect(ui.sidebarOpen).toBe(false);
+    ui.toggleSidebar();
+    expect(ui.sidebarOpen).toBe(true);
+    ui.toggleSidebar();
+    expect(ui.sidebarOpen).toBe(false);
+  });
+
+  it('sets language', () => {
+    const ui = useUiStore();
+    ui.setLang('fra');
+    expect(ui.selectedLang).toBe('fra');
+  });
+
+  it('sets search query', () => {
+    const ui = useUiStore();
+    ui.searchQuery = 'test query';
+    expect(ui.searchQuery).toBe('test query');
+  });
+
+  it('defaults theme to system', () => {
+    const ui = useUiStore();
+    expect(ui.themePref).toBe('system');
+  });
+
+  it('setTheme updates preference and localStorage', () => {
+    const ui = useUiStore();
+    ui.setTheme('dark');
+    expect(ui.themePref).toBe('dark');
+    expect(localStorage.getItem('theme')).toBe('dark');
+  });
+
+  it('setTheme to light removes dark class', () => {
+    const ui = useUiStore();
+    document.documentElement.classList.add('dark');
+    ui.setTheme('light');
+    expect(document.documentElement.classList.contains('dark')).toBe(false);
+  });
+
+  it('toggleTheme switches from light to dark', () => {
+    const ui = useUiStore();
+    ui.setTheme('light');
+    ui.toggleTheme();
+    expect(ui.themePref).toBe('dark');
+  });
+
+  it('toggleTheme switches from dark to light', () => {
+    const ui = useUiStore();
+    ui.setTheme('dark');
+    ui.toggleTheme();
+    expect(ui.themePref).toBe('light');
+  });
+
+  it('reads stored theme from localStorage', () => {
+    localStorage.setItem('theme', 'dark');
+    // Need a new pinia to re-create the store
+    setActivePinia(createPinia());
+    const ui = useUiStore();
+    expect(ui.themePref).toBe('dark');
+  });
+
+  it('isDark is true when theme is dark', () => {
+    const ui = useUiStore();
+    ui.setTheme('dark');
+    expect(ui.isDark).toBe(true);
+  });
+
+  it('isDark is false when theme is light', () => {
+    const ui = useUiStore();
+    ui.setTheme('light');
+    expect(ui.isDark).toBe(false);
+  });
+});

package/src/__tests__/v-math.test.ts

@@ -19,6 +19,8 @@ class MockPlurimath {
 import { vMath } from '../directives/v-math';
 import { loadPlurimath, mathToHtml } from '../utils/plurimath';
 
+const directive = vMath as import('vue').ObjectDirective<HTMLElement>;
+
 describe('v-math directive', () => {
   let container: HTMLElement;
 
@@ -29,21 +31,20 @@ describe('v-math directive', () => {
 
   it('does nothing when no math-pending elements exist', () => {
     container.innerHTML = '<p>plain text</p>';
-    vMath.mounted!(container, {} as any);
+    directive.mounted!(container, {} as any, {} as any, {} as any);
     expect(container.innerHTML).toBe('<p>plain text</p>');
   });
 
   it('triggers loadPlurimath when math-pending elements exist', async () => {
     container.innerHTML = '<span class="math-pending" data-expr="x^2" data-format="asciimath">x^2</span>';
-    vMath.mounted!(container, {} as any);
+    directive.mounted!(container, {} as any, {} as any, {} as any);
     expect(loadPlurimath).toHaveBeenCalled();
   });
 
   it('replaces math-pending elements after loading', async () => {
     container.innerHTML = '<span class="math-pending" data-expr="x^2" data-format="asciimath">x^2</span>';
-    vMath.mounted!(container, {} as any);
+    directive.mounted!(container, {} as any, {} as any, {} as any);
 
-    // Wait for loadPlurimath promise to resolve and upgrade to run
     await vi.waitFor(() => {
       expect(mathToHtml).toHaveBeenCalledWith('x^2', 'asciimath', false);
     });
@@ -51,7 +52,7 @@ describe('v-math directive', () => {
 
   it('handles bold math-pending elements', async () => {
     container.innerHTML = '<span class="math-pending math-bold" data-expr="alpha" data-format="asciimath">alpha</span>';
-    vMath.mounted!(container, {} as any);
+    directive.mounted!(container, {} as any, {} as any, {} as any);
 
     await vi.waitFor(() => {
       expect(mathToHtml).toHaveBeenCalledWith('alpha', 'asciimath', true);
@@ -60,7 +61,7 @@ describe('v-math directive', () => {
 
   it('skips elements without data-expr', async () => {
     container.innerHTML = '<span class="math-pending">no expr</span>';
-    vMath.mounted!(container, {} as any);
+    directive.mounted!(container, {} as any, {} as any, {} as any);
 
     await vi.waitFor(() => {
       expect(mathToHtml).not.toHaveBeenCalled();
@@ -69,7 +70,7 @@ describe('v-math directive', () => {
 
   it('uses default format asciimath when data-format is missing', async () => {
     container.innerHTML = '<span class="math-pending" data-expr="x">x</span>';
-    vMath.mounted!(container, {} as any);
+    directive.mounted!(container, {} as any, {} as any, {} as any);
 
     await vi.waitFor(() => {
       expect(mathToHtml).toHaveBeenCalledWith('x', 'asciimath', false);