@micha.bigler/ui-core-micha 2.32.0 → 2.33.1

package/tests/MobileBottomNav.test.jsx

@@ -0,0 +1,319 @@
+// @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/createAppTheme.test.js

@@ -1,7 +1,7 @@
 import { createTheme } from '@mui/material/styles';
 import { describe, expect, it } from 'vitest';
 
-import { assertThemeComplete, createAppTheme } from '../src/index';
+import { assertThemeComplete, createAppTheme } from '../src/theme';
 import { BASELINE_STATIC } from '../src/theme/tokens';
 
 describe('createAppTheme', () => {
@@ -12,6 +12,27 @@ describe('createAppTheme', () => {
     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.components.MuiBottomNavigationAction.styleOverrides.label).toMatchObject({
+      fontSize: '12px',
+      fontWeight: 500,
+      lineHeight: 1.2,
+      maxWidth: '100%',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      '&.Mui-selected': { fontSize: '12px' },
+    });
+    expect(theme.components.MuiBottomNavigationAction.styleOverrides.root).toMatchObject({
+      padding: '0 2px',
+      gap: '2px',
+      '& .MuiSvgIcon-root': { width: '22px', height: '22px' },
+    });
+    expect(theme.components.MuiBottomNavigation.styleOverrides.root).not.toHaveProperty('borderTop');
+    expect(theme.components.MuiBottomNavigation.styleOverrides.root).not.toHaveProperty('borderColor');
+    expect(theme.components.MuiBottomNavigationAction.styleOverrides.root)
+      .not.toHaveProperty('minWidth');
+    expect(theme.components.MuiBottomNavigationAction.styleOverrides.root)
+      .not.toHaveProperty('maxWidth');
     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

package/tests/themeCompleteness.test.js

@@ -5,7 +5,8 @@ import {
   assertThemeComplete,
   calculateContrastRatio,
   createAppTheme,
-} from '../src/index';
+  THEME_COMPLETENESS_SURFACES,
+} from '../src/theme';
 
 describe('theme completeness', () => {
   it('finds untouched MUI surfaces and accepts createAppTheme', () => {
@@ -19,9 +20,55 @@ describe('theme completeness', () => {
     expect(assertThemeComplete(createTheme({ components: { MuiButton: {} } })).findings
       .map(({ surface }) => surface))
       .toContain('components.MuiButton.styleOverrides.root.minHeight');
+    expect(bare.findings.map(({ surface }) => surface)).toEqual(expect.arrayContaining([
+      'components.MuiBottomNavigation.styleOverrides.root.boxShadow',
+      'components.MuiBottomNavigation.styleOverrides.root.backgroundColor',
+      'components.MuiBottomNavigationAction.styleOverrides.root.padding',
+      'components.MuiBottomNavigationAction.styleOverrides.root.gap',
+      'components.MuiBottomNavigationAction.styleOverrides.root.& .MuiSvgIcon-root.width',
+      'components.MuiBottomNavigationAction.styleOverrides.root.& .MuiSvgIcon-root.height',
+      'components.MuiBottomNavigationAction.styleOverrides.root.color',
+      'components.MuiBottomNavigationAction.styleOverrides.label.fontSize',
+      'components.MuiBottomNavigationAction.styleOverrides.label.fontWeight',
+      'components.MuiBottomNavigationAction.styleOverrides.label.lineHeight',
+      'components.MuiBottomNavigationAction.styleOverrides.label.maxWidth',
+      'components.MuiBottomNavigationAction.styleOverrides.label.whiteSpace',
+      'components.MuiBottomNavigationAction.styleOverrides.label.overflow',
+      'components.MuiBottomNavigationAction.styleOverrides.label.textOverflow',
+      'components.MuiBottomNavigationAction.styleOverrides.label.&.Mui-selected.fontSize',
+      'components.MuiBottomNavigationAction.styleOverrides.root.&.Mui-selected.color',
+    ]));
     expect(baseline.findings).toEqual([]);
   });
 
+  it('keeps the narrowed bottom-navigation inventory complete', () => {
+    const bottomNavigationSurfaces = THEME_COMPLETENESS_SURFACES
+      .map(({ surface }) => surface)
+      .filter((surface) => surface.startsWith('components.MuiBottomNavigation'));
+
+    expect(bottomNavigationSurfaces).toHaveLength(16);
+    [
+      'components.MuiBottomNavigation.styleOverrides.root.borderTop',
+      'components.MuiBottomNavigation.styleOverrides.root.borderColor',
+      'components.MuiBottomNavigationAction.styleOverrides.root.minWidth',
+      'components.MuiBottomNavigationAction.styleOverrides.root.maxWidth',
+    ].forEach((surface) => expect(bottomNavigationSurfaces).not.toContain(surface));
+  });
+
+  it('ignores a valid exemption for a deregistered surface', () => {
+    const result = assertThemeComplete(
+      createAppTheme({ palette: { primary: { main: '#0F62FE' } } }),
+      {
+        exemptions: [{
+          surface: 'components.MuiBottomNavigation.styleOverrides.root.borderTop',
+          reason: 'Legacy exemption retained while the application upgrades.',
+        }],
+      },
+    );
+
+    expect(result.findings).toEqual([]);
+  });
+
   it('suppresses exactly one surface when an exemption includes a reason', () => {
     const theme = createTheme();
     const before = assertThemeComplete(theme).findings;