@micha.bigler/ui-core-micha 2.35.0 → 2.37.0

package/tests/AccountPage.test.jsx

@@ -0,0 +1,193 @@
+// @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';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { MemoryRouter, Route, Routes, useLocation } from 'react-router-dom';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key, fallback) => ({
+      'Account.TITLE': 'Account & Administration',
+      'Account.PAGE_TITLE': 'Account',
+      'Account.TAB_PROFILE': 'Profile',
+      'Account.TAB_SECURITY': 'Security',
+      'Account.TAB_USERS': 'Users',
+      'Account.TAB_INVITE': 'Invite',
+      'Account.TAB_SUPPORT': 'Support',
+      'Account.GROUP_MY_ACCOUNT': 'My account',
+      'Account.GROUP_MANAGEMENT': 'Management',
+      'Account.GROUP_HELP': 'Help',
+      'Account.GROUP_MORE': 'More',
+      'SectionNav.TITLE': 'Switch section',
+      'SectionNav.TRIGGER_EYEBROW': 'Section',
+      'SectionNav.LAST_OPENED': 'Last opened',
+    }[key] ?? fallback ?? key),
+  }),
+}));
+
+vi.mock('../src/auth/authApi', () => ({
+  fetchAuthPolicy: vi.fn(() => new Promise(() => {})),
+  updateUserProfile: vi.fn(),
+}));
+
+vi.mock('../src/components/ProfileComponent', () => ({
+  ProfileComponent: () => <div>Profile content</div>,
+}));
+vi.mock('../src/components/SecurityComponent', () => ({
+  SecurityComponent: () => <div>Security content</div>,
+}));
+vi.mock('../src/components/UserListComponent', () => ({
+  UserListComponent: () => <div>Users content</div>,
+}));
+vi.mock('../src/components/UserInviteComponent', () => ({ UserInviteComponent: () => null }));
+vi.mock('../src/components/AccessCodeManager', () => ({ AccessCodeManager: () => null }));
+vi.mock('../src/components/AllowedEmailDomainsManager', () => ({ AllowedEmailDomainsManager: () => null }));
+vi.mock('../src/components/RegistrationMethodsManager', () => ({ RegistrationMethodsManager: () => null }));
+vi.mock('../src/components/AuthFactorRequirementCard', () => ({ AuthFactorRequirementCard: () => null }));
+vi.mock('../src/components/AccessCodeSingleUseToggle', () => ({ AccessCodeSingleUseToggle: () => null }));
+vi.mock('../src/components/QrSignupManager', () => ({ QrSignupManager: () => null }));
+vi.mock('../src/components/QrSignupValidityManager', () => ({ QrSignupValidityManager: () => null }));
+vi.mock('../src/components/SupportRecoveryRequestsTab', () => ({
+  SupportRecoveryRequestsTab: () => <div>Support content</div>,
+}));
+vi.mock('../src/components/BulkInviteCsvTab', () => ({ BulkInviteCsvTab: () => null }));
+
+import { AuthContext } from '../src/auth/AuthContext';
+import { AccountPage } from '../src/pages/AccountPage';
+
+const theme = createTheme();
+const superuser = {
+  email: 'admin@example.com',
+  is_superuser: true,
+  ui_permissions: {},
+  available_roles: [],
+};
+const notificationsTab = {
+  value: 'notifications',
+  label: 'Notifications',
+  render: () => <div>Notifications content</div>,
+};
+
+function setViewportWidth(width) {
+  window.matchMedia = vi.fn().mockImplementation((query) => {
+    const maxWidth = query.match(/max-width:(\d+(?:\.\d+)?)px/)?.[1];
+    const minWidth = query.match(/min-width:(\d+(?:\.\d+)?)px/)?.[1];
+    const matches = maxWidth
+      ? width <= Number(maxWidth)
+      : minWidth
+        ? width >= Number(minWidth)
+        : false;
+    return {
+      matches,
+      media: query,
+      onchange: null,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    };
+  });
+}
+
+function LocationProbe() {
+  const location = useLocation();
+  return <output data-testid="location-search">{location.search}</output>;
+}
+
+function renderAccount({ user = superuser, route = '/account', extraTabs = [notificationsTab] } = {}) {
+  return render(
+    <ThemeProvider theme={theme}>
+      <AuthContext.Provider value={{ user, login: vi.fn(), loading: false }}>
+        <MemoryRouter initialEntries={[route]}>
+          <Routes>
+            <Route
+              path="/account"
+              element={(
+                <>
+                  <AccountPage extraTabs={extraTabs} />
+                  <LocationProbe />
+                </>
+              )}
+            />
+          </Routes>
+        </MemoryRouter>
+      </AuthContext.Provider>
+    </ThemeProvider>,
+  );
+}
+
+describe('AccountPage section navigation', () => {
+  beforeEach(() => setViewportWidth(375));
+
+  afterEach(() => {
+    cleanup();
+    vi.restoreAllMocks();
+  });
+
+  it('makes all six cockpit-shaped sections reachable at 375px without a horizontal strip', () => {
+    const { container } = renderAccount();
+    const trigger = screen.getByRole('button', { name: /Section Profile/i });
+
+    expect(container.querySelector('.MuiTabs-root')).toBeNull();
+    expect(getComputedStyle(trigger).width).toBe('100%');
+    fireEvent.click(trigger);
+
+    const sectionButtons = ['Profile', 'Security', 'Users', 'Invite', 'Support', 'Notifications']
+      .map((label) => screen.getByRole('button', { name: label }));
+    expect(sectionButtons).toHaveLength(6);
+    sectionButtons.forEach((item) => {
+      expect(getComputedStyle(item).position).not.toBe('absolute');
+    });
+    expect(document.documentElement.scrollWidth - document.documentElement.clientWidth).toBe(0);
+  });
+
+  it('keeps the ?tab= contract and updates it when a drawer item is selected', () => {
+    renderAccount({ route: '/account?tab=notifications' });
+
+    expect(screen.getByText('Notifications content')).toBeTruthy();
+    const trigger = screen.getByRole('button', { name: /Section Notifications/i });
+    fireEvent.click(trigger);
+    fireEvent.click(screen.getByRole('button', { name: 'Security' }));
+
+    expect(screen.getByText('Security content')).toBeTruthy();
+    expect(screen.getByTestId('location-search').textContent).toBe('?tab=security');
+  });
+
+  it('keeps permission-gated sections absent and falls an unpermitted query back to profile', () => {
+    renderAccount({
+      user: {
+        email: 'person@example.com',
+        is_superuser: false,
+        ui_permissions: {},
+        available_roles: [],
+      },
+      route: '/account?tab=users',
+      extraTabs: [],
+    });
+
+    expect(screen.getByText('Profile content')).toBeTruthy();
+    const trigger = screen.getByRole('button', { name: /Section Profile/i });
+    fireEvent.click(trigger);
+    expect(screen.getByRole('button', { name: 'Profile' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Security' })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: 'Users' })).toBeNull();
+    expect(screen.queryByRole('button', { name: 'Invite' })).toBeNull();
+    expect(screen.queryByRole('button', { name: 'Support' })).toBeNull();
+    expect(screen.queryByText('Management')).toBeNull();
+    expect(screen.queryByText('Help')).toBeNull();
+    expect(screen.queryByText('More')).toBeNull();
+  });
+
+  it('uses the desktop grouped grid at 1280px with no tab strip left behind', () => {
+    setViewportWidth(1280);
+    const { container } = renderAccount();
+    const grid = container.querySelector('[data-section-nav-mode="desktop"]');
+
+    expect(grid).toBeTruthy();
+    expect(getComputedStyle(grid).gridTemplateColumns).toBe('280px minmax(0, 1fr)');
+    expect(container.querySelector('.MuiTabs-root')).toBeNull();
+    expect(container.querySelector('nav')).toBeTruthy();
+  });
+});

package/tests/SectionNav.test.jsx

@@ -0,0 +1,274 @@
+// @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>,
+  );
+}
+
+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('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.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 });
+    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('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);
+    });
+  });
+});

package/tests/i18nAggregate.test.js

@@ -0,0 +1,121 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('@mui/icons-material', () => ({
+  Archive: () => null,
+  Campaign: () => null,
+  Groups: () => null,
+  MoreVert: () => null,
+  NotificationsOff: () => null,
+  Person: () => null,
+}));
+
+import {
+  authTranslations as publicAuthTranslations,
+  chartsTranslations as publicChartsTranslations,
+  messagingTranslations as publicMessagingTranslations,
+  notificationsTranslations as publicNotificationsTranslations,
+  onboardingTranslations as publicOnboardingTranslations,
+  sectionNavTranslations as publicSectionNavTranslations,
+  uiCoreTranslations,
+  userMenuTranslations as publicUserMenuTranslations,
+} from '../src/index';
+
+const I18N_DIRECTORY = path.resolve('src/i18n');
+// Scoped to the three locales every bundle already carries. `messagingTranslations`'s 116 keys
+// have no `sw` value yet (pre-existing gap, out of I18N-1's scope — see the Notiz on the
+// I18N-1 register row for the tracked follow-up to backfill it and restore `sw` here).
+const REQUIRED_LOCALES = ['de', 'en', 'fr'];
+const bundleImporters = import.meta.glob('../src/i18n/*.ts');
+const PUBLIC_BUNDLES = {
+  authTranslations: publicAuthTranslations,
+  chartsTranslations: publicChartsTranslations,
+  messagingTranslations: publicMessagingTranslations,
+  notificationsTranslations: publicNotificationsTranslations,
+  onboardingTranslations: publicOnboardingTranslations,
+  sectionNavTranslations: publicSectionNavTranslations,
+  userMenuTranslations: publicUserMenuTranslations,
+};
+
+function bundleFileNames() {
+  return fs.readdirSync(I18N_DIRECTORY, { withFileTypes: true })
+    .filter((entry) => entry.isFile() && entry.name.endsWith('.ts'))
+    .map((entry) => entry.name)
+    .sort();
+}
+
+async function loadBundles() {
+  return Promise.all(bundleFileNames().map(async (fileName) => {
+    const modulePath = `../src/i18n/${fileName}`;
+    const importBundle = bundleImporters[modulePath];
+    if (!importBundle) {
+      throw new Error(`${fileName} was enumerated from src/i18n but has no module importer`);
+    }
+
+    const bundleModule = await importBundle();
+    const translationExports = Object.entries(bundleModule)
+      .filter(([exportName]) => exportName.endsWith('Translations'));
+
+    if (Object.keys(bundleModule).length !== 1 || translationExports.length !== 1) {
+      throw new Error(`${fileName} must export exactly one *Translations bundle`);
+    }
+
+    const [[exportName, translations]] = translationExports;
+    return { exportName, fileName, translations };
+  }));
+}
+
+describe('uiCoreTranslations', () => {
+  it('contains every directory-enumerated bundle key with its original value', async () => {
+    const bundles = await loadBundles();
+    const sourceKeys = [];
+
+    for (const { fileName, translations } of bundles) {
+      for (const [key, value] of Object.entries(translations)) {
+        sourceKeys.push(key);
+        expect(
+          Object.hasOwn(uiCoreTranslations, key),
+          `${key} from ${fileName} is missing from the public aggregate`,
+        ).toBe(true);
+        expect(uiCoreTranslations[key]).toEqual(value);
+      }
+    }
+
+    expect(Object.keys(uiCoreTranslations).sort()).toEqual(sourceKeys.sort());
+  });
+
+  it('does not allow duplicate keys across source bundles', async () => {
+    const owners = new Map();
+    const collisions = [];
+
+    for (const { fileName, translations } of await loadBundles()) {
+      for (const key of Object.keys(translations)) {
+        if (owners.has(key)) {
+          collisions.push(`${key}: ${owners.get(key)} and ${fileName}`);
+        } else {
+          owners.set(key, fileName);
+        }
+      }
+    }
+
+    expect(collisions, `Translation key collisions:\n${collisions.join('\n')}`).toEqual([]);
+  });
+
+  it('preserves at least the required locale shape for every aggregate value', () => {
+    for (const [key, value] of Object.entries(uiCoreTranslations)) {
+      for (const locale of REQUIRED_LOCALES) {
+        expect(typeof value[locale], `${key}.${locale} must be a string`).toBe('string');
+        expect(value[locale].trim(), `${key}.${locale} must not be empty`).not.toBe('');
+      }
+    }
+  });
+
+  it('keeps every per-feature bundle available unchanged from the package root', async () => {
+    for (const { exportName, translations } of await loadBundles()) {
+      expect(PUBLIC_BUNDLES[exportName], `${exportName} must remain a public export`)
+        .toBe(translations);
+    }
+  });
+});