@svgrid/grid 1.0.0

package/dist/SvGridChart.test.js

@@ -0,0 +1,62 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { mount, unmount } from 'svelte';
+import SvGridChart from './SvGridChart.svelte';
+let app = null;
+let target = null;
+function render(spec, extra = {}) {
+    target = document.createElement('div');
+    document.body.appendChild(target);
+    app = mount(SvGridChart, { target, props: { spec, ...extra } });
+    return target;
+}
+afterEach(() => {
+    if (app)
+        unmount(app);
+    if (target)
+        target.remove();
+    app = null;
+    target = null;
+});
+describe('SvGridChart legend overflow', () => {
+    const many = {
+        type: 'bar',
+        categories: ['A', 'B'],
+        series: Array.from({ length: 14 }, (_, i) => ({ label: `S${i}`, values: [i, i + 1] })),
+    };
+    it('collapses to the first 10 chips with a "+N more" toggle', () => {
+        const el = render(many);
+        const chips = el.querySelectorAll('.sv-grid-chart-legend-item');
+        expect(chips.length).toBe(10);
+        const more = el.querySelector('.sv-grid-chart-legend-more');
+        expect(more).toBeTruthy();
+        expect(more.textContent).toContain('+4 more');
+    });
+    it('expands to show every series when "+N more" is clicked', async () => {
+        const el = render(many);
+        const more = el.querySelector('.sv-grid-chart-legend-more');
+        more.click();
+        await Promise.resolve();
+        expect(el.querySelectorAll('.sv-grid-chart-legend-item').length).toBe(14);
+        expect(el.querySelector('.sv-grid-chart-legend-more').textContent).toContain('Show less');
+    });
+    it('shows no overflow toggle for <= 10 series', () => {
+        const el = render({ type: 'bar', categories: ['A'], series: [{ label: 's', values: [1] }] });
+        expect(el.querySelector('.sv-grid-chart-legend-more')).toBeNull();
+    });
+});
+describe('SvGridChart horizontal bars', () => {
+    it('renders left category labels and a bottom value axis', () => {
+        const el = render({
+            type: 'bar',
+            orientation: 'horizontal',
+            categories: ['Ada', 'Grace'],
+            series: [{ label: 'rev', values: [10, 30] }],
+        });
+        const bars = el.querySelectorAll('.sv-grid-chart-bar');
+        expect(bars.length).toBe(2);
+        // category labels appear as axis text
+        const axisText = [...el.querySelectorAll('.sv-grid-chart-axis')].map((n) => n.textContent);
+        expect(axisText).toContain('Ada');
+        expect(axisText).toContain('Grace');
+    });
+});