@astryxdesign/vega 0.5.2-canary.701fd39 → 0.5.2-canary.72fc8cd

package/dist/VegaChart.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=VegaChart.test.d.ts.map

package/dist/VegaChart.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VegaChart.test.d.ts","sourceRoot":"","sources":["../src/VegaChart.test.tsx"],"names":[],"mappings":""}

package/dist/schema.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=schema.test.d.ts.map

package/dist/schema.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.test.d.ts","sourceRoot":"","sources":["../src/schema.test.ts"],"names":[],"mappings":""}

package/dist/vegaLiteConfig.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=vegaLiteConfig.test.d.ts.map

package/dist/vegaLiteConfig.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vegaLiteConfig.test.d.ts","sourceRoot":"","sources":["../src/vegaLiteConfig.test.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/vega",
-  "version": "0.5.2-canary.701fd39",
+  "version": "0.5.2-canary.72fc8cd",
   "description": "Astryx Vega wrapper — chart and data visualization components. Published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -57,6 +57,8 @@
   "scripts": {
     "build": "tsup && tsc --project tsconfig.json --emitDeclarationOnly --declaration --noEmit false --outDir dist",
     "dev": "tsup --watch",
+    "test": "vitest run --root ../..",
+    "test:watch": "vitest --root ../..",
     "typecheck": "tsc --noEmit"
   }
 }

package/src/VegaChart.test.tsx

@@ -0,0 +1,345 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file VegaChart.test.tsx
+ * @input Uses vitest, @testing-library/react, VegaChart, mocked vega + vega-lite
+ * @output Functional tests for the VegaChart View lifecycle and error contract
+ * @position Colocated test for VegaChart.tsx (issue #4295 vega coverage)
+ */
+
+import {describe, it, expect, vi, beforeEach} from 'vitest';
+import {render, act} from '@testing-library/react';
+import React from 'react';
+import {VegaChart} from './VegaChart';
+import type {AnySpec} from './types';
+
+const {parseMock, compileMock, views, FakeView} = vi.hoisted(() => {
+  /**
+   * Stand-in for vega's View. Records constructor args and lifecycle calls,
+   * and exposes a manually controlled runAsync() promise so tests decide
+   * when (and how) each run settles.
+   */
+  class FakeView {
+    runtime: unknown;
+    options: Record<string, unknown>;
+    runPromise: Promise<void>;
+    resolveRun!: () => void;
+    rejectRun!: (err: unknown) => void;
+    data = vi.fn().mockReturnThis();
+    finalize = vi.fn();
+    runAsync = vi.fn(() => this.runPromise);
+
+    constructor(runtime: unknown, options: Record<string, unknown>) {
+      this.runtime = runtime;
+      this.options = options;
+      this.runPromise = new Promise<void>((resolve, reject) => {
+        this.resolveRun = resolve;
+        this.rejectRun = reject;
+      });
+      views.push(this);
+    }
+  }
+
+  const views: FakeView[] = [];
+  const parseMock = vi.fn((spec: unknown) => ({runtimeFor: spec}));
+  const compileMock = vi.fn((spec: unknown) => ({spec: {compiledFrom: spec}}));
+  return {parseMock, compileMock, views, FakeView};
+});
+
+vi.mock('vega', () => ({parse: parseMock, View: FakeView}));
+vi.mock('vega-lite', () => ({compile: compileMock}));
+
+const VEGA_LITE_SPEC = {
+  $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+  mark: 'bar',
+} as unknown as AnySpec;
+
+const VEGA_SPEC = {
+  $schema: 'https://vega.github.io/schema/vega/v6.json',
+  marks: [],
+} as unknown as AnySpec;
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  views.length = 0;
+});
+
+describe('VegaChart', () => {
+  describe('spec handling', () => {
+    it('compiles vega-lite specs with compileOptions and parses the compiled output', () => {
+      const compileOptions = {config: {background: 'red'}};
+      render(
+        <VegaChart spec={VEGA_LITE_SPEC} compileOptions={compileOptions} />,
+      );
+
+      expect(compileMock).toHaveBeenCalledTimes(1);
+      expect(compileMock).toHaveBeenCalledWith(VEGA_LITE_SPEC, compileOptions);
+      const compiled = compileMock.mock.results[0].value.spec;
+      expect(parseMock).toHaveBeenCalledTimes(1);
+      expect(parseMock.mock.calls[0][0]).toBe(compiled);
+    });
+
+    it('renders plain vega specs directly without invoking the vega-lite compiler', () => {
+      render(<VegaChart spec={VEGA_SPEC} />);
+
+      expect(compileMock).not.toHaveBeenCalled();
+      expect(parseMock).toHaveBeenCalledTimes(1);
+      expect(parseMock.mock.calls[0][0]).toBe(VEGA_SPEC);
+      // No data prop -> no dataset loading either.
+      expect(views).toHaveLength(1);
+      expect(views[0].data).not.toHaveBeenCalled();
+    });
+
+    it('forwards parseConfig and parseOptions to vega.parse', () => {
+      const parseConfig = {background: '#1a1a1a'};
+      const parseOptions = {ast: true};
+      render(
+        <VegaChart
+          spec={VEGA_SPEC}
+          parseConfig={parseConfig}
+          parseOptions={parseOptions}
+        />,
+      );
+
+      expect(parseMock).toHaveBeenCalledWith(
+        VEGA_SPEC,
+        parseConfig,
+        parseOptions,
+      );
+    });
+  });
+
+  describe('View construction', () => {
+    it('constructs the View from the parsed runtime with hover on and the rendered div as container', () => {
+      const {container} = render(<VegaChart spec={VEGA_SPEC} />);
+
+      expect(views).toHaveLength(1);
+      expect(views[0].runtime).toBe(parseMock.mock.results[0].value);
+      expect(views[0].options).toEqual({
+        hover: true,
+        container: container.firstElementChild,
+      });
+    });
+
+    it('lets viewOptions override the hover default while the container stays injected', () => {
+      const {container} = render(
+        <VegaChart
+          spec={VEGA_SPEC}
+          viewOptions={{hover: false, logLevel: 2}}
+        />,
+      );
+
+      expect(views).toHaveLength(1);
+      expect(views[0].options).toEqual({
+        hover: false,
+        logLevel: 2,
+        container: container.firstElementChild,
+      });
+    });
+
+    it('loads each named dataset via view.data before the first run', () => {
+      const table = [{a: 'A', b: 28}];
+      const other = [{x: 1}];
+      render(<VegaChart spec={VEGA_SPEC} data={{table, other}} />);
+
+      expect(views).toHaveLength(1);
+      const view = views[0];
+      expect(view.data).toHaveBeenCalledTimes(2);
+      expect(view.data).toHaveBeenCalledWith('table', table);
+      expect(view.data).toHaveBeenCalledWith('other', other);
+      // Datasets are loaded before the run kicks off.
+      expect(Math.max(...view.data.mock.invocationCallOrder)).toBeLessThan(
+        view.runAsync.mock.invocationCallOrder[0],
+      );
+    });
+
+    it('tears down the old View and builds a new one when the spec identity changes', () => {
+      const {rerender} = render(<VegaChart spec={VEGA_SPEC} />);
+      expect(views).toHaveLength(1);
+
+      rerender(<VegaChart spec={{...VEGA_SPEC}} />);
+
+      expect(views).toHaveLength(2);
+      expect(views[0].finalize).toHaveBeenCalledTimes(1);
+      expect(views[1].finalize).not.toHaveBeenCalled();
+      expect(parseMock).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('error contract', () => {
+    it('reports an unrecognized $schema through onError without constructing a View', () => {
+      const onError = vi.fn();
+      const badSpec = {$schema: 'https://example.com/nope.json'} as AnySpec;
+      const {container} = render(
+        <VegaChart spec={badSpec} onError={onError} />,
+      );
+
+      expect(onError).toHaveBeenCalledTimes(1);
+      const error = onError.mock.calls[0][0];
+      expect(error).toBeInstanceOf(Error);
+      expect(error.message).toContain('Unrecognized $schema URL');
+      expect(compileMock).not.toHaveBeenCalled();
+      expect(parseMock).not.toHaveBeenCalled();
+      expect(views).toHaveLength(0);
+      // The container div still renders; it just stays empty.
+      expect(container.firstElementChild?.tagName).toBe('DIV');
+    });
+
+    it('routes a synchronous compile failure to onError without constructing a View', () => {
+      const onError = vi.fn();
+      const boom = new Error('compile exploded');
+      compileMock.mockImplementationOnce(() => {
+        throw boom;
+      });
+      render(<VegaChart spec={VEGA_LITE_SPEC} onError={onError} />);
+
+      expect(onError).toHaveBeenCalledTimes(1);
+      expect(onError).toHaveBeenCalledWith(boom);
+      expect(views).toHaveLength(0);
+    });
+
+    it('routes a rejected runAsync to onError and suppresses onReady', async () => {
+      const onReady = vi.fn();
+      const onError = vi.fn();
+      render(
+        <VegaChart spec={VEGA_SPEC} onReady={onReady} onError={onError} />,
+      );
+
+      const failure = new Error('render failed');
+      await act(async () => {
+        views[0].rejectRun(failure);
+      });
+
+      expect(onError).toHaveBeenCalledTimes(1);
+      expect(onError).toHaveBeenCalledWith(failure);
+      expect(onReady).not.toHaveBeenCalled();
+    });
+
+    it('wraps non-Error rejection values in an Error before calling onError', async () => {
+      const onError = vi.fn();
+      render(<VegaChart spec={VEGA_SPEC} onError={onError} />);
+
+      await act(async () => {
+        views[0].rejectRun('oops');
+      });
+
+      expect(onError).toHaveBeenCalledTimes(1);
+      const error = onError.mock.calls[0][0];
+      expect(error).toBeInstanceOf(Error);
+      expect(error.message).toBe('oops');
+    });
+
+    it('suppresses onError for rejections that settle after unmount', async () => {
+      const onError = vi.fn();
+      const {unmount} = render(
+        <VegaChart spec={VEGA_SPEC} onError={onError} />,
+      );
+
+      unmount();
+      await act(async () => {
+        views[0].rejectRun(new Error('too late'));
+      });
+
+      expect(onError).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('ready + teardown lifecycle', () => {
+    it('calls onReady with the live View once runAsync resolves', async () => {
+      const onReady = vi.fn();
+      render(<VegaChart spec={VEGA_SPEC} onReady={onReady} />);
+
+      expect(onReady).not.toHaveBeenCalled();
+      await act(async () => {
+        views[0].resolveRun();
+      });
+
+      expect(onReady).toHaveBeenCalledTimes(1);
+      expect(onReady).toHaveBeenCalledWith(views[0]);
+    });
+
+    it('invokes the latest onReady identity without rebuilding the View', async () => {
+      const first = vi.fn();
+      const second = vi.fn();
+      const {rerender} = render(<VegaChart spec={VEGA_SPEC} onReady={first} />);
+      rerender(<VegaChart spec={VEGA_SPEC} onReady={second} />);
+
+      // Same spec identity -> the Effect must not re-run.
+      expect(views).toHaveLength(1);
+      await act(async () => {
+        views[0].resolveRun();
+      });
+
+      expect(first).not.toHaveBeenCalled();
+      expect(second).toHaveBeenCalledTimes(1);
+      expect(second).toHaveBeenCalledWith(views[0]);
+    });
+
+    it('finalizes the View on unmount after a completed run', async () => {
+      const {unmount} = render(<VegaChart spec={VEGA_SPEC} />);
+      await act(async () => {
+        views[0].resolveRun();
+      });
+      expect(views[0].finalize).not.toHaveBeenCalled();
+
+      unmount();
+
+      expect(views[0].finalize).toHaveBeenCalledTimes(1);
+    });
+
+    it('finalizes again when a cancelled run settles, and never fires onReady', async () => {
+      const onReady = vi.fn();
+      const {unmount} = render(
+        <VegaChart spec={VEGA_SPEC} onReady={onReady} />,
+      );
+
+      unmount();
+      // Cleanup finalizes immediately, before the pending run settles.
+      expect(views[0].finalize).toHaveBeenCalledTimes(1);
+
+      await act(async () => {
+        views[0].resolveRun();
+      });
+
+      // The cancelled-run branch finalizes a second time -- current behavior.
+      expect(views[0].finalize).toHaveBeenCalledTimes(2);
+      expect(onReady).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('container div', () => {
+    it('renders a single div and lands className, style, and rest props on it', () => {
+      const {container} = render(
+        <VegaChart
+          spec={VEGA_SPEC}
+          className="chart"
+          style={{width: 100}}
+          id="viz"
+          aria-label="Sales chart"
+        />,
+      );
+
+      expect(container.children).toHaveLength(1);
+      const div = container.firstElementChild as HTMLElement;
+      expect(div.tagName).toBe('DIV');
+      expect(div).toHaveClass('chart');
+      expect(div).toHaveStyle({width: '100px'});
+      expect(div).toHaveAttribute('id', 'viz');
+      expect(div).toHaveAttribute('aria-label', 'Sales chart');
+    });
+
+    it('forwards both function and object refs to the container div', () => {
+      const seen: Array<HTMLDivElement | null> = [];
+      const {container: c1} = render(
+        <VegaChart spec={VEGA_SPEC} ref={node => void seen.push(node)} />,
+      );
+      expect(seen).toEqual([c1.firstElementChild]);
+
+      const objectRef = React.createRef<HTMLDivElement>();
+      const {container: c2} = render(
+        <VegaChart spec={VEGA_SPEC} ref={objectRef} />,
+      );
+      expect(objectRef.current).toBe(c2.firstElementChild);
+    });
+  });
+});

package/src/schema.test.ts

@@ -0,0 +1,85 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file schema.test.ts
+ * @input Uses vitest, parseSchema
+ * @output Functional tests for the $schema URL parser
+ * @position Colocated test for schema.ts (issue #4295 vega coverage)
+ */
+
+import {describe, it, expect} from 'vitest';
+import {parseSchema} from './schema';
+
+describe('parseSchema', () => {
+  it('parses a vega-lite schema URL into library and version', () => {
+    expect(
+      parseSchema('https://vega.github.io/schema/vega-lite/v5.json'),
+    ).toEqual({ok: true, library: 'vega-lite', version: 'v5'});
+  });
+
+  it('parses a plain vega schema URL into library and version', () => {
+    expect(parseSchema('https://vega.github.io/schema/vega/v6.json')).toEqual({
+      ok: true,
+      library: 'vega',
+      version: 'v6',
+    });
+  });
+
+  it('extracts multi-part versions from fully versioned URLs', () => {
+    expect(
+      parseSchema('https://vega.github.io/schema/vega-lite/v5.2.0.json'),
+    ).toEqual({ok: true, library: 'vega-lite', version: 'v5.2.0'});
+  });
+
+  it('tolerates proxy prefixes before the schema path', () => {
+    expect(
+      parseSchema(
+        'https://internal-proxy.example.com/assets/vega.github.io/schema/vega/v5.json',
+      ),
+    ).toEqual({ok: true, library: 'vega', version: 'v5'});
+  });
+
+  it('rejects a missing $schema with a fix-it message', () => {
+    const expected = {
+      ok: false,
+      error:
+        'Spec is missing a $schema field. Add "$schema": "https://vega.github.io/schema/vega/v5.json" or the vega-lite equivalent.',
+    };
+    expect(parseSchema(undefined)).toEqual(expected);
+    expect(parseSchema(null)).toEqual(expected);
+  });
+
+  it('rejects a non-string $schema and reports the received type', () => {
+    expect(parseSchema(5)).toEqual({
+      ok: false,
+      error: '$schema must be a string, got number.',
+    });
+    expect(parseSchema({url: 'x'})).toEqual({
+      ok: false,
+      error: '$schema must be a string, got object.',
+    });
+  });
+
+  it('rejects URLs that do not match the official schema format', () => {
+    expect(parseSchema('https://example.com/other.json')).toEqual({
+      ok: false,
+      error:
+        'Unrecognized $schema URL: "https://example.com/other.json". Expected format: https://vega.github.io/schema/{vega|vega-lite}/{version}.json',
+    });
+    expect(parseSchema('')).toEqual({
+      ok: false,
+      error:
+        'Unrecognized $schema URL: "". Expected format: https://vega.github.io/schema/{vega|vega-lite}/{version}.json',
+    });
+  });
+
+  it('rejects unknown libraries inside the schema URL namespace', () => {
+    expect(
+      parseSchema('https://vega.github.io/schema/vega-embed/v2.json'),
+    ).toEqual({
+      ok: false,
+      error:
+        'Unknown schema library "vega-embed". Must be "vega" or "vega-lite".',
+    });
+  });
+});

package/src/vegaLiteConfig.test.ts

@@ -0,0 +1,94 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file vegaLiteConfig.test.ts
+ * @input Uses vitest, buildVegaLiteConfig and its exported layout constants
+ * @output Functional tests for the Astryx-themed Vega-Lite config builder
+ * @position Colocated test for vegaLiteConfig.ts (issue #4295 vega coverage)
+ */
+
+import {describe, it, expect} from 'vitest';
+import {
+  buildVegaLiteConfig,
+  DEFAULT_STROKE_WIDTH,
+  DEFAULT_POINT_SIZE,
+  DEFAULT_LEGEND_ORIENT,
+  LEGEND_OFFSET,
+  TITLE_OFFSET,
+} from './vegaLiteConfig';
+
+/** Resolver that makes every resolved token traceable to its name. */
+const token = (name: string) => `resolved(${name})`;
+
+describe('buildVegaLiteConfig', () => {
+  it('resolves chart chrome colors through the provided token resolver', () => {
+    const config = buildVegaLiteConfig(token);
+    expect(config.axis?.domainColor).toBe('resolved(--color-icon-primary)');
+    expect(config.axis?.labelColor).toBe('resolved(--color-text-secondary)');
+    expect(config.background).toBe('resolved(--color-background-card)');
+    expect(config.text?.color).toBe('resolved(--color-text-primary)');
+    expect(config.point?.fill).toBe('resolved(--color-background-card)');
+    expect(config.legend?.labelFont).toBe('resolved(--font-family-body)');
+    expect(config.title?.subtitleColor).toBe(
+      'resolved(--color-text-secondary)',
+    );
+  });
+
+  it('orders the categorical palette across the ten categorical data tokens', () => {
+    const config = buildVegaLiteConfig(token);
+    expect(config.range?.category).toEqual([
+      'resolved(--color-data-categorical-blue)',
+      'resolved(--color-data-categorical-orange)',
+      'resolved(--color-data-categorical-purple)',
+      'resolved(--color-data-categorical-green)',
+      'resolved(--color-data-categorical-pink)',
+      'resolved(--color-data-categorical-cyan)',
+      'resolved(--color-data-categorical-red)',
+      'resolved(--color-data-categorical-teal)',
+      'resolved(--color-data-categorical-brown)',
+      'resolved(--color-data-categorical-indigo)',
+    ]);
+  });
+
+  it('builds the diverging range as a blue-to-red ramp around a gray midpoint', () => {
+    const config = buildVegaLiteConfig(token);
+    expect(config.range?.diverging).toEqual([
+      'resolved(--color-data-blue-5)',
+      'resolved(--color-data-blue-4)',
+      'resolved(--color-data-blue-3)',
+      'resolved(--color-data-blue-2)',
+      'resolved(--color-data-blue-1)',
+      'resolved(--color-data-gray-1)',
+      'resolved(--color-data-red-1)',
+      'resolved(--color-data-red-2)',
+      'resolved(--color-data-red-3)',
+      'resolved(--color-data-red-4)',
+      'resolved(--color-data-red-5)',
+    ]);
+    // Sequential ranges are ascending blues.
+    expect(config.range?.heatmap).toEqual([
+      'resolved(--color-data-blue-1)',
+      'resolved(--color-data-blue-2)',
+      'resolved(--color-data-blue-3)',
+      'resolved(--color-data-blue-4)',
+      'resolved(--color-data-blue-5)',
+    ]);
+  });
+
+  it('applies the structural mark and layout constants', () => {
+    const config = buildVegaLiteConfig(token);
+    expect(config.line?.strokeWidth).toBe(DEFAULT_STROKE_WIDTH);
+    expect(config.line?.strokeWidth).toBe(2);
+    expect(config.point?.size).toBe(DEFAULT_POINT_SIZE);
+    expect(config.point?.size).toBe(64);
+    expect(config.legend?.orient).toBe(DEFAULT_LEGEND_ORIENT);
+    expect(config.legend?.orient).toBe('right');
+    expect(config.legend?.offset).toBe(LEGEND_OFFSET);
+    expect(config.legend?.offset).toBe(16);
+    expect(config.title?.offset).toBe(TITLE_OFFSET);
+    expect(config.title?.offset).toBe(16);
+    expect(config.padding).toBe(16);
+    expect(config.scale?.bandPaddingInner).toBe(0.1);
+    expect(config.view?.stroke).toBeNull();
+  });
+});