@micha.bigler/ui-core-micha 3.14.3 → 4.0.0

package/tests/ScatterChart.test.jsx

@@ -1,270 +0,0 @@
-// @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 } from '@mui/material/styles';
-
-const scatterSpy = vi.hoisted(() => vi.fn(({ children }) => <div data-testid="mui-scatter">{children}</div>));
-vi.mock('@mui/x-charts/ScatterChart', () => ({ ScatterChart: scatterSpy }));
-vi.mock('@mui/x-charts/hooks', () => ({
-  useXScale: () => (v) => v * 10,
-  useYScale: () => (v) => 100 - v * 10,
-}));
-
-import {
-  ScatterChart,
-  ScatterReferenceCurve,
-  ScatterReferenceLine,
-  scaleBubbleRadius,
-} from '../src/components/charts/ScatterChart';
-import { createAppTheme } from '../src/theme/createAppTheme';
-
-const theme = createAppTheme({ palette: { primary: { main: '#3D5A99' } } });
-const i18n = i18next.createInstance();
-i18n.init({ lng: 'en', resources: { en: { translation: {} } }, interpolation: { escapeValue: false } });
-
-function withProviders(children) {
-  return React.createElement(
-    ThemeProvider,
-    { theme },
-    React.createElement(I18nextProvider, { i18n }, children),
-  );
-}
-
-function renderScatter(props = {}) {
-  return render(withProviders(
-    React.createElement(ScatterChart, {
-      series: [{ id: 's', data: [{ x: 1, y: 1 }] }],
-      ...props,
-    }),
-  ));
-}
-
-// THEME-10 -- the formula the access-gap panel already hand-rolls
-// (`max(3, 10*sqrt(pop/maxPop))`), pinned as a pure function.
-describe('scaleBubbleRadius', () => {
-  it('matches the access-panel formula across the domain', () => {
-    expect(scaleBubbleRadius(0, 100)).toBe(3);
-    expect(scaleBubbleRadius(100, 100)).toBe(10);
-    expect(scaleBubbleRadius(25, 100)).toBeCloseTo(5, 5);
-  });
-
-  it('floors at the minimum radius for a degenerate or non-finite input', () => {
-    expect(scaleBubbleRadius(5, 0)).toBe(3);
-    expect(scaleBubbleRadius(NaN, 100)).toBe(3);
-    expect(scaleBubbleRadius(5, NaN)).toBe(3);
-  });
-});
-
-describe('ScatterChart mark count and colour default (THEME-10)', () => {
-  afterEach(() => { cleanup(); vi.clearAllMocks(); });
-
-  // The failure mode nobody sees: a scatter that silently drops points.
-  it('renders every supplied point, none dropped', () => {
-    renderScatter({ series: [{ id: 's', data: [{ x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 3 }] }] });
-    expect(scatterSpy.mock.calls.at(-1)[0].series[0].data).toHaveLength(3);
-  });
-
-  it('defaults a single undifferentiated series to the neutral role colour, not a series hue', () => {
-    renderScatter();
-    expect(scatterSpy.mock.calls.at(-1)[0].colors).toEqual([theme.palette.text.secondary]);
-  });
-
-  it('uses the categorical palette, not the neutral tone, once a caller supplies multiple series', () => {
-    renderScatter({
-      series: [
-        { id: 'a', data: [{ x: 1, y: 1 }] },
-        { id: 'b', data: [{ x: 2, y: 2 }] },
-      ],
-    });
-    const { colors } = scatterSpy.mock.calls.at(-1)[0];
-    expect(colors).not.toEqual([theme.palette.text.secondary]);
-    expect(colors.length).toBeGreaterThan(1);
-  });
-
-  it('lets a caller override the palette explicitly (e.g. a family/role register)', () => {
-    renderScatter({ palette: ['#ABCDEF'] });
-    expect(scatterSpy.mock.calls.at(-1)[0].colors).toEqual(['#ABCDEF']);
-  });
-
-  // reviewer/ui_reviewer U3: a single series that sets its OWN colour is not "undifferentiated"
-  // -- the neutral default only applies when nothing else specifies a colour. This pins that
-  // ScatterChart itself never strips or overrides a series' own `.color` (MUI's own resolution
-  // of series.color vs. the colors fallback array is MUI's own contract, out of scope here --
-  // same boundary BarChart.test.jsx already draws for the identical `colors={palette ||
-  // neutralPalette.categorical}` pattern).
-  it('leaves a single series\' own explicit colour untouched and does not treat it as neutral', () => {
-    renderScatter({ series: [{ id: 's', color: '#123456', data: [{ x: 1, y: 1 }] }] });
-    const props = scatterSpy.mock.calls.at(-1)[0];
-    expect(props.series[0].color).toBe('#123456');
-    expect(props.colors).not.toEqual([theme.palette.text.secondary]);
-  });
-});
-
-describe('ScatterChart bubble z-order (THEME-10)', () => {
-  afterEach(() => { cleanup(); vi.clearAllMocks(); });
-
-  it('sorts each series largest-first when sizeAccessor is set, so a small bubble is never hidden under a large one', () => {
-    renderScatter({
-      sizeAccessor: (p) => p.pop,
-      series: [{ id: 's', data: [{ x: 1, y: 1, pop: 10 }, { x: 2, y: 2, pop: 500 }, { x: 3, y: 3, pop: 100 }] }],
-    });
-    const data = scatterSpy.mock.calls.at(-1)[0].series[0].data;
-    expect(data.map((p) => p.pop)).toEqual([500, 100, 10]);
-  });
-
-  it('leaves point order untouched outside bubble mode', () => {
-    const original = [{ x: 1, y: 1 }, { x: 2, y: 2 }];
-    renderScatter({ series: [{ id: 's', data: original }] });
-    expect(scatterSpy.mock.calls.at(-1)[0].series[0].data).toEqual(original);
-  });
-});
-
-describe('ScatterChart per-point marker style (THEME-10)', () => {
-  afterEach(() => { cleanup(); vi.clearAllMocks(); });
-
-  it('renders a hollow marker (fill: none) only for the point getPointStyle marks hollow', () => {
-    renderScatter({
-      getPointStyle: (p) => (p.isStatusQuo ? { hollow: true } : {}),
-      series: [{ id: 's', data: [{ x: 1, y: 1, isStatusQuo: true }, { x: 2, y: 2, isStatusQuo: false }] }],
-    });
-    const Marker = scatterSpy.mock.calls.at(-1)[0].slots.marker;
-    const markerProps = { seriesId: 's', color: '#111', x: 0, y: 0, isHighlighted: false, isFaded: false, size: 5 };
-
-    const hollow = render(React.createElement(Marker, { ...markerProps, dataIndex: 0 }));
-    const filled = render(React.createElement(Marker, { ...markerProps, dataIndex: 1 }));
-
-    expect(hollow.container.querySelector('circle').getAttribute('fill')).toBe('none');
-    expect(filled.container.querySelector('circle').getAttribute('fill')).toBe('#111');
-  });
-
-  it('sizes a bubble marker from sizeAccessor via scaleBubbleRadius, resolved against the POST-sort index', () => {
-    renderScatter({
-      sizeAccessor: (p) => p.pop,
-      series: [{ id: 's', data: [{ x: 1, y: 1, pop: 0 }, { x: 2, y: 2, pop: 100 }] }],
-    });
-    const Marker = scatterSpy.mock.calls.at(-1)[0].slots.marker;
-    const markerProps = { seriesId: 's', color: '#111', x: 0, y: 0, isHighlighted: false, isFaded: false, size: 5 };
-
-    // Data was re-sorted largest-first: index 0 is now pop:100, index 1 is pop:0.
-    const big = render(React.createElement(Marker, { ...markerProps, dataIndex: 0 }));
-    const small = render(React.createElement(Marker, { ...markerProps, dataIndex: 1 }));
-
-    expect(Number(big.container.querySelector('circle').getAttribute('r'))).toBeCloseTo(10, 5);
-    expect(Number(small.container.querySelector('circle').getAttribute('r'))).toBe(3);
-  });
-
-  // Live-render caught regression: bubble sizing must share ONE max across every series (a
-  // single comparable scale, matching the access-gap panel's own
-  // `maxPop = Math.max(1, ...points.map(p => p.population))` over ALL points regardless of
-  // division/settlement) -- a per-series max would let each series' own largest point always
-  // render at full radius, making cross-series bubble size meaningless.
-  it('sizes bubbles against ONE chart-wide max across all series, not a max per series', () => {
-    renderScatter({
-      sizeAccessor: (p) => p.pop,
-      series: [
-        { id: 'small-series', data: [{ x: 1, y: 1, pop: 100 }] },
-        { id: 'big-series', data: [{ x: 2, y: 2, pop: 1000 }] },
-      ],
-    });
-    const props = scatterSpy.mock.calls.at(-1)[0];
-    const Marker = props.slots.marker;
-    const markerProps = { color: '#111', x: 0, y: 0, isHighlighted: false, isFaded: false, size: 5 };
-
-    // If sized per-series, "small-series"'s own only point (pop:100) would be its own series
-    // max and render at full radius (10) -- wrongly implying it's as large as big-series's point.
-    const smallSeriesPoint = render(React.createElement(Marker, { ...markerProps, seriesId: 'small-series', dataIndex: 0 }));
-    const bigSeriesPoint = render(React.createElement(Marker, { ...markerProps, seriesId: 'big-series', dataIndex: 0 }));
-
-    const smallR = Number(smallSeriesPoint.container.querySelector('circle').getAttribute('r'));
-    const bigR = Number(bigSeriesPoint.container.querySelector('circle').getAttribute('r'));
-    expect(bigR).toBeCloseTo(10, 5);
-    expect(smallR).toBeCloseTo(10 * Math.sqrt(100 / 1000), 5);
-    expect(smallR).toBeLessThan(bigR);
-  });
-
-  it('renders a square/diamond shape when getPointStyle requests one', () => {
-    renderScatter({
-      getPointStyle: (p) => ({ shape: p.shape }),
-      series: [{ id: 's', data: [{ x: 1, y: 1, shape: 'square' }, { x: 2, y: 2, shape: 'diamond' }] }],
-    });
-    const Marker = scatterSpy.mock.calls.at(-1)[0].slots.marker;
-    const markerProps = { seriesId: 's', color: '#111', x: 0, y: 0, isHighlighted: false, isFaded: false, size: 5 };
-
-    const square = render(React.createElement(Marker, { ...markerProps, dataIndex: 0 }));
-    const diamond = render(React.createElement(Marker, { ...markerProps, dataIndex: 1 }));
-
-    expect(square.container.querySelector('rect')).not.toBeNull();
-    expect(diamond.container.querySelector('polygon')).not.toBeNull();
-  });
-});
-
-describe('ScatterReferenceCurve / ScatterReferenceLine (THEME-10)', () => {
-  it('draws a path through the curve points using the chart\'s own live scale', () => {
-    const { container } = render(React.createElement(ScatterReferenceCurve, {
-      points: [{ x: 0, y: 0 }, { x: 1, y: 1 }],
-      color: '#222',
-    }));
-    expect(container.querySelector('path').getAttribute('d')).toBe('M0,100 L10,90');
-  });
-
-  it('draws a labelled reference line at the given label position', () => {
-    const { container } = render(React.createElement(ScatterReferenceLine, {
-      from: { x: 0, y: 0 },
-      to: { x: 1, y: 1 },
-      label: 'No gap',
-      labelAt: { x: 0.9, y: 0.9 },
-      color: '#222',
-    }));
-    expect(container.querySelector('line')).not.toBeNull();
-    expect(container.textContent).toBe('No gap');
-  });
-
-  it('draws an unlabelled reference line when no label is given', () => {
-    const { container } = render(React.createElement(ScatterReferenceLine, {
-      from: { x: 0, y: 0 },
-      to: { x: 1, y: 1 },
-      color: '#222',
-    }));
-    expect(container.querySelector('line')).not.toBeNull();
-    expect(container.querySelector('text')).toBeNull();
-  });
-});
-
-// UCM-CHART-12: `size`/`height` resolution, wired through the actual component. Replaces the
-// deleted `minHeight`/`aspect` CHART-8 trio.
-describe('ScatterChart size/height resolution (UCM-CHART-12, UCM-CHART-15)', () => {
-  afterEach(() => { cleanup(); vi.clearAllMocks(); });
-
-  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) => {
-    renderScatter({ size });
-    expect(scatterSpy.mock.calls.at(-1)[0].height).toBe(px);
-    expect(window.getComputedStyle(screen.getByTestId('scatter-chart-container')).height).toBe(`${px}px`);
-  });
-
-  it('lets height override size entirely, as the documented escape', () => {
-    renderScatter({ size: 'tall', height: 280 });
-    expect(scatterSpy.mock.calls.at(-1)[0].height).toBe(280);
-    expect(window.getComputedStyle(screen.getByTestId('scatter-chart-container')).height).toBe('280px');
-  });
-
-  it('throws in dev when a caller still passes minHeight, naming the replacement', () => {
-    expect(() => renderScatter({ minHeight: 300 })).toThrow(/size=.*standard.*tall/);
-  });
-
-  it('throws in dev when a caller still passes aspect, naming the removal', () => {
-    expect(() => renderScatter({ aspect: 1.8 })).toThrow(/aspect/);
-  });
-
-  it('throws in dev when a caller still passes margin, naming the removal', () => {
-    expect(() => renderScatter({ margin: { top: 1 } })).toThrow(/margin/);
-  });
-});

package/tests/SectionNav.test.jsx

@@ -1,363 +0,0 @@
-// @vitest-environment jsdom
-import React from 'react';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-
-const translation = vi.hoisted(() => ({
-  t: vi.fn((key) => ({
-    'SectionNav.TITLE': 'Switch section',
-    'SectionNav.TRIGGER_EYEBROW': 'Section',
-    'SectionNav.LAST_OPENED': 'Last opened',
-  }[key] ?? key)),
-}));
-
-vi.mock('react-i18next', () => ({ useTranslation: () => translation }));
-
-import {
-  SECTION_NAV_DRAWER_PAPER_SX,
-  SectionNav,
-} from '../src/layout/SectionNav';
-import { sectionNavTranslations } from '../src/i18n/sectionNavTranslations';
-import { createAppTheme } from '../src/theme/createAppTheme';
-
-const groups = [
-  {
-    key: 'account',
-    label: 'My account',
-    items: [
-      { key: 'profile', label: 'Profile' },
-      { key: 'security', label: 'Security' },
-    ],
-  },
-  {
-    key: 'management',
-    label: 'Management',
-    items: [
-      { key: 'users', label: 'Users' },
-      { key: 'invite', label: 'Invite' },
-    ],
-  },
-  {
-    key: 'help',
-    label: 'Help',
-    items: [{ key: 'support', label: 'Support' }],
-  },
-  {
-    key: 'more',
-    label: 'More',
-    items: [{ key: 'notifications', label: 'Notifications' }],
-  },
-];
-
-const theme = createAppTheme({ palette: { primary: { main: '#0F62FE' } } });
-
-function renderNav(props = {}, currentTheme = theme) {
-  return render(
-    <ThemeProvider theme={currentTheme}>
-      <SectionNav
-        mode="desktop"
-        groups={groups}
-        activeKey="profile"
-        onSelect={vi.fn()}
-        {...props}
-      >
-        <div data-testid="section-content">Section content</div>
-      </SectionNav>
-    </ThemeProvider>,
-  );
-}
-
-function expectListsToContainListItemButtons(lists) {
-  expect(lists.length).toBeGreaterThan(0);
-  lists.forEach((list) => {
-    expect(Array.from(list.children).every((child) => child.tagName === 'LI')).toBe(true);
-    expect(list.querySelectorAll(':scope > li')).toHaveLength(list.children.length);
-    list.querySelectorAll(':scope > li').forEach((item) => {
-      expect(item.querySelectorAll(':scope > .MuiListItemButton-root')).toHaveLength(1);
-    });
-  });
-}
-
-describe('SectionNav', () => {
-  afterEach(() => {
-    cleanup();
-    vi.clearAllMocks();
-  });
-
-  it('renders finished group and item labels in order, one section per item', () => {
-    renderNav();
-
-    expect(screen.getAllByRole('button').map((item) => item.textContent)).toEqual([
-      'Profile',
-      'Security',
-      'Users',
-      'Invite',
-      'Support',
-      'Notifications',
-    ]);
-    expect(screen.getAllByText(/My account|Management|Help|More/).map((item) => item.textContent))
-      .toEqual(['My account', 'Management', 'Help', 'More']);
-  });
-
-  it('selects exactly the matching item, tolerates no match, and selects an optional overview for null', () => {
-    const { rerender } = renderNav({ activeKey: 'users', overviewItem: { label: 'Overview' } });
-    const selected = () => screen.getAllByRole('button')
-      .filter((item) => item.classList.contains('Mui-selected'));
-
-    expect(selected()).toHaveLength(1);
-    expect(selected()[0].textContent).toBe('Users');
-
-    rerender(
-      <ThemeProvider theme={theme}>
-        <SectionNav
-          mode="desktop"
-          groups={groups}
-          activeKey="missing"
-          overviewItem={{ label: 'Overview' }}
-          onSelect={vi.fn()}
-        />
-      </ThemeProvider>,
-    );
-    expect(selected()).toHaveLength(0);
-
-    rerender(
-      <ThemeProvider theme={theme}>
-        <SectionNav
-          mode="desktop"
-          groups={groups}
-          activeKey={null}
-          overviewItem={{ label: 'Overview' }}
-          onSelect={vi.fn()}
-        />
-      </ThemeProvider>,
-    );
-    expect(selected()).toHaveLength(1);
-    expect(selected()[0].textContent).toBe('Overview');
-  });
-
-  it('omits overview and remembered UI completely when those props are absent', () => {
-    const { container } = renderNav();
-
-    expect(screen.queryByText('Overview')).toBeNull();
-    expect(screen.queryByText('Last opened')).toBeNull();
-    expect(container.querySelectorAll('.MuiPaper-root')).toHaveLength(groups.length);
-  });
-
-  it('renders overview and grouped controls inside list items on desktop and mobile', () => {
-    const overviewItem = { label: 'Overview' };
-    const { container } = renderNav({ overviewItem });
-
-    expectListsToContainListItemButtons(container.querySelectorAll('nav ul'));
-    expect(container.querySelectorAll('nav ul')).toHaveLength(groups.length + 1);
-
-    cleanup();
-    renderNav({ mode: 'mobile', overviewItem, open: true });
-    const dialog = screen.getByRole('dialog', { name: 'Switch section' });
-    const lists = dialog.querySelectorAll('ul');
-
-    expectListsToContainListItemButtons(lists);
-    expect(lists).toHaveLength(groups.length + 1);
-  });
-
-  it('passes null for overview selection and closes the mobile drawer', async () => {
-    const onSelect = vi.fn();
-    renderNav({ mode: 'mobile', onSelect, overviewItem: { label: 'Overview' } });
-
-    fireEvent.click(screen.getByRole('button', { name: /Section Profile/i }));
-    expect(screen.getByRole('dialog', { name: 'Switch section' })).toBeTruthy();
-    fireEvent.click(screen.getByRole('button', { name: 'Overview' }));
-
-    expect(onSelect).toHaveBeenCalledOnce();
-    expect(onSelect).toHaveBeenCalledWith(null);
-    await waitFor(() => expect(screen.queryByRole('dialog', { name: 'Switch section' })).toBeNull());
-  });
-
-  it('shows the remembered secondary line only on its unselected item', () => {
-    renderNav({ activeKey: 'profile', rememberedKey: 'security' });
-    expect(screen.getByText('Last opened')).toBeTruthy();
-
-    cleanup();
-    renderNav({ activeKey: 'security', rememberedKey: 'security' });
-    expect(screen.queryByText('Last opened')).toBeNull();
-  });
-
-  it('calls onSelect with the item key and closes the uncontrolled drawer', async () => {
-    const onSelect = vi.fn();
-    renderNav({ mode: 'mobile', onSelect });
-
-    const trigger = screen.getByRole('button', { name: /Section Profile/i });
-    expect(trigger).toBeTruthy();
-    expect(trigger.getAttribute('aria-expanded')).toBe('false');
-    fireEvent.click(trigger);
-    expect(trigger.getAttribute('aria-expanded')).toBe('true');
-
-    fireEvent.click(screen.getByRole('button', { name: 'Security' }));
-    expect(onSelect).toHaveBeenCalledOnce();
-    expect(onSelect).toHaveBeenCalledWith('security');
-    expect(trigger.getAttribute('aria-expanded')).toBe('false');
-    await waitFor(() => expect(screen.queryByRole('button', { name: 'Security' })).toBeNull());
-  });
-
-  it('defers to the caller in controlled mode: the trigger calls onOpen, not internal state', () => {
-    const onOpen = vi.fn();
-    const onClose = vi.fn();
-    const { rerender } = renderNav({ mode: 'mobile', open: false, onOpen, onClose });
-
-    const trigger = screen.getByRole('button', { name: /Section Profile/i });
-    expect(trigger).toBeTruthy();
-    fireEvent.click(trigger);
-
-    expect(onOpen).toHaveBeenCalledOnce();
-    expect(trigger.getAttribute('aria-expanded')).toBe('false');
-    expect(screen.queryByRole('button', { name: 'Security' })).toBeNull();
-
-    rerender(
-      <ThemeProvider theme={theme}>
-        <SectionNav
-          mode="mobile"
-          groups={groups}
-          activeKey="profile"
-          onSelect={vi.fn()}
-          open
-          onOpen={onOpen}
-          onClose={onClose}
-        >
-          <div data-testid="section-content">Section content</div>
-        </SectionNav>
-      </ThemeProvider>,
-    );
-    expect(trigger.getAttribute('aria-expanded')).toBe('true');
-    expect(screen.getByRole('button', { name: 'Security' })).toBeTruthy();
-  });
-
-  it('omits a dead controlled trigger while keeping children and the caller-driven drawer', () => {
-    const { rerender } = renderNav({ mode: 'mobile', open: false });
-
-    expect(screen.queryByRole('button', { name: /Section Profile/i })).toBeNull();
-    expect(screen.getByTestId('section-content')).toBeTruthy();
-    expect(screen.queryByRole('dialog', { name: 'Switch section' })).toBeNull();
-
-    rerender(
-      <ThemeProvider theme={theme}>
-        <SectionNav
-          mode="mobile"
-          groups={groups}
-          activeKey="profile"
-          onSelect={vi.fn()}
-          open
-        >
-          <div data-testid="section-content">Section content</div>
-        </SectionNav>
-      </ThemeProvider>,
-    );
-
-    expect(screen.queryByRole('button', { name: /Section Profile/i })).toBeNull();
-    expect(screen.getByTestId('section-content')).toBeTruthy();
-    expect(screen.getByRole('dialog', { name: 'Switch section' })).toBeTruthy();
-    expect(screen.getByRole('button', { name: 'Security' })).toBeTruthy();
-  });
-
-  it('keeps the desktop sidebar and children for every open/onOpen combination', () => {
-    const propCombinations = [
-      {},
-      { open: false, onOpen: vi.fn() },
-      { open: false },
-    ];
-
-    propCombinations.forEach((props) => {
-      const { container } = renderNav(props);
-
-      expect(container.querySelector('[data-section-nav-mode="desktop"]')).toBeTruthy();
-      expect(container.querySelector('nav')).toBeTruthy();
-      expect(screen.getByTestId('section-content')).toBeTruthy();
-      expect(screen.queryByRole('button', { name: /Section Profile/i })).toBeNull();
-      expect(document.querySelector('.MuiDrawer-root')).toBeNull();
-
-      cleanup();
-    });
-  });
-
-  it('renders the desktop sidebar and children in a two-column grid, while mobile renders a trigger and no sidebar', () => {
-    const { container } = renderNav({ sidebarWidth: 312 });
-    const desktopRoot = container.querySelector('[data-section-nav-mode="desktop"]');
-
-    expect(desktopRoot).toBeTruthy();
-    expect(getComputedStyle(desktopRoot).display).toBe('grid');
-    expect(getComputedStyle(desktopRoot).gridTemplateColumns).toBe('312px minmax(0, 1fr)');
-    expect(container.querySelector('nav')).toBeTruthy();
-    expect(screen.getByTestId('section-content')).toBeTruthy();
-
-    cleanup();
-    const mobile = renderNav({ mode: 'mobile' });
-    expect(screen.getByRole('button', { name: /Section Profile/i })).toBeTruthy();
-    expect(mobile.container.querySelector('nav')).toBeNull();
-    expect(mobile.container.querySelector('[data-section-nav-mode="desktop"]')).toBeNull();
-    expect(screen.getByTestId('section-content')).toBeTruthy();
-  });
-
-  it('resolves the default drawer z-index above the SHELL-3 bottom bar', () => {
-    renderNav({ mode: 'mobile' });
-    fireEvent.click(screen.getByRole('button', { name: /Section Profile/i }));
-    const drawer = document.querySelector('.MuiDrawer-root');
-    const drawerZIndex = Number(getComputedStyle(drawer).zIndex);
-
-    expect(drawerZIndex).toBe(theme.zIndex.drawer + 3);
-    expect(drawerZIndex).toBeGreaterThan(theme.zIndex.drawer + 2);
-  });
-
-  it('follows surface and divider tokens under both createAppTheme and plain MUI themes', () => {
-    const themes = [
-      createAppTheme({
-        palette: {
-          primary: { main: '#123456' },
-          background: { paper: '#F1F2F3' },
-          divider: '#445566',
-        },
-      }),
-      createTheme({
-        palette: {
-          primary: { main: '#654321' },
-          background: { paper: '#E7E8E9' },
-          divider: '#665544',
-        },
-      }),
-    ];
-    const expected = [
-      { surface: 'rgb(241, 242, 243)', divider: 'rgb(68, 85, 102)' },
-      { surface: 'rgb(231, 232, 233)', divider: 'rgb(102, 85, 68)' },
-    ];
-
-    themes.forEach((currentTheme, index) => {
-      const { container } = renderNav({}, currentTheme);
-      const groupPaper = container.querySelector('.MuiPaper-root');
-      const groupHeader = groupPaper.querySelector('[id]');
-
-      expect(getComputedStyle(groupPaper).backgroundColor).toBe(expected[index].surface);
-      expect(getComputedStyle(groupHeader).borderBottomColor).toBe(expected[index].divider);
-      cleanup();
-    });
-  });
-
-  it('keeps the promoted drawer dimensions and safe-area declaration', () => {
-    expect(SECTION_NAV_DRAWER_PAPER_SX).toMatchObject({
-      borderTopLeftRadius: 18,
-      borderTopRightRadius: 18,
-      maxHeight: '78dvh',
-      p: 2,
-      pb: 'max(16px, env(safe-area-inset-bottom))',
-    });
-  });
-
-  it('ships every component-owned chrome string in all supported locales', () => {
-    expect(Object.keys(sectionNavTranslations)).toEqual([
-      'SectionNav.TITLE',
-      'SectionNav.TRIGGER_EYEBROW',
-      'SectionNav.LAST_OPENED',
-    ]);
-    Object.values(sectionNavTranslations).forEach((translations) => {
-      expect(Object.keys(translations)).toEqual(['de', 'fr', 'en', 'sw']);
-      expect(Object.values(translations).every(Boolean)).toBe(true);
-    });
-  });
-});