@micha.bigler/ui-core-micha 2.13.0 → 2.15.0

package/tests/BarChart.test.jsx

@@ -0,0 +1,55 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+const chartSpy = vi.hoisted(() => vi.fn((props) => <div data-testid="mui-bar-chart" data-props={JSON.stringify(props)} />));
+vi.mock('@mui/x-charts/BarChart', () => ({ BarChart: chartSpy }));
+
+import { BarChart } from '../src/components/charts/BarChart';
+
+function renderChart(props) {
+  return render(
+    <ThemeProvider theme={createTheme({ palette: { primary: { main: 'rgb(1, 2, 3)' } } })}>
+      <BarChart xAxisLabel="Year" yAxisLabel="Value (kg)" {...props} />
+    </ThemeProvider>,
+  );
+}
+
+describe('BarChart preset', () => {
+  afterEach(cleanup);
+
+  it('passes both axis labels, tooltip, responsive sizing, and hides a single-series legend', () => {
+    renderChart({ series: [{ data: [1, 2] }] });
+    const props = chartSpy.mock.calls[0][0];
+
+    expect(props.xAxis[0].label).toBe('Year');
+    expect(props.yAxis[0].label).toBe('Value (kg)');
+    expect(props.slotProps).toEqual({ tooltip: { trigger: 'axis' } });
+    expect(props.hideLegend).toBe(true);
+    expect(screen.getByTestId('bar-chart-container').getAttribute('style') || '').not.toContain('px');
+  });
+
+  it.each([
+    ['grouped', [{ data: [1] }, { data: [2] }], undefined],
+    ['stacked', [{ data: [1], stack: 'total' }, { data: [2], stack: 'total' }], undefined],
+    ['dual axis', [{ data: [1], yAxisKey: 'secondary' }, { data: [2] }], [{ id: 'primary' }, { id: 'secondary' }]],
+  ])('renders the %s variant with a legend for multiple series', (_name, series, yAxis) => {
+    renderChart({ series, yAxis });
+    const props = chartSpy.mock.calls.at(-1)[0];
+    expect(props.hideLegend).toBe(false);
+    expect(props.series).toEqual(series);
+  });
+
+  it('passes a caller palette through without substituting a hardcoded colour', () => {
+    renderChart({ series: [{ data: [1] }], palette: ['var(--application-chart-colour)'] });
+    expect(chartSpy.mock.calls.at(-1)[0].colors).toEqual(['var(--application-chart-colour)']);
+  });
+
+  it('requires labels for both axes', () => {
+    expect(() => render(
+      <ThemeProvider theme={createTheme()}><BarChart series={[]} xAxisLabel="Year" /></ThemeProvider>,
+    )).toThrow('BarChart requires xAxisLabel and yAxisLabel.');
+  });
+});

package/tests/ChartFrame.test.jsx

@@ -0,0 +1,122 @@
+// @vitest-environment jsdom
+import React from 'react';
+import i18next from 'i18next';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+const chartExport = vi.hoisted(() => ({
+  exportChartSvg: vi.fn(() => new Blob()),
+  exportChartPng: vi.fn(() => Promise.resolve(new Blob())),
+}));
+
+vi.mock('../src/components/charts/exportChart', () => chartExport);
+
+import { ChartFrame } from '../src/components/charts/ChartFrame';
+
+const resources = {
+  en: {
+    translation: {
+      'ChartFrame.LOADING': 'Loading chart.',
+      'ChartFrame.EMPTY_DEFAULT': 'No data available.',
+      'ChartFrame.ERROR_DEFAULT': 'The chart could not be loaded.',
+      'ChartFrame.EXPORT_SVG_LABEL': 'Export SVG',
+      'ChartFrame.EXPORT_PNG_LABEL': 'Export PNG',
+      'ChartFrame.EXPORT_ERROR': 'The chart could not be exported.',
+    },
+  },
+  fr: {
+    translation: {
+      'ChartFrame.LOADING': 'Chargement du graphique.',
+      'ChartFrame.EMPTY_DEFAULT': 'Aucune donnée disponible.',
+      'ChartFrame.ERROR_DEFAULT': 'Impossible de charger le graphique.',
+      'ChartFrame.EXPORT_SVG_LABEL': 'Exporter en SVG',
+      'ChartFrame.EXPORT_PNG_LABEL': 'Exporter en PNG',
+      'ChartFrame.EXPORT_ERROR': 'Impossible d’exporter le graphique.',
+    },
+  },
+};
+
+function renderFrame(props = {}, language = 'en') {
+  const i18n = i18next.createInstance();
+  i18n.init({ lng: language, resources, interpolation: { escapeValue: false } });
+  return render(
+    <ThemeProvider theme={createTheme()}>
+      <I18nextProvider i18n={i18n}>
+        <ChartFrame title="Chart title" subtitle="Chart subtitle" {...props}>
+          <svg data-testid="chart-body" />
+        </ChartFrame>
+      </I18nextProvider>
+    </ThemeProvider>,
+  );
+}
+
+describe('ChartFrame', () => {
+  afterEach(cleanup);
+
+  it('renders its title, subtitle, toolbar, and accessible chart region', () => {
+    renderFrame({ toolbar: <button type="button">Period selector</button> });
+
+    expect(screen.getByText('Chart title')).toBeTruthy();
+    expect(screen.getByText('Chart subtitle')).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Period selector' })).toBeTruthy();
+    expect(screen.getByRole('img', { name: 'Chart title' })).toBeTruthy();
+  });
+
+  it('lets a custom ariaLabel override the title as the accessible name', () => {
+    renderFrame({ ariaLabel: 'Custom accessible description' });
+
+    expect(screen.getByRole('img', { name: 'Custom accessible description' })).toBeTruthy();
+    expect(screen.queryByRole('img', { name: 'Chart title' })).toBeNull();
+  });
+
+  it('enforces loading, error, empty, then children state precedence', () => {
+    const loading = renderFrame({ loading: true, error: 'Failure', isEmpty: true });
+    expect(screen.getByLabelText('Loading chart.')).toBeTruthy();
+    expect(screen.queryByText('Failure')).toBeNull();
+    expect(screen.queryByTestId('chart-body')).toBeNull();
+    loading.unmount();
+
+    const failure = renderFrame({ error: 'Failure', isEmpty: true });
+    expect(screen.getByText('Failure')).toBeTruthy();
+    expect(screen.queryByTestId('chart-body')).toBeNull();
+    failure.unmount();
+
+    renderFrame();
+    expect(screen.getByTestId('chart-body')).toBeTruthy();
+  });
+
+  it('renders an empty message before children when empty', () => {
+    renderFrame({ isEmpty: true, emptyMessage: 'No observations' });
+    expect(screen.getByText('No observations')).toBeTruthy();
+    expect(screen.queryByTestId('chart-body')).toBeNull();
+  });
+
+  it('shows export controls only when enabled and invokes the SVG callback', () => {
+    const onExportSvg = vi.fn();
+    const disabled = renderFrame();
+    expect(screen.queryByRole('button', { name: 'Export SVG' })).toBeNull();
+    disabled.unmount();
+
+    renderFrame({ exportOptions: { png: false }, onExportSvg });
+    fireEvent.click(screen.getByRole('button', { name: 'Export SVG' }));
+    expect(chartExport.exportChartSvg).toHaveBeenCalledOnce();
+    expect(onExportSvg).toHaveBeenCalledOnce();
+    expect(screen.queryByRole('button', { name: 'Export PNG' })).toBeNull();
+  });
+
+  it('invokes the PNG callback when the PNG export control is used', async () => {
+    const onExportPng = vi.fn();
+    renderFrame({ exportOptions: true, onExportPng });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Export PNG' }));
+    await vi.waitFor(() => expect(chartExport.exportChartPng).toHaveBeenCalledOnce());
+    await vi.waitFor(() => expect(onExportPng).toHaveBeenCalledOnce());
+  });
+
+  it('uses resolved i18n strings for its own empty state', () => {
+    renderFrame({ isEmpty: true }, 'fr');
+    expect(screen.getByText('Aucune donnée disponible.')).toBeTruthy();
+  });
+});

package/tests/LineChart.test.jsx

@@ -0,0 +1,33 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render } from '@testing-library/react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+const chartSpy = vi.hoisted(() => vi.fn(() => <div data-testid="mui-line-chart" />));
+vi.mock('@mui/x-charts/LineChart', () => ({ LineChart: chartSpy }));
+
+import { LineChart } from '../src/components/charts/LineChart';
+
+describe('LineChart preset', () => {
+  afterEach(cleanup);
+
+  it('renders multi-series time data with labelled axes, legend, and tooltip', () => {
+    render(
+      <ThemeProvider theme={createTheme()}>
+        <LineChart
+          xAxisLabel="Date"
+          yAxisLabel="Rate (%)"
+          xAxis={[{ scaleType: 'point', data: ['2026-01', '2026-02'] }]}
+          series={[{ data: [1, 2] }, { data: [2, 3] }]}
+        />
+      </ThemeProvider>,
+    );
+
+    const props = chartSpy.mock.calls[0][0];
+    expect(props.xAxis[0].label).toBe('Date');
+    expect(props.yAxis[0].label).toBe('Rate (%)');
+    expect(props.hideLegend).toBe(false);
+    expect(props.slotProps).toEqual({ tooltip: { trigger: 'axis' } });
+  });
+});

package/tests/NotificationsProvider.test.jsx

@@ -195,4 +195,42 @@ describe('NotificationsProvider', () => {
     expect(currentNotifications()[0]).toEqual(expect.objectContaining({ done: true }));
     expect(feedApi.markNotifications).toHaveBeenCalledWith({ action: 'done', ids: [1] });
   });
+
+  it('folds two WS messages for the same notification_id into one feed entry with a single unread increment (NOTIF-12 D2)', async () => {
+    renderProvider();
+    await waitFor(() => expect(screen.getByTestId('unread-count').textContent).toBe('2'));
+    await waitFor(() => expect(MockWebSocket.instances).toHaveLength(1));
+
+    MockWebSocket.instances[0].onmessage({ data: JSON.stringify({
+      type: 'payment_due',
+      channel: 'chip',
+      notification_id: 404,
+      content: { title_key: 'chip.title' },
+    }) });
+    await waitFor(() => expect(screen.getByTestId('unread-count').textContent).toBe('3'));
+
+    MockWebSocket.instances[0].onmessage({ data: JSON.stringify({
+      type: 'payment_due',
+      channel: 'popup',
+      notification_id: 404,
+      content: { title_key: 'popup.title' },
+    }) });
+
+    await waitFor(() => expect(currentNotifications().find((n) => n.notification_id === 404).content)
+      .toEqual({ title_key: 'popup.title' }));
+    expect(currentNotifications().filter((n) => n.notification_id === 404)).toHaveLength(1);
+    expect(screen.getByTestId('unread-count').textContent).toBe('3');
+  });
+
+  it('NOTIF-13 R1 guard: does not open the socket until the REST seed resolves', async () => {
+    let resolveFeed;
+    feedApi.getNotificationFeed.mockReturnValue(new Promise((resolve) => { resolveFeed = resolve; }));
+
+    renderProvider();
+
+    expect(MockWebSocket.instances).toHaveLength(0);
+
+    resolveFeed({ results: [] });
+    await waitFor(() => expect(MockWebSocket.instances).toHaveLength(1));
+  });
 });

package/tests/OnboardingWizard.test.jsx

@@ -0,0 +1,143 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key, params) => (params && Object.keys(params).length ? `${key}:${JSON.stringify(params)}` : key),
+  }),
+}));
+
+const onboardingModule = vi.hoisted(() => ({ useOnboarding: vi.fn() }));
+vi.mock('../src/onboarding/OnboardingProvider', () => onboardingModule);
+
+import { AuthContext } from '../src/auth/AuthContext';
+import { OnboardingWizard } from '../src/onboarding/OnboardingWizard';
+
+function StepBody({ onComplete, onDismiss }) {
+  return (
+    <div>
+      <button onClick={onComplete}>step-complete</button>
+      <button onClick={onDismiss}>step-dismiss</button>
+    </div>
+  );
+}
+
+function makeStep(overrides = {}) {
+  return {
+    id: 'step-1',
+    blocking: false,
+    persistDismissed: false,
+    Component: StepBody,
+    ...overrides,
+  };
+}
+
+function renderWizard({ onboarding, refreshUser = vi.fn().mockResolvedValue() } = {}) {
+  onboardingModule.useOnboarding.mockReturnValue(onboarding);
+  return render(
+    <AuthContext.Provider value={{ refreshUser }}>
+      <OnboardingWizard />
+    </AuthContext.Provider>,
+  );
+}
+
+describe('OnboardingWizard regression guard (NOTIF-12 shell extraction)', () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it('renders nothing when there is no active step', () => {
+    renderWizard({ onboarding: { activeSteps: [], markStepSeen: vi.fn(), dismissStep: vi.fn(), ctx: {} } });
+
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+
+  it('shows the single-step SETUP title with no progress bar for exactly one step', () => {
+    renderWizard({ onboarding: {
+      activeSteps: [makeStep()],
+      markStepSeen: vi.fn(),
+      dismissStep: vi.fn(),
+      ctx: {},
+    } });
+
+    expect(screen.getByText('Onboarding.SETUP')).toBeTruthy();
+    expect(screen.queryByRole('progressbar')).toBeNull();
+  });
+
+  it('shows the step counter and progress bar across multiple steps, advancing on completion', () => {
+    renderWizard({ onboarding: {
+      activeSteps: [makeStep({ id: 'a' }), makeStep({ id: 'b' })],
+      markStepSeen: vi.fn(),
+      dismissStep: vi.fn(),
+      ctx: {},
+    } });
+
+    expect(screen.getByText('Onboarding.STEP_COUNTER:{"current":1,"total":2}')).toBeTruthy();
+    expect(screen.getByRole('progressbar')).toBeTruthy();
+
+    fireEvent.click(screen.getByRole('button', { name: 'step-complete' }));
+
+    expect(screen.getByText('Onboarding.STEP_COUNTER:{"current":2,"total":2}')).toBeTruthy();
+  });
+
+  it('marks the current step seen and session-dismisses it once completed, revealing the next step', () => {
+    const markStepSeen = vi.fn();
+    renderWizard({ onboarding: {
+      activeSteps: [makeStep({ id: 'a' }), makeStep({ id: 'b' })],
+      markStepSeen,
+      dismissStep: vi.fn(),
+      ctx: {},
+    } });
+
+    expect(markStepSeen).toHaveBeenCalledWith('a');
+
+    fireEvent.click(screen.getByRole('button', { name: 'step-complete' }));
+
+    expect(markStepSeen).toHaveBeenCalledWith('b');
+  });
+
+  it('disables escape-key close for a blocking step', () => {
+    renderWizard({ onboarding: {
+      activeSteps: [makeStep({ blocking: true })],
+      markStepSeen: vi.fn(),
+      dismissStep: vi.fn(),
+      ctx: {},
+    } });
+
+    const dialog = screen.getByRole('dialog');
+    fireEvent.keyDown(dialog, { key: 'Escape', code: 'Escape' });
+
+    expect(screen.getByRole('dialog')).toBeTruthy();
+  });
+
+  it('calls dismissStep only when the dismissed step is persistDismissed', () => {
+    const dismissStep = vi.fn();
+    renderWizard({ onboarding: {
+      activeSteps: [makeStep({ persistDismissed: true })],
+      markStepSeen: vi.fn(),
+      dismissStep,
+      ctx: {},
+    } });
+
+    fireEvent.click(screen.getByRole('button', { name: 'step-dismiss' }));
+
+    expect(dismissStep).toHaveBeenCalledWith('step-1');
+  });
+
+  it('does not call dismissStep for a non-persistDismissed step on dismiss', () => {
+    const dismissStep = vi.fn();
+    renderWizard({ onboarding: {
+      activeSteps: [makeStep({ persistDismissed: false })],
+      markStepSeen: vi.fn(),
+      dismissStep,
+      ctx: {},
+    } });
+
+    fireEvent.click(screen.getByRole('button', { name: 'step-dismiss' }));
+
+    expect(dismissStep).not.toHaveBeenCalled();
+  });
+});

package/tests/PopupSurface.test.jsx

@@ -0,0 +1,142 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key, params) => (params && Object.keys(params).length ? `${key}:${JSON.stringify(params)}` : key),
+  }),
+}));
+
+const onboardingModule = vi.hoisted(() => ({ useOnboarding: vi.fn() }));
+vi.mock('../src/onboarding/OnboardingProvider', () => onboardingModule);
+
+const notificationsModule = vi.hoisted(() => ({ useNotifications: vi.fn() }));
+vi.mock('../src/notifications/NotificationsProvider', () => notificationsModule);
+
+const realtimeModule = vi.hoisted(() => ({ useRealtime: vi.fn(), DEFAULT_ENVELOPE: 'notification' }));
+vi.mock('../src/notifications/realtime', () => realtimeModule);
+
+import { PopupSurface } from '../src/notifications/PopupSurface';
+
+describe('PopupSurface (NOTIF-12 scope B/C)', () => {
+  let handler;
+  let subscribeFn;
+  let markSeen;
+  let markDismissed;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    handler = null;
+    subscribeFn = (envelope, fn) => {
+      handler = fn;
+      return () => { handler = null; };
+    };
+    markSeen = vi.fn();
+    markDismissed = vi.fn();
+    notificationsModule.useNotifications.mockReturnValue({ markSeen, markDismissed, markDone: vi.fn() });
+    onboardingModule.useOnboarding.mockReturnValue({ activeSteps: [] });
+    realtimeModule.useRealtime.mockImplementation(() => ({ subscribe: subscribeFn }));
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  function push(data) {
+    act(() => {
+      handler(data);
+    });
+  }
+
+  it('renders nothing when no popup-eligible notification is present', () => {
+    render(<PopupSurface />);
+
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+
+  it('renders a popup-eligible notification once, marking seen exactly once on display, and shows the notification title (not the onboarding header)', () => {
+    render(<PopupSurface />);
+
+    push({ notification_id: 1, channel: 'popup', content: { title_key: 'T', body_key: 'B', params: {} } });
+
+    expect(screen.getByRole('dialog')).toBeTruthy();
+    expect(screen.getByText('T')).toBeTruthy();
+    expect(screen.queryByText('Onboarding.SETUP')).toBeNull();
+    expect(markSeen).toHaveBeenCalledTimes(1);
+    expect(markSeen).toHaveBeenCalledWith([1]);
+  });
+
+  it('marks using the wire recipient_id (feed/mark/ id-space), not the notification_id, when present', () => {
+    render(<PopupSurface />);
+
+    push({ notification_id: 10, recipient_id: 999, channel: 'popup', content: { title_key: 'T' } });
+
+    expect(markSeen).toHaveBeenCalledWith([999]);
+
+    fireEvent.click(screen.getByRole('button', { name: 'PopupSurface.CLOSE' }));
+
+    expect(markDismissed).toHaveBeenCalledWith([999]);
+  });
+
+  it('fires markDismissed, never markDone, when the popup is closed', () => {
+    const { markDone } = notificationsModule.useNotifications();
+    render(<PopupSurface />);
+    push({ notification_id: 1, channel: 'popup', content: { title_key: 'T' } });
+
+    fireEvent.click(screen.getByRole('button', { name: 'PopupSurface.CLOSE' }));
+
+    expect(markDismissed).toHaveBeenCalledWith([1]);
+    expect(markDone).not.toHaveBeenCalled();
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+
+  it('ignores a chip-channel message and a channel-less legacy message — no popup storm', () => {
+    render(<PopupSurface />);
+
+    push({ notification_id: 2, channel: 'chip', content: { title_key: 'T' } });
+    push({ notification_id: 3, content: { title_key: 'T' } });
+
+    expect(screen.queryByRole('dialog')).toBeNull();
+    expect(markSeen).not.toHaveBeenCalled();
+  });
+
+  it('ignores a notification.status message regardless of its channel field', () => {
+    render(<PopupSurface />);
+
+    push({ type: 'notification.status', notification_id: 4, channel: 'popup', status: {} });
+
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+
+  it('coexistence: a blocking onboarding step suppresses the popup; it appears once the step clears, never stacking two dialogs', () => {
+    onboardingModule.useOnboarding.mockReturnValue({ activeSteps: [{ id: 'cookie_consent', blocking: true }] });
+    const { rerender } = render(<PopupSurface />);
+
+    push({ notification_id: 5, channel: 'popup', content: { title_key: 'T' } });
+    expect(screen.queryByRole('dialog')).toBeNull();
+    expect(markSeen).not.toHaveBeenCalled();
+
+    onboardingModule.useOnboarding.mockReturnValue({ activeSteps: [] });
+    rerender(<PopupSurface />);
+
+    expect(screen.getAllByRole('dialog')).toHaveLength(1);
+    expect(markSeen).toHaveBeenCalledWith([5]);
+  });
+
+  it('coexistence: a non-blocking onboarding step also suppresses the popup, never stacking two dialogs', () => {
+    onboardingModule.useOnboarding.mockReturnValue({ activeSteps: [{ id: 'browser_push', blocking: false }] });
+    const { rerender } = render(<PopupSurface />);
+
+    push({ notification_id: 6, channel: 'popup', content: { title_key: 'T' } });
+    expect(screen.queryByRole('dialog')).toBeNull();
+    expect(markSeen).not.toHaveBeenCalled();
+
+    onboardingModule.useOnboarding.mockReturnValue({ activeSteps: [] });
+    rerender(<PopupSurface />);
+
+    expect(screen.getAllByRole('dialog')).toHaveLength(1);
+    expect(markSeen).toHaveBeenCalledWith([6]);
+  });
+});

package/tests/chartsPalette.test.js

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest';
+import {
+  createChartFormatters,
+  formatCompact,
+  formatPercentage,
+  getNeutralChartPalette,
+} from '../src/index';
+
+describe('chart palette and formatters', () => {
+  it('resolves different neutral palettes from light and dark MUI themes without literal API colours', () => {
+    const tokenTheme = (mode) => ({
+      palette: {
+        mode,
+        primary: { main: `${mode}-primary-main`, light: `${mode}-primary-light`, dark: `${mode}-primary-dark` },
+        secondary: { main: `${mode}-secondary-main`, light: `${mode}-secondary-light` },
+        info: { main: `${mode}-info-main`, light: `${mode}-info-light` },
+        success: { main: `${mode}-success-main`, light: `${mode}-success-light` },
+        warning: { main: `${mode}-warning-main`, light: `${mode}-warning-light` },
+        action: { disabled: `${mode}-action-disabled` },
+        text: { secondary: `${mode}-text-secondary` },
+        divider: `${mode}-divider`,
+      },
+    });
+    const light = getNeutralChartPalette(tokenTheme('light'));
+    const dark = getNeutralChartPalette(tokenTheme('dark'));
+
+    expect(light.categorical).not.toEqual(dark.categorical);
+    expect(light.categorical).toHaveLength(5);
+    expect(light.categorical).toContain('light-primary-main');
+    expect(light.categorical.every((colour) => !colour.includes('#'))).toBe(true);
+  });
+
+  it('formats percentage and compact numbers according to the requested locale', () => {
+    expect(formatPercentage(0.25, 'en-US')).toBe('25%');
+    expect(formatPercentage(0.25, 'de-DE')).toContain('25');
+    expect(formatCompact(12500, 'en-US')).toMatch(/12.5K|13K/);
+    expect(createChartFormatters('fr-FR').ratio(1.5)).toContain('1');
+  });
+});

package/tests/notificationsExports.test.js

@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest';
 
 import {
   NotificationSettings,
+  PopupSurface,
   getNotificationPreferences,
   getVapidPublicKey,
   listPushSubscriptions,
@@ -26,4 +27,8 @@ describe('notification barrel exports', () => {
       notificationsTranslations,
     ].forEach((value) => expect(value).toBeDefined());
   });
+
+  it('additively exports the NOTIF-12 popup surface', () => {
+    expect(PopupSurface).toBeDefined();
+  });
 });