@glossarist/concept-browser 0.3.3 → 0.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glossarist/concept-browser",
-  "version": "0.3.3",
+  "version": "0.3.7",
   "description": "Vue SPA for browsing Glossarist terminology datasets with cross-reference resolution, graph visualization, and multi-language support",
   "type": "module",
   "bin": {

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

@@ -0,0 +1,98 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import AboutView from '../views/AboutView.vue';
+import { useVocabularyStore } from '../stores/vocabulary';
+import { createTestRouter, setupPinia, makeManifest, makeAdapterStub } from './test-helpers';
+
+const testManifest = makeManifest({
+  title: 'Test Dataset',
+  description: 'A test dataset for terminology',
+  languages: ['eng', 'fra'],
+  conceptCount: 100,
+  tags: ['terminology', 'iso'],
+  sourceRepo: 'https://github.com/glossarist/test-dataset',
+});
+
+describe('AboutView', () => {
+  let pinia: ReturnType<typeof setupPinia>;
+  let router: Awaited<ReturnType<typeof createTestRouter>>;
+
+  beforeEach(async () => {
+    pinia = setupPinia();
+    router = await createTestRouter('dataset', '/dataset/test/about');
+    const store = useVocabularyStore();
+    store.manifests.set('test', testManifest);
+    store.datasets.set('test', makeAdapterStub());
+  });
+
+  function mountAbout() {
+    return mount(AboutView, {
+      global: { plugins: [pinia, router] },
+      props: { registerId: 'test' },
+    });
+  }
+
+  it('renders About heading', async () => {
+    const wrapper = mountAbout();
+    await flushPromises();
+    expect(wrapper.text()).toContain('About');
+  });
+
+  it('shows description', async () => {
+    const wrapper = mountAbout();
+    await flushPromises();
+    expect(wrapper.text()).toContain('A test dataset for terminology');
+  });
+
+  it('shows owner', async () => {
+    const wrapper = mountAbout();
+    await flushPromises();
+    expect(wrapper.text()).toContain('ISO');
+  });
+
+  it('shows concept count', async () => {
+    const wrapper = mountAbout();
+    await flushPromises();
+    expect(wrapper.text()).toContain('100');
+  });
+
+  it('shows language count', async () => {
+    const wrapper = mountAbout();
+    await flushPromises();
+    expect(wrapper.text()).toContain('English');
+    expect(wrapper.text()).toContain('French');
+  });
+
+  it('shows last updated date', async () => {
+    const wrapper = mountAbout();
+    await flushPromises();
+    expect(wrapper.text()).toContain('2025-01-01');
+  });
+
+  it('shows source repo link', async () => {
+    const wrapper = mountAbout();
+    await flushPromises();
+    expect(wrapper.text()).toContain('glossarist/test-dataset');
+  });
+
+  it('shows tags', async () => {
+    const wrapper = mountAbout();
+    await flushPromises();
+    expect(wrapper.text()).toContain('terminology');
+    expect(wrapper.text()).toContain('iso');
+  });
+
+  it('renders breadcrumb navigation', async () => {
+    const wrapper = mountAbout();
+    await flushPromises();
+    expect(wrapper.text()).toContain('Home');
+    expect(wrapper.text()).toContain('Test Dataset');
+    expect(wrapper.text()).toContain('About');
+  });
+
+  it('shows schema version', async () => {
+    const wrapper = mountAbout();
+    await flushPromises();
+    expect(wrapper.text()).toContain('1.0');
+  });
+});

package/src/__tests__/app-footer.test.ts

@@ -0,0 +1,38 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import AppFooter from '../components/AppFooter.vue';
+import { createTestRouter, setupPinia } from './test-helpers';
+
+describe('AppFooter', () => {
+  let pinia: ReturnType<typeof setupPinia>;
+  let router: Awaited<ReturnType<typeof createTestRouter>>;
+
+  beforeEach(async () => {
+    pinia = setupPinia();
+    router = await createTestRouter('minimal', '/');
+  });
+
+  function mountFooter() {
+    return mount(AppFooter, {
+      global: { plugins: [pinia, router] },
+    });
+  }
+
+  it('renders powered by text', () => {
+    const wrapper = mountFooter();
+    expect(wrapper.text()).toContain('Built with the');
+    expect(wrapper.text()).toContain('Glossarist Concept Browser');
+  });
+
+  it('omits copyright when no config loaded', () => {
+    const wrapper = mountFooter();
+    expect(wrapper.text()).not.toContain('©');
+  });
+
+  it('links to GitHub repository', () => {
+    const wrapper = mountFooter();
+    const link = wrapper.findAll('a').find(a => a.text().includes('Glossarist Concept Browser'));
+    expect(link).toBeDefined();
+    expect(link!.attributes('href')).toContain('github.com');
+  });
+});

package/src/__tests__/app-header.test.ts

@@ -0,0 +1,130 @@
+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 AppHeader from '../components/AppHeader.vue';
+import { useVocabularyStore } from '../stores/vocabulary';
+import type { Manifest } 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',
+  };
+}
+
+async function createTestRouter() {
+  return createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/', name: 'home', component: { template: '<div/>' } },
+      { path: '/search', name: 'search', component: { template: '<div/>' } },
+    ],
+  });
+}
+
+describe('AppHeader', () => {
+  let pinia: ReturnType<typeof createPinia>;
+  let router: Awaited<ReturnType<typeof createTestRouter>>;
+
+  beforeEach(async () => {
+    pinia = createPinia();
+    setActivePinia(pinia);
+    router = await createTestRouter();
+    router.push('/');
+    await router.isReady();
+    const store = useVocabularyStore();
+    store.manifests.set('test', makeManifest());
+    store.datasets.set('test', { index: [], getConceptCount: () => 0, getConcepts: () => [] } as any);
+  });
+
+  function mountHeader() {
+    return mount(AppHeader, {
+      global: { plugins: [pinia, router] },
+    });
+  }
+
+  it('renders logo/title text', () => {
+    const wrapper = mountHeader();
+    expect(wrapper.text()).toContain('Glossarist');
+  });
+
+  it('renders search input', () => {
+    const wrapper = mountHeader();
+    const input = wrapper.find('input[aria-label="Search concepts"]');
+    expect(input.exists()).toBe(true);
+  });
+
+  it('renders mobile hamburger button', () => {
+    const wrapper = mountHeader();
+    const hamburger = wrapper.find('button[aria-label="Open navigation menu"]');
+    expect(hamburger.exists()).toBe(true);
+  });
+
+  it('navigates home on logo click', async () => {
+    const wrapper = mountHeader();
+    const logoBtn = wrapper.findAll('button').find(b => b.text().includes('Glossarist'));
+    expect(logoBtn).toBeDefined();
+    await logoBtn!.trigger('click');
+    await flushPromises();
+    expect(router.currentRoute.value.name).toBe('home');
+  });
+
+  it('navigates to search on form submit with query', async () => {
+    const wrapper = mountHeader();
+    const input = wrapper.find('input[aria-label="Search concepts"]');
+    await input.setValue('road');
+    const form = wrapper.find('form');
+    await form.trigger('submit');
+    await flushPromises();
+    expect(router.currentRoute.value.name).toBe('search');
+    expect(router.currentRoute.value.query.q).toBe('road');
+  });
+
+  it('does not navigate on empty search', async () => {
+    const wrapper = mountHeader();
+    const form = wrapper.find('form');
+    await form.trigger('submit');
+    await flushPromises();
+    expect(router.currentRoute.value.name).toBe('home');
+  });
+
+  it('renders theme toggle button', () => {
+    const wrapper = mountHeader();
+    const themeBtn = wrapper.findAll('button').find(b =>
+      b.attributes('aria-label')?.includes('Switch to')
+    );
+    expect(themeBtn).toBeDefined();
+  });
+
+  it('toggles theme on button click', async () => {
+    const wrapper = mountHeader();
+    const themeBtn = wrapper.findAll('button').find(b =>
+      b.attributes('aria-label')?.includes('Switch to')
+    );
+    await themeBtn!.trigger('click');
+    expect(wrapper.html()).toContain('M12 3v1m0 16v1m9-9h-1');
+  });
+
+  it('shows dataset count', () => {
+    const wrapper = mountHeader();
+    expect(wrapper.text()).toContain('1 datasets');
+  });
+});

package/src/__tests__/app-sidebar.test.ts

@@ -0,0 +1,159 @@
+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 AppSidebar from '../components/AppSidebar.vue';
+import { useVocabularyStore } from '../stores/vocabulary';
+import { useUiStore } from '../stores/ui';
+import type { Manifest } from '../adapters/types';
+
+function makeManifest(id = 'test'): Manifest {
+  return {
+    id,
+    datasetUri: `https://glossarist.org/${id}/concept`,
+    title: `Test ${id}`,
+    description: 'A test dataset',
+    owner: 'ISO',
+    baseUrl: `/data/${id}`,
+    languages: ['eng'],
+    conceptCount: 50,
+    conceptUrlTemplate: `/data/${id}/concepts/{id}.json`,
+    indexUrl: `/data/${id}/index.json`,
+    contextUrl: `/data/${id}/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',
+  };
+}
+
+async function createTestRouter(initialPath = '/') {
+  const router = 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/>' } },
+      { path: '/search', name: 'search', component: { template: '<div/>' } },
+      { path: '/graph', name: 'graph', component: { template: '<div/>' } },
+    ],
+  });
+  router.push(initialPath);
+  await router.isReady();
+  return router;
+}
+
+describe('AppSidebar', () => {
+  let pinia: ReturnType<typeof createPinia>;
+
+  beforeEach(() => {
+    pinia = createPinia();
+    setActivePinia(pinia);
+  });
+
+  function seedStore(datasets: string[] = ['test']) {
+    const store = useVocabularyStore();
+    for (const id of datasets) {
+      store.manifests.set(id, makeManifest(id));
+      store.datasets.set(id, { index: [], getConceptCount: () => 0, getConcepts: () => [] } as any);
+    }
+  }
+
+  async function mountSidebar(initialPath = '/') {
+    const router = await createTestRouter(initialPath);
+    return mount(AppSidebar, {
+      global: { plugins: [pinia, router], stubs: { NavIcon: true } },
+    });
+  }
+
+  it('renders navigation section', async () => {
+    seedStore();
+    const wrapper = await mountSidebar();
+    expect(wrapper.text()).toContain('Navigation');
+  });
+
+  it('renders dataset entries in sidebar', async () => {
+    seedStore(['iso1', 'iso2']);
+    const wrapper = await mountSidebar();
+    expect(wrapper.text()).toContain('Test iso1');
+    expect(wrapper.text()).toContain('Test iso2');
+  });
+
+  it('shows concept count for loaded datasets', async () => {
+    seedStore();
+    const wrapper = await mountSidebar();
+    expect(wrapper.text()).toContain('50 concepts');
+  });
+
+  it('navigates to dataset on click', async () => {
+    seedStore();
+    const router = await createTestRouter('/');
+    const wrapper = mount(AppSidebar, {
+      global: { plugins: [pinia, router], stubs: { NavIcon: true } },
+    });
+    const dsBtn = wrapper.findAll('button').find(b => b.text().includes('Test test'));
+    expect(dsBtn).toBeDefined();
+    await dsBtn!.trigger('click');
+    await flushPromises();
+    expect(router.currentRoute.value.name).toBe('dataset');
+    expect(router.currentRoute.value.params.registerId).toBe('test');
+  });
+
+  it('closes sidebar on dataset click (mobile)', async () => {
+    seedStore();
+    const wrapper = await mountSidebar();
+    const ui = useUiStore();
+    ui.sidebarOpen = true;
+    const dsBtn = wrapper.findAll('button').find(b => b.text().includes('Test test'));
+    await dsBtn!.trigger('click');
+    expect(ui.sidebarOpen).toBe(false);
+  });
+
+  it('shows mobile backdrop when sidebar open', async () => {
+    seedStore();
+    const wrapper = await mountSidebar();
+    const ui = useUiStore();
+    ui.sidebarOpen = true;
+    await wrapper.vm.$nextTick();
+    const backdrop = wrapper.find('.fixed.inset-0');
+    expect(backdrop.exists()).toBe(true);
+  });
+
+  it('hides mobile backdrop when sidebar closed', async () => {
+    seedStore();
+    const wrapper = await mountSidebar();
+    const ui = useUiStore();
+    ui.sidebarOpen = false;
+    await wrapper.vm.$nextTick();
+    const backdrop = wrapper.find('.fixed.inset-0');
+    expect(backdrop.exists()).toBe(false);
+  });
+
+  it('closes sidebar on backdrop click', async () => {
+    seedStore();
+    const wrapper = await mountSidebar();
+    const ui = useUiStore();
+    ui.sidebarOpen = true;
+    await wrapper.vm.$nextTick();
+    const backdrop = wrapper.find('.fixed.inset-0');
+    await backdrop.trigger('click');
+    expect(ui.sidebarOpen).toBe(false);
+  });
+
+  it('shows dataset-level nav when on dataset route', async () => {
+    seedStore();
+    const wrapper = await mountSidebar('/dataset/test');
+    // The dataset nav section shows when currentManifest exists
+    expect(wrapper.text()).toContain('Test test');
+  });
+
+  it('shows powered by link', async () => {
+    seedStore();
+    const wrapper = await mountSidebar();
+    expect(wrapper.text()).toContain('Glossarist Concept Browser');
+  });
+});

package/src/__tests__/asciidoc-lite.test.ts

@@ -0,0 +1,92 @@
+import { describe, it, expect } from 'vitest';
+import { renderAsciiDocLite } from '../utils/asciidoc-lite';
+
+describe('renderAsciiDocLite', () => {
+  it('returns empty string for empty input', () => {
+    expect(renderAsciiDocLite('')).toBe('');
+  });
+
+  it('wraps plain text in <p>', () => {
+    expect(renderAsciiDocLite('Hello world')).toBe('<p>Hello world</p>');
+  });
+
+  it('creates separate paragraphs on blank lines', () => {
+    const result = renderAsciiDocLite('First\n\nSecond');
+    expect(result).toContain('<p>First</p>');
+    expect(result).toContain('<p>Second</p>');
+  });
+
+  it('renders headings (level + 1, h1 reserved)', () => {
+    expect(renderAsciiDocLite('== Heading 2')).toContain('<h3>Heading 2</h3>');
+    expect(renderAsciiDocLite('=== Heading 3')).toContain('<h4>Heading 3</h4>');
+    expect(renderAsciiDocLite('===== Heading 5')).toContain('<h6>Heading 5</h6>');
+  });
+
+  it('renders bold text', () => {
+    expect(renderAsciiDocLite('some *bold* text')).toContain('<strong>bold</strong>');
+  });
+
+  it('renders italic text', () => {
+    expect(renderAsciiDocLite('some _italic_ text')).toContain('<em>italic</em>');
+  });
+
+  it('renders monospace text', () => {
+    expect(renderAsciiDocLite('use `code` here')).toContain('<code>code</code>');
+  });
+
+  it('renders AsciiDoc links with label', () => {
+    const result = renderAsciiDocLite('see https://example.com[label] here');
+    expect(result).toContain('<a href="https://example.com"');
+    expect(result).toContain('>label</a>');
+  });
+
+  it('renders bare URLs as links', () => {
+    const result = renderAsciiDocLite('visit https://example.com now');
+    expect(result).toContain('<a href="https://example.com"');
+  });
+
+  it('renders unordered lists', () => {
+    const result = renderAsciiDocLite('* item one\n* item two');
+    expect(result).toContain('<ul>');
+    expect(result).toContain('<li');
+    expect(result).toContain('item one');
+    expect(result).toContain('item two');
+  });
+
+  it('renders ordered lists', () => {
+    const result = renderAsciiDocLite('. first\n. second');
+    expect(result).toContain('<ol>');
+    expect(result).toContain('first');
+    expect(result).toContain('second');
+  });
+
+  it('renders source blocks with ---- delimiter', () => {
+    const result = renderAsciiDocLite('----\nlet x = 1;\n----');
+    expect(result).toContain('<pre><code>');
+    expect(result).toContain('let x = 1;');
+  });
+
+  it('renders source blocks with .... delimiter', () => {
+    const result = renderAsciiDocLite('....\nsome text\n....');
+    expect(result).toContain('<pre><code>');
+    expect(result).toContain('some text');
+  });
+
+  it('escapes HTML in source blocks', () => {
+    const result = renderAsciiDocLite('----\n<a href="evil">\n----');
+    expect(result).toContain('&lt;a href="evil"&gt;');
+    expect(result).not.toContain('<a href="evil">');
+  });
+
+  it('handles multi-line paragraphs', () => {
+    const result = renderAsciiDocLite('line one\nline two\n\nnew paragraph');
+    expect(result).toContain('<p>line one line two</p>');
+    expect(result).toContain('<p>new paragraph</p>');
+  });
+
+  it('handles nested list levels', () => {
+    const result = renderAsciiDocLite('* top\n** nested');
+    expect(result).toContain('list-level-1');
+    expect(result).toContain('list-level-2');
+  });
+});

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

@@ -0,0 +1,115 @@
+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 ConceptCard from '../components/ConceptCard.vue';
+import { useVocabularyStore } from '../stores/vocabulary';
+import type { Manifest, ConceptSummary } 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', 'fra'],
+    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 makeEntry(overrides: Partial<ConceptSummary> = {}): ConceptSummary {
+  return { id: '3.1.1.1', eng: 'test term', status: 'valid', ...overrides };
+}
+
+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('ConceptCard', () => {
+  let pinia: ReturnType<typeof createPinia>;
+  let router: Awaited<ReturnType<typeof createTestRouter>>;
+
+  beforeEach(async () => {
+    pinia = createPinia();
+    setActivePinia(pinia);
+    router = await createTestRouter();
+    router.push('/');
+    await router.isReady();
+    const store = useVocabularyStore();
+    store.manifests.set('test', makeManifest());
+    store.datasets.set('test', { index: [], getConceptCount: () => 0, getConcepts: () => [] } as any);
+  });
+
+  function mountCard(entry = makeEntry(), registerId = 'test') {
+    return mount(ConceptCard, {
+      global: { plugins: [pinia, router] },
+      props: { entry, registerId },
+    });
+  }
+
+  it('renders the English term as title', () => {
+    const wrapper = mountCard();
+    expect(wrapper.text()).toContain('test term');
+  });
+
+  it('renders the concept ID', () => {
+    const wrapper = mountCard();
+    expect(wrapper.text()).toContain('3.1.1.1');
+  });
+
+  it('falls back to ID when no English term', () => {
+    const wrapper = mountCard(makeEntry({ eng: '' }));
+    expect(wrapper.text()).toContain('3.1.1.1');
+  });
+
+  it('shows valid status badge', () => {
+    const wrapper = mountCard();
+    expect(wrapper.text()).toContain('valid');
+  });
+
+  it('shows superseded status with reduced opacity', () => {
+    const wrapper = mountCard(makeEntry({ status: 'superseded' }));
+    expect(wrapper.text()).toContain('superseded');
+    expect(wrapper.find('button').classes()).toContain('opacity-70');
+  });
+
+  it('shows withdrawn status with reduced opacity', () => {
+    const wrapper = mountCard(makeEntry({ status: 'withdrawn' }));
+    expect(wrapper.text()).toContain('withdrawn');
+    expect(wrapper.find('button').classes()).toContain('opacity-70');
+  });
+
+  it('navigates to concept page on click', async () => {
+    const wrapper = mountCard();
+    await wrapper.find('button').trigger('click');
+    await flushPromises();
+    expect(router.currentRoute.value.name).toBe('concept');
+    expect(router.currentRoute.value.params.registerId).toBe('test');
+    expect(router.currentRoute.value.params.conceptId).toBe('3.1.1.1');
+  });
+
+  it('shows language count from manifest', () => {
+    const wrapper = mountCard();
+    expect(wrapper.text()).toContain('2 lang');
+  });
+});