@svgrid/grid 1.1.0 → 1.1.2

package/dist/chart-export.test.js

@@ -0,0 +1,302 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { chartToSvgString, chartToPngBlob, downloadChartSvg, downloadChartPng, } from './chart-export';
+const SVG_NS = 'http://www.w3.org/2000/svg';
+/**
+ * Build a small but realistic chart SVG matching the structure
+ * chart-export expects: `svg.sv-grid-chart-svg` with a viewBox, an
+ * interaction hit layer (`.sv-grid-chart-hit`) that the exporter must
+ * strip, plus a few themed nodes.
+ */
+function makeChartSvg(opts = {}) {
+    const svg = document.createElementNS(SVG_NS, 'svg');
+    svg.setAttribute('class', 'sv-grid-chart-svg');
+    svg.setAttribute('viewBox', opts.viewBox ?? '0 0 400 250');
+    const axis = document.createElementNS(SVG_NS, 'text');
+    axis.setAttribute('class', 'sv-grid-chart-axis');
+    axis.textContent = 'A';
+    svg.appendChild(axis);
+    const hit = document.createElementNS(SVG_NS, 'rect');
+    hit.setAttribute('class', 'sv-grid-chart-hit');
+    svg.appendChild(hit);
+    const bar = document.createElementNS(SVG_NS, 'rect');
+    bar.setAttribute('class', 'sv-grid-chart-bar');
+    svg.appendChild(bar);
+    return svg;
+}
+describe('chartToSvgString', () => {
+    it('serializes the chart svg passed directly as an SVGSVGElement', () => {
+        const svg = makeChartSvg();
+        const out = chartToSvgString(svg);
+        expect(out).toContain('<svg');
+        expect(out).toContain('xmlns="http://www.w3.org/2000/svg"');
+    });
+    it('resolves the inner svg.sv-grid-chart-svg from a wrapping element', () => {
+        const wrap = document.createElement('div');
+        wrap.appendChild(makeChartSvg());
+        const out = chartToSvgString(wrap);
+        expect(out).toContain('<svg');
+    });
+    it('falls back to a plain inner <svg> when the class svg is absent', () => {
+        const wrap = document.createElement('div');
+        const svg = document.createElementNS(SVG_NS, 'svg');
+        svg.setAttribute('viewBox', '0 0 100 100');
+        wrap.appendChild(svg);
+        const out = chartToSvgString(wrap);
+        expect(out).toContain('<svg');
+    });
+    it('throws when no <svg> can be found', () => {
+        const div = document.createElement('div');
+        expect(() => chartToSvgString(div)).toThrow(/no <svg> found/);
+    });
+    it('inlines a <style> block with concrete theme colors', () => {
+        const out = chartToSvgString(makeChartSvg());
+        expect(out).toContain('<style');
+        expect(out).toContain('.sv-grid-chart-axis');
+        expect(out).toContain('.sv-grid-chart-datalabel');
+        expect(out).toContain('.sv-grid-chart-donut-total');
+        // default fallbacks used when no --sg-* vars are set in jsdom
+        expect(out).toContain('#0f172a'); // --sg-fg fallback
+        expect(out).toContain('#64748b'); // --sg-muted fallback
+        expect(out).toContain('#e2e8f0'); // --sg-border fallback
+    });
+    it('strips interaction-only hit layers from the export', () => {
+        const out = chartToSvgString(makeChartSvg());
+        expect(out).not.toContain('sv-grid-chart-hit');
+        // but keeps the real content
+        expect(out).toContain('sv-grid-chart-bar');
+    });
+    it('sets width/height from the viewBox and inserts a background rect', () => {
+        const out = chartToSvgString(makeChartSvg({ viewBox: '0 0 400 250' }));
+        expect(out).toContain('width="400"');
+        expect(out).toContain('height="250"');
+        // background rect spans the full size with the default --sg-bg fallback
+        expect(out).toMatch(/<rect[^>]*fill="#ffffff"/);
+    });
+    it('honors a custom background option over the theme default', () => {
+        const out = chartToSvgString(makeChartSvg(), { background: 'tomato' });
+        expect(out).toMatch(/<rect[^>]*fill="tomato"/);
+        expect(out).not.toContain('fill="#ffffff"');
+    });
+    it('falls back to client size / defaults when no usable viewBox', () => {
+        const svg = document.createElementNS(SVG_NS, 'svg');
+        svg.setAttribute('class', 'sv-grid-chart-svg');
+        // No viewBox attribute => baseVal width 0; jsdom clientWidth is 0 too,
+        // so the exporter uses its 520x300 hard fallback.
+        const out = chartToSvgString(svg);
+        expect(out).toContain('width="520"');
+        expect(out).toContain('height="300"');
+    });
+    it('reads --sg-* css variables when present on the element', () => {
+        const svg = makeChartSvg();
+        svg.style.setProperty('--sg-fg', '#112233');
+        svg.style.setProperty('--sg-muted', '#445566');
+        document.body.appendChild(svg);
+        try {
+            const out = chartToSvgString(svg);
+            expect(out).toContain('#112233');
+            expect(out).toContain('#445566');
+        }
+        finally {
+            svg.remove();
+        }
+    });
+});
+describe('downloadChartSvg', () => {
+    let createSpy;
+    let revokeSpy;
+    let clickSpy;
+    beforeEach(() => {
+        vi.useFakeTimers();
+        createSpy = vi
+            .spyOn(URL, 'createObjectURL')
+            .mockReturnValue('blob:fake-url');
+        revokeSpy = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => { });
+        clickSpy = vi.fn();
+        // jsdom anchors don't navigate; stub click to observe the download.
+        vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(clickSpy);
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+        vi.restoreAllMocks();
+    });
+    it('creates a blob url, triggers an anchor download, then revokes', () => {
+        downloadChartSvg(makeChartSvg(), 'my-chart.svg');
+        expect(createSpy).toHaveBeenCalledTimes(1);
+        const blob = createSpy.mock.calls[0][0];
+        expect(blob).toBeInstanceOf(Blob);
+        expect(blob.type).toBe('image/svg+xml');
+        expect(clickSpy).toHaveBeenCalledTimes(1);
+        // revoke is scheduled on a timer
+        expect(revokeSpy).not.toHaveBeenCalled();
+        vi.advanceTimersByTime(1000);
+        expect(revokeSpy).toHaveBeenCalledWith('blob:fake-url');
+    });
+    it('removes the temporary anchor from the DOM after clicking', () => {
+        const before = document.querySelectorAll('a').length;
+        downloadChartSvg(makeChartSvg());
+        expect(document.querySelectorAll('a').length).toBe(before);
+    });
+    it('uses the default filename when none is given', () => {
+        let captured;
+        vi.spyOn(HTMLAnchorElement.prototype, 'download', 'set').mockImplementation(function (v) {
+            captured = v;
+        });
+        downloadChartSvg(makeChartSvg());
+        expect(captured).toBe('chart.svg');
+    });
+});
+describe('chartToPngBlob', () => {
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+    function stubImage(behavior) {
+        // jsdom's Image never fires load/error for a blob: src, so replace it
+        // with a controllable fake that triggers the chosen callback.
+        class FakeImage {
+            constructor() {
+                this.onload = null;
+                this.onerror = null;
+                this._src = '';
+            }
+            set src(_v) {
+                this._src = _v;
+                queueMicrotask(() => {
+                    if (behavior === 'load')
+                        this.onload?.();
+                    else
+                        this.onerror?.();
+                });
+            }
+            get src() {
+                return this._src;
+            }
+        }
+        vi.stubGlobal('Image', FakeImage);
+    }
+    it('rejects when the SVG image fails to rasterize', async () => {
+        stubImage('error');
+        vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:x');
+        const revoke = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => { });
+        await expect(chartToPngBlob(makeChartSvg())).rejects.toThrow(/failed to rasterize/);
+        expect(revoke).toHaveBeenCalledWith('blob:x');
+    });
+    it('rejects when a 2d canvas context is unavailable', async () => {
+        stubImage('load');
+        vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:x');
+        vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => { });
+        vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(null);
+        await expect(chartToPngBlob(makeChartSvg())).rejects.toThrow(/canvas 2d context unavailable/);
+    });
+    it('resolves a PNG blob once drawImage + toBlob succeed', async () => {
+        stubImage('load');
+        vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:x');
+        vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => { });
+        const drawImage = vi.fn();
+        vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue({
+            drawImage,
+        });
+        vi.spyOn(HTMLCanvasElement.prototype, 'toBlob').mockImplementation(function (cb) {
+            cb(new Blob(['png-bytes'], { type: 'image/png' }));
+        });
+        const blob = await chartToPngBlob(makeChartSvg({ viewBox: '0 0 400 250' }), {
+            scale: 3,
+        });
+        expect(blob).toBeInstanceOf(Blob);
+        expect(blob.type).toBe('image/png');
+        expect(drawImage).toHaveBeenCalledTimes(1);
+    });
+    it('rejects when toBlob yields null', async () => {
+        stubImage('load');
+        vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:x');
+        vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => { });
+        vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue({
+            drawImage: vi.fn(),
+        });
+        vi.spyOn(HTMLCanvasElement.prototype, 'toBlob').mockImplementation(function (cb) {
+            cb(null);
+        });
+        await expect(chartToPngBlob(makeChartSvg())).rejects.toThrow(/toBlob failed/);
+    });
+    it('scales the canvas by options.scale (default 2)', async () => {
+        stubImage('load');
+        vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:x');
+        vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => { });
+        vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue({
+            drawImage: vi.fn(),
+        });
+        let canvasW = -1;
+        let canvasH = -1;
+        vi.spyOn(HTMLCanvasElement.prototype, 'toBlob').mockImplementation(function (cb) {
+            canvasW = this.width;
+            canvasH = this.height;
+            cb(new Blob([], { type: 'image/png' }));
+        });
+        // viewBox 400x250, default scale 2 => 800x500
+        await chartToPngBlob(makeChartSvg({ viewBox: '0 0 400 250' }));
+        expect(canvasW).toBe(800);
+        expect(canvasH).toBe(500);
+    });
+    it('falls back to the 520x300 default size when there is no viewBox', async () => {
+        stubImage('load');
+        vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:x');
+        vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => { });
+        vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue({
+            drawImage: vi.fn(),
+        });
+        let canvasW = -1;
+        let canvasH = -1;
+        vi.spyOn(HTMLCanvasElement.prototype, 'toBlob').mockImplementation(function (cb) {
+            canvasW = this.width;
+            canvasH = this.height;
+            cb(new Blob([], { type: 'image/png' }));
+        });
+        // No viewBox + jsdom clientWidth 0 => 520x300 hard fallback, scale 2.
+        const noVb = document.createElementNS(SVG_NS, 'svg');
+        noVb.setAttribute('class', 'sv-grid-chart-svg');
+        await chartToPngBlob(noVb);
+        expect(canvasW).toBe(1040);
+        expect(canvasH).toBe(600);
+    });
+});
+describe('downloadChartPng', () => {
+    afterEach(() => {
+        vi.useRealTimers();
+        vi.restoreAllMocks();
+    });
+    it('rasterizes then downloads via an anchor and revokes the url', async () => {
+        vi.useFakeTimers();
+        // Make chartToPngBlob succeed.
+        class FakeImage {
+            constructor() {
+                this.onload = null;
+                this.onerror = null;
+            }
+            set src(_v) {
+                queueMicrotask(() => this.onload?.());
+            }
+        }
+        vi.stubGlobal('Image', FakeImage);
+        vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:png-url');
+        const revoke = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => { });
+        vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue({
+            drawImage: vi.fn(),
+        });
+        vi.spyOn(HTMLCanvasElement.prototype, 'toBlob').mockImplementation(function (cb) {
+            cb(new Blob(['p'], { type: 'image/png' }));
+        });
+        const click = vi.fn();
+        vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(click);
+        let filename;
+        vi.spyOn(HTMLAnchorElement.prototype, 'download', 'set').mockImplementation(function (v) {
+            filename = v;
+        });
+        const p = downloadChartPng(makeChartSvg(), 'pic.png');
+        // flush the microtask-driven image onload + promise chain
+        await vi.runAllTimersAsync();
+        await p;
+        expect(click).toHaveBeenCalledTimes(1);
+        expect(filename).toBe('pic.png');
+        vi.advanceTimersByTime(1000);
+        expect(revoke).toHaveBeenCalledWith('blob:png-url');
+    });
+});

package/dist/chart.coverage.test.d.ts

@@ -0,0 +1 @@
+export {};