@glossarist/concept-browser 0.7.99 → 0.7.101

package/package.json

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

package/src/__tests__/components/hyperedge-diagram.test.ts

@@ -0,0 +1,55 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import HyperedgeDiagram from '../../components/HyperedgeDiagram.vue';
+
+/**
+ * HyperedgeDiagram mounts a small SVG and calls the actual sphere
+ * renderer (drawRakeBundles or drawGenericPipes) on mount. These
+ * tests pin the contract: each kind produces the right kind of SVG
+ * child elements, matching what the sphere itself renders.
+ */
+describe('HyperedgeDiagram', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it('renders an SVG element', () => {
+    const w = mount(HyperedgeDiagram, { props: { kind: 'partitive' } });
+    expect(w.find('svg.hyperedge-diagram').exists()).toBe(true);
+  });
+
+  it('partitive kind calls drawRakeBundles (emits line.rake-seg + circle.rake-junction)', () => {
+    const w = mount(HyperedgeDiagram, { props: { kind: 'partitive' } });
+    const svg = w.element as SVGSVGElement;
+    /* The sample fixture has 3 members with mixed multiplicity, so the
+       rake emits ≥1 segment + exactly 1 junction circle + 1 diamond. */
+    expect(svg.querySelectorAll('line.rake-seg').length).toBeGreaterThan(0);
+    expect(svg.querySelectorAll('circle.rake-junction').length).toBe(1);
+    expect(svg.querySelectorAll('path').length).toBe(1);
+  });
+
+  it('generic kind calls drawGenericPipes (emits line.pipe-seg + rect.pipe-junction)', () => {
+    const w = mount(HyperedgeDiagram, { props: { kind: 'generic' } });
+    const svg = w.element as SVGSVGElement;
+    /* The sample fixture has 3 members → 1 thick pipe + 3 thin threads = 4 segments,
+       plus 1 square junction and 1 diamond. */
+    expect(svg.querySelectorAll('line.pipe-seg').length).toBe(4);
+    expect(svg.querySelectorAll('rect.pipe-junction').length).toBe(1);
+    expect(svg.querySelectorAll('path').length).toBe(1);
+  });
+
+  it('partitive kind does not leak pipe-and-thread artifacts', () => {
+    const w = mount(HyperedgeDiagram, { props: { kind: 'partitive' } });
+    const svg = w.element as SVGSVGElement;
+    expect(svg.querySelectorAll('line.pipe-seg').length).toBe(0);
+    expect(svg.querySelectorAll('rect.pipe-junction').length).toBe(0);
+  });
+
+  it('generic kind does not leak rake artifacts', () => {
+    const w = mount(HyperedgeDiagram, { props: { kind: 'generic' } });
+    const svg = w.element as SVGSVGElement;
+    expect(svg.querySelectorAll('line.rake-seg').length).toBe(0);
+    expect(svg.querySelectorAll('circle.rake-junction').length).toBe(0);
+  });
+});

package/src/__tests__/components/learn/learn-card-dimension-card.test.ts

@@ -0,0 +1,112 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import LearnCard from '../../../components/learn/LearnCard.vue';
+import DimensionCard from '../../../components/learn/DimensionCard.vue';
+
+describe('LearnCard', () => {
+  beforeEach(() => setActivePinia(createPinia()));
+
+  it('renders the title and ISO reference', () => {
+    const w = mount(LearnCard, {
+      props: { title: 'partitive relation', isoReference: 'ISO 704:2022 §5.5.4.3' },
+    });
+    expect(w.find('h3').text()).toBe('partitive relation');
+    expect(w.find('.font-mono').text()).toBe('ISO 704:2022 §5.5.4.3');
+  });
+
+  it('renders the body slot', () => {
+    const w = mount(LearnCard, {
+      props: { title: 'x' },
+      slots: { default: '<p>Body content</p>' },
+    });
+    expect(w.find('.learn-card-body').html()).toContain('Body content');
+  });
+
+  it('renders the example slot in its own section', () => {
+    const w = mount(LearnCard, {
+      props: { title: 'x' },
+      slots: { example: 'VIM 1.9 measurement unit' },
+    });
+    expect(w.find('.learn-card-example').text()).toContain('VIM 1.9');
+  });
+
+  it('omits the "learn more" footer when learnMoreUrl is absent', () => {
+    const w = mount(LearnCard, { props: { title: 'x' } });
+    expect(w.find('.learn-card-footer').exists()).toBe(false);
+  });
+
+  it('renders the learn-more footer when learnMoreUrl is present', () => {
+    const w = mount(LearnCard, {
+      props: { title: 'x', learnMoreUrl: 'https://www.glossarist.org/model/x' },
+    });
+    const link = w.find('.learn-card-footer a');
+    expect(link.attributes('href')).toBe('https://www.glossarist.org/model/x');
+    expect(link.attributes('target')).toBe('_blank');
+    expect(link.attributes('rel')).toBe('noopener');
+  });
+
+  it('binds the id prop for deep-link anchors', () => {
+    const w = mount(LearnCard, {
+      props: { id: '__partitive__', title: 'x' },
+    });
+    expect(w.find('article').attributes('id')).toBe('__partitive__');
+  });
+});
+
+describe('DimensionCard', () => {
+  beforeEach(() => setActivePinia(createPinia()));
+
+  it('renders one row per value', () => {
+    const w = mount(DimensionCard, {
+      props: {
+        name: 'Presence',
+        summary: 'Compulsory or optional',
+        values: [
+          { value: 'required', label: 'required', meaning: 'must be present' },
+          { value: 'optional', label: 'optional', meaning: 'may be absent' },
+        ],
+      },
+    });
+    expect(w.findAll('.dimension-value-row').length).toBe(2);
+  });
+
+  it('renders value labels and meanings', () => {
+    const w = mount(DimensionCard, {
+      props: {
+        name: 'x',
+        summary: 's',
+        values: [{ value: 'required', label: 'required', meaning: 'must be present' }],
+      },
+    });
+    const row = w.find('.dimension-value-row');
+    expect(row.text()).toContain('required');
+    expect(row.text()).toContain('must be present');
+  });
+
+  it('exposes a visual scoped slot per value', () => {
+    const w = mount(DimensionCard, {
+      props: {
+        name: 'x',
+        summary: 's',
+        values: [{ value: 'required', label: 'required', meaning: 'm' }],
+      },
+      slots: {
+        visual: '<svg data-test="custom-visual" />',
+      },
+    });
+    expect(w.find('svg[data-test="custom-visual"]').exists()).toBe(true);
+  });
+
+  it('binds the id prop for deep-link anchors', () => {
+    const w = mount(DimensionCard, {
+      props: {
+        id: 'partitive-presence',
+        name: 'x',
+        summary: 's',
+        values: [{ value: 'required', label: 'required', meaning: 'm' }],
+      },
+    });
+    expect(w.find('article').attributes('id')).toBe('partitive-presence');
+  });
+});

package/src/__tests__/components/rake-bundles.test.ts

@@ -0,0 +1,318 @@
+import { describe, it, expect } from 'vitest';
+import { drawRakeBundles } from '../../components/relation-sphere/rake-bundles';
+import type { PartitiveRelationWire, PartitiveMemberWire } from '../../adapters/types';
+import {
+  NORMAL_STROKE_WIDTH,
+  DELIMITING_STROKE_WIDTH,
+} from '../../utils/partitive-multiplicity';
+
+/**
+ * Renderer tests for the partitive-relation rake bundle.
+ *
+ * Mirrors `pipe-bundles.test.ts` — pins the visual contract so a
+ * regression in stem/spine/teeth geometry, multiplicity stroke style,
+ * or partial-completeness spine extension cannot ship silently.
+ *
+ * Layout reference (ISO 704 rake notation):
+ *
+ *     comprehensive
+ *         │           ← stem (FRAME_STROKE_WIDTH, single solid)
+ *         ●─────────  ← spine (FRAME_STROKE_WIDTH, single solid)
+ *         │     │
+ *         ▼     ▼    ← teeth (per-member multiplicity + delimiting style)
+ *       p1     p2
+ */
+function makeSvg(): SVGSVGElement {
+  return document.createElementNS('http://www.w3.org/2000/svg', 'svg') as unknown as SVGSVGElement;
+}
+
+function member(uri: string, fields: Partial<PartitiveMemberWire> = {}): PartitiveMemberWire {
+  return {
+    uri,
+    presence: fields.presence ?? 'required',
+    count: fields.count ?? 'exactly_one',
+    isDelimiting: fields.isDelimiting ?? false,
+  };
+}
+
+function makeRelation(overrides: Partial<PartitiveRelationWire> = {}): PartitiveRelationWire {
+  return {
+    source: 'https://example.org/vim-2012/concept/1.3',
+    comprehensive: 'https://example.org/vim-2012/concept/1.3',
+    completeness: 'complete',
+    register: 'vim-2012',
+    partitives: [
+      member('https://example.org/vim-2012/concept/1.4'),
+      member('https://example.org/vim-2012/concept/1.5'),
+      member('https://example.org/vim-2012/concept/1.22'),
+    ],
+    ...overrides,
+  };
+}
+
+/* Fixed position map: comp at top-center, 3 members fanned across the bottom.
+   The rake renderer projects members onto a perpendicular spine; absolute
+   coordinates don't matter for the contract assertions, only that each
+   member has a distinct position so the spine has non-zero length. */
+const pos = new Map<string, { x: number; y: number }>([
+  ['vim-2012/1.3', { x: 120, y: 20 }],
+  ['vim-2012/1.4', { x: 30, y: 140 }],
+  ['vim-2012/1.5', { x: 120, y: 140 }],
+  ['vim-2012/1.22', { x: 210, y: 140 }],
+]);
+
+describe('drawRakeBundles — rake contract', () => {
+  it('renders nothing when muted', () => {
+    const svg = makeSvg();
+    drawRakeBundles(svg, pos, {
+      isDark: false,
+      color: '#0d9488',
+      isMuted: true,
+      relations: [makeRelation()],
+    });
+    expect(svg.querySelectorAll('line.rake-seg').length).toBe(0);
+    expect(svg.querySelectorAll('circle.rake-junction').length).toBe(0);
+    expect(svg.querySelectorAll('path').length).toBe(0);
+  });
+
+  it('renders a diamond at the comprehensive end (origin marker)', () => {
+    const svg = makeSvg();
+    drawRakeBundles(svg, pos, {
+      isDark: false,
+      color: '#0d9488',
+      isMuted: false,
+      relations: [makeRelation()],
+    });
+    /* Diamond is the only <path> element the rake emits. */
+    const paths = svg.querySelectorAll('path');
+    expect(paths.length).toBe(1);
+    /* Diamond path is centered on the comp position (120, 20).
+       The first coordinate of the diamond "M cx (cy-half)" pattern. */
+    const d = paths[0].getAttribute('d') ?? '';
+    expect(d.startsWith('M 120 ')).toBe(true);
+  });
+
+  it('renders exactly one circular junction at the spine center', () => {
+    const svg = makeSvg();
+    drawRakeBundles(svg, pos, {
+      isDark: false,
+      color: '#0d9488',
+      isMuted: false,
+      relations: [makeRelation()],
+    });
+    expect(svg.querySelectorAll('circle.rake-junction').length).toBe(1);
+  });
+
+  it('does NOT emit pipe-and-thread artifacts (no shape leak)', () => {
+    const svg = makeSvg();
+    drawRakeBundles(svg, pos, {
+      isDark: false,
+      color: '#0d9488',
+      isMuted: false,
+      relations: [makeRelation()],
+    });
+    expect(svg.querySelectorAll('line.pipe-seg').length).toBe(0);
+    expect(svg.querySelectorAll('rect.pipe-junction').length).toBe(0);
+  });
+
+  it('renders frame-width stem + spine at FRAME_STROKE_WIDTH (1.4)', () => {
+    const svg = makeSvg();
+    drawRakeBundles(svg, pos, {
+      isDark: false,
+      color: '#0d9488',
+      isMuted: false,
+      relations: [makeRelation()],
+    });
+    const segs = Array.from(svg.querySelectorAll('line.rake-seg'));
+    const frameSegs = segs.filter(s => Math.abs(parseFloat(s.getAttribute('stroke-width')!) - 1.4) < 0.01);
+    /* Stem + spine = 2 frame-width segments. */
+    expect(frameSegs.length).toBe(2);
+  });
+
+  it('tooth stroke width reflects isDelimiting (NORMAL vs 3× DELIMITING)', () => {
+    const svg = makeSvg();
+    /* All members required/exactly_one, but only the second is delimiting.
+       Expected tooth widths: NORMAL, DELIMITING (3×), NORMAL. */
+    const rel = makeRelation({
+      partitives: [
+        member('https://example.org/vim-2012/concept/1.4'),
+        member('https://example.org/vim-2012/concept/1.5', { isDelimiting: true }),
+        member('https://example.org/vim-2012/concept/1.22'),
+      ],
+    });
+    drawRakeBundles(svg, pos, {
+      isDark: false,
+      color: '#0d9488',
+      isMuted: false,
+      relations: [rel],
+    });
+    const segs = Array.from(svg.querySelectorAll('line.rake-seg'));
+    const widths = segs.map(s => parseFloat(s.getAttribute('stroke-width')!));
+    /* Stem + spine are 1.4; non-delimiting teeth are NORMAL (1.5);
+       delimiting teeth are DELIMITING (4.5). */
+    expect(widths.filter(w => Math.abs(w - NORMAL_STROKE_WIDTH) < 0.01).length).toBe(2);
+    expect(widths.filter(w => Math.abs(w - DELIMITING_STROKE_WIDTH) < 0.01).length).toBe(1);
+  });
+
+  it('count=multiple renders 2 parallel tooth lines (lineCount=2)', () => {
+    const svg = makeSvg();
+    /* One member with count=multiple. Counting segments:
+       - 1 stem (FRAME)
+       - 1 spine (FRAME) — only if spine extents > 1px; with a single
+         member the spine is degenerate (zero length). The renderer
+         guards with `if (Math.abs(maxAlong - minAlong) > 1)`, so spine
+         is skipped for single-member input.
+       - 2 tooth lines (lineCount=2 for count=multiple).
+       Total: 1 stem + 2 teeth = 3 segments. */
+    const rel = makeRelation({
+      partitives: [
+        member('https://example.org/vim-2012/concept/1.4', { count: 'multiple' }),
+        member('https://example.org/vim-2012/concept/1.5', { count: 'multiple' }),
+      ],
+    });
+    drawRakeBundles(svg, pos, {
+      isDark: false,
+      color: '#0d9488',
+      isMuted: false,
+      relations: [rel],
+    });
+    const segs = svg.querySelectorAll('line.rake-seg');
+    /* 2 members × 2 lines each = 4 teeth, + 1 stem + 1 spine = 6. */
+    expect(segs.length).toBe(6);
+  });
+
+  it('presence=optional makes the tooth dashed', () => {
+    const svg = makeSvg();
+    const rel = makeRelation({
+      partitives: [
+        member('https://example.org/vim-2012/concept/1.4', { presence: 'optional' }),
+        member('https://example.org/vim-2012/concept/1.5', { presence: 'required' }),
+      ],
+    });
+    drawRakeBundles(svg, pos, {
+      isDark: false,
+      color: '#0d9488',
+      isMuted: false,
+      relations: [rel],
+    });
+    const segs = Array.from(svg.querySelectorAll('line.rake-seg'));
+    /* Teeth are the segments at NORMAL_STROKE_WIDTH (1.5) — frame
+       segments are at 1.4. Filter to teeth, then check dash pattern. */
+    const teeth = segs.filter(s => Math.abs(parseFloat(s.getAttribute('stroke-width')!) - NORMAL_STROKE_WIDTH) < 0.01);
+    expect(teeth.length).toBeGreaterThanOrEqual(2);
+    /* presence=optional tooth is dashed; presence=required is solid.
+       At least one dashed, at least one solid. */
+    const dashed = teeth.filter(t => t.getAttribute('stroke-dasharray'));
+    const solid = teeth.filter(t => !t.getAttribute('stroke-dasharray'));
+    expect(dashed.length).toBeGreaterThanOrEqual(1);
+    expect(solid.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('partial completeness extends the spine beyond the member bounding box', () => {
+    /* Members at x = {30, 120, 210}; their bbox X is [30, 210].
+       With completeness='partial', PARTIAL_TAIL (28px) is appended to
+       the spine extent — so the spine endpoint must land OUTSIDE [30, 210].
+       With completeness='complete' the spine stays inside the bbox. */
+    const members = [
+      member('https://example.org/vim-2012/concept/1.4'),
+      member('https://example.org/vim-2012/concept/1.5'),
+      member('https://example.org/vim-2012/concept/1.22'),
+    ];
+    const completeSvg = makeSvg();
+    const partialSvg = makeSvg();
+    drawRakeBundles(completeSvg, pos, {
+      isDark: false, color: '#0d9488', isMuted: false,
+      relations: [makeRelation({ completeness: 'complete', partitives: members })],
+    });
+    drawRakeBundles(partialSvg, pos, {
+      isDark: false, color: '#0d9488', isMuted: false,
+      relations: [makeRelation({ completeness: 'partial', partitives: members })],
+    });
+    /* Frame-width (1.4) segments are stem + spine. For complete, all
+       spine frame-segment endpoints lie within the member X bbox [30,210].
+       For partial, at least one endpoint lies outside. */
+    const isFrame = (s: Element) => Math.abs(parseFloat(s.getAttribute('stroke-width')!) - 1.4) < 0.01;
+    const endpointsOutsideBbox = (svg: SVGSVGElement) => {
+      return Array.from(svg.querySelectorAll('line.rake-seg'))
+        .filter(isFrame)
+        .some(s => {
+          const x1 = parseFloat(s.getAttribute('x1')!);
+          const x2 = parseFloat(s.getAttribute('x2')!);
+          return x1 < 30 || x1 > 210 || x2 < 30 || x2 > 210;
+        });
+    };
+    expect(endpointsOutsideBbox(completeSvg)).toBe(false);
+    expect(endpointsOutsideBbox(partialSvg)).toBe(true);
+  });
+
+  it('renders a degenerate rake (stem + 1 tooth, no spine) when only 1 member has a position', () => {
+    /* The renderer does not enforce ≥2 members — the model layer does.
+       Given 1 member, the rake produces a stem and a single tooth, no
+       spine (maxAlong - minAlong = 0, so the spine is skipped). */
+    const svg = makeSvg();
+    const sparsePos = new Map<string, { x: number; y: number }>([
+      ['vim-2012/1.3', { x: 120, y: 20 }],
+      ['vim-2012/1.4', { x: 30, y: 140 }],
+      /* 1.5 and 1.22 missing — only 1 member with a position */
+    ]);
+    drawRakeBundles(svg, sparsePos, {
+      isDark: false, color: '#0d9488', isMuted: false,
+      relations: [makeRelation()],
+    });
+    /* 1 stem (frame) + 1 tooth (normal) = 2 segments. */
+    expect(svg.querySelectorAll('line.rake-seg').length).toBe(2);
+    expect(svg.querySelectorAll('circle.rake-junction').length).toBe(1);
+  });
+
+  it('skips the relation entirely when the comprehensive is missing from pos', () => {
+    const svg = makeSvg();
+    const sparsePos = new Map<string, { x: number; y: number }>([
+      ['vim-2012/1.4', { x: 30, y: 140 }],
+      ['vim-2012/1.5', { x: 120, y: 140 }],
+      /* comprehensive 1.3 missing — compPos lookup fails, relation skipped */
+    ]);
+    drawRakeBundles(svg, sparsePos, {
+      isDark: false, color: '#0d9488', isMuted: false,
+      relations: [makeRelation()],
+    });
+    expect(svg.querySelectorAll('line.rake-seg').length).toBe(0);
+    expect(svg.querySelectorAll('circle.rake-junction').length).toBe(0);
+    expect(svg.querySelectorAll('path').length).toBe(0);
+  });
+
+  it('renders a separate junction + diamond per relation when multiple are present', () => {
+    const svg = makeSvg();
+    /* Two distinct comprehensives → two rake bundles. */
+    const multiPos = new Map<string, { x: number; y: number }>([
+      ['vim-2012/1.3', { x: 60, y: 20 }],
+      ['vim-2012/1.4', { x: 30, y: 140 }],
+      ['vim-2012/1.5', { x: 90, y: 140 }],
+      ['vim-2012/2.9', { x: 180, y: 20 }],
+      ['vim-2012/2.10', { x: 150, y: 140 }],
+      ['vim-2012/2.26', { x: 210, y: 140 }],
+    ]);
+    drawRakeBundles(svg, multiPos, {
+      isDark: false, color: '#0d9488', isMuted: false,
+      relations: [
+        makeRelation({
+          comprehensive: 'https://example.org/vim-2012/concept/1.3',
+          source: 'https://example.org/vim-2012/concept/1.3',
+          partitives: [
+            member('https://example.org/vim-2012/concept/1.4'),
+            member('https://example.org/vim-2012/concept/1.5'),
+          ],
+        }),
+        makeRelation({
+          comprehensive: 'https://example.org/vim-2012/concept/2.9',
+          source: 'https://example.org/vim-2012/concept/2.9',
+          partitives: [
+            member('https://example.org/vim-2012/concept/2.10'),
+            member('https://example.org/vim-2012/concept/2.26'),
+          ],
+        }),
+      ],
+    });
+    expect(svg.querySelectorAll('circle.rake-junction').length).toBe(2);
+    expect(svg.querySelectorAll('path').length).toBe(2);
+  });
+});

package/src/__tests__/views/learn/learn-designations-view.test.ts

@@ -0,0 +1,84 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import { createRouter, createMemoryHistory } from 'vue-router';
+import LearnDesignationsView from '../../../views/learn/LearnDesignationsView.vue';
+
+async function makeRouter() {
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/', name: 'home', component: { template: '<div/>' } },
+      { path: '/learn/designations', name: 'learn-designations', component: LearnDesignationsView },
+    ],
+  });
+  await router.push('/learn/designations');
+  await router.isReady();
+  return router;
+}
+
+describe('LearnDesignationsView', () => {
+  beforeEach(() => setActivePinia(createPinia()));
+
+  it('renders the page header', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnDesignationsView, { global: { plugins: [router] } });
+    expect(w.find('h1').text()).toContain('Designations');
+  });
+
+  it('renders three top-level sections (normative, kinds, types)', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnDesignationsView, { global: { plugins: [router] } });
+    const sections = w.findAll('section[aria-label]');
+    expect(sections.length).toBe(3);
+  });
+
+  it('normative section has all three ratings (preferred/admitted/deprecated)', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnDesignationsView, { global: { plugins: [router] } });
+    const normative = w.find('section[aria-label="Normative status"]');
+    const cardTitles = normative.findAll('h3').map(h => h.text());
+    expect(cardTitles).toEqual(expect.arrayContaining([
+      'preferred term', 'admitted term', 'deprecated term',
+    ]));
+  });
+
+  it('each normative card notes "there can be more than one"', async () => {
+    /* The user's specific concern: explain that there can be multiple. */
+    const router = await makeRouter();
+    const w = mount(LearnDesignationsView, { global: { plugins: [router] } });
+    const normative = w.find('section[aria-label="Normative status"]');
+    const notes = normative.findAll('.italic').map(i => i.text().toLowerCase());
+    expect(notes.filter(t => t.includes('more than one')).length).toBe(3);
+  });
+
+  it('kinds section renders all four kinds (full form, abbreviated, borrowed, variant)', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnDesignationsView, { global: { plugins: [router] } });
+    const kinds = w.find('section[aria-label="Kinds and forms of term"]');
+    const titles = kinds.findAll('h3').map(h => h.text());
+    expect(titles).toEqual(expect.arrayContaining([
+      'full form', 'abbreviated form', 'borrowed term', 'variant',
+    ]));
+  });
+
+  it('types section renders term, acronym, initialism, symbol', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnDesignationsView, { global: { plugins: [router] } });
+    const types = w.find('section[aria-label="Designation types"]');
+    const titles = types.findAll('h3').map(h => h.text());
+    expect(titles).toEqual(expect.arrayContaining([
+      'term (expression)', 'acronym', 'initialism', 'symbol',
+    ]));
+  });
+
+  it('every example slot mentions a concrete ISO example', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnDesignationsView, { global: { plugins: [router] } });
+    const examples = w.findAll('.learn-card-example').map(e => e.text());
+    expect(examples.some(t => t.includes('compact disc'))).toBe(true);
+    expect(examples.some(t => t.includes('WWW'))).toBe(true);
+    expect(examples.some(t => t.includes('laser'))).toBe(true);
+    expect(examples.some(t => t.includes('OIML'))).toBe(true);
+  });
+});

package/src/__tests__/views/learn/learn-index-view.test.ts

@@ -0,0 +1,45 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import { createRouter, createMemoryHistory } from 'vue-router';
+import LearnIndexView from '../../../views/learn/LearnIndexView.vue';
+
+async function makeRouter() {
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/', name: 'home', component: { template: '<div/>' } },
+      { path: '/learn', name: 'learn', component: LearnIndexView },
+      { path: '/learn/relationships', name: 'learn-relationships', component: { template: '<div/>' } },
+      { path: '/learn/designations', name: 'learn-designations', component: { template: '<div/>' } },
+      { path: '/learn/statuses', name: 'learn-statuses', component: { template: '<div/>' } },
+    ],
+  });
+  await router.push('/learn');
+  await router.isReady();
+  return router;
+}
+
+describe('LearnIndexView', () => {
+  beforeEach(() => setActivePinia(createPinia()));
+
+  it('renders the page header with translated title', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnIndexView, { global: { plugins: [router] } });
+    expect(w.find('h1').text()).toContain('Learn');
+  });
+
+  it('renders exactly 3 topic cards for Phase 1', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnIndexView, { global: { plugins: [router] } });
+    /* Each RouterLink wraps a LearnCard. Phase 1 = 3 topics. */
+    expect(w.findAllComponents({ name: 'LearnCard' }).length).toBe(3);
+  });
+
+  it('each topic card links to one of the Phase 1 routes', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnIndexView, { global: { plugins: [router] } });
+    const links = w.findAll('a').map(a => a.attributes('href'));
+    expect(links).toEqual(expect.arrayContaining(['/learn/relationships', '/learn/designations', '/learn/statuses']));
+  });
+});