chore: add unit tests for Vector/Spike marks (#171) (#381)

ljodea · claude · web-flow · commit e017bf5c2c83 · 2026-02-16T22:42:33.000+01:00
## Summary - Adds 8 unit tests for the `Vector` mark covering path rendering, shape geometry, transforms, styling (stroke/fill), all 3 shape variants (arrow, spike, arrow-filled), anchor behavior, and empty data - Adds 5 unit tests for the `Spike` mark covering path rendering, default spike shape, default/custom stroke styling, and empty data - Follows existing `.test.svelte` wrapper + `.test.svelte.ts` pattern Replaces #380 (which included a duplicate Bollinger commit from the parent branch). Closes #171 ## Test plan - [x] `bun run test src/tests/vector.test.svelte.ts src/tests/spike.test.svelte.ts` — 13 tests pass - [x] `bun run test` — full suite passes (480 tests, no regressions) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
diff --git a/src/tests/spike.test.svelte b/src/tests/spike.test.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+    import { Spike, Plot } from '$lib/index.js';
+    import type { ComponentProps } from 'svelte';
+    let args: ComponentProps<typeof Spike> = $props();
+</script>
+
+<Plot width={100} height={100} axes={false}>
+    <Spike {...args} />
+</Plot>
diff --git a/src/tests/spike.test.svelte.ts b/src/tests/spike.test.svelte.ts
@@ -0,0 +1,68 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import SpikeTest from './spike.test.svelte';
+
+const data = [
+    { x: 10, y: 20, len: 15 },
+    { x: 50, y: 60, len: 25 },
+    { x: 80, y: 40, len: 10 }
+];
+
+describe('Spike mark', () => {
+    it('renders one path per datum', () => {
+        const { container } = render(SpikeTest, {
+            props: { data, x: 'x', y: 'y', length: 'len' }
+        });
+
+        const paths = container.querySelectorAll('g.vector path');
+        expect(paths.length).toBe(data.length);
+    });
+
+    it('uses spike shape by default', () => {
+        const { container } = render(SpikeTest, {
+            props: { data, x: 'x', y: 'y', length: 'len' }
+        });
+
+        const paths = container.querySelectorAll('g.vector path');
+        for (const path of paths) {
+            const d = path.getAttribute('d');
+            expect(d).toBeTruthy();
+            expect(d).toContain('M');
+            expect(d).toContain('L');
+        }
+    });
+
+    it('applies default stroke', () => {
+        const { container } = render(SpikeTest, {
+            props: { data, x: 'x', y: 'y', length: 'len' }
+        });
+
+        const paths = container.querySelectorAll('g.vector path');
+        expect(paths.length).toBe(data.length);
+        for (const path of paths) {
+            const style = (path as SVGElement).style;
+            expect(style.stroke).toBeTruthy();
+        }
+    });
+
+    it('applies custom stroke override', () => {
+        const { container } = render(SpikeTest, {
+            props: { data, x: 'x', y: 'y', length: 'len', stroke: 'green' }
+        });
+
+        const paths = container.querySelectorAll('g.vector path');
+        expect(paths.length).toBe(data.length);
+        for (const path of paths) {
+            expect((path as SVGElement).style.stroke).toBe('green');
+        }
+    });
+
+    it('handles empty data', () => {
+        const { container } = render(SpikeTest, {
+            props: { data: [], x: 'x', y: 'y' }
+        });
+
+        const paths = container.querySelectorAll('g.vector path');
+        expect(paths.length).toBe(0);
+    });
+});
diff --git a/src/tests/vector.test.svelte b/src/tests/vector.test.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+    import { Vector, Plot } from '$lib/index.js';
+    import type { ComponentProps } from 'svelte';
+    let args: ComponentProps<typeof Vector> = $props();
+</script>
+
+<Plot width={100} height={100} axes={false}>
+    <Vector {...args} />
+</Plot>
diff --git a/src/tests/vector.test.svelte.ts b/src/tests/vector.test.svelte.ts
@@ -0,0 +1,126 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import VectorTest from './vector.test.svelte';
+
+const data = [
+    { x: 10, y: 20, len: 15, angle: 45 },
+    { x: 50, y: 60, len: 25, angle: 90 },
+    { x: 80, y: 40, len: 10, angle: 180 }
+];
+
+describe('Vector mark', () => {
+    it('renders one path per datum', () => {
+        const { container } = render(VectorTest, {
+            props: { data, x: 'x', y: 'y', length: 'len', rotate: 'angle' }
+        });
+
+        const paths = container.querySelectorAll('g.vector path');
+        expect(paths.length).toBe(data.length);
+    });
+
+    it('path has valid shape geometry', () => {
+        const { container } = render(VectorTest, {
+            props: { data, x: 'x', y: 'y', length: 'len', rotate: 'angle' }
+        });
+
+        const paths = container.querySelectorAll('g.vector path');
+        for (const path of paths) {
+            const d = path.getAttribute('d');
+            expect(d).toContain('M');
+            expect(d).toContain('L');
+        }
+    });
+
+    it('path has translate transform', () => {
+        const { container } = render(VectorTest, {
+            props: { data, x: 'x', y: 'y', length: 'len', rotate: 'angle' }
+        });
+
+        const paths = container.querySelectorAll('g.vector path');
+        for (const path of paths) {
+            const transform = path.getAttribute('transform');
+            expect(transform).toMatch(/translate\(/);
+        }
+    });
+
+    it('applies custom stroke', () => {
+        const { container } = render(VectorTest, {
+            props: { data, x: 'x', y: 'y', length: 'len', rotate: 'angle', stroke: 'red' }
+        });
+
+        const paths = container.querySelectorAll('g.vector path');
+        expect(paths.length).toBe(data.length);
+        for (const path of paths) {
+            expect((path as SVGElement).style.stroke).toBe('red');
+        }
+    });
+
+    it('renders spike shape', () => {
+        const { container } = render(VectorTest, {
+            props: { data, x: 'x', y: 'y', length: 'len', shape: 'spike' }
+        });
+
+        const paths = container.querySelectorAll('g.vector path');
+        expect(paths.length).toBe(data.length);
+        for (const path of paths) {
+            const d = path.getAttribute('d');
+            expect(d).toBeTruthy();
+            expect(d).toContain('M');
+        }
+    });
+
+    it('renders arrow-filled shape with fill styling', () => {
+        const { container } = render(VectorTest, {
+            props: {
+                data,
+                x: 'x',
+                y: 'y',
+                length: 'len',
+                shape: 'arrow-filled',
+                fill: 'blue'
+            }
+        });
+
+        const paths = container.querySelectorAll('g.vector path');
+        expect(paths.length).toBe(data.length);
+        for (const path of paths) {
+            expect((path as SVGElement).style.fill).toBe('blue');
+        }
+    });
+
+    it('respects anchor option', () => {
+        const { container: startContainer } = render(VectorTest, {
+            props: { data, x: 'x', y: 'y', length: 'len', anchor: 'start' }
+        });
+
+        const { container: middleContainer } = render(VectorTest, {
+            props: { data, x: 'x', y: 'y', length: 'len', anchor: 'middle' }
+        });
+
+        const startPaths = startContainer.querySelectorAll('g.vector path');
+        const middlePaths = middleContainer.querySelectorAll('g.vector path');
+
+        // anchor: 'start' should NOT have the extra translate offset that 'middle' adds
+        for (const path of startPaths) {
+            const transform = path.getAttribute('transform')!;
+            // 'start' produces: translate(x,y) rotate(deg) with no trailing translate
+            const parts = transform.split(') ').filter((p) => p.startsWith('translate('));
+            expect(parts.length).toBe(1); // only the positional translate
+        }
+
+        for (const path of middlePaths) {
+            const transform = path.getAttribute('transform')!;
+            // 'middle' produces: translate(x,y) rotate(deg) translate(0, length/2)
+            expect(transform).toMatch(/translate\(0,/);
+        }
+    });
+
+    it('handles empty data', () => {
+        const { container } = render(VectorTest, {
+            props: { data: [], x: 'x', y: 'y' }
+        });
+
+        const paths = container.querySelectorAll('g.vector path');
+        expect(paths.length).toBe(0);
+    });
+});
