607112afc2
A minimal presentational bar series (one bar per value, heights scaled to the max, faint floor for empty buckets). Lives in shared so both the timeline density strip and the document chart can use it. REQ-012 (supports). Refs #779 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
29 lines
1.1 KiB
TypeScript
29 lines
1.1 KiB
TypeScript
import { describe, it, expect, afterEach } from 'vitest';
|
|
import { cleanup, render } from 'vitest-browser-svelte';
|
|
import Sparkline from './Sparkline.svelte';
|
|
|
|
afterEach(() => cleanup());
|
|
|
|
describe('Sparkline', () => {
|
|
it('renders one bar per value', () => {
|
|
render(Sparkline, { values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] });
|
|
const bars = document.querySelectorAll('[data-testid="sparkline-bar"]');
|
|
expect(bars).toHaveLength(12);
|
|
});
|
|
|
|
it('scales bar heights relative to the largest value', () => {
|
|
render(Sparkline, { values: [5, 10, 0] });
|
|
const bars = document.querySelectorAll<HTMLElement>('[data-testid="sparkline-bar"]');
|
|
const h = (i: number) => parseFloat(bars[i].style.height);
|
|
// 10 is the max → tallest; 5 is half of the max's height; 0 is the shortest.
|
|
expect(h(1)).toBeGreaterThan(h(0));
|
|
expect(h(0)).toBeGreaterThan(h(2));
|
|
});
|
|
|
|
it('exposes an accessible label when provided', () => {
|
|
render(Sparkline, { values: [1, 2, 3], label: 'Monatsdichte' });
|
|
const img = document.querySelector('[role="img"]');
|
|
expect(img?.getAttribute('aria-label')).toBe('Monatsdichte');
|
|
});
|
|
});
|