@micha.bigler/ui-core-micha 2.29.2 → 2.31.0

package/tests/createAppTheme.test.js

@@ -0,0 +1,103 @@
+import { createTheme } from '@mui/material/styles';
+import { describe, expect, it } from 'vitest';
+
+import { assertThemeComplete, createAppTheme } from '../src/index';
+import { BASELINE_STATIC } from '../src/theme/tokens';
+
+describe('createAppTheme', () => {
+  it('builds a complete baseline from only an app primary colour', () => {
+    const theme = createAppTheme({ palette: { primary: { main: '#0F62FE' } } });
+
+    expect(assertThemeComplete(theme).findings).toEqual([]);
+    expect(theme.typography.body1.fontSize).toBe('14px');
+    expect(theme.shape.borderRadius).toBe(3);
+    expect(theme.components.MuiPaper.defaultProps).toMatchObject({ elevation: 0, variant: 'outlined' });
+    expect(theme.palette.dataSeries.categorical).toHaveLength(6);
+    expect(theme.palette.primary.light).not.toBe(createTheme().palette.primary.light);
+    // MUI's createTheme(options, ...args) only augments the FIRST argument's
+    // palette; every later arg is deep-merged raw, so a status entry missing
+    // `main`/`contrastText` silently keeps MUI's stock hue for color="success"
+    // etc. -- main/contrastText must equal the canonical fill/fillText tones.
+    for (const status of ['success', 'warning', 'error', 'info']) {
+      expect(theme.palette[status].main).toBe(theme.palette[status].fill);
+      expect(theme.palette[status].contrastText).toBe(theme.palette[status].fillText);
+    }
+  });
+
+  it('throws when palette.primary is missing', () => {
+    expect(() => createAppTheme()).toThrow(/palette\.primary.*required/i);
+  });
+
+  it('throws on a function in an app styleOverrides slot', () => {
+    expect(() => createAppTheme({
+      palette: { primary: { main: '#0F62FE' } },
+      components: { MuiButton: { styleOverrides: { root: () => ({ color: 'red' }) } } },
+    })).toThrow(/components\.MuiButton\.styleOverrides\.root.*object.*variants/i);
+  });
+
+  it('computes component values from the final app status palette', () => {
+    const theme = createAppTheme({
+      palette: {
+        primary: { main: '#0F62FE' },
+        success: { main: '#14532D', text: '#14532D', bg: '#DCFCE7' },
+      },
+    });
+
+    expect(theme.components.MuiAlert.styleOverrides.standardSuccess).toEqual({
+      color: '#14532D',
+      backgroundColor: '#DCFCE7',
+      '& .MuiAlert-icon': { color: '#14532D' },
+    });
+  });
+
+  it('deep-merges app object overrides without dropping baseline properties', () => {
+    const theme = createAppTheme({
+      palette: { primary: { main: '#0F62FE' } },
+      typography: { fontFamily: "'App Sans', sans-serif" },
+      components: { MuiButton: { styleOverrides: { root: { fontSize: '15px' } } } },
+    });
+
+    expect(theme.components.MuiButton.styleOverrides.root).toMatchObject({
+      minHeight: 40,
+      borderRadius: 3,
+      fontSize: '15px',
+    });
+    expect(theme.typography.body1.fontFamily).toBe("'App Sans', sans-serif");
+    expect(theme.components.MuiOutlinedInput.styleOverrides.root.height).toBeUndefined();
+    // variants is a sibling of styleOverrides (MUI matches it independently by
+    // props), not nested inside it -- see src/theme/tokens.js for why.
+    expect(theme.components.MuiOutlinedInput.variants).toContainEqual({
+      props: { multiline: false },
+      style: { height: 40 },
+    });
+  });
+
+  it('returns independent themes for runtime palettes in one process', () => {
+    const blue = createAppTheme({ palette: { primary: { main: '#0F62FE' } } });
+    const purple = createAppTheme({ palette: { primary: { main: '#432CA1' } } });
+
+    expect(blue).not.toBe(purple);
+    expect(blue.palette).not.toBe(purple.palette);
+    expect(blue.palette.dataSeries.categorical).not.toBe(purple.palette.dataSeries.categorical);
+    expect(blue.palette.primary.main).toBe('#0F62FE');
+    expect(purple.palette.primary.main).toBe('#432CA1');
+    expect(blue.palette.controlBorder.focus).not.toBe(purple.palette.controlBorder.focus);
+  });
+
+  it('contains no function anywhere in the baseline components tree', () => {
+    const functionPaths = [];
+    const visit = (value, path) => {
+      if (typeof value === 'function') functionPaths.push(path);
+      else if (value && typeof value === 'object') {
+        Object.entries(value).forEach(([key, child]) => visit(child, `${path}.${key}`));
+      }
+    };
+
+    visit(BASELINE_STATIC.components, 'baseline.components');
+    visit(
+      createAppTheme({ palette: { primary: { main: '#0F62FE' } } }).components,
+      'theme.components',
+    );
+    expect(functionPaths).toEqual([]);
+  });
+});

package/tests/themeCompleteness.test.js

@@ -0,0 +1,63 @@
+import { createTheme } from '@mui/material/styles';
+import { describe, expect, it } from 'vitest';
+
+import {
+  assertThemeComplete,
+  calculateContrastRatio,
+  createAppTheme,
+} from '../src/index';
+
+describe('theme completeness', () => {
+  it('finds untouched MUI surfaces and accepts createAppTheme', () => {
+    const bare = assertThemeComplete(createTheme());
+    const baseline = assertThemeComplete(
+      createAppTheme({ palette: { primary: { main: '#0F62FE' } } }),
+    );
+
+    expect(bare.findings.length).toBeGreaterThan(0);
+    expect(bare.findings.map(({ surface }) => surface)).toContain('shape.borderRadius');
+    expect(assertThemeComplete(createTheme({ components: { MuiButton: {} } })).findings
+      .map(({ surface }) => surface))
+      .toContain('components.MuiButton.styleOverrides.root.minHeight');
+    expect(baseline.findings).toEqual([]);
+  });
+
+  it('suppresses exactly one surface when an exemption includes a reason', () => {
+    const theme = createTheme();
+    const before = assertThemeComplete(theme).findings;
+    const after = assertThemeComplete(theme, {
+      exemptions: [{
+        surface: 'palette.background.paper',
+        reason: 'This application deliberately uses white as its surface.',
+      }],
+    }).findings;
+
+    expect(after).toHaveLength(before.length - 1);
+    expect(after.map(({ surface }) => surface)).not.toContain('palette.background.paper');
+  });
+
+  it('reports an exemption without a reason as its own finding', () => {
+    const result = assertThemeComplete(createTheme(), {
+      exemptions: [{ surface: 'shape.borderRadius' }],
+    });
+
+    expect(result.findings.map(({ surface }) => surface)).toContain('exemption.shape.borderRadius');
+    expect(result.findings.map(({ surface }) => surface)).toContain('shape.borderRadius');
+  });
+
+  it('meets status-on-tint and control-boundary contrast thresholds', () => {
+    const theme = createAppTheme({ palette: { primary: { main: '#8AB4F8' } } });
+
+    for (const status of ['success', 'warning', 'error', 'info', 'stale']) {
+      expect(calculateContrastRatio(theme.palette[status].text, theme.palette[status].bg)).toBeGreaterThanOrEqual(4.5);
+    }
+    for (const state of ['main', 'hover', 'focus', 'error']) {
+      expect(calculateContrastRatio(theme.palette.controlBorder[state], '#FFFFFF')).toBeGreaterThanOrEqual(3);
+      expect(calculateContrastRatio(theme.palette.controlBorder[state], theme.palette.background.default)).toBeGreaterThanOrEqual(3);
+    }
+
+    theme.palette.success.text = 'not-a-colour';
+    expect(assertThemeComplete(theme).findings.map(({ surface }) => surface))
+      .toContain('contrast.success.text-on-bg');
+  });
+});

package/tests/timeSeriesLegend.test.js

@@ -0,0 +1,99 @@
+// @vitest-environment jsdom
+import React from 'react';
+import i18next from 'i18next';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+const chartSpy = vi.hoisted(() => vi.fn(() => null));
+vi.mock('@mui/x-charts/BarChart', () => ({ BarChart: chartSpy }));
+
+import { TimeSeriesChart } from '../src/components/charts/TimeSeriesChart';
+
+chartSpy.mockImplementation((props) => React.createElement(
+  'div',
+  { 'data-testid': 'mui-bar-chart' },
+  !props.hideLegend
+    ? React.createElement('div', { 'data-testid': 'mui-legend' }, 'MUI legend')
+    : null,
+));
+
+const i18n = i18next.createInstance();
+i18n.init({
+  lng: 'en',
+  resources: {
+    en: {
+      translation: {
+        'TimeSeriesChart.RANGE_LABEL': 'Range',
+        'TimeSeriesChart.RANGE_1_DAY': '1 day',
+        'TimeSeriesChart.RANGE_1_WEEK': '1 week',
+        'TimeSeriesChart.RANGE_1_MONTH': '1 month',
+        'TimeSeriesChart.RANGE_1_YEAR': '1 year',
+        'TimeSeriesChart.SERIES_LABEL': 'Series',
+        'ChartFrame.EMPTY_DEFAULT': 'No data available.',
+        'ChartFrame.LOADING': 'Loading chart.',
+        'ChartFrame.ERROR_DEFAULT': 'The chart could not be loaded.',
+      },
+    },
+  },
+  interpolation: { escapeValue: false },
+});
+
+const MULTI_SERIES = {
+  xLabels: ['Mon', 'Tue'],
+  series: [
+    { key: 'users', label: 'Users', data: [1, 2] },
+    { key: 'hours', label: 'Presence hours', data: [3, 4] },
+  ],
+};
+
+function renderChart(data = MULTI_SERIES) {
+  return render(React.createElement(
+    ThemeProvider,
+    { theme: createTheme() },
+    React.createElement(
+      I18nextProvider,
+      { i18n },
+      React.createElement(TimeSeriesChart, {
+        title: 'Activity',
+        xAxisLabel: 'Day',
+        yAxisLabel: 'Count',
+        data,
+      }),
+    ),
+  ),
+  );
+}
+
+describe('TimeSeriesChart toolbar legend', () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it('removes the MUI legend when the toolbar names and toggles multiple series', () => {
+    renderChart();
+
+    expect(chartSpy.mock.calls.at(-1)[0].hideLegend).toBe(true);
+    expect(screen.queryByTestId('mui-legend')).toBeNull();
+  });
+
+  it('keeps an accessible name on every toolbar series toggle', () => {
+    renderChart();
+
+    expect(screen.getByRole('checkbox', { name: 'Users' })).toBeTruthy();
+    expect(screen.getByRole('checkbox', { name: 'Presence hours' })).toBeTruthy();
+    expect(screen.getAllByTestId('series-colour-dot')).toHaveLength(2);
+  });
+
+  it('still hides the redundant MUI legend for a single series', () => {
+    renderChart({
+      xLabels: ['Mon', 'Tue'],
+      series: [{ key: 'users', label: 'Users', data: [1, 2] }],
+    });
+
+    expect(chartSpy.mock.calls.at(-1)[0].hideLegend).toBe(true);
+    expect(screen.queryByTestId('mui-legend')).toBeNull();
+  });
+});