@glossarist/concept-browser 0.3.4 → 0.3.7

package/src/__tests__/concept-detail-interaction.test.ts

@@ -0,0 +1,251 @@
+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 ConceptDetail from '../components/ConceptDetail.vue';
+import { useVocabularyStore } from '../stores/vocabulary';
+import type { Manifest, ConceptDocument, LocalizedConcept } from '../adapters/types';
+// Prevent the 2.7MB Opal runtime from loading in tests
+vi.mock('../utils/plurimath', () => ({
+  loadPlurimath: () => new Promise(() => {}),
+  mathToHtml: () => '<code class="math-fallback">x</code>',
+  renderToMathML: () => null,
+}));
+
+import { vMath } from '../directives/v-math';
+
+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', 'fra'],
+    conceptCount: 1,
+    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,
+    languageOrder: ['eng', 'fra'],
+    color: '#3366ff',
+  };
+}
+
+function makeConcept(): ConceptDocument {
+  return {
+    '@context': 'https://glossarist.org/context',
+    '@id': 'https://glossarist.org/test/concept/1',
+    '@type': 'gl:Concept',
+    'gl:identifier': '1',
+    'gl:localizedConcept': {
+      eng: {
+        '@id': 'https://glossarist.org/test/concept/1/eng',
+        '@type': 'gl:LocalizedConcept',
+        'gl:languageCode': 'eng',
+        'gl:entryStatus': 'valid',
+        'gl:designation': [
+          { '@type': 'gl:Expression', 'gl:normativeStatus': 'preferred', 'gl:term': 'test term' },
+          { '@type': 'gl:Symbol', 'gl:normativeStatus': 'admitted', 'gl:term': 'stem:[x]' },
+        ],
+        'gl:definition': [
+          { '@type': 'gl:DetailedDefinition', 'gl:content': 'a definition with *italic* text' },
+        ],
+        'gl:notes': [
+          { '@type': 'gl:DetailedDefinition', 'gl:content': 'a note' },
+        ],
+        'gl:examples': [
+          { '@type': 'gl:DetailedDefinition', 'gl:content': 'an example' },
+        ],
+        'gl:source': [{ '@type': 'gl:Source', 'gl:sourceType': 'authoritative' }],
+      },
+      fra: {
+        '@id': 'https://glossarist.org/test/concept/1/fra',
+        '@type': 'gl:LocalizedConcept',
+        'gl:languageCode': 'fra',
+        'gl:entryStatus': 'valid',
+        'gl:designation': [
+          { '@type': 'gl:Expression', 'gl:normativeStatus': 'preferred', 'gl:term': 'terme de test' },
+        ],
+        'gl:definition': [
+          { '@type': 'gl:DetailedDefinition', 'gl:content': 'une définition' },
+        ],
+      },
+    },
+  };
+}
+
+async function createTestRouter() {
+  return createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/', name: 'home', component: { template: '<div/>' } },
+      { path: '/dataset/:registerId', name: 'dataset', component: { template: '<div/>' } },
+      { path: '/dataset/:registerId/concept/:conceptId', name: 'concept', component: { template: '<div/>' } },
+    ],
+  });
+}
+
+describe('ConceptDetail interactions', () => {
+  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('/');
+    await router.isReady();
+    store = useVocabularyStore();
+    store.manifests.set('test', makeManifest());
+    store.datasets.set('test', { index: [], getConceptCount: () => 0, getConcepts: () => [], getConceptPosition: () => -1, getIndexEntry: () => undefined } as any);
+  });
+
+  function mountDetail(concept = makeConcept()) {
+    return mount(ConceptDetail, {
+      global: {
+        plugins: [pinia, router],
+        directives: { math: vMath },
+      },
+      props: {
+        concept,
+        manifest: makeManifest(),
+        edges: [],
+        registerId: 'test',
+        adjacent: { prev: null, next: null },
+      },
+    });
+  }
+
+  it('renders the primary term in the header', () => {
+    const wrapper = mountDetail();
+    expect(wrapper.find('h1').html()).toContain('test term');
+  });
+
+  it('renders concept ID badge', () => {
+    const wrapper = mountDetail();
+    expect(wrapper.text()).toContain('1');
+  });
+
+  it('renders language sections for eng and fra', () => {
+    const wrapper = mountDetail();
+    expect(wrapper.text()).toContain('English');
+    expect(wrapper.text()).toContain('French');
+  });
+
+  it('renders italic text in definition', () => {
+    const wrapper = mountDetail();
+    expect(wrapper.html()).toContain('<em>italic</em>');
+  });
+
+  it('renders stem: notation as math-pending placeholder', () => {
+    const wrapper = mountDetail();
+    expect(wrapper.html()).toContain('math-pending');
+    expect(wrapper.html()).toContain('data-expr="x"');
+  });
+
+  it('renders notes section', () => {
+    const wrapper = mountDetail();
+    expect(wrapper.text()).toContain('Note 1');
+    expect(wrapper.text()).toContain('a note');
+  });
+
+  it('renders examples section', () => {
+    const wrapper = mountDetail();
+    expect(wrapper.text()).toContain('Example 1');
+    expect(wrapper.text()).toContain('an example');
+  });
+
+  it('renders designation types as badges', () => {
+    const wrapper = mountDetail();
+    expect(wrapper.text()).toContain('Symbol');
+  });
+
+  it('collapses non-eng languages when 6+ languages present', async () => {
+    const concept = makeConcept();
+    for (const lang of ['deu', 'spa', 'kor', 'jpn']) {
+      concept['gl:localizedConcept']![lang] = {
+        '@id': `https://glossarist.org/test/concept/1/${lang}`,
+        '@type': 'gl:LocalizedConcept',
+        'gl:languageCode': lang,
+        'gl:designation': [
+          { '@type': 'gl:Expression', 'gl:normativeStatus': 'preferred', 'gl:term': `term-${lang}` },
+        ],
+        'gl:definition': [
+          { '@type': 'gl:DetailedDefinition', 'gl:content': `def-${lang}` },
+        ],
+      };
+    }
+    const wrapper = mountDetail(concept);
+    await flushPromises();
+    expect(wrapper.text()).toContain('6 languages');
+  });
+
+  it('toggles language section on click', async () => {
+    const wrapper = mountDetail();
+    const buttons = wrapper.findAll('button');
+    const fraButton = buttons.find(b => b.text().includes('French'));
+    expect(fraButton).toBeDefined();
+
+    await fraButton!.trigger('click');
+    await fraButton!.trigger('click');
+  });
+
+  it('switches between definition and history tabs', async () => {
+    const wrapper = mountDetail();
+    expect(wrapper.text()).toContain('a definition with');
+
+    const tabs = wrapper.findAll('button[role="tab"]');
+    const historyTab = tabs.find(t => t.text().includes('History'));
+    expect(historyTab).toBeDefined();
+    await historyTab!.trigger('click');
+    await flushPromises();
+
+    expect(wrapper.text()).not.toContain('a definition with');
+  });
+
+  it('renders cross-reference link and navigates on click', async () => {
+    const concept = makeConcept();
+    const eng = concept['gl:localizedConcept']!.eng!;
+    eng['gl:definition'] = [
+      { '@type': 'gl:DetailedDefinition', 'gl:content': 'see {{urn:iso:std:iso:14812:3.1.1.1,entity}} here' },
+    ];
+
+    // Register the URI pattern via factory so it resolves as internal
+    const { getFactory } = await import('../adapters/factory');
+    const factory = getFactory();
+    factory.router.registerDataset('test', '/data/test', {
+      ...makeManifest(),
+      uriBase: 'https://glossarist.org',
+    });
+    factory.resolver.registerDataset('test', ['https://glossarist.org/test/concept/*']);
+
+    const wrapper = mountDetail(concept);
+    await flushPromises();
+
+    const xref = wrapper.find('.xref-link');
+    if (xref.exists()) {
+      await xref.trigger('click');
+      await flushPromises();
+      expect(router.currentRoute.value.name).toBe('concept');
+    }
+  });
+
+  it('renders entry status badge', () => {
+    const wrapper = mountDetail();
+    expect(wrapper.text()).toContain('valid');
+  });
+
+  it('renders the language quick-jump sidebar with all languages', () => {
+    const wrapper = mountDetail();
+    expect(wrapper.text()).toContain('Languages (2)');
+  });
+});

package/src/__tests__/concept-timeline.test.ts

@@ -0,0 +1,175 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import ConceptTimeline from '../components/ConceptTimeline.vue';
+import type { LocalizedConcept } from '../adapters/types';
+
+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,
+  };
+}
+
+function mountTimeline(lcs: Record<string, LocalizedConcept>, activeLang = 'eng', languageOrder?: string[]) {
+  return mount(ConceptTimeline, {
+    props: {
+      localizedConcepts: lcs,
+      activeLang,
+      languageOrder,
+    },
+  });
+}
+
+describe('ConceptTimeline', () => {
+  it('shows empty state when no history data', () => {
+    const lc = makeLocalizedConcept({ 'gl:entryStatus': undefined });
+    const wrapper = mountTimeline({ eng: lc });
+    expect(wrapper.text()).toContain('No history data available');
+  });
+
+  it('renders review date as timeline entry', () => {
+    const lc = makeLocalizedConcept({
+      'gl:reviewDate': '2023-05-15',
+    });
+    const wrapper = mountTimeline({ eng: lc });
+    expect(wrapper.text()).toContain('Review initiated');
+    expect(wrapper.text()).toContain('2023');
+  });
+
+  it('renders review decision event', () => {
+    const lc = makeLocalizedConcept({
+      'gl:reviewDecisionEvent': 'Accepted',
+      'gl:reviewDate': '2023-05-15',
+      'gl:reviewDecisionDate': '2023-06-01',
+    });
+    const wrapper = mountTimeline({ eng: lc });
+    // The review event banner
+    expect(wrapper.text()).toContain('Accepted');
+  });
+
+  it('renders gl:dates entries', () => {
+    const lc = makeLocalizedConcept({
+      'gl:dates': [
+        { 'gl:dateType': 'accepted', 'gl:date': '2020-01-01' },
+        { 'gl:dateType': 'amended', 'gl:date': '2022-06-15' },
+      ],
+    });
+    const wrapper = mountTimeline({ eng: lc });
+    expect(wrapper.text()).toContain('Concept accepted');
+    expect(wrapper.text()).toContain('Definition amended');
+    expect(wrapper.text()).toContain('2020');
+    expect(wrapper.text()).toContain('2022');
+  });
+
+  it('sorts entries by date ascending', () => {
+    const lc = makeLocalizedConcept({
+      'gl:dates': [
+        { 'gl:dateType': 'amended', 'gl:date': '2022-06-15' },
+        { 'gl:dateType': 'accepted', 'gl:date': '2020-01-01' },
+      ],
+    });
+    const wrapper = mountTimeline({ eng: lc });
+    const texts = wrapper.text();
+    // "accepted" entry should appear before "amended" in the rendered output
+    const acceptedIdx = texts.indexOf('Concept accepted');
+    const amendedIdx = texts.indexOf('Definition amended');
+    expect(acceptedIdx).toBeLessThan(amendedIdx);
+  });
+
+  it('shows language selector when multiple languages have history', () => {
+    const eng = makeLocalizedConcept({ 'gl:reviewDate': '2023-01-01' });
+    const fra = makeLocalizedConcept({
+      '@id': 'https://glossarist.org/test/concept/1/fra',
+      'gl:languageCode': 'fra',
+      'gl:reviewDate': '2023-02-01',
+    });
+    const wrapper = mountTimeline({ eng, fra }, 'eng', ['eng', 'fra']);
+    expect(wrapper.text()).toContain('French');
+  });
+
+  it('does not show language selector for single-language history', () => {
+    const eng = makeLocalizedConcept({ 'gl:reviewDate': '2023-01-01' });
+    const wrapper = mountTimeline({ eng });
+    // Should not have multiple language buttons
+    const buttons = wrapper.findAll('button');
+    const langButtons = buttons.filter(b => b.text().includes('French'));
+    expect(langButtons.length).toBe(0);
+  });
+
+  it('emits update:activeLang on language button click', async () => {
+    const eng = makeLocalizedConcept({ 'gl:reviewDate': '2023-01-01' });
+    const fra = makeLocalizedConcept({
+      '@id': 'https://glossarist.org/test/concept/1/fra',
+      'gl:languageCode': 'fra',
+      'gl:reviewDate': '2023-02-01',
+    });
+    const wrapper = mountTimeline({ eng, fra }, 'eng', ['eng', 'fra']);
+    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 review metadata when present', () => {
+    const lc = makeLocalizedConcept({
+      'gl:reviewDate': '2023-01-01',
+      'gl:reviewStatus': 'final',
+      'gl:reviewDecision': 'accepted',
+      'gl:entryStatus': 'valid',
+      'gl:release': 3,
+    });
+    const wrapper = mountTimeline({ eng: lc });
+    expect(wrapper.text()).toContain('Review Details');
+    expect(wrapper.text()).toContain('final');
+    expect(wrapper.text()).toContain('accepted');
+    expect(wrapper.text()).toContain('valid');
+    expect(wrapper.text()).toContain('3');
+  });
+
+  it('groups by year when more than 3 entries', () => {
+    const lc = makeLocalizedConcept({
+      'gl:dates': [
+        { 'gl:dateType': 'accepted', 'gl:date': '2019-03-01' },
+        { 'gl:dateType': 'amended', 'gl:date': '2020-06-15' },
+        { 'gl:dateType': 'amended', 'gl:date': '2021-09-20' },
+        { 'gl:dateType': 'published', 'gl:date': '2023-01-10' },
+      ],
+    });
+    const wrapper = mountTimeline({ eng: lc });
+    // Year markers should be rendered
+    expect(wrapper.text()).toContain('2019');
+    expect(wrapper.text()).toContain('2020');
+    expect(wrapper.text()).toContain('2021');
+    expect(wrapper.text()).toContain('2023');
+  });
+
+  it('uses simple layout for 3 or fewer entries', () => {
+    const lc = makeLocalizedConcept({
+      'gl:dates': [
+        { 'gl:dateType': 'accepted', 'gl:date': '2020-01-01' },
+        { 'gl:dateType': 'amended', 'gl:date': '2022-06-15' },
+      ],
+    });
+    const wrapper = mountTimeline({ eng: lc });
+    // Should have entries but no year grouping markers
+    expect(wrapper.text()).toContain('Concept accepted');
+    expect(wrapper.text()).toContain('Definition amended');
+  });
+
+  it('deduplicates review date if it matches a gl:date entry', () => {
+    const lc = makeLocalizedConcept({
+      'gl:dates': [
+        { 'gl:dateType': 'review', 'gl:date': '2023-05-15' },
+      ],
+      'gl:reviewDate': '2023-05-15',
+    });
+    const wrapper = mountTimeline({ eng: lc });
+    // Should only have one entry for that date, not two "review" entries
+    const reviewCount = wrapper.text().split('Review initiated').length - 1;
+    expect(reviewCount).toBeLessThanOrEqual(1);
+  });
+});

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

@@ -0,0 +1,75 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import ConceptView from '../views/ConceptView.vue';
+import { useVocabularyStore } from '../stores/vocabulary';
+import { createTestRouter, setupPinia, makeManifest, makeAdapterStub } from './test-helpers';
+
+describe('ConceptView', () => {
+  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());
+    store.datasets.set('test', makeAdapterStub());
+  });
+
+  function mountConceptView(registerId = 'test', conceptId = '1') {
+    return mount(ConceptView, {
+      global: {
+        plugins: [pinia, router],
+        stubs: { ConceptDetail: true },
+      },
+      props: { registerId, conceptId },
+    });
+  }
+
+  it('shows loading skeleton initially', () => {
+    const wrapper = mountConceptView();
+    expect(wrapper.find('.skeleton').exists()).toBe(true);
+  });
+
+  it('shows error when fetchConcept returns null', async () => {
+    const wrapper = mountConceptView();
+    await flushPromises();
+    expect(wrapper.text()).toContain('Failed to load concept');
+  });
+
+  it('shows retry button on error', async () => {
+    const wrapper = mountConceptView();
+    await flushPromises();
+    const retryBtn = wrapper.findAll('button').find(b => b.text() === 'Retry');
+    expect(retryBtn).toBeDefined();
+  });
+
+  it('shows back to dataset link on error', async () => {
+    const wrapper = mountConceptView();
+    await flushPromises();
+    const link = wrapper.findAll('a').find(a => a.text().includes('Back to dataset'));
+    expect(link).toBeDefined();
+  });
+
+  it('renders ConceptDetail when concept loads', async () => {
+    const concept = {
+      '@id': 'https://glossarist.org/test/concept/1',
+      '@type': 'gl:Concept',
+    };
+    const store = useVocabularyStore();
+    store.datasets.set('test', makeAdapterStub({ fetchConcept: () => Promise.resolve(concept) }));
+
+    const wrapper = mountConceptView();
+    await flushPromises();
+    expect(wrapper.findComponent({ name: 'ConceptDetail' }).exists()).toBe(true);
+  });
+
+  it('shows error when dataset not found', async () => {
+    const store = useVocabularyStore();
+    store.datasets.delete('test');
+    store.manifests.delete('test');
+    const wrapper = mountConceptView();
+    await flushPromises();
+    expect(wrapper.text()).toContain('Failed to load concept');
+  });
+});

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

@@ -0,0 +1,103 @@
+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 ContributorsView from '../views/ContributorsView.vue';
+import { useSiteConfig } from '../config/use-site-config';
+
+// Mock useSiteConfig so we can inject contributor data
+vi.mock('../config/use-site-config', () => {
+  let _config: any = {};
+  return {
+    useSiteConfig: () => ({ config: { value: _config } }),
+    __setConfig: (c: any) => { _config = c; },
+  };
+});
+
+async function createTestRouter() {
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/', name: 'home', component: { template: '<div/>' } },
+      { path: '/contributors', name: 'contributors', component: { template: '<div/>' } },
+    ],
+  });
+  router.push('/contributors');
+  await router.isReady();
+  return router;
+}
+
+describe('ContributorsView', () => {
+  let pinia: ReturnType<typeof createPinia>;
+  let router: Awaited<ReturnType<typeof createTestRouter>>;
+
+  beforeEach(async () => {
+    pinia = createPinia();
+    setActivePinia(pinia);
+    router = await createTestRouter();
+  });
+
+  function mountContributors() {
+    return mount(ContributorsView, {
+      global: { plugins: [pinia, router] },
+    });
+  }
+
+  it('renders breadcrumb navigation', () => {
+    const wrapper = mountContributors();
+    expect(wrapper.text()).toContain('Home');
+    expect(wrapper.text()).toContain('Contributors');
+  });
+
+  it('renders Contributors heading', () => {
+    const wrapper = mountContributors();
+    expect(wrapper.text()).toContain('Contributors');
+  });
+
+  it('shows empty state when no contributors', () => {
+    const wrapper = mountContributors();
+    expect(wrapper.text()).toContain('No contributor information available');
+  });
+
+  it('shows contributors table when data present', async () => {
+    const { __setConfig } = await import('../config/use-site-config') as any;
+    __setConfig({
+      contributors: [
+        { name: 'Jane Doe', role: 'Editor', organization: 'ISO', email: 'jane@example.com', url: 'https://example.com' },
+        { name: 'John Smith', role: 'Author', organization: 'IEC' },
+      ],
+    });
+    const wrapper = mountContributors();
+    expect(wrapper.text()).toContain('Jane Doe');
+    expect(wrapper.text()).toContain('John Smith');
+    expect(wrapper.text()).toContain('Editor');
+    expect(wrapper.text()).toContain('ISO');
+    expect(wrapper.text()).toContain('jane@example.com');
+    expect(wrapper.text()).toContain('Author');
+    expect(wrapper.text()).toContain('IEC');
+  });
+
+  it('links contributor name when URL present', async () => {
+    const { __setConfig } = await import('../config/use-site-config') as any;
+    __setConfig({
+      contributors: [
+        { name: 'Jane Doe', url: 'https://example.com' },
+      ],
+    });
+    const wrapper = mountContributors();
+    const link = wrapper.findAll('a').find(a => a.text() === 'Jane Doe');
+    expect(link).toBeDefined();
+    expect(link!.attributes('href')).toBe('https://example.com');
+  });
+
+  it('shows dash for missing role/org', async () => {
+    const { __setConfig } = await import('../config/use-site-config') as any;
+    __setConfig({
+      contributors: [{ name: 'Anonymous' }],
+    });
+    const wrapper = mountContributors();
+    const cells = wrapper.findAll('td');
+    const dashCount = cells.filter(c => c.text() === '—');
+    expect(dashCount.length).toBeGreaterThanOrEqual(2);
+  });
+});