@opendata-ai/openchart-vue 2.0.0

package/src/__tests__/ThemeContext.test.ts

@@ -0,0 +1,266 @@
+/**
+ * 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 { flushPromises, mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h } from 'vue';
+import { useVizDarkMode, useVizTheme } from '../context';
+import { VizThemeProvider } from '../ThemeProvider';
+
+// ---------------------------------------------------------------------------
+// Test harness components
+// ---------------------------------------------------------------------------
+
+const ThemeConsumer = defineComponent({
+  props: {
+    testId: {
+      type: String,
+      default: 'theme-output',
+    },
+  },
+  setup(props) {
+    const theme = useVizTheme();
+    return () =>
+      h(
+        'div',
+        { 'data-testid': props.testId },
+        theme.value ? JSON.stringify(theme.value) : 'no-theme',
+      );
+  },
+});
+
+const DarkModeConsumer = defineComponent({
+  props: {
+    testId: {
+      type: String,
+      default: 'darkmode-output',
+    },
+  },
+  setup(props) {
+    const darkMode = useVizDarkMode();
+    return () => h('div', { 'data-testid': props.testId }, darkMode.value ?? 'undefined');
+  },
+});
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function findByTestId(wrapper: ReturnType<typeof mount>, testId: string) {
+  return wrapper.find(`[data-testid="${testId}"]`);
+}
+
+// ---------------------------------------------------------------------------
+// useVizTheme
+// ---------------------------------------------------------------------------
+
+describe('useVizTheme', () => {
+  it('returns undefined when used outside of a provider', async () => {
+    const wrapper = mount(ThemeConsumer);
+    await flushPromises();
+
+    const output = findByTestId(wrapper, 'theme-output');
+    expect(output.text()).toBe('no-theme');
+    wrapper.unmount();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// VizThemeProvider
+// ---------------------------------------------------------------------------
+
+describe('VizThemeProvider', () => {
+  it('provides theme to child components', async () => {
+    const theme: ThemeConfig = {
+      colors: { categorical: ['#ff0000', '#00ff00', '#0000ff'] },
+    };
+
+    const wrapper = mount(VizThemeProvider, {
+      props: { theme },
+      slots: { default: () => h(ThemeConsumer) },
+    });
+    await flushPromises();
+
+    const output = findByTestId(wrapper, 'theme-output');
+    const parsed = JSON.parse(output.text());
+    expect(parsed.colors.categorical).toEqual(['#ff0000', '#00ff00', '#0000ff']);
+    wrapper.unmount();
+  });
+
+  it('provides undefined theme when passed undefined', async () => {
+    const wrapper = mount(VizThemeProvider, {
+      props: { theme: undefined },
+      slots: { default: () => h(ThemeConsumer) },
+    });
+    await flushPromises();
+
+    const output = findByTestId(wrapper, 'theme-output');
+    expect(output.text()).toBe('no-theme');
+    wrapper.unmount();
+  });
+
+  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 TestApp = defineComponent({
+      setup() {
+        return () =>
+          h(VizThemeProvider, { theme: parentTheme }, () =>
+            h(VizThemeProvider, { theme: childTheme }, () => h(ThemeConsumer)),
+          );
+      },
+    });
+
+    const wrapper = mount(TestApp);
+    await flushPromises();
+
+    const output = findByTestId(wrapper, 'theme-output');
+    const parsed = JSON.parse(output.text());
+
+    // 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();
+    wrapper.unmount();
+  });
+
+  it('multiple consumers at different nesting levels receive correct themes', async () => {
+    const outerTheme: ThemeConfig = {
+      colors: { background: '#fff' },
+    };
+
+    const innerTheme: ThemeConfig = {
+      colors: { background: '#000' },
+    };
+
+    const TestApp = defineComponent({
+      setup() {
+        return () =>
+          h(VizThemeProvider, { theme: outerTheme }, () => [
+            h(ThemeConsumer, { testId: 'outer-theme' }),
+            h(VizThemeProvider, { theme: innerTheme }, () =>
+              h(ThemeConsumer, { testId: 'inner-theme' }),
+            ),
+          ]);
+      },
+    });
+
+    const wrapper = mount(TestApp);
+    await flushPromises();
+
+    const outerParsed = JSON.parse(findByTestId(wrapper, 'outer-theme').text());
+    const innerParsed = JSON.parse(findByTestId(wrapper, 'inner-theme').text());
+
+    expect(outerParsed.colors.background).toBe('#fff');
+    expect(innerParsed.colors.background).toBe('#000');
+    wrapper.unmount();
+  });
+
+  it('theme updates propagate to consumers', async () => {
+    const theme1: ThemeConfig = { borderRadius: 4 };
+    const theme2: ThemeConfig = { borderRadius: 12 };
+
+    const wrapper = mount(VizThemeProvider, {
+      props: { theme: theme1 },
+      slots: { default: () => h(ThemeConsumer) },
+    });
+    await flushPromises();
+
+    const parsed1 = JSON.parse(findByTestId(wrapper, 'theme-output').text());
+    expect(parsed1.borderRadius).toBe(4);
+
+    await wrapper.setProps({ theme: theme2 });
+    await flushPromises();
+
+    const parsed2 = JSON.parse(findByTestId(wrapper, 'theme-output').text());
+    expect(parsed2.borderRadius).toBe(12);
+    wrapper.unmount();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// useVizDarkMode
+// ---------------------------------------------------------------------------
+
+describe('useVizDarkMode', () => {
+  it('returns undefined when used outside of a provider', async () => {
+    const wrapper = mount(DarkModeConsumer);
+    await flushPromises();
+
+    const output = findByTestId(wrapper, 'darkmode-output');
+    expect(output.text()).toBe('undefined');
+    wrapper.unmount();
+  });
+
+  it('returns the darkMode value from provider', async () => {
+    const wrapper = mount(VizThemeProvider, {
+      props: { theme: undefined, darkMode: 'force' },
+      slots: { default: () => h(DarkModeConsumer) },
+    });
+    await flushPromises();
+
+    const output = findByTestId(wrapper, 'darkmode-output');
+    expect(output.text()).toBe('force');
+    wrapper.unmount();
+  });
+
+  it('returns undefined when provider omits darkMode', async () => {
+    const wrapper = mount(VizThemeProvider, {
+      props: { theme: undefined },
+      slots: { default: () => h(DarkModeConsumer) },
+    });
+    await flushPromises();
+
+    const output = findByTestId(wrapper, 'darkmode-output');
+    expect(output.text()).toBe('undefined');
+    wrapper.unmount();
+  });
+
+  it('nested provider overrides parent darkMode', async () => {
+    const TestApp = defineComponent({
+      setup() {
+        return () =>
+          h(VizThemeProvider, { theme: undefined, darkMode: 'force' }, () =>
+            h(VizThemeProvider, { theme: undefined, darkMode: 'off' }, () => h(DarkModeConsumer)),
+          );
+      },
+    });
+
+    const wrapper = mount(TestApp);
+    await flushPromises();
+
+    const output = findByTestId(wrapper, 'darkmode-output');
+    expect(output.text()).toBe('off');
+    wrapper.unmount();
+  });
+
+  it('darkMode updates propagate to consumers', async () => {
+    const wrapper = mount(VizThemeProvider, {
+      props: { theme: undefined, darkMode: 'off' },
+      slots: { default: () => h(DarkModeConsumer) },
+    });
+    await flushPromises();
+
+    expect(findByTestId(wrapper, 'darkmode-output').text()).toBe('off');
+
+    await wrapper.setProps({ darkMode: 'force' });
+    await flushPromises();
+
+    expect(findByTestId(wrapper, 'darkmode-output').text()).toBe('force');
+    wrapper.unmount();
+  });
+});

package/src/__tests__/composables.test.ts

@@ -0,0 +1,158 @@
+/**
+ * Tests for useDarkMode composable.
+ *
+ * Uses thin wrapper components that expose composable state via the DOM,
+ * then asserts using mount + flushPromises.
+ */
+
+import { flushPromises, mount } from '@vue/test-utils';
+import { describe, expect, it, vi } from 'vitest';
+import { defineComponent, h, ref } from 'vue';
+import { useDarkMode } from '../composables/useDarkMode';
+
+// ---------------------------------------------------------------------------
+// useDarkMode
+// ---------------------------------------------------------------------------
+
+const DarkModeHarness = defineComponent({
+  props: {
+    mode: {
+      type: String,
+      default: undefined,
+    },
+  },
+  setup(props) {
+    const modeRef = ref(props.mode as 'auto' | 'force' | 'off' | undefined);
+
+    // Watch for prop changes (Vue test-utils setProps updates props but not our ref)
+    // We need to use a computed or watchEffect to keep in sync
+    const isDark = useDarkMode(modeRef);
+
+    return { isDark, modeRef };
+  },
+  render() {
+    return h('div', { 'data-testid': 'dark-mode' }, String(this.isDark));
+  },
+});
+
+// A version of the harness that allows mode changes via exposed methods
+const DarkModeInteractiveHarness = defineComponent({
+  props: {
+    initialMode: {
+      type: String,
+      default: undefined,
+    },
+  },
+  setup(props) {
+    const modeRef = ref(props.initialMode as 'auto' | 'force' | 'off' | undefined);
+    const isDark = useDarkMode(modeRef);
+
+    return { isDark, modeRef };
+  },
+  render() {
+    return h('div', [
+      h('div', { 'data-testid': 'dark-mode' }, String(this.isDark)),
+      h(
+        'button',
+        {
+          'data-testid': 'set-force',
+          onClick: () => {
+            this.modeRef = 'force';
+          },
+        },
+        'Force',
+      ),
+      h(
+        'button',
+        {
+          'data-testid': 'set-off',
+          onClick: () => {
+            this.modeRef = 'off';
+          },
+        },
+        'Off',
+      ),
+    ]);
+  },
+});
+
+describe('useDarkMode', () => {
+  it('returns false when no mode is provided', async () => {
+    const wrapper = mount(DarkModeHarness);
+    await flushPromises();
+
+    expect(wrapper.find('[data-testid="dark-mode"]').text()).toBe('false');
+    wrapper.unmount();
+  });
+
+  it('returns false for "off" mode', async () => {
+    const wrapper = mount(DarkModeHarness, { props: { mode: 'off' } });
+    await flushPromises();
+
+    expect(wrapper.find('[data-testid="dark-mode"]').text()).toBe('false');
+    wrapper.unmount();
+  });
+
+  it('returns true for "force" mode', async () => {
+    const wrapper = mount(DarkModeHarness, { props: { mode: 'force' } });
+    await flushPromises();
+
+    expect(wrapper.find('[data-testid="dark-mode"]').text()).toBe('true');
+    wrapper.unmount();
+  });
+
+  it('reflects system preference for "auto" mode when dark', async () => {
+    const spy = vi.spyOn(window, 'matchMedia').mockImplementation(
+      (query: string) =>
+        ({
+          matches: query === '(prefers-color-scheme: dark)',
+          media: query,
+          addEventListener: vi.fn(),
+          removeEventListener: vi.fn(),
+        }) as unknown as MediaQueryList,
+    );
+
+    const wrapper = mount(DarkModeHarness, { props: { mode: 'auto' } });
+    await flushPromises();
+
+    expect(wrapper.find('[data-testid="dark-mode"]').text()).toBe('true');
+
+    spy.mockRestore();
+    wrapper.unmount();
+  });
+
+  it('reflects system preference for "auto" mode when light', async () => {
+    const spy = vi.spyOn(window, 'matchMedia').mockImplementation(
+      (query: string) =>
+        ({
+          matches: false,
+          media: query,
+          addEventListener: vi.fn(),
+          removeEventListener: vi.fn(),
+        }) as unknown as MediaQueryList,
+    );
+
+    const wrapper = mount(DarkModeHarness, { props: { mode: 'auto' } });
+    await flushPromises();
+
+    expect(wrapper.find('[data-testid="dark-mode"]').text()).toBe('false');
+
+    spy.mockRestore();
+    wrapper.unmount();
+  });
+
+  it('switches from "off" to "force" when mode changes', async () => {
+    const wrapper = mount(DarkModeInteractiveHarness, {
+      props: { initialMode: 'off' },
+    });
+    await flushPromises();
+
+    expect(wrapper.find('[data-testid="dark-mode"]').text()).toBe('false');
+
+    await wrapper.find('[data-testid="set-force"]').trigger('click');
+    await flushPromises();
+
+    expect(wrapper.find('[data-testid="dark-mode"]').text()).toBe('true');
+    wrapper.unmount();
+  });
+});

package/src/__tests__/useTableState.test.ts

@@ -0,0 +1,256 @@
+/**
+ * Tests for useTableState composable.
+ *
+ * Uses thin wrapper components that expose composable state via the DOM
+ * and trigger state changes via button clicks.
+ */
+
+import { flushPromises, mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h } from 'vue';
+import { type UseTableStateOptions, useTableState } from '../composables/useTableState';
+
+// ---------------------------------------------------------------------------
+// Test harness: renders composable state to the DOM
+// ---------------------------------------------------------------------------
+
+const TableStateHarness = defineComponent({
+  props: {
+    initialState: {
+      type: Object,
+      default: undefined,
+    },
+  },
+  setup(props) {
+    const { sort, search, page, setSort, setSearch, setPage, resetState } = useTableState(
+      props.initialState as UseTableStateOptions | undefined,
+    );
+
+    return { sort, search, page, setSort, setSearch, setPage, resetState };
+  },
+  render() {
+    return h('div', [
+      h(
+        'span',
+        { 'data-testid': 'sort' },
+        this.sort ? `${this.sort.column}:${this.sort.direction}` : 'null',
+      ),
+      h('span', { 'data-testid': 'search' }, this.search),
+      h('span', { 'data-testid': 'page' }, String(this.page)),
+      h(
+        'button',
+        {
+          'data-testid': 'set-sort-name-asc',
+          onClick: () => this.setSort({ column: 'name', direction: 'asc' }),
+        },
+        'sort name asc',
+      ),
+      h(
+        'button',
+        {
+          'data-testid': 'set-sort-age-desc',
+          onClick: () => this.setSort({ column: 'age', direction: 'desc' }),
+        },
+        'sort age desc',
+      ),
+      h(
+        'button',
+        {
+          'data-testid': 'clear-sort',
+          onClick: () => this.setSort(null),
+        },
+        'clear sort',
+      ),
+      h(
+        'button',
+        {
+          'data-testid': 'set-search',
+          onClick: () => this.setSearch('filter text'),
+        },
+        'set search',
+      ),
+      h(
+        'button',
+        {
+          'data-testid': 'set-page-5',
+          onClick: () => this.setPage(5),
+        },
+        'page 5',
+      ),
+      h(
+        'button',
+        {
+          'data-testid': 'reset',
+          onClick: () => this.resetState(),
+        },
+        'reset',
+      ),
+    ]);
+  },
+});
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+async function mountHarness(initialState?: UseTableStateOptions) {
+  const wrapper = mount(TableStateHarness, {
+    props: initialState ? { initialState } : {},
+  });
+  await flushPromises();
+  return wrapper;
+}
+
+function getState(wrapper: ReturnType<typeof mount>) {
+  return {
+    sort: wrapper.find('[data-testid="sort"]').text(),
+    search: wrapper.find('[data-testid="search"]').text(),
+    page: wrapper.find('[data-testid="page"]').text(),
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('useTableState', () => {
+  // -------------------------------------------------------------------------
+  // Default initial state
+  // -------------------------------------------------------------------------
+
+  it('initializes with default values when no options provided', async () => {
+    const wrapper = await mountHarness();
+    const state = getState(wrapper);
+
+    expect(state.sort).toBe('null');
+    expect(state.search).toBe('');
+    expect(state.page).toBe('0');
+    wrapper.unmount();
+  });
+
+  // -------------------------------------------------------------------------
+  // Custom initial state
+  // -------------------------------------------------------------------------
+
+  it('initializes with provided sort state', async () => {
+    const wrapper = await mountHarness({
+      sort: { column: 'name', direction: 'asc' },
+    });
+    expect(getState(wrapper).sort).toBe('name:asc');
+    wrapper.unmount();
+  });
+
+  it('initializes with provided search string', async () => {
+    const wrapper = await mountHarness({ search: 'hello' });
+    expect(getState(wrapper).search).toBe('hello');
+    wrapper.unmount();
+  });
+
+  it('initializes with provided page number', async () => {
+    const wrapper = await mountHarness({ page: 3 });
+    expect(getState(wrapper).page).toBe('3');
+    wrapper.unmount();
+  });
+
+  // -------------------------------------------------------------------------
+  // State setters
+  // -------------------------------------------------------------------------
+
+  it('setSort updates the sort state', async () => {
+    const wrapper = await mountHarness();
+
+    await wrapper.find('[data-testid="set-sort-age-desc"]').trigger('click');
+    await flushPromises();
+
+    expect(getState(wrapper).sort).toBe('age:desc');
+    wrapper.unmount();
+  });
+
+  it('setSort can clear sort by passing null', async () => {
+    const wrapper = await mountHarness({
+      sort: { column: 'name', direction: 'asc' },
+    });
+    expect(getState(wrapper).sort).toBe('name:asc');
+
+    await wrapper.find('[data-testid="clear-sort"]').trigger('click');
+    await flushPromises();
+
+    expect(getState(wrapper).sort).toBe('null');
+    wrapper.unmount();
+  });
+
+  it('setSearch updates the search query', async () => {
+    const wrapper = await mountHarness();
+
+    await wrapper.find('[data-testid="set-search"]').trigger('click');
+    await flushPromises();
+
+    expect(getState(wrapper).search).toBe('filter text');
+    wrapper.unmount();
+  });
+
+  it('setPage updates the current page', async () => {
+    const wrapper = await mountHarness();
+
+    await wrapper.find('[data-testid="set-page-5"]').trigger('click');
+    await flushPromises();
+
+    expect(getState(wrapper).page).toBe('5');
+    wrapper.unmount();
+  });
+
+  // -------------------------------------------------------------------------
+  // resetState
+  // -------------------------------------------------------------------------
+
+  it('resetState restores default initial values', async () => {
+    const wrapper = await mountHarness();
+
+    // Change all values
+    await wrapper.find('[data-testid="set-sort-name-asc"]').trigger('click');
+    await wrapper.find('[data-testid="set-search"]').trigger('click');
+    await wrapper.find('[data-testid="set-page-5"]').trigger('click');
+    await flushPromises();
+
+    expect(getState(wrapper).sort).toBe('name:asc');
+    expect(getState(wrapper).search).toBe('filter text');
+    expect(getState(wrapper).page).toBe('5');
+
+    // Reset
+    await wrapper.find('[data-testid="reset"]').trigger('click');
+    await flushPromises();
+
+    expect(getState(wrapper).sort).toBe('null');
+    expect(getState(wrapper).search).toBe('');
+    expect(getState(wrapper).page).toBe('0');
+    wrapper.unmount();
+  });
+
+  it('resetState restores custom initial values', async () => {
+    const initialState = {
+      sort: { column: 'age', direction: 'desc' as const },
+      search: 'initial',
+      page: 1,
+    };
+    const wrapper = await mountHarness(initialState);
+
+    // Change all values
+    await wrapper.find('[data-testid="clear-sort"]').trigger('click');
+    await wrapper.find('[data-testid="set-search"]').trigger('click');
+    await wrapper.find('[data-testid="set-page-5"]').trigger('click');
+    await flushPromises();
+
+    expect(getState(wrapper).sort).toBe('null');
+    expect(getState(wrapper).search).toBe('filter text');
+    expect(getState(wrapper).page).toBe('5');
+
+    // Reset to initial
+    await wrapper.find('[data-testid="reset"]').trigger('click');
+    await flushPromises();
+
+    expect(getState(wrapper).sort).toBe('age:desc');
+    expect(getState(wrapper).search).toBe('initial');
+    expect(getState(wrapper).page).toBe('1');
+    wrapper.unmount();
+  });
+});