@opendata-ai/openchart-react 2.0.0

package/src/__tests__/Chart.test.tsx

@@ -0,0 +1,134 @@
+import type { ChartSpec } from '@opendata-ai/openchart-core';
+import { cleanup, render, waitFor } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { Chart } from '../Chart';
+
+// ---------------------------------------------------------------------------
+// Test data
+// ---------------------------------------------------------------------------
+
+const lineSpec: ChartSpec = {
+  type: 'line',
+  data: [
+    { date: '2020-01-01', value: 10, country: 'US' },
+    { date: '2021-01-01', value: 40, country: 'US' },
+    { date: '2020-01-01', value: 15, country: 'UK' },
+    { date: '2021-01-01', value: 35, country: 'UK' },
+  ],
+  encoding: {
+    x: { field: 'date', type: 'temporal' },
+    y: { field: 'value', type: 'quantitative' },
+    color: { field: 'country', type: 'nominal' },
+  },
+  chrome: {
+    title: 'GDP Growth',
+    subtitle: 'US vs UK over time',
+    source: 'World Bank',
+  },
+};
+
+const barSpec: ChartSpec = {
+  type: 'bar',
+  data: [
+    { name: 'A', value: 10 },
+    { name: 'B', value: 30 },
+    { name: 'C', value: 20 },
+  ],
+  encoding: {
+    x: { field: 'value', type: 'quantitative' },
+    y: { field: 'name', type: 'nominal' },
+  },
+  chrome: {
+    title: 'Updated Title',
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Helper: render Chart and wait for SVG to appear (useEffect is deferred)
+// ---------------------------------------------------------------------------
+
+async function renderChart(props: React.ComponentProps<typeof Chart>) {
+  const result = render(<Chart {...props} />);
+  await waitFor(() => {
+    expect(result.container.querySelector('svg')).not.toBeNull();
+  });
+  return result;
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('<Chart />', () => {
+  it('renders an SVG element', async () => {
+    const { container } = await renderChart({ spec: lineSpec });
+    const svg = container.querySelector('svg');
+    expect(svg).not.toBeNull();
+    expect(svg?.getAttribute('class')).toBe('viz-chart');
+  });
+
+  it('renders chrome text elements', async () => {
+    const { container } = await renderChart({ spec: lineSpec });
+
+    const title = container.querySelector('.viz-title');
+    expect(title).not.toBeNull();
+    expect(title?.textContent).toBe('GDP Growth');
+
+    const subtitle = container.querySelector('.viz-subtitle');
+    expect(subtitle?.textContent).toBe('US vs UK over time');
+
+    const source = container.querySelector('.viz-source');
+    expect(source?.textContent).toBe('World Bank');
+  });
+
+  it('spec changes trigger re-render', async () => {
+    const { container, rerender } = await renderChart({ spec: lineSpec });
+
+    const titleBefore = container.querySelector('.viz-title');
+    expect(titleBefore?.textContent).toBe('GDP Growth');
+
+    rerender(<Chart spec={barSpec} />);
+    await waitFor(() => {
+      expect(container.querySelector('.viz-title')?.textContent).toBe('Updated Title');
+    });
+  });
+
+  it('unmounting cleans up chart instance', async () => {
+    const { container, unmount } = await renderChart({ spec: lineSpec });
+
+    const svgBefore = container.querySelector('svg');
+    expect(svgBefore).not.toBeNull();
+
+    unmount();
+
+    expect(container.querySelector('svg')).toBeNull();
+  });
+
+  it('className prop passes through to wrapper div', async () => {
+    const { container } = await renderChart({ spec: lineSpec, className: 'my-chart' });
+
+    const wrapper = container.firstElementChild as HTMLElement;
+    expect(wrapper?.className).toContain('my-chart');
+  });
+
+  it('renders with dark mode option', async () => {
+    const { container } = await renderChart({ spec: lineSpec, darkMode: 'force' });
+
+    const svg = container.querySelector('svg');
+    expect(svg).not.toBeNull();
+  });
+
+  it('style prop passes through to wrapper div', async () => {
+    const { container } = await renderChart({
+      spec: lineSpec,
+      style: { border: '1px solid red' },
+    });
+
+    const wrapper = container.firstElementChild as HTMLElement;
+    expect(wrapper?.style.border).toBe('1px solid red');
+  });
+});

package/src/__tests__/DataTable.test.tsx

@@ -0,0 +1,126 @@
+import type { TableSpec } from '@opendata-ai/openchart-core';
+import { cleanup, render, waitFor } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { DataTable } from '../DataTable';
+
+// ---------------------------------------------------------------------------
+// Test data
+// ---------------------------------------------------------------------------
+
+const tableSpec: TableSpec = {
+  type: 'table',
+  data: [
+    { name: 'Alice', age: 30, city: 'Portland' },
+    { name: 'Bob', age: 25, city: 'Seattle' },
+    { name: 'Charlie', age: 35, city: 'Denver' },
+  ],
+  columns: [
+    { key: 'name', label: 'Name' },
+    { key: 'age', label: 'Age' },
+    { key: 'city', label: 'City' },
+  ],
+  chrome: { title: 'People Table' },
+};
+
+const updatedSpec: TableSpec = {
+  type: 'table',
+  data: [
+    { x: 1, y: 2 },
+    { x: 3, y: 4 },
+  ],
+  columns: [
+    { key: 'x', label: 'X Value' },
+    { key: 'y', label: 'Y Value' },
+  ],
+  chrome: { title: 'Updated Table' },
+};
+
+// ---------------------------------------------------------------------------
+// Helper: render DataTable and wait for the table to mount (useEffect is deferred)
+// ---------------------------------------------------------------------------
+
+async function renderTable(props: React.ComponentProps<typeof DataTable>) {
+  const result = render(<DataTable {...props} />);
+  await waitFor(() => {
+    expect(result.container.querySelector('table')).not.toBeNull();
+  });
+  return result;
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('<DataTable />', () => {
+  it('renders a table', async () => {
+    const { container } = await renderTable({ spec: tableSpec });
+    const table = container.querySelector('table');
+    expect(table).not.toBeNull();
+  });
+
+  it('renders correct number of columns', async () => {
+    const { container } = await renderTable({ spec: tableSpec });
+    const headers = container.querySelectorAll('thead th');
+    expect(headers.length).toBe(3);
+  });
+
+  it('renders correct number of rows', async () => {
+    const { container } = await renderTable({ spec: tableSpec });
+    const rows = container.querySelectorAll('tbody tr');
+    expect(rows.length).toBe(3);
+  });
+
+  it('spec changes trigger re-render', async () => {
+    const { container, rerender } = await renderTable({ spec: tableSpec });
+
+    const titleBefore = container.querySelector('.viz-table-title');
+    expect(titleBefore?.textContent).toBe('People Table');
+
+    rerender(<DataTable spec={updatedSpec} />);
+    await waitFor(() => {
+      expect(container.querySelector('.viz-table-title')?.textContent).toBe('Updated Table');
+    });
+
+    const headersAfter = container.querySelectorAll('thead th');
+    expect(headersAfter.length).toBe(2);
+  });
+
+  it('unmounting cleans up', async () => {
+    const { container, unmount } = await renderTable({ spec: tableSpec });
+
+    const tableBefore = container.querySelector('table');
+    expect(tableBefore).not.toBeNull();
+
+    unmount();
+
+    expect(container.querySelector('table')).toBeNull();
+  });
+
+  it('className passes through', async () => {
+    const { container } = await renderTable({ spec: tableSpec, className: 'my-table' });
+
+    const wrapper = container.firstElementChild as HTMLElement;
+    expect(wrapper?.className).toContain('my-table');
+  });
+
+  it('renders with dark mode option', async () => {
+    const { container } = await renderTable({ spec: tableSpec, darkMode: 'force' });
+
+    const table = container.querySelector('table');
+    expect(table).not.toBeNull();
+  });
+
+  it('style prop passes through to wrapper div', async () => {
+    const { container } = await renderTable({
+      spec: tableSpec,
+      style: { border: '1px solid red' },
+    });
+
+    const wrapper = container.firstElementChild as HTMLElement;
+    expect(wrapper?.style.border).toBe('1px solid red');
+  });
+});

package/src/__tests__/Graph.test.tsx

@@ -0,0 +1,130 @@
+import type { GraphSpec } from '@opendata-ai/openchart-core';
+import { cleanup, render, waitFor } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { Graph } from '../Graph';
+
+// ---------------------------------------------------------------------------
+// Test data
+// ---------------------------------------------------------------------------
+
+const basicSpec: GraphSpec = {
+  type: 'graph',
+  nodes: [
+    { id: 'a', label: 'Node A' },
+    { id: 'b', label: 'Node B' },
+    { id: 'c', label: 'Node C' },
+  ],
+  edges: [
+    { source: 'a', target: 'b' },
+    { source: 'b', target: 'c' },
+  ],
+  chrome: {
+    title: 'Test Graph',
+    subtitle: 'A simple test graph',
+  },
+};
+
+const updatedSpec: GraphSpec = {
+  type: 'graph',
+  nodes: [
+    { id: 'x', label: 'Node X' },
+    { id: 'y', label: 'Node Y' },
+  ],
+  edges: [{ source: 'x', target: 'y' }],
+  chrome: {
+    title: 'Updated Graph',
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Helper: render Graph and wait for canvas to mount (useEffect is deferred)
+// ---------------------------------------------------------------------------
+
+async function renderGraph(props: React.ComponentProps<typeof Graph>) {
+  const result = render(<Graph {...props} />);
+  await waitFor(() => {
+    expect(result.container.querySelector('canvas')).not.toBeNull();
+  });
+  return result;
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('<Graph />', () => {
+  it('renders a container div', async () => {
+    const { container } = await renderGraph({ spec: basicSpec });
+    const wrapper = container.firstElementChild as HTMLElement;
+    expect(wrapper).not.toBeNull();
+    expect(wrapper.tagName.toLowerCase()).toBe('div');
+  });
+
+  it('mounts graph instance with canvas element', async () => {
+    const { container } = await renderGraph({ spec: basicSpec });
+    const canvas = container.querySelector('canvas');
+    expect(canvas).not.toBeNull();
+  });
+
+  it('renders chrome text elements', async () => {
+    const { container } = await renderGraph({ spec: basicSpec });
+
+    const title = container.querySelector('.viz-title');
+    expect(title).not.toBeNull();
+    expect(title?.textContent).toBe('Test Graph');
+
+    const subtitle = container.querySelector('.viz-subtitle');
+    expect(subtitle?.textContent).toBe('A simple test graph');
+  });
+
+  it('spec changes trigger re-render', async () => {
+    const { container, rerender } = await renderGraph({ spec: basicSpec });
+
+    const titleBefore = container.querySelector('.viz-title');
+    expect(titleBefore?.textContent).toBe('Test Graph');
+
+    rerender(<Graph spec={updatedSpec} />);
+    await waitFor(() => {
+      expect(container.querySelector('.viz-title')?.textContent).toBe('Updated Graph');
+    });
+  });
+
+  it('unmounting cleans up graph instance', async () => {
+    const { container, unmount } = await renderGraph({ spec: basicSpec });
+
+    const canvasBefore = container.querySelector('canvas');
+    expect(canvasBefore).not.toBeNull();
+
+    unmount();
+
+    expect(container.querySelector('canvas')).toBeNull();
+  });
+
+  it('className prop passes through to wrapper div', async () => {
+    const { container } = await renderGraph({ spec: basicSpec, className: 'my-graph' });
+
+    const wrapper = container.firstElementChild as HTMLElement;
+    expect(wrapper?.className).toContain('my-graph');
+  });
+
+  it('style prop passes through to wrapper div', async () => {
+    const { container } = await renderGraph({
+      spec: basicSpec,
+      style: { border: '1px solid red' },
+    });
+
+    const wrapper = container.firstElementChild as HTMLElement;
+    expect(wrapper?.style.border).toBe('1px solid red');
+  });
+
+  it('renders with dark mode option', async () => {
+    const { container } = await renderGraph({ spec: basicSpec, darkMode: 'force' });
+
+    const canvas = container.querySelector('canvas');
+    expect(canvas).not.toBeNull();
+  });
+});

package/src/__tests__/ThemeContext.test.tsx

@@ -0,0 +1,238 @@
+/**
+ * Tests for VizThemeProvider, useVizTheme, and useVizDarkMode.
+ *
+ * Verifies that themes and dark mode preferences cascade through the
+ * provider hierarchy and that nested providers override parent values.
+ */
+
+import type { ThemeConfig } from '@opendata-ai/openchart-core';
+import { render, waitFor } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { useVizDarkMode, useVizTheme, VizThemeProvider } from '../ThemeContext';
+
+// ---------------------------------------------------------------------------
+// Test harness components
+// ---------------------------------------------------------------------------
+
+function ThemeConsumer({ testId = 'theme-output' }: { testId?: string }) {
+  const theme = useVizTheme();
+  return <div data-testid={testId}>{theme ? JSON.stringify(theme) : 'no-theme'}</div>;
+}
+
+function DarkModeConsumer({ testId = 'darkmode-output' }: { testId?: string }) {
+  const darkMode = useVizDarkMode();
+  return <div data-testid={testId}>{darkMode ?? 'undefined'}</div>;
+}
+
+/** Render a ThemeConsumer and wait for it to appear in the DOM. */
+async function renderTheme(jsx: React.ReactElement) {
+  const result = render(jsx);
+  await waitFor(() => {
+    expect(result.container.querySelector('[data-testid]')).not.toBeNull();
+  });
+  return result;
+}
+
+// ---------------------------------------------------------------------------
+// useVizTheme
+// ---------------------------------------------------------------------------
+
+describe('useVizTheme', () => {
+  it('returns undefined when used outside of a provider', async () => {
+    const { container } = await renderTheme(<ThemeConsumer />);
+    const output = container.querySelector('[data-testid="theme-output"]');
+    expect(output?.textContent).toBe('no-theme');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// VizThemeProvider
+// ---------------------------------------------------------------------------
+
+describe('VizThemeProvider', () => {
+  it('provides theme to child components', async () => {
+    const theme: ThemeConfig = {
+      colors: { categorical: ['#ff0000', '#00ff00', '#0000ff'] },
+    };
+
+    const { container } = await renderTheme(
+      <VizThemeProvider theme={theme}>
+        <ThemeConsumer />
+      </VizThemeProvider>,
+    );
+
+    const output = container.querySelector('[data-testid="theme-output"]');
+    const parsed = JSON.parse(output!.textContent!);
+    expect(parsed.colors.categorical).toEqual(['#ff0000', '#00ff00', '#0000ff']);
+  });
+
+  it('provides undefined theme when passed undefined', async () => {
+    const { container } = await renderTheme(
+      <VizThemeProvider theme={undefined}>
+        <ThemeConsumer />
+      </VizThemeProvider>,
+    );
+
+    const output = container.querySelector('[data-testid="theme-output"]');
+    expect(output?.textContent).toBe('no-theme');
+  });
+
+  it('nested providers override parent theme', async () => {
+    const parentTheme: ThemeConfig = {
+      colors: { categorical: ['#111'] },
+      fonts: { family: 'Arial' },
+    };
+
+    const childTheme: ThemeConfig = {
+      colors: { categorical: ['#222'] },
+      borderRadius: 8,
+    };
+
+    const { container } = await renderTheme(
+      <VizThemeProvider theme={parentTheme}>
+        <VizThemeProvider theme={childTheme}>
+          <ThemeConsumer />
+        </VizThemeProvider>
+      </VizThemeProvider>,
+    );
+
+    const output = container.querySelector('[data-testid="theme-output"]');
+    const parsed = JSON.parse(output!.textContent!);
+
+    // Inner provider completely replaces the context value (no merging)
+    expect(parsed.colors.categorical).toEqual(['#222']);
+    expect(parsed.borderRadius).toBe(8);
+    // Parent-only fields are absent since inner provider replaces the value
+    expect(parsed.fonts).toBeUndefined();
+  });
+
+  it('multiple consumers at different nesting levels receive correct themes', async () => {
+    const outerTheme: ThemeConfig = {
+      colors: { background: '#fff' },
+    };
+
+    const innerTheme: ThemeConfig = {
+      colors: { background: '#000' },
+    };
+
+    const result = render(
+      <VizThemeProvider theme={outerTheme}>
+        <ThemeConsumer testId="outer-theme" />
+        <VizThemeProvider theme={innerTheme}>
+          <ThemeConsumer testId="inner-theme" />
+        </VizThemeProvider>
+      </VizThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(result.container.querySelector('[data-testid="outer-theme"]')).not.toBeNull();
+      expect(result.container.querySelector('[data-testid="inner-theme"]')).not.toBeNull();
+    });
+
+    const outerParsed = JSON.parse(
+      result.container.querySelector('[data-testid="outer-theme"]')!.textContent!,
+    );
+    const innerParsed = JSON.parse(
+      result.container.querySelector('[data-testid="inner-theme"]')!.textContent!,
+    );
+
+    expect(outerParsed.colors.background).toBe('#fff');
+    expect(innerParsed.colors.background).toBe('#000');
+  });
+
+  it('theme updates propagate to consumers', async () => {
+    const theme1: ThemeConfig = { borderRadius: 4 };
+    const theme2: ThemeConfig = { borderRadius: 12 };
+
+    const { container, rerender } = await renderTheme(
+      <VizThemeProvider theme={theme1}>
+        <ThemeConsumer />
+      </VizThemeProvider>,
+    );
+
+    const parsed1 = JSON.parse(
+      container.querySelector('[data-testid="theme-output"]')!.textContent!,
+    );
+    expect(parsed1.borderRadius).toBe(4);
+
+    rerender(
+      <VizThemeProvider theme={theme2}>
+        <ThemeConsumer />
+      </VizThemeProvider>,
+    );
+
+    await waitFor(() => {
+      const parsed2 = JSON.parse(
+        container.querySelector('[data-testid="theme-output"]')!.textContent!,
+      );
+      expect(parsed2.borderRadius).toBe(12);
+    });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// useVizDarkMode
+// ---------------------------------------------------------------------------
+
+describe('useVizDarkMode', () => {
+  it('returns undefined when used outside of a provider', async () => {
+    const { container } = await renderTheme(<DarkModeConsumer />);
+    const output = container.querySelector('[data-testid="darkmode-output"]');
+    expect(output?.textContent).toBe('undefined');
+  });
+
+  it('returns the darkMode value from provider', async () => {
+    const { container } = await renderTheme(
+      <VizThemeProvider theme={undefined} darkMode="force">
+        <DarkModeConsumer />
+      </VizThemeProvider>,
+    );
+
+    const output = container.querySelector('[data-testid="darkmode-output"]');
+    expect(output?.textContent).toBe('force');
+  });
+
+  it('returns undefined when provider omits darkMode', async () => {
+    const { container } = await renderTheme(
+      <VizThemeProvider theme={undefined}>
+        <DarkModeConsumer />
+      </VizThemeProvider>,
+    );
+
+    const output = container.querySelector('[data-testid="darkmode-output"]');
+    expect(output?.textContent).toBe('undefined');
+  });
+
+  it('nested provider overrides parent darkMode', async () => {
+    const { container } = await renderTheme(
+      <VizThemeProvider theme={undefined} darkMode="force">
+        <VizThemeProvider theme={undefined} darkMode="off">
+          <DarkModeConsumer />
+        </VizThemeProvider>
+      </VizThemeProvider>,
+    );
+
+    const output = container.querySelector('[data-testid="darkmode-output"]');
+    expect(output?.textContent).toBe('off');
+  });
+
+  it('darkMode updates propagate to consumers', async () => {
+    const { container, rerender } = await renderTheme(
+      <VizThemeProvider theme={undefined} darkMode="off">
+        <DarkModeConsumer />
+      </VizThemeProvider>,
+    );
+
+    expect(container.querySelector('[data-testid="darkmode-output"]')?.textContent).toBe('off');
+
+    rerender(
+      <VizThemeProvider theme={undefined} darkMode="force">
+        <DarkModeConsumer />
+      </VizThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(container.querySelector('[data-testid="darkmode-output"]')?.textContent).toBe('force');
+    });
+  });
+});