@micha.bigler/ui-core-micha 3.14.4 → 4.0.1

package/tests/LineChart.test.jsx

@@ -1,80 +0,0 @@
-// @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(() => <div data-testid="mui-line-chart" />));
-vi.mock('@mui/x-charts/LineChart', () => ({ LineChart: chartSpy, MarkElement: 'path' }));
-
-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' },
-      legend: { position: { vertical: 'bottom', horizontal: 'start' } },
-    });
-  });
-
-  // UCM-CHART-12: `size`/`height` resolution, wired through the actual component. Replaces the
-  // deleted `minHeight`/`aspect` CHART-8 trio.
-  describe('size/height resolution (UCM-CHART-12, UCM-CHART-15)', () => {
-    function renderLine(props) {
-      return render(
-        <ThemeProvider theme={createTheme()}>
-          <LineChart series={[{ data: [1, 2] }]} {...props} />
-        </ThemeProvider>,
-      );
-    }
-
-    afterEach(cleanup);
-
-    it.each([
-      ['compact', 320],
-      ['standard', 400],
-      ['tall', 480],
-      ['extra_tall', 560],
-      ['super_tall', 640],
-    ])('resolves size="%s" to %ipx, on both the chart height and the wrapper', (size, px) => {
-      renderLine({ size });
-      expect(chartSpy.mock.calls.at(-1)[0].height).toBe(px);
-      expect(window.getComputedStyle(screen.getByTestId('line-chart-container')).height).toBe(`${px}px`);
-    });
-
-    it('lets height override size entirely, as the documented escape', () => {
-      renderLine({ size: 'compact', height: 280 });
-      expect(chartSpy.mock.calls.at(-1)[0].height).toBe(280);
-      expect(window.getComputedStyle(screen.getByTestId('line-chart-container')).height).toBe('280px');
-    });
-
-    it('throws in dev when a caller still passes minHeight, naming the replacement', () => {
-      expect(() => renderLine({ minHeight: 300 })).toThrow(/size=.*standard.*tall/);
-    });
-
-    it('throws in dev when a caller still passes aspect, naming the removal', () => {
-      expect(() => renderLine({ aspect: 1.8 })).toThrow(/aspect/);
-    });
-
-    it('throws in dev when a caller still passes margin, naming the removal', () => {
-      expect(() => renderLine({ margin: { top: 1 } })).toThrow(/margin/);
-    });
-  });
-});

package/tests/MessagingProvider.test.jsx

@@ -1,50 +0,0 @@
-// @vitest-environment jsdom
-import React from 'react';
-import { describe, expect, it, vi } from 'vitest';
-import { act, render, screen, waitFor } from '@testing-library/react';
-
-import { RealtimeContext } from '../src/notifications/realtime';
-import { MessagingProvider, useMessaging } from '../src/messaging/MessagingProvider';
-
-function Harness() { const { cache } = useMessaging(); return <output data-testid="cache">{JSON.stringify(cache)}</output>; }
-function makeTransport() {
-  const handlers = new Set(); const reconnectHandlers = new Set();
-  return { subscribe: vi.fn((_envelope, handler) => { handlers.add(handler); return () => handlers.delete(handler); }), onReconnect: vi.fn((handler) => { reconnectHandlers.add(handler); return () => reconnectHandlers.delete(handler); }), frame: (frame) => handlers.forEach((handler) => handler(frame)), reconnect: () => reconnectHandlers.forEach((handler) => handler()) };
-}
-function renderProvider({ transport = makeTransport(), api, activeConversationId = 1, active } = {}) {
-  const props = { api, activeConversationId, ...(active === undefined ? {} : { active }) };
-  render(<RealtimeContext.Provider value={transport}><MessagingProvider {...props}><Harness /></MessagingProvider></RealtimeContext.Provider>);
-  return transport;
-}
-const cache = () => JSON.parse(screen.getByTestId('cache').textContent);
-
-describe('MessagingProvider', () => {
-  it('deduplicates repeated event IDs and only changes the affected message slice', async () => {
-    const api = { listConversations: vi.fn().mockResolvedValue({ results: [{ id: 1 }, { id: 2 }] }), listMessages: vi.fn().mockResolvedValue({ results: [{ id: 10, conversation_id: 2, body: 'unchanged' }] }), getUnreadCount: vi.fn().mockResolvedValue({ unread_count: 0, by_conversation: {} }) };
-    const transport = renderProvider({ api }); await waitFor(() => expect(api.listConversations).toHaveBeenCalled());
-    const frame = { envelope: 'messaging', type: 'message', event_id: 'once', conversation_id: 1, message: { id: 11, body: 'new' } };
-    act(() => { transport.frame(frame); transport.frame(frame); });
-    expect(Object.keys(cache().messages)).toEqual(['10', '11']);
-    expect(cache().messages['10'].body).toBe('unchanged');
-  });
-
-  it('refetches list, active thread and unread state when Layer 1 reconnects', async () => {
-    const api = { listConversations: vi.fn().mockResolvedValue({ results: [] }), listMessages: vi.fn().mockResolvedValue({ results: [] }), getUnreadCount: vi.fn().mockResolvedValue({ unread_count: 0, by_conversation: {} }) };
-    const transport = renderProvider({ api }); await waitFor(() => expect(api.listMessages).toHaveBeenCalledTimes(1));
-    await act(async () => transport.reconnect());
-    await waitFor(() => { expect(api.listConversations).toHaveBeenCalledTimes(2); expect(api.listMessages).toHaveBeenLastCalledWith(1); expect(api.getUnreadCount).toHaveBeenCalledTimes(2); });
-  });
-
-  it('does not call the authenticated-only REST surface while active=false, and starts fetching once it flips true', async () => {
-    const api = { listConversations: vi.fn().mockResolvedValue({ results: [] }), listMessages: vi.fn().mockResolvedValue({ results: [] }), getUnreadCount: vi.fn().mockResolvedValue({ unread_count: 0, by_conversation: {} }) };
-    const transport = makeTransport();
-    const { rerender } = render(<RealtimeContext.Provider value={transport}><MessagingProvider api={api} activeConversationId={1} active={false}><Harness /></MessagingProvider></RealtimeContext.Provider>);
-    await new Promise((resolve) => setTimeout(resolve, 0));
-    expect(api.listConversations).not.toHaveBeenCalled();
-    expect(api.listMessages).not.toHaveBeenCalled();
-    expect(api.getUnreadCount).not.toHaveBeenCalled();
-
-    rerender(<RealtimeContext.Provider value={transport}><MessagingProvider api={api} activeConversationId={1} active><Harness /></MessagingProvider></RealtimeContext.Provider>);
-    await waitFor(() => expect(api.listConversations).toHaveBeenCalledTimes(1));
-  });
-});

package/tests/MobileBottomNav.test.jsx

@@ -1,319 +0,0 @@
-// @vitest-environment jsdom
-import React from 'react';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render, screen, within } from '@testing-library/react';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-
-import {
-  MOBILE_BOTTOM_NAV_ACTION_SX,
-  MOBILE_BOTTOM_NAV_ROOT_SX,
-  MobileBottomNav,
-} from '../src/components/MobileBottomNav';
-import { createAppTheme } from '../src/theme/createAppTheme';
-
-const theme = createAppTheme({ palette: { primary: { main: '#0F62FE' } } });
-
-function Icon() {
-  return <svg aria-hidden="true" data-testid="destination-icon" />;
-}
-
-const destinations = [
-  { route: '/first', label: 'First', icon: Icon },
-  { route: '/second', label: 'Second', icon: Icon },
-  { route: '/third', label: 'Third', icon: Icon },
-];
-
-function setMediaQueryMatches(matches) {
-  window.matchMedia = vi.fn().mockImplementation((query) => ({
-    matches: typeof matches === 'function' ? matches(query) : matches,
-    media: query,
-    onchange: null,
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-    addListener: vi.fn(),
-    removeListener: vi.fn(),
-    dispatchEvent: vi.fn(),
-  }));
-}
-
-function setViewportWidth(width) {
-  setMediaQueryMatches((query) => {
-    const minWidth = query.match(/min-width:(\d+)px/)?.[1];
-    return minWidth ? width >= Number(minWidth) : false;
-  });
-}
-
-function renderNav(props = {}) {
-  return render(
-    <ThemeProvider theme={theme}>
-      <MobileBottomNav
-        destinations={destinations}
-        activeRoute="/first"
-        onNavigate={vi.fn()}
-        {...props}
-      />
-    </ThemeProvider>,
-  );
-}
-
-describe('MobileBottomNav', () => {
-  beforeEach(() => setMediaQueryMatches(false));
-
-  afterEach(() => {
-    cleanup();
-    vi.restoreAllMocks();
-  });
-
-  it('renders one action per destination, in order, with visible labels', () => {
-    renderNav();
-
-    expect(screen.getAllByRole('button').map((action) => action.textContent)).toEqual([
-      'First',
-      'Second',
-      'Third',
-    ]);
-  });
-
-  it('selects exactly the matching route and tolerates no match', () => {
-    const { rerender } = renderNav({ activeRoute: '/second' });
-    const selected = () => screen.getAllByRole('button')
-      .filter((action) => action.classList.contains('Mui-selected'));
-
-    expect(selected()).toHaveLength(1);
-    expect(selected()[0].textContent).toBe('Second');
-    expect(selected()[0].getAttribute('aria-current')).toBe('page');
-    expect(screen.getAllByRole('button').filter((action) => action.hasAttribute('aria-current')))
-      .toHaveLength(1);
-
-    rerender(
-      <ThemeProvider theme={theme}>
-        <MobileBottomNav
-          destinations={destinations}
-          activeRoute="/not-in-the-bar"
-          onNavigate={vi.fn()}
-        />
-      </ThemeProvider>,
-    );
-    expect(selected()).toHaveLength(0);
-    expect(screen.getAllByRole('button').some((action) => action.hasAttribute('aria-current')))
-      .toBe(false);
-  });
-
-  it('calls onNavigate with the selected destination route', () => {
-    const onNavigate = vi.fn();
-    renderNav({ onNavigate });
-
-    fireEvent.click(screen.getByRole('button', { name: 'Second' }));
-
-    expect(onNavigate).toHaveBeenCalledOnce();
-    expect(onNavigate).toHaveBeenCalledWith('/second');
-  });
-
-  it('renders a positive badge only on its own destination', () => {
-    renderNav({
-      destinations: [
-        { route: '/inbox', label: 'Inbox', icon: Icon, badgeCount: 4 },
-        { route: '/empty', label: 'Empty', icon: Icon, badgeCount: 0 },
-        { route: '/unset', label: 'Unset', icon: Icon },
-      ],
-      activeRoute: '/inbox',
-    });
-
-    const actions = screen.getAllByRole('button');
-    expect(within(actions[0]).getByText('4')).toBeTruthy();
-    expect(actions[0].querySelectorAll('.MuiBadge-root')).toHaveLength(1);
-    expect(actions[1].querySelector('.MuiBadge-root')).toBeNull();
-    expect(actions[2].querySelector('.MuiBadge-root')).toBeNull();
-  });
-
-  it('uses shortLabel when present and label when it is absent', () => {
-    renderNav({
-      destinations: [
-        { route: '/registrations', label: 'My registrations', shortLabel: 'Mine', icon: Icon },
-        { route: '/messages', label: 'Messages', icon: Icon },
-      ],
-    });
-
-    expect(screen.getAllByRole('button').map((action) => action.textContent)).toEqual([
-      'Mine',
-      'Messages',
-    ]);
-    expect(screen.getByRole('button', { name: 'My registrations' }).textContent).toBe('Mine');
-  });
-
-  it('resolves its surface and action colours from both baseline and plain MUI themes', () => {
-    const themes = [
-      createAppTheme({
-        palette: {
-          primary: { main: '#123456' },
-          background: { paper: '#F1F2F3' },
-          text: { secondary: '#445566' },
-        },
-      }),
-      createTheme({
-        palette: {
-          primary: { main: '#654321' },
-          background: { paper: '#E7E8E9' },
-          text: { secondary: '#665544' },
-        },
-      }),
-    ];
-    const expected = [
-      { background: 'rgb(241, 242, 243)', selected: 'rgb(18, 52, 86)', rest: 'rgb(68, 85, 102)' },
-      { background: 'rgb(231, 232, 233)', selected: 'rgb(101, 67, 33)', rest: 'rgb(102, 85, 68)' },
-    ];
-
-    themes.forEach((currentTheme, index) => {
-      const { container } = render(
-        <ThemeProvider theme={currentTheme}>
-          <MobileBottomNav
-            destinations={destinations}
-            activeRoute="/first"
-            onNavigate={vi.fn()}
-          />
-        </ThemeProvider>,
-      );
-      const actions = screen.getAllByRole('button');
-
-      expect(getComputedStyle(container.firstElementChild).backgroundColor)
-        .toBe(expected[index].background);
-      expect(getComputedStyle(actions[0]).color).toBe(expected[index].selected);
-      expect(getComputedStyle(actions[1]).color).toBe(expected[index].rest);
-      cleanup();
-    });
-  });
-
-  it('keeps its structural edge and evenly divided actions under a plain MUI theme', () => {
-    const fiveDestinations = [
-      ...destinations,
-      { route: '/fourth', label: 'Fourth', icon: Icon },
-      { route: '/fifth', label: 'Fifth', icon: Icon },
-    ];
-    setViewportWidth(375);
-    const { container } = render(
-      <ThemeProvider theme={createTheme()}>
-        <MobileBottomNav
-          destinations={fiveDestinations}
-          activeRoute="/first"
-          onNavigate={vi.fn()}
-        />
-      </ThemeProvider>,
-    );
-    const navStyle = getComputedStyle(container.firstElementChild);
-    const actionStyles = screen.getAllByRole('button').map((action) => getComputedStyle(action));
-
-    expect(navStyle.borderTopWidth).toBe('1px');
-    expect(navStyle.borderTopStyle).toBe('solid');
-    expect(actionStyles).toHaveLength(5);
-    actionStyles.forEach((actionStyle) => {
-      expect(actionStyle.minWidth).toBe('0px');
-      expect(actionStyle.maxWidth).toBe('none');
-      expect(actionStyle.flexGrow).toBe('1');
-    });
-  });
-
-  it('keeps component-owned sx keys out of baseline theme overrides', () => {
-    const componentSurfaces = [
-      ...Object.keys(MOBILE_BOTTOM_NAV_ROOT_SX)
-        .map((key) => `MuiBottomNavigation.${key}`),
-      ...Object.keys(MOBILE_BOTTOM_NAV_ACTION_SX)
-        .map((key) => `MuiBottomNavigationAction.${key}`),
-    ];
-    const themeSurfaces = [
-      ...Object.keys(theme.components.MuiBottomNavigation.styleOverrides.root)
-        .map((key) => `MuiBottomNavigation.${key}`),
-      ...Object.keys(theme.components.MuiBottomNavigationAction.styleOverrides.root)
-        .map((key) => `MuiBottomNavigationAction.${key}`),
-    ];
-
-    expect(componentSurfaces.filter((surface) => themeSurfaces.includes(surface))).toEqual([]);
-  });
-
-  it.each([
-    ['object', {
-      position: 'absolute',
-      borderTop: '3px dashed',
-      borderColor: 'primary.main',
-    }],
-    ['callback', (currentTheme) => ({
-      position: 'absolute',
-      borderTop: '3px dashed',
-      borderColor: currentTheme.palette.primary.main,
-    })],
-    ['array', [
-      { borderTop: '2px dotted' },
-      {
-        position: 'absolute',
-        borderTop: '3px dashed',
-        borderColor: 'primary.main',
-      },
-    ]],
-  ])('lets caller %s sx override the component defaults', (_kind, sx) => {
-    const { container } = renderNav({
-      sx,
-    });
-    const navStyle = getComputedStyle(container.firstElementChild);
-
-    expect(navStyle.position).toBe('absolute');
-    expect(navStyle.borderTopWidth).toBe('3px');
-    expect(navStyle.borderTopStyle).toBe('dashed');
-    expect(navStyle.borderTopColor).toBe('rgb(15, 98, 254)');
-  });
-
-  it('preserves baseline density and label styling after the structural values move', () => {
-    renderNav();
-    const [selectedAction] = screen.getAllByRole('button');
-    const actionStyle = getComputedStyle(selectedAction);
-    const labelStyle = getComputedStyle(
-      selectedAction.querySelector('.MuiBottomNavigationAction-label'),
-    );
-
-    expect(actionStyle.minWidth).toBe('0px');
-    expect(actionStyle.maxWidth).toBe('none');
-    expect(actionStyle.paddingLeft).toBe('2px');
-    expect(actionStyle.paddingRight).toBe('2px');
-    expect(actionStyle.gap).toBe('2px');
-    expect(labelStyle.fontSize).toBe('12px');
-    expect(labelStyle.fontWeight).toBe('500');
-    expect(labelStyle.lineHeight).toBe('1.2');
-  });
-
-  it('renders nothing at and above hideAbove', () => {
-    setMediaQueryMatches((query) => query === '(min-width:900px)');
-    const { container } = renderNav();
-
-    expect(window.matchMedia).toHaveBeenCalledWith('(min-width:900px)');
-    expect(container.childElementCount).toBe(0);
-    expect(screen.queryByRole('navigation')).toBeNull();
-  });
-
-  it('declares safe-area bottom padding on the fixed bar', () => {
-    const { container } = renderNav();
-    const nav = container.firstElementChild;
-
-    expect(nav.classList.contains('MuiBottomNavigation-root')).toBe(true);
-    // jsdom drops env() declarations while parsing CSS, so assert the sx
-    // declaration before browser CSS parsing instead of a computed inset.
-    expect(MOBILE_BOTTOM_NAV_ROOT_SX.paddingBottom).toBe('env(safe-area-inset-bottom)');
-  });
-
-  it('renders the five-item, two-badge specimen at 375px and nothing at 1280px', () => {
-    const specimen = [
-      { route: '/triage', label: 'Triage', icon: Icon, badgeCount: 7 },
-      { route: '/board', label: 'Board', icon: Icon, badgeCount: 3 },
-      { route: '/chat', label: 'Chat', icon: Icon },
-      { route: '/status', label: 'Status', icon: Icon },
-      { route: '/more', label: 'More', icon: Icon, emphasis: true },
-    ];
-
-    setViewportWidth(375);
-    renderNav({ destinations: specimen, activeRoute: '/triage' });
-    expect(screen.getAllByRole('button')).toHaveLength(5);
-    expect(document.querySelectorAll('.MuiBadge-root')).toHaveLength(2);
-
-    cleanup();
-    setViewportWidth(1280);
-    renderNav({ destinations: specimen, activeRoute: '/triage' });
-    expect(screen.queryByRole('button')).toBeNull();
-  });
-});

package/tests/NotificationBell.test.jsx

@@ -1,60 +0,0 @@
-// @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';
-
-const notifications = vi.hoisted(() => ({
-  useNotifications: vi.fn(),
-}));
-const translation = vi.hoisted(() => ({
-  t: vi.fn((key) => `translated:${key}`),
-}));
-
-vi.mock('../src/notifications/NotificationsProvider', () => notifications);
-vi.mock('react-i18next', () => ({ useTranslation: () => translation }));
-
-import { NotificationBell } from '../src/notifications/NotificationBell';
-
-describe('NotificationBell', () => {
-  afterEach(() => {
-    cleanup();
-  });
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    notifications.useNotifications.mockReturnValue({
-      unreadCount: 2,
-      markSeen: vi.fn(),
-      notifications: [{
-        id: 7,
-        notification_id: 70,
-        seen: false,
-        dismissed: false,
-        content: {
-          title_key: 'domain.notification.title',
-          body_key: 'domain.notification.body',
-          params: { name: 'Ada' },
-          link: '/payments/7',
-        },
-      }],
-    });
-  });
-
-  it('renders the unread badge, translates item content, and handles item navigation', () => {
-    const resolveLink = vi.fn();
-    render(<NotificationBell resolveLink={resolveLink} />);
-
-    expect(screen.getByText('2')).toBeTruthy();
-    fireEvent.click(screen.getByRole('button', { name: 'translated:NotificationBell.TITLE' }));
-
-    expect(screen.getByText('translated:domain.notification.title')).toBeTruthy();
-    expect(screen.getByText('translated:domain.notification.body')).toBeTruthy();
-    expect(translation.t).toHaveBeenCalledWith('domain.notification.title', { name: 'Ada' });
-    expect(translation.t).toHaveBeenCalledWith('domain.notification.body', { name: 'Ada' });
-
-    fireEvent.click(screen.getByText('translated:domain.notification.title'));
-
-    expect(notifications.useNotifications.mock.results[0].value.markSeen).toHaveBeenCalledWith([7]);
-    expect(resolveLink).toHaveBeenCalledWith('/payments/7');
-  });
-});