@glossarist/concept-browser 0.3.4 → 0.3.7

package/src/__tests__/language-detail.test.ts

@@ -0,0 +1,146 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import LanguageDetail from '../components/LanguageDetail.vue';
+import { useVocabularyStore } from '../stores/vocabulary';
+import type { LocalizedConcept } from '../adapters/types';
+import { createTestRouter, setupPinia, makeManifest, makeLocalizedConcept, makeAdapterStub } from './test-helpers';
+
+describe('LanguageDetail', () => {
+  let pinia: ReturnType<typeof setupPinia>;
+  let router: Awaited<ReturnType<typeof createTestRouter>>;
+
+  beforeEach(async () => {
+    pinia = setupPinia();
+    router = await createTestRouter('dataset', '/');
+    const store = useVocabularyStore();
+    store.manifests.set('test', makeManifest({ languages: ['eng', 'fra'] }));
+    store.datasets.set('test', makeAdapterStub());
+  });
+
+  function mountDetail(lcs: Record<string, LocalizedConcept>, activeLang = 'eng') {
+    return mount(LanguageDetail, {
+      global: { plugins: [pinia, router], directives: { math: () => {} } },
+      props: { localizedConcepts: lcs, activeLang },
+    });
+  }
+
+  it('renders language selector buttons', () => {
+    const eng = makeLocalizedConcept();
+    const fra = makeLocalizedConcept({ '@id': '.../fra', 'gl:languageCode': 'fra' });
+    const wrapper = mountDetail({ eng, fra });
+    expect(wrapper.text()).toContain('English');
+    expect(wrapper.text()).toContain('French');
+  });
+
+  it('highlights active language button', () => {
+    const eng = makeLocalizedConcept();
+    const fra = makeLocalizedConcept({ '@id': '.../fra', 'gl:languageCode': 'fra' });
+    const wrapper = mountDetail({ eng, fra }, 'eng');
+    const buttons = wrapper.findAll('button').filter(b => b.text().includes('English'));
+    expect(buttons[0].classes()).toContain('bg-ink-800');
+  });
+
+  it('emits update:activeLang on language click', async () => {
+    const eng = makeLocalizedConcept();
+    const fra = makeLocalizedConcept({ '@id': '.../fra', 'gl:languageCode': 'fra' });
+    const wrapper = mountDetail({ eng, fra }, 'eng');
+    const fraBtn = wrapper.findAll('button').find(b => b.text().includes('French'));
+    expect(fraBtn).toBeDefined();
+    await fraBtn!.trigger('click');
+    expect(wrapper.emitted('update:activeLang')?.[0]).toEqual(['fra']);
+  });
+
+  it('shows entry status badge', () => {
+    const eng = makeLocalizedConcept({ 'gl:entryStatus': 'valid' });
+    const wrapper = mountDetail({ eng });
+    expect(wrapper.text()).toContain('valid');
+  });
+
+  it('shows designations', () => {
+    const eng = makeLocalizedConcept({
+      'gl:designation': [
+        { '@type': 'gl:Expression', 'gl:term': 'road', 'gl:normativeStatus': 'preferred' },
+      ],
+    });
+    const wrapper = mountDetail({ eng });
+    expect(wrapper.text()).toContain('road');
+    expect(wrapper.text()).toContain('Expression');
+    expect(wrapper.text()).toContain('Preferred');
+  });
+
+  it('shows definition', () => {
+    const eng = makeLocalizedConcept({
+      'gl:definition': [{ '@type': 'gl:Definition', 'gl:content': 'A paved surface for vehicles.' }],
+    });
+    const wrapper = mountDetail({ eng });
+    expect(wrapper.text()).toContain('Definition');
+    expect(wrapper.text()).toContain('paved surface');
+  });
+
+  it('shows notes', () => {
+    const eng = makeLocalizedConcept({
+      'gl:notes': [{ '@type': 'gl:Note', 'gl:content': 'This is a note.' }],
+    });
+    const wrapper = mountDetail({ eng });
+    expect(wrapper.text()).toContain('Notes');
+    expect(wrapper.text()).toContain('This is a note');
+  });
+
+  it('shows examples', () => {
+    const eng = makeLocalizedConcept({
+      'gl:examples': [{ '@type': 'gl:Example', 'gl:content': 'A highway is a road.' }],
+    });
+    const wrapper = mountDetail({ eng });
+    expect(wrapper.text()).toContain('Examples');
+    expect(wrapper.text()).toContain('A highway is a road');
+  });
+
+  it('shows sources', () => {
+    const eng = makeLocalizedConcept({
+      'gl:source': [{ '@type': 'gl:Source', 'gl:sourceType': 'authoritative', 'gl:origin': { '@type': 'gl:Origin', 'gl:ref': 'ISO 7010' } }],
+    });
+    const wrapper = mountDetail({ eng });
+    expect(wrapper.text()).toContain('Sources');
+    expect(wrapper.text()).toContain('ISO 7010');
+  });
+
+  it('shows term-only state for language without definition', () => {
+    const eng = makeLocalizedConcept({
+      'gl:designation': [{ '@type': 'gl:Expression', 'gl:term': 'test', 'gl:normativeStatus': 'preferred' }],
+    });
+    delete (eng as any)['gl:definition'];
+    delete (eng as any)['gl:notes'];
+    delete (eng as any)['gl:examples'];
+    const wrapper = mountDetail({ eng });
+    expect(wrapper.text()).toContain('Term only in English');
+  });
+
+  it('shows no data message for missing language', () => {
+    const eng = makeLocalizedConcept();
+    const wrapper = mountDetail({ eng }, 'zho');
+    expect(wrapper.text()).toContain('No data available');
+  });
+
+  it('shows designation type badges', () => {
+    const eng = makeLocalizedConcept({
+      'gl:designation': [
+        { '@type': 'gl:Symbol', 'gl:term': 'H₂O', 'gl:normativeStatus': 'preferred' },
+        { '@type': 'gl:Abbreviation', 'gl:term': 'abbr', 'gl:normativeStatus': 'admitted' },
+      ],
+    });
+    const wrapper = mountDetail({ eng });
+    expect(wrapper.text()).toContain('Symbol');
+    expect(wrapper.text()).toContain('Abbreviation');
+  });
+
+  it('shows gender and plurality when present', () => {
+    const eng = makeLocalizedConcept({
+      'gl:designation': [
+        { '@type': 'gl:Expression', 'gl:term': 'route', 'gl:normativeStatus': 'preferred', 'gl:gender': 'f', 'gl:plurality': 'singular' },
+      ],
+    });
+    const wrapper = mountDetail({ eng });
+    expect(wrapper.text()).toContain('f');
+    expect(wrapper.text()).toContain('singular');
+  });
+});

package/src/__tests__/nav-icon.test.ts

@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import NavIcon from '../components/NavIcon.vue';
+
+describe('NavIcon', () => {
+  it('renders an SVG element', () => {
+    const wrapper = mount(NavIcon, { props: { name: 'home' } });
+    expect(wrapper.find('svg').exists()).toBe(true);
+  });
+
+  it('renders home icon path', () => {
+    const wrapper = mount(NavIcon, { props: { name: 'home' } });
+    const path = wrapper.find('svg path');
+    expect(path.exists()).toBe(true);
+    expect(path.attributes('d')).toBeTruthy();
+  });
+
+  it('renders search icon', () => {
+    const wrapper = mount(NavIcon, { props: { name: 'search' } });
+    expect(wrapper.find('svg').exists()).toBe(true);
+  });
+
+  it('renders graph icon', () => {
+    const wrapper = mount(NavIcon, { props: { name: 'graph' } });
+    expect(wrapper.find('svg').exists()).toBe(true);
+  });
+
+  it('falls back to info icon for unknown name', () => {
+    const wrapper = mount(NavIcon, { props: { name: 'nonexistent' } });
+    expect(wrapper.find('svg').exists()).toBe(true);
+  });
+
+  it('applies correct CSS classes', () => {
+    const wrapper = mount(NavIcon, { props: { name: 'home' } });
+    const svg = wrapper.find('svg');
+    expect(svg.classes()).toContain('w-4');
+    expect(svg.classes()).toContain('h-4');
+    expect(svg.classes()).toContain('text-ink-400');
+  });
+
+  it('renders all known icon types', () => {
+    const icons = ['home', 'search', 'graph', 'newspaper', 'users', 'info', 'chart', 'list'];
+    for (const name of icons) {
+      const wrapper = mount(NavIcon, { props: { name } });
+      expect(wrapper.find('svg').exists()).toBe(true);
+    }
+  });
+});

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

@@ -0,0 +1,87 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import { createRouter, createMemoryHistory } from 'vue-router';
+import NewsView from '../views/NewsView.vue';
+
+async function createTestRouter() {
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/', name: 'home', component: { template: '<div/>' } },
+      { path: '/news', name: 'news', component: { template: '<div/>' } },
+    ],
+  });
+  router.push('/news');
+  await router.isReady();
+  return router;
+}
+
+describe('NewsView', () => {
+  let pinia: ReturnType<typeof createPinia>;
+  let router: Awaited<ReturnType<typeof createTestRouter>>;
+
+  beforeEach(async () => {
+    pinia = createPinia();
+    setActivePinia(pinia);
+    router = await createTestRouter();
+  });
+
+  function mountNews() {
+    return mount(NewsView, {
+      global: { plugins: [pinia, router] },
+    });
+  }
+
+  it('renders breadcrumb navigation', () => {
+    const wrapper = mountNews();
+    expect(wrapper.text()).toContain('Home');
+    expect(wrapper.text()).toContain('News');
+  });
+
+  it('renders News heading', () => {
+    const wrapper = mountNews();
+    expect(wrapper.text()).toContain('News');
+  });
+
+  it('shows loading skeleton initially', () => {
+    const wrapper = mountNews();
+    expect(wrapper.find('.animate-pulse').exists()).toBe(true);
+  });
+
+  it('shows empty state when no posts', async () => {
+    globalThis.fetch = vi.fn().mockResolvedValue({ ok: true, json: () => Promise.resolve([]) });
+    const wrapper = mountNews();
+    await flushPromises();
+    expect(wrapper.text()).toContain('No news posts yet');
+  });
+
+  it('shows error state when fetch fails', async () => {
+    globalThis.fetch = vi.fn().mockRejectedValue(new Error('Network error'));
+    const wrapper = mountNews();
+    await flushPromises();
+    expect(wrapper.text()).toContain('Failed to load news posts');
+  });
+
+  it('renders posts when available', async () => {
+    const posts = [
+      { slug: 'test-post', title: 'Test Post', date: '2025-01-15', categories: ['release'], file: '/news/test-post.adoc', excerpt: 'A test excerpt.' },
+    ];
+    globalThis.fetch = vi.fn().mockResolvedValue({ ok: true, json: () => Promise.resolve(posts) });
+    const wrapper = mountNews();
+    await flushPromises();
+    expect(wrapper.text()).toContain('Test Post');
+    expect(wrapper.text()).toContain('release');
+    expect(wrapper.text()).toContain('A test excerpt.');
+  });
+
+  it('formats dates correctly', async () => {
+    const posts = [
+      { slug: 'dated', title: 'Dated', date: '2025-03-15', categories: [], file: '/news/dated.adoc', excerpt: '' },
+    ];
+    globalThis.fetch = vi.fn().mockResolvedValue({ ok: true, json: () => Promise.resolve(posts) });
+    const wrapper = mountNews();
+    await flushPromises();
+    expect(wrapper.text()).toContain('March 15, 2025');
+  });
+});

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

@@ -0,0 +1,83 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import { createRouter, createMemoryHistory } from 'vue-router';
+import PageView from '../views/PageView.vue';
+
+async function createTestRouter(path = '/pages/test-page') {
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/', name: 'home', component: { template: '<div/>' } },
+      { path: '/pages/:slug', name: 'page', component: { template: '<div/>' } },
+    ],
+  });
+  router.push(path);
+  await router.isReady();
+  return router;
+}
+
+describe('PageView', () => {
+  let pinia: ReturnType<typeof createPinia>;
+  let router: Awaited<ReturnType<typeof createTestRouter>>;
+
+  beforeEach(async () => {
+    pinia = createPinia();
+    setActivePinia(pinia);
+    router = await createTestRouter();
+  });
+
+  function mountPage() {
+    return mount(PageView, {
+      global: { plugins: [pinia, router] },
+    });
+  }
+
+  it('shows loading skeleton initially', () => {
+    const wrapper = mountPage();
+    expect(wrapper.find('.animate-pulse').exists()).toBe(true);
+  });
+
+  it('renders breadcrumb navigation', () => {
+    const wrapper = mountPage();
+    expect(wrapper.text()).toContain('Home');
+  });
+
+  it('shows page not found when fetch fails', async () => {
+    globalThis.fetch = vi.fn().mockResolvedValue({ ok: false });
+    const wrapper = mountPage();
+    await flushPromises();
+    expect(wrapper.text()).toContain('Page Not Found');
+    expect(wrapper.text()).toContain('test-page');
+  });
+
+  it('shows go home link on not found', async () => {
+    globalThis.fetch = vi.fn().mockResolvedValue({ ok: false });
+    const wrapper = mountPage();
+    await flushPromises();
+    const homeLink = wrapper.findAll('a').find(a => a.text() === 'Go Home');
+    expect(homeLink).toBeDefined();
+  });
+
+  it('renders page content when loaded', async () => {
+    globalThis.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve({ title: 'About Us', html: '<p>Hello world</p>' }),
+    });
+    const wrapper = mountPage();
+    await flushPromises();
+    expect(wrapper.text()).toContain('About Us');
+    expect(wrapper.text()).toContain('Hello world');
+  });
+
+  it('renders page title in breadcrumb', async () => {
+    globalThis.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve({ title: 'About Us', html: '<p>Content</p>' }),
+    });
+    const wrapper = mountPage();
+    await flushPromises();
+    const breadcrumb = wrapper.find('nav[aria-label="Breadcrumb"]');
+    expect(breadcrumb.text()).toContain('About Us');
+  });
+});

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

@@ -0,0 +1,77 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import { createRouter, createMemoryHistory } from 'vue-router';
+import { resetFactory, getFactory } from '../adapters/factory';
+import ResolveView from '../views/ResolveView.vue';
+
+const TEST_URI = 'https://glossarist.org/test/concept/1';
+
+async function createTestRouter(uri = TEST_URI) {
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/', name: 'home', component: { template: '<div/>' } },
+      { path: '/dataset/:registerId/concept/:conceptId', name: 'concept', component: { template: '<div/>' } },
+      { path: '/resolve/:uri(.*)', name: 'resolve', component: { template: '<div/>' } },
+    ],
+  });
+  router.push(`/resolve/${encodeURIComponent(uri)}`);
+  await router.isReady();
+  return router;
+}
+
+describe('ResolveView', () => {
+  let pinia: ReturnType<typeof createPinia>;
+  let router: Awaited<ReturnType<typeof createTestRouter>>;
+
+  beforeEach(async () => {
+    resetFactory();
+    pinia = createPinia();
+    setActivePinia(pinia);
+    router = await createTestRouter();
+    // Pre-seed the factory with a stub adapter so discoverDatasets is skipped
+    const factory = getFactory();
+    const adapter = { registerId: 'test', manifest: null };
+    (factory as any).adapters.set('test', adapter);
+  });
+
+  function mountResolve() {
+    return mount(ResolveView, {
+      global: { plugins: [pinia, router] },
+    });
+  }
+
+  it('shows resolving message while loading', () => {
+    const wrapper = mountResolve();
+    expect(wrapper.text()).toContain('Resolving...');
+  });
+
+  it('shows error when concept not found', async () => {
+    const wrapper = mountResolve();
+    await flushPromises();
+    expect(wrapper.text()).toContain('Concept not found');
+  });
+
+  it('displays the URI being resolved', async () => {
+    const wrapper = mountResolve();
+    await flushPromises();
+    expect(wrapper.text()).toContain('glossarist.org/test/concept/1');
+  });
+
+  it('shows return to home link on error', async () => {
+    const wrapper = mountResolve();
+    await flushPromises();
+    const link = wrapper.findAll('a').find(a => a.text().includes('Return to home'));
+    expect(link).toBeDefined();
+  });
+
+  it('resolves the URI via the factory resolver', async () => {
+    const factory = getFactory();
+    factory.resolver.registerDataset('test', ['https://glossarist.org/test/*']);
+    const resolution = factory.resolve(TEST_URI);
+    expect(resolution.type).toBe('internal');
+    expect(resolution).toHaveProperty('registerId', 'test');
+    expect(resolution).toHaveProperty('conceptId', '1');
+  });
+});

package/src/__tests__/router.test.ts

@@ -0,0 +1,65 @@
+import { describe, it, expect } from 'vitest';
+import { routes } from '../router/index';
+
+// We just need the route definitions, not a full router instance
+const routeMap = new Map(routes.map(r => [r.name as string, r]));
+
+describe('Router route definitions', () => {
+  it('defines all expected routes', () => {
+    const names = routes.map(r => r.name).filter(Boolean);
+    expect(names).toContain('home');
+    expect(names).toContain('dataset');
+    expect(names).toContain('concept');
+    expect(names).toContain('stats');
+    expect(names).toContain('about');
+    expect(names).toContain('search');
+    expect(names).toContain('graph');
+    expect(names).toContain('resolve');
+  });
+
+  it('uses correct path patterns', () => {
+    expect(routeMap.get('home')!.path).toBe('/');
+    expect(routeMap.get('dataset')!.path).toBe('/dataset/:registerId');
+    expect(routeMap.get('concept')!.path).toBe('/dataset/:registerId/concept/:conceptId');
+    expect(routeMap.get('stats')!.path).toBe('/dataset/:registerId/stats');
+    expect(routeMap.get('about')!.path).toBe('/dataset/:registerId/about');
+    expect(routeMap.get('search')!.path).toBe('/search');
+    expect(routeMap.get('graph')!.path).toBe('/graph');
+    expect(routeMap.get('resolve')!.path).toBe('/resolve/:uri(.*)');
+  });
+
+  it('dataset and concept routes use props: true', () => {
+    expect(routeMap.get('dataset')!.props).toBe(true);
+    expect(routeMap.get('concept')!.props).toBe(true);
+    expect(routeMap.get('stats')!.props).toBe(true);
+    expect(routeMap.get('about')!.props).toBe(true);
+  });
+
+  it('resolve route accepts any URI with wildcard', () => {
+    const resolve = routeMap.get('resolve')!;
+    expect(resolve.path).toContain(':uri(.*)');
+  });
+
+  it('uses lazy-loaded components for all routes', () => {
+    for (const route of routes) {
+      if (route.component && typeof route.component === 'function') {
+        // Dynamic import returns a function
+        expect(route.component).toBeTypeOf('function');
+      }
+    }
+  });
+
+  it('defines dataset-page catch-all after specific routes', () => {
+    const names = routes.map(r => r.name);
+    const dsIdx = names.indexOf('dataset');
+    const dsPageIdx = names.indexOf('dataset-page');
+    expect(dsIdx).toBeGreaterThan(-1);
+    expect(dsPageIdx).toBeGreaterThan(dsIdx);
+  });
+
+  it('defines page slug catch-all as last route', () => {
+    const last = routes[routes.length - 1];
+    expect(last.name).toBe('page');
+    expect(last.path).toBe('/:slug');
+  });
+});