@glossarist/concept-browser 0.3.4 → 0.3.7

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

@@ -0,0 +1,231 @@
+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 DatasetView from '../views/DatasetView.vue';
+import { useVocabularyStore } from '../stores/vocabulary';
+import type { Manifest, ConceptSummary } from '../adapters/types';
+
+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', 'fra'],
+    conceptCount: 100,
+    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,
+  };
+}
+
+function makeConcepts(count: number): ConceptSummary[] {
+  return Array.from({ length: count }, (_, i) => ({
+    id: String(i + 1),
+    eng: `term ${i + 1}`,
+    status: i % 10 === 0 ? 'superseded' : 'valid',
+  }));
+}
+
+function makeAdapter(concepts: ConceptSummary[] = []) {
+  const dense = concepts.filter(Boolean);
+  return {
+    registerId: 'test',
+    index: dense,
+    manifest: null,
+    getConceptCount: () => dense.length,
+    getConcepts: () => dense,
+    isRangeLoaded: () => true,
+    ensureChunksForRange: async () => {},
+    ensureAllChunksLoaded: async () => {},
+    getAdjacentConcepts: () => ({ prev: null, next: null }),
+  } as any;
+}
+
+async function createTestRouter() {
+  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: '/dataset/:registerId/stats', name: 'stats', component: { template: '<div/>' } },
+      { path: '/dataset/:registerId/about', name: 'about', component: { template: '<div/>' } },
+    ],
+  });
+  router.push('/dataset/test');
+  await router.isReady();
+  return router;
+}
+
+describe('DatasetView', () => {
+  let pinia: ReturnType<typeof createPinia>;
+  let router: Awaited<ReturnType<typeof createTestRouter>>;
+
+  beforeEach(async () => {
+    pinia = createPinia();
+    setActivePinia(pinia);
+    router = await createTestRouter();
+  });
+
+  function mountDataset(concepts: ConceptSummary[] = [], manifestOverrides: Partial<Manifest> = {}) {
+    const store = useVocabularyStore();
+    const manifest = makeManifest(manifestOverrides);
+    store.manifests.set('test', manifest);
+    store.datasets.set('test', makeAdapter(concepts));
+    return mount(DatasetView, {
+      global: { plugins: [pinia, router] },
+      props: { registerId: 'test' },
+    });
+  }
+
+  it('renders dataset title and description', async () => {
+    const wrapper = mountDataset(makeConcepts(10));
+    await flushPromises();
+    expect(wrapper.text()).toContain('Test Dataset');
+    expect(wrapper.text()).toContain('A test dataset');
+  });
+
+  it('shows concept count badge', async () => {
+    const wrapper = mountDataset(makeConcepts(100));
+    await flushPromises();
+    expect(wrapper.text()).toContain('100 concepts');
+  });
+
+  it('shows language count badge', async () => {
+    const wrapper = mountDataset(makeConcepts(10));
+    await flushPromises();
+    expect(wrapper.text()).toContain('2 languages');
+  });
+
+  it('shows owner badge', async () => {
+    const wrapper = mountDataset(makeConcepts(10));
+    await flushPromises();
+    expect(wrapper.text()).toContain('ISO');
+  });
+
+  it('shows concept cards for loaded concepts', async () => {
+    const wrapper = mountDataset(makeConcepts(3));
+    await flushPromises();
+    expect(wrapper.text()).toContain('term 1');
+    expect(wrapper.text()).toContain('term 2');
+    expect(wrapper.text()).toContain('term 3');
+  });
+
+  it('paginates at 50 concepts per page', async () => {
+    const wrapper = mountDataset(makeConcepts(120));
+    await flushPromises();
+    // Should show 50 on first page
+    expect(wrapper.text()).toContain('term 1');
+    expect(wrapper.text()).not.toContain('term 51');
+    // Should show pagination
+    expect(wrapper.text()).toContain('Prev');
+    expect(wrapper.text()).toContain('Next');
+  });
+
+  it('shows correct page count in pagination', async () => {
+    const wrapper = mountDataset(makeConcepts(120));
+    await flushPromises();
+    // 120 / 50 = 3 pages (ceil)
+    const pageButtons = wrapper.findAll('button').filter(b => /^\d+$/.test(b.text().trim()));
+    const pageNumbers = pageButtons.map(b => parseInt(b.text().trim()));
+    expect(pageNumbers).toContain(1);
+    expect(pageNumbers).toContain(3);
+  });
+
+  it('filters concepts by term', async () => {
+    const concepts: ConceptSummary[] = [
+      { id: '1', eng: 'road network', status: 'valid' },
+      { id: '2', eng: 'bridge design', status: 'valid' },
+      { id: '3', eng: 'road user', status: 'valid' },
+    ];
+    const wrapper = mountDataset(concepts);
+    await flushPromises();
+    const input = wrapper.find('input[aria-label="Filter concepts"]');
+    await input.setValue('road');
+    await flushPromises();
+    expect(wrapper.text()).toContain('road network');
+    expect(wrapper.text()).toContain('road user');
+    expect(wrapper.text()).not.toContain('bridge design');
+  });
+
+  it('filters concepts by ID', async () => {
+    const concepts: ConceptSummary[] = [
+      { id: '3.1.1.1', eng: 'term one', status: 'valid' },
+      { id: '3.1.1.2', eng: 'term two', status: 'valid' },
+    ];
+    const wrapper = mountDataset(concepts);
+    await flushPromises();
+    const input = wrapper.find('input[aria-label="Filter concepts"]');
+    await input.setValue('3.1.1.1');
+    await flushPromises();
+    expect(wrapper.text()).toContain('term one');
+    expect(wrapper.text()).not.toContain('term two');
+  });
+
+  it('shows empty state when filter matches nothing', async () => {
+    const wrapper = mountDataset(makeConcepts(5));
+    await flushPromises();
+    const input = wrapper.find('input[aria-label="Filter concepts"]');
+    await input.setValue('zzzznonexistent');
+    await flushPromises();
+    expect(wrapper.text()).toContain('No concepts match your filter');
+  });
+
+  it('shows clear filter button on empty state', async () => {
+    const wrapper = mountDataset(makeConcepts(5));
+    await flushPromises();
+    const input = wrapper.find('input[aria-label="Filter concepts"]');
+    await input.setValue('zzzznonexistent');
+    await flushPromises();
+    expect(wrapper.text()).toContain('Clear filter');
+  });
+
+  it('shows links to stats and about pages', async () => {
+    const wrapper = mountDataset(makeConcepts(5));
+    await flushPromises();
+    expect(wrapper.text()).toContain('Statistics');
+    expect(wrapper.text()).toContain('About');
+  });
+
+  it('shows bulk downloads when manifest has bulkFormats', async () => {
+    const wrapper = mountDataset(makeConcepts(5), {
+      bulkFormats: [
+        { file: 'all.ttl', format: 'turtle', size: 1024 },
+        { file: 'all.jsonld', format: 'jsonld', size: 2048 },
+      ],
+    });
+    await flushPromises();
+    expect(wrapper.text()).toContain('Download');
+    expect(wrapper.text()).toContain('1.0 KB');
+  });
+
+  it('shows 0 of N concepts in filter count', async () => {
+    const wrapper = mountDataset(makeConcepts(10));
+    await flushPromises();
+    const input = wrapper.find('input[aria-label="Filter concepts"]');
+    await input.setValue('term 5');
+    await flushPromises();
+    expect(wrapper.text()).toContain('of 10 concepts');
+  });
+
+  it('disables Prev on first page', async () => {
+    const wrapper = mountDataset(makeConcepts(120));
+    await flushPromises();
+    const prevBtn = wrapper.findAll('button').find(b => b.text().includes('Prev'));
+    expect(prevBtn).toBeDefined();
+    expect(prevBtn!.attributes('disabled')).toBeDefined();
+  });
+});

package/src/__tests__/format-downloads.test.ts

@@ -0,0 +1,98 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import { createRouter, createMemoryHistory } from 'vue-router';
+import FormatDownloads from '../components/FormatDownloads.vue';
+
+async function createTestRouter() {
+  return createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/', name: 'home', component: { template: '<div/>' } },
+    ],
+  });
+}
+
+describe('FormatDownloads', () => {
+  it('renders download links for known formats', async () => {
+    const pinia = createPinia();
+    setActivePinia(pinia);
+    const router = await createTestRouter();
+    const wrapper = mount(FormatDownloads, {
+      global: { plugins: [pinia, router] },
+      props: { registerId: 'test', conceptId: '3.1.1.1', formats: ['ttl', 'jsonld'] },
+    });
+    expect(wrapper.text()).toContain('Downloads');
+    expect(wrapper.text()).toContain('Turtle RDF');
+    expect(wrapper.text()).toContain('JSON-LD');
+  });
+
+  it('generates correct URLs', async () => {
+    const pinia = createPinia();
+    setActivePinia(pinia);
+    const router = await createTestRouter();
+    const wrapper = mount(FormatDownloads, {
+      global: { plugins: [pinia, router] },
+      props: { registerId: 'test', conceptId: '3.1.1.1', formats: ['ttl'] },
+    });
+    const link = wrapper.find('a');
+    expect(link.attributes('href')).toBe('/data/test/concepts/3.1.1.1.ttl');
+  });
+
+  it('filters unknown formats', async () => {
+    const pinia = createPinia();
+    setActivePinia(pinia);
+    const router = await createTestRouter();
+    const wrapper = mount(FormatDownloads, {
+      global: { plugins: [pinia, router] },
+      props: { registerId: 'test', conceptId: '1', formats: ['ttl', 'unknown'] },
+    });
+    const links = wrapper.findAll('a');
+    expect(links.length).toBe(1);
+  });
+
+  it('renders nothing when all formats are unknown', async () => {
+    const pinia = createPinia();
+    setActivePinia(pinia);
+    const router = await createTestRouter();
+    const wrapper = mount(FormatDownloads, {
+      global: { plugins: [pinia, router] },
+      props: { registerId: 'test', conceptId: '1', formats: ['unknown'] },
+    });
+    expect(wrapper.find('a').exists()).toBe(false);
+  });
+
+  it('renders nothing when formats array is empty', async () => {
+    const pinia = createPinia();
+    setActivePinia(pinia);
+    const router = await createTestRouter();
+    const wrapper = mount(FormatDownloads, {
+      global: { plugins: [pinia, router] },
+      props: { registerId: 'test', conceptId: '1', formats: [] },
+    });
+    expect(wrapper.find('a').exists()).toBe(false);
+  });
+
+  it('sets download attribute on links', async () => {
+    const pinia = createPinia();
+    setActivePinia(pinia);
+    const router = await createTestRouter();
+    const wrapper = mount(FormatDownloads, {
+      global: { plugins: [pinia, router] },
+      props: { registerId: 'test', conceptId: '3.1.1.1', formats: ['jsonld'] },
+    });
+    const link = wrapper.find('a');
+    expect(link.attributes('download')).toBe('3.1.1.1.jsonld');
+  });
+
+  it('shows TBX-XML format', async () => {
+    const pinia = createPinia();
+    setActivePinia(pinia);
+    const router = await createTestRouter();
+    const wrapper = mount(FormatDownloads, {
+      global: { plugins: [pinia, router] },
+      props: { registerId: 'test', conceptId: '1', formats: ['tbx'] },
+    });
+    expect(wrapper.text()).toContain('TBX-XML');
+  });
+});

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

@@ -0,0 +1,69 @@
+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 GraphView from '../views/GraphView.vue';
+import { useVocabularyStore } from '../stores/vocabulary';
+
+async function createTestRouter() {
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/', name: 'home', component: { template: '<div/>' } },
+      { path: '/graph', name: 'graph', component: { template: '<div/>' } },
+    ],
+  });
+  router.push('/graph');
+  await router.isReady();
+  return router;
+}
+
+describe('GraphView', () => {
+  let pinia: ReturnType<typeof createPinia>;
+  let router: Awaited<ReturnType<typeof createTestRouter>>;
+
+  beforeEach(async () => {
+    pinia = createPinia();
+    setActivePinia(pinia);
+    router = await createTestRouter();
+  });
+
+  function mountGraph() {
+    return mount(GraphView, {
+      global: {
+        plugins: [pinia, router],
+        stubs: { GraphPanel: true },
+      },
+    });
+  }
+
+  it('renders breadcrumb navigation', () => {
+    const wrapper = mountGraph();
+    expect(wrapper.text()).toContain('Home');
+    expect(wrapper.text()).toContain('Graph View');
+  });
+
+  it('shows loading spinner initially', () => {
+    const wrapper = mountGraph();
+    expect(wrapper.find('.animate-spin').exists()).toBe(true);
+    expect(wrapper.text()).toContain('Loading graph data');
+  });
+
+  it('renders GraphPanel after loading', async () => {
+    const wrapper = mountGraph();
+    await flushPromises();
+    expect(wrapper.findComponent({ name: 'GraphPanel' }).exists()).toBe(true);
+  });
+
+  it('shows edge count after loading', async () => {
+    const wrapper = mountGraph();
+    await flushPromises();
+    expect(wrapper.text()).toContain('edges');
+  });
+
+  it('has full-height container', () => {
+    const wrapper = mountGraph();
+    const container = wrapper.find('.flex.flex-col');
+    expect(container.exists()).toBe(true);
+  });
+});

package/src/__tests__/home-interaction.test.ts

@@ -0,0 +1,157 @@
+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 HomeView from '../views/HomeView.vue';
+import { useVocabularyStore } from '../stores/vocabulary';
+import type { Manifest } from '../adapters/types';
+
+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', 'fra'],
+    conceptCount: 100,
+    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,
+  };
+}
+
+async function createTestRouter() {
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/', name: 'home', component: { template: '<div/>' } },
+      { path: '/dataset/:registerId', name: 'dataset', component: { template: '<div/>' } },
+      { path: '/search', name: 'search', component: { template: '<div/>' } },
+      { path: '/graph', name: 'graph', component: { template: '<div/>' } },
+      { path: '/dataset/:registerId/concept/:conceptId', name: 'concept', component: { template: '<div/>' } },
+    ],
+  });
+  router.push('/');
+  await router.isReady();
+  return router;
+}
+
+describe('HomeView interactions', () => {
+  let pinia: ReturnType<typeof createPinia>;
+  let router: Awaited<ReturnType<typeof createTestRouter>>;
+
+  beforeEach(async () => {
+    pinia = createPinia();
+    setActivePinia(pinia);
+    router = await createTestRouter();
+  });
+
+  function mountHome() {
+    return mount(HomeView, {
+      global: { plugins: [pinia, router] },
+    });
+  }
+
+  it('renders the welcome hero section', () => {
+    const wrapper = mountHome();
+    expect(wrapper.find('h1').text()).toContain('Glossarist');
+  });
+
+  it('renders Search, Graph View, and Surprise Me buttons', () => {
+    const wrapper = mountHome();
+    const buttons = wrapper.findAll('button');
+    const texts = buttons.map(b => b.text());
+    expect(texts.some(t => t.includes('Search'))).toBe(true);
+    expect(texts.some(t => t.includes('Graph View'))).toBe(true);
+    expect(texts.some(t => t.includes('Surprise Me'))).toBe(true);
+  });
+
+  it('navigates to search on Search button click', async () => {
+    const wrapper = mountHome();
+    const searchBtn = wrapper.findAll('button').find(b => b.text().includes('Search'));
+    await searchBtn!.trigger('click');
+    await flushPromises();
+    expect(router.currentRoute.value.name).toBe('search');
+  });
+
+  it('navigates to graph on Graph View button click', async () => {
+    const wrapper = mountHome();
+    const graphBtn = wrapper.findAll('button').find(b => b.text().includes('Graph View'));
+    await graphBtn!.trigger('click');
+    await flushPromises();
+    expect(router.currentRoute.value.name).toBe('graph');
+  });
+
+  it('shows stats counters', () => {
+    const store = useVocabularyStore();
+    store.manifests.set('test', makeManifest());
+    store.datasets.set('test', { index: [], getConceptCount: () => 0 } as any);
+
+    const wrapper = mountHome();
+    expect(wrapper.text()).toContain('Datasets');
+    expect(wrapper.text()).toContain('Concepts');
+    expect(wrapper.text()).toContain('Languages');
+  });
+
+  it('shows a CTA card for a single dataset', () => {
+    const store = useVocabularyStore();
+    store.manifests.set('test', makeManifest());
+    store.datasets.set('test', { index: [], getConceptCount: () => 0 } as any);
+
+    const wrapper = mountHome();
+    expect(wrapper.text()).toContain('Test Dataset');
+    expect(wrapper.text()).toContain('Browse concepts');
+  });
+
+  it('navigates to dataset on CTA click', async () => {
+    const store = useVocabularyStore();
+    store.manifests.set('test', makeManifest());
+    store.datasets.set('test', { index: [], getConceptCount: () => 0 } as any);
+
+    const wrapper = mountHome();
+    const cta = wrapper.findAll('button').find(b => b.text().includes('Browse concepts'));
+    await cta!.trigger('click');
+    await flushPromises();
+    expect(router.currentRoute.value.name).toBe('dataset');
+    expect(router.currentRoute.value.params.registerId).toBe('test');
+  });
+
+  it('shows dataset cards for multiple datasets', () => {
+    const store = useVocabularyStore();
+    store.manifests.set('ds1', makeManifest({ id: 'ds1', title: 'Dataset One' }));
+    store.manifests.set('ds2', makeManifest({ id: 'ds2', title: 'Dataset Two' }));
+    store.datasets.set('ds1', { index: [], getConceptCount: () => 0 } as any);
+    store.datasets.set('ds2', { index: [], getConceptCount: () => 0 } as any);
+
+    const wrapper = mountHome();
+    expect(wrapper.text()).toContain('Dataset One');
+    expect(wrapper.text()).toContain('Dataset Two');
+    expect(wrapper.text()).toContain('Available Datasets');
+  });
+
+  it('navigates to dataset on card click', async () => {
+    const store = useVocabularyStore();
+    store.manifests.set('ds1', makeManifest({ id: 'ds1', title: 'Dataset One' }));
+    store.manifests.set('ds2', makeManifest({ id: 'ds2', title: 'Dataset Two' }));
+    store.datasets.set('ds1', { index: [], getConceptCount: () => 0 } as any);
+    store.datasets.set('ds2', { index: [], getConceptCount: () => 0 } as any);
+
+    const wrapper = mountHome();
+    const card = wrapper.findAll('button').find(b => b.text().includes('Dataset One'));
+    await card!.trigger('click');
+    await flushPromises();
+    expect(router.currentRoute.value.name).toBe('dataset');
+    expect(router.currentRoute.value.params.registerId).toBe('ds1');
+  });
+});