@micha.bigler/ui-core-micha 3.6.0 → 3.8.0

package/tests/UserListComponent.test.jsx

@@ -0,0 +1,85 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+const authApi = vi.hoisted(() => ({
+  fetchUsersList: vi.fn(),
+  updateUserRole: vi.fn(),
+  deleteUser: vi.fn(),
+}));
+
+vi.mock('../src/auth/authApi', () => authApi);
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key, fallback) => ({
+      'UserList.TITLE': 'All Users',
+      'Common.SEARCH': 'Search',
+      'UserList.SEARCH_PLACEHOLDER': 'Search users...',
+      'Auth.EMAIL_LABEL': 'Email',
+      'Profile.NAME_LABEL': 'Name',
+      'UserList.ROLE': 'Role',
+      'UserList.ROLE_UPDATE_SUCCESS': 'Role updated.',
+      'Auth.USER_ROLE_UPDATE_FAILED': 'Role update failed.',
+      'UserList.NO_USERS': 'No users found.',
+    }[key] ?? (typeof fallback === 'string' ? fallback : key)),
+  }),
+}));
+
+import { UserListComponent } from '../src/components/UserListComponent';
+
+const currentUser = { id: 99, is_superuser: true, role: 'admin' };
+const user = { id: 1, email: 'person@example.com', role: 'student' };
+
+function renderUserList() {
+  return render(
+    <UserListComponent
+      currentUser={currentUser}
+      showNewColumn={false}
+      showSuccessfulLoginColumn={false}
+      showDeleteAction={false}
+    />,
+  );
+}
+
+async function chooseRole(role) {
+  fireEvent.mouseDown(screen.getAllByRole('combobox')[0]);
+  await waitFor(() => expect(screen.getByRole('listbox')).toBeTruthy());
+  fireEvent.click(screen.getByRole('option', { name: role }));
+}
+
+describe('UserListComponent role updates', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    authApi.fetchUsersList.mockResolvedValue([user]);
+    authApi.updateUserRole.mockResolvedValue({});
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.restoreAllMocks();
+  });
+
+  it('confirms a successful role update', async () => {
+    const alert = vi.spyOn(window, 'alert').mockImplementation(() => {});
+    renderUserList();
+
+    await waitFor(() => expect(screen.getAllByRole('combobox')[0]).toBeTruthy());
+    await chooseRole('teacher');
+
+    await waitFor(() => expect(authApi.updateUserRole).toHaveBeenCalledWith(1, 'teacher'));
+    expect(alert).toHaveBeenCalledWith('Role updated.');
+  });
+
+  it('keeps the failure feedback when a role update fails', async () => {
+    authApi.updateUserRole.mockRejectedValue({ code: 'Auth.USER_ROLE_UPDATE_FAILED' });
+    const alert = vi.spyOn(window, 'alert').mockImplementation(() => {});
+    renderUserList();
+
+    await waitFor(() => expect(screen.getAllByRole('combobox')[0]).toBeTruthy());
+    await chooseRole('teacher');
+
+    await waitFor(() => expect(alert).toHaveBeenCalledWith('Role update failed.'));
+    expect(authApi.fetchUsersList).toHaveBeenCalledTimes(1);
+  });
+});

package/tests/UserMenu.test.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 const translation = vi.hoisted(() => ({
   t: vi.fn((key) => `translated:${key}`),
@@ -11,15 +12,26 @@ vi.mock('react-i18next', () => ({ useTranslation: () => translation }));
 
 import { AuthContext } from '../src/auth/AuthContext';
 import { UserMenu } from '../src/auth/UserMenu';
+import { calculateContrastRatio, createAppTheme } from '../src/theme';
 
-function renderUserMenu({ user, logout = vi.fn(), ...props } = {}) {
+const defaultTheme = createAppTheme({ palette: { primary: { main: createTheme().palette.primary.main } } });
+
+function renderUserMenu({ user, logout = vi.fn(), theme = defaultTheme, ...props } = {}) {
   return render(
-    <AuthContext.Provider value={{ user, logout }}>
-      <UserMenu {...props} />
-    </AuthContext.Provider>,
+    <ThemeProvider theme={theme}>
+      <AuthContext.Provider value={{ user, logout }}>
+        <UserMenu {...props} />
+      </AuthContext.Provider>
+    </ThemeProvider>,
   );
 }
 
+function getAvatarContrast() {
+  const avatar = screen.getByText(/^[A-Z]+$/).closest('.MuiAvatar-root');
+  const styles = window.getComputedStyle(avatar);
+  return calculateContrastRatio(styles.color, styles.backgroundColor);
+}
+
 describe('UserMenu', () => {
   afterEach(() => {
     cleanup();
@@ -132,4 +144,28 @@ describe('UserMenu', () => {
     renderUserMenu({ user: { username: 'grace' } });
     expect(screen.getByText('G')).toBeTruthy();
   });
+
+  it("uses a contrasting avatar pair with jg-ferien's primary colour", () => {
+    const theme = createAppTheme({ palette: { primary: { main: '#367964' } } });
+    renderUserMenu({ theme, user: { username: 'ab' } });
+
+    expect(getAvatarContrast()).toBeGreaterThanOrEqual(4.5);
+  });
+
+  it('uses a contrasting avatar pair with the library baseline primary colour', () => {
+    renderUserMenu({ user: { username: 'ab' } });
+
+    expect(getAvatarContrast()).toBeGreaterThanOrEqual(4.5);
+  });
+
+  it('falls back to the dark text pair for a medium-luminance primary colour', () => {
+    // A synthetic mid-grey (luminance ~0.216, no real brand meaning) picked to
+    // fail white-on-background at 4.5:1 (~3.95:1) so this test actually
+    // exercises the black-fallback branch, not just the white branch every
+    // other test here happens to land on.
+    const theme = createAppTheme({ palette: { primary: { main: '#808080' } } });
+    renderUserMenu({ theme, user: { username: 'ab' } });
+
+    expect(getAvatarContrast()).toBeGreaterThanOrEqual(4.5);
+  });
 });

package/tests/createAppThemePageContrast.test.js

@@ -0,0 +1,108 @@
+import { describe, expect, it } from 'vitest';
+
+import { assertThemeComplete, createAppTheme } from '../src/theme';
+import { BASELINE_PALETTE } from '../src/theme/tokens';
+
+const primary = { main: '#0F62FE' };
+const pageBackgrounds = [
+  '#FAFAFA',
+  '#D8E4E1',
+  '#eceae2',
+  '#E8EAF6',
+  '#E6EAF0',
+  '#E398C7',
+];
+
+function pageContrastFindings(theme) {
+  return assertThemeComplete(theme).findings.filter(({ surface }) => (
+    /^contrast\.(success|warning|error|info)\.main-on-(white|page)$/.test(surface)
+      || surface.startsWith('contrast.controlBorder.')
+  ));
+}
+
+describe('createAppTheme page-sensitive baseline contrast', () => {
+  it.each(pageBackgrounds)('derives baseline colours for page %s', (background) => {
+    const theme = createAppTheme({ palette: { primary, background: { default: background } } });
+
+    expect(pageContrastFindings(theme)).toEqual([]);
+  });
+
+  it('keeps all baseline values byte-identical when they already pass', () => {
+    const theme = createAppTheme({ palette: { primary } });
+
+    for (const status of ['success', 'warning', 'error', 'info']) {
+      expect(theme.palette[status]).toMatchObject({
+        main: BASELINE_PALETTE[status].main,
+        light: BASELINE_PALETTE[status].light,
+        dark: BASELINE_PALETTE[status].dark,
+        contrastText: BASELINE_PALETTE[status].contrastText,
+      });
+    }
+    for (const state of ['main', 'hover', 'error']) {
+      expect(theme.palette.controlBorder[state]).toBe(BASELINE_PALETTE.controlBorder[state]);
+    }
+  });
+
+  it('leaves app-supplied failing status and control-border values untouched', () => {
+    const appConfig = {
+      palette: {
+        primary,
+        background: { default: '#E398C7' },
+        success: { main: '#A5D6A7' },
+        warning: { main: '#FFE082' },
+        controlBorder: { main: '#FFFFFF', hover: '#FAFAFA', error: '#FFCDD2' },
+      },
+    };
+    const theme = createAppTheme(appConfig);
+    const findings = assertThemeComplete(theme).findings.map(({ surface }) => surface);
+
+    expect(theme.palette.success.main).toBe(appConfig.palette.success.main);
+    expect(theme.palette.warning.main).toBe(appConfig.palette.warning.main);
+    expect(theme.palette.controlBorder.main).toBe(appConfig.palette.controlBorder.main);
+    expect(theme.palette.controlBorder.hover).toBe(appConfig.palette.controlBorder.hover);
+    expect(theme.palette.controlBorder.error).toBe(appConfig.palette.controlBorder.error);
+    for (const surface of [
+      'contrast.success.main-on-white',
+      'contrast.success.main-on-page',
+      'contrast.warning.main-on-white',
+      'contrast.warning.main-on-page',
+      'contrast.controlBorder.main-on-white',
+      'contrast.controlBorder.main-on-page',
+      'contrast.controlBorder.hover-on-white',
+      'contrast.controlBorder.hover-on-page',
+      'contrast.controlBorder.error-on-white',
+      'contrast.controlBorder.error-on-page',
+    ]) {
+      expect(findings).toContain(surface);
+    }
+
+    // The two untouched status keys (error/info) -- both fail on ygbs's pink
+    // per the Envelope's measured table -- must still derive normally, proving
+    // rule 3 is checked per status key, not per whole-status-object: this
+    // config only overrides success/warning, so error/info stay baseline-owned
+    // and should move off their baseline hex and stop failing.
+    expect(theme.palette.error.main).not.toBe(BASELINE_PALETTE.error.main);
+    expect(theme.palette.info.main).not.toBe(BASELINE_PALETTE.info.main);
+    expect(findings).not.toContain('contrast.error.main-on-page');
+    expect(findings).not.toContain('contrast.info.main-on-page');
+  });
+
+  it('terminates and leaves findings when the darkening cap cannot pass', () => {
+    const create = () => createAppTheme({
+      palette: { primary, background: { default: '#666666' } },
+    });
+
+    expect(create).not.toThrow();
+    const theme = create();
+    expect(theme.palette.success.main).toBeDefined();
+    expect(theme.palette.warning.main).toBeDefined();
+    expect(theme.palette.error.main).toBeDefined();
+    expect(theme.palette.info.main).toBeDefined();
+    expect(theme.palette.controlBorder.main).toBeDefined();
+    expect(theme.palette.controlBorder.hover).toBeDefined();
+    expect(theme.palette.controlBorder.error).toBeDefined();
+    expect(assertThemeComplete(theme).findings.map(({ surface }) => surface)).toContain(
+      'contrast.success.main-on-page',
+    );
+  });
+});

package/tests/i18nGermanVariant.test.js

@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest';
+
+import { authTranslations } from '../src/i18n/authTranslations';
+import {
+  createUiCoreTranslations,
+  uiCoreTranslations,
+} from '../src/i18n/uiCoreTranslations';
+
+const SIE_FORM = /\b(Sie|Ihr|Ihre|Ihrem|Ihren|Ihrer|Ihres)\b/;
+const REQUIRED_LOCALES = ['de', 'en', 'fr', 'sw'];
+
+describe('German translation variants', () => {
+  it('keeps formal German by default and switches representative auth copy to du', () => {
+    const key = 'Auth.PAGE_INVITE_SUBTITLE';
+    const formal = createUiCoreTranslations();
+    const informal = createUiCoreTranslations({ germanVariant: 'informal' });
+
+    expect(formal[key].de).toBe(uiCoreTranslations[key].de);
+    expect(formal[key]).not.toHaveProperty('de_informal');
+    expect(informal[key].de).toBe('Bitte wähle ein Passwort, um auf dein Konto zuzugreifen.');
+    expect(informal[key].de).not.toMatch(SIE_FORM);
+    expect(informal['Auth.EMAIL_LABEL'].de).toBe(formal['Auth.EMAIL_LABEL'].de);
+  });
+
+  it('switches EVERY Sie-form key to its own rewritten de_informal, not one hardcoded example', () => {
+    // Not just one representative key -- a factory hardcoded to a single
+    // (key, value) pair would pass the test above but fail here the moment a
+    // second Sie-form key is checked against ITS OWN de_informal value.
+    const formalKeys = Object.entries(authTranslations)
+      .filter(([, value]) => SIE_FORM.test(value.de))
+      .map(([key]) => key);
+    expect(formalKeys.length).toBeGreaterThan(1);
+
+    const informal = createUiCoreTranslations({ germanVariant: 'informal' });
+    const formal = createUiCoreTranslations();
+    for (const key of formalKeys) {
+      expect(informal[key].de, `${key} should switch to its own de_informal`).toBe(authTranslations[key].de_informal);
+      expect(informal[key].de).not.toMatch(SIE_FORM);
+      expect(formal[key].de, `${key} default must stay formal`).toBe(authTranslations[key].de);
+    }
+  });
+
+  it('requires every Sie-form auth string to have a rewritten informal variant', () => {
+    const formalKeys = Object.entries(authTranslations)
+      .filter(([, value]) => SIE_FORM.test(value.de))
+      .map(([key]) => key);
+
+    expect(formalKeys.length).toBeGreaterThan(0);
+    for (const key of formalKeys) {
+      const informal = authTranslations[key].de_informal;
+      expect(informal, `${key} needs de_informal`).toEqual(expect.any(String));
+      expect(informal.trim(), `${key}.de_informal must not be empty`).not.toBe('');
+      expect(informal, `${key}.de_informal must not retain Sie-form`).not.toMatch(SIE_FORM);
+    }
+  });
+
+  it('preserves the four-locale shape for the aggregate after adding screen keys', () => {
+    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('');
+      }
+    }
+  });
+});

package/tests/messagingComposer.test.jsx

@@ -108,4 +108,29 @@ describe('Composer optimistic send and attachments', () => {
     render(<MessagingProvider api={api} active={false}><AttachmentList attachments={[{ id: 1, filename: 'note.pdf', content_type: 'application/pdf' }]} /></MessagingProvider>);
     expect(screen.getByLabelText('MessagingAttachments.LABEL')).toBeTruthy();
   });
+
+  it('keeps the message field and send button usable beside all enabled actions', () => {
+    render(<MessagingProvider api={makeApi()} active={false}><Composer conversationId={7} conversation={{ kind: 'group' }} allowAnnouncement /></MessagingProvider>);
+    const messageField = screen.getByLabelText('MessagingComposer.MESSAGE');
+    const messageFieldRoot = messageField.closest('.MuiFormControl-root');
+    expect(messageFieldRoot).toBeTruthy();
+    expect(window.getComputedStyle(messageFieldRoot).minWidth).toBe('120px');
+    const sendButton = screen.getByRole('button', { name: 'MessagingComposer.SEND' });
+    expect(window.getComputedStyle(sendButton).flexShrink).toBe('0');
+    expect(screen.getByRole('button', { name: 'MessagingComposer.ADD_ATTACHMENT' }).disabled).toBe(false);
+    expect(screen.getByRole('button', { name: 'MessagingComposer.ADD_EMOJI' }).disabled).toBe(false);
+    expect(screen.getByRole('button', { name: 'MessagingPoll.CREATE' }).disabled).toBe(false);
+    expect(screen.getByRole('button', { name: 'MessagingAnnouncement.CREATE' }).disabled).toBe(false);
+
+    // Structural proof, not just a CSS-value check: the action icons and the
+    // message field/send button must sit in DIFFERENT Stack rows, not merely
+    // carry different sx values while still being flex siblings in one row
+    // (a same-row layout with only the sx tweaks would still pass every
+    // assertion above without actually fixing the 375px overflow).
+    const attachButton = screen.getByRole('button', { name: 'MessagingComposer.ADD_ATTACHMENT' });
+    const actionsRow = attachButton.closest('.MuiStack-root');
+    expect(actionsRow).toBeTruthy();
+    expect(actionsRow.contains(messageField)).toBe(false);
+    expect(actionsRow.contains(sendButton)).toBe(false);
+  });
 });

package/tests/messagingLinkify.test.jsx

@@ -0,0 +1,51 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+
+vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key) => key, i18n: { language: 'en' } }) }));
+vi.mock('../src/notifications/realtime', () => ({ useRealtime: () => ({ subscribe: () => () => {}, onReconnect: () => () => {} }) }));
+
+import { MessageBubble } from '../src/messaging/MessageBubble';
+import { MessagingProvider } from '../src/messaging/MessagingProvider';
+
+function makeApi() {
+  return {
+    getReadStatus: vi.fn().mockResolvedValue({ all_read: false }),
+    getAttachment: vi.fn(), getAttachmentThumbnail: vi.fn(), addReaction: vi.fn(), removeReaction: vi.fn(),
+    votePoll: vi.fn(), closePoll: vi.fn(),
+  };
+}
+function renderMessage(body) {
+  return render(<MessagingProvider api={makeApi()} active={false}><MessageBubble message={{ id: 1, body, sender: { display_name: 'Ava' } }} conversation={{ kind: 'group' }} /></MessagingProvider>);
+}
+
+afterEach(cleanup);
+
+describe('message URL linkification', () => {
+  it('renders http(s) URLs as safe external links', () => {
+    renderMessage('Open https://example.com/path for details.');
+    const link = screen.getByRole('link', { name: 'https://example.com/path' });
+    expect(link.getAttribute('href')).toBe('https://example.com/path');
+    expect(link.getAttribute('target')).toBe('_blank');
+    expect(link.getAttribute('rel')).toBe('noopener noreferrer');
+  });
+
+  it('does not turn javascript URLs into links', () => {
+    renderMessage('javascript:alert(1)');
+    expect(screen.queryByRole('link')).toBeNull();
+    expect(screen.getByText('javascript:alert(1)')).toBeTruthy();
+  });
+
+  it('leaves surrounding prose outside the link and trims sentence punctuation', () => {
+    const { container } = renderMessage('See https://example.com/path, then continue reading.');
+    const link = screen.getByRole('link');
+    expect(link.textContent).toBe('https://example.com/path');
+    // MUI's `Link` itself carries a `MuiTypography-root` class (it is a
+    // Typography variant), so `.closest('.MuiTypography-root')` would match
+    // the link, not its containing paragraph -- `.closest('p')` skips past it
+    // to the actual message-body Typography (MUI's default root tag for the
+    // unvaried `body1` variant used here).
+    expect(link.closest('p').textContent).toBe('See https://example.com/path, then continue reading.');
+  });
+});

package/tests/messagingReadTicksTooltip.test.jsx

@@ -0,0 +1,36 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { act, cleanup, render, screen, waitFor } from '@testing-library/react';
+
+vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key, options) => options?.read != null ? `${key}:${options.read}/${options.total}` : key }) }));
+vi.mock('../src/notifications/realtime', () => ({ useRealtime: () => ({ subscribe: () => () => {}, onReconnect: () => () => {} }) }));
+
+import { MessagingProvider } from '../src/messaging/MessagingProvider';
+import { ReadTicks } from '../src/messaging/ReadTicks';
+
+function makeApi(status) {
+  return {
+    getReadStatus: vi.fn().mockResolvedValue(status),
+    getAttachment: vi.fn(), getAttachmentThumbnail: vi.fn(), addReaction: vi.fn(), removeReaction: vi.fn(),
+    votePoll: vi.fn(), closePoll: vi.fn(),
+  };
+}
+
+afterEach(cleanup);
+
+describe('message read ratio marker', () => {
+  it('gives the visible ratio an explanatory tooltip', async () => {
+    render(<MessagingProvider api={makeApi({ read_count: 2, recipient_count: 5 })} active={false}><ReadTicks messageId={7} conversation={{ kind: 'group' }} /></MessagingProvider>);
+    expect(await screen.findByTitle('MessagingReadTicks.READ_RATIO:2/5')).toBeTruthy();
+  });
+
+  it('hides a ratio when there are no recipients', async () => {
+    let resolveStatus;
+    const api = { ...makeApi({}), getReadStatus: vi.fn().mockReturnValue(new Promise((resolve) => { resolveStatus = resolve; })) };
+    const { container } = render(<MessagingProvider api={api} active={false}><ReadTicks messageId={7} conversation={{ kind: 'group' }} /></MessagingProvider>);
+    await waitFor(() => expect(api.getReadStatus).toHaveBeenCalled());
+    await act(async () => resolveStatus({ read_count: 0, recipient_count: 0 }));
+    expect(container.textContent).toBe('');
+  });
+});

package/tests/userScreenTranslations.test.jsx

@@ -0,0 +1,165 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import i18next from 'i18next';
+
+const authApi = vi.hoisted(() => ({
+  deleteUser: vi.fn(),
+  fetchUsersList: vi.fn(),
+  sendAdminInvite: vi.fn(),
+  updateUserRole: vi.fn(),
+}));
+
+vi.mock('../src/auth/authApi', () => authApi);
+
+import { authTranslations } from '../src/i18n/authTranslations';
+import { BulkInviteCsvTab } from '../src/components/BulkInviteCsvTab';
+import { UserInviteComponent } from '../src/components/UserInviteComponent';
+import { UserListComponent } from '../src/components/UserListComponent';
+
+const germanResources = Object.fromEntries(
+  Object.entries(authTranslations).map(([key, value]) => [key, value.de]),
+);
+const i18n = i18next.createInstance();
+i18n.init({
+  lng: 'de',
+  fallbackLng: 'de',
+  resources: { de: { translation: germanResources } },
+  keySeparator: false,
+  nsSeparator: false,
+  interpolation: { escapeValue: false },
+});
+
+const ENGLISH_DEFAULTS = [
+  'All Users',
+  'Search',
+  'Search users...',
+  'Rows per page:',
+  'Successful Login',
+  'Are you sure you want to delete this user?',
+  'Invite a new user',
+  'Bulk Invite via CSV',
+  'Upload a CSV file containing email addresses. Header "email" is supported.',
+  'Upload CSV',
+  'Send Invites',
+  'Invitation sent.',
+];
+
+function withGermanI18n(children) {
+  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
+}
+
+function expectNoEnglishDefaults() {
+  const text = document.body.textContent;
+  for (const english of ENGLISH_DEFAULTS) {
+    expect(text).not.toContain(english);
+  }
+}
+
+describe('German user and invite screen translations', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    authApi.fetchUsersList.mockResolvedValue([
+      {
+        id: 1,
+        email: 'person@example.com',
+        first_name: 'Ada',
+        role: 'student',
+        is_new: true,
+        successful_login: true,
+      },
+    ]);
+    authApi.sendAdminInvite.mockResolvedValue({});
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders the empty-list and CSV-error strings in German too', async () => {
+    authApi.fetchUsersList.mockResolvedValue([]);
+    render(withGermanI18n(<UserListComponent currentUser={{ id: 99, is_superuser: true, role: 'admin' }} />));
+    await waitFor(() => expect(screen.getByText('Keine Benutzer gefunden.')).toBeTruthy());
+
+    cleanup();
+
+    render(withGermanI18n(<BulkInviteCsvTab inviteFn={vi.fn()} />));
+    const fileInput = document.querySelector('input[type="file"]');
+    fireEvent.change(fileInput, {
+      target: { files: [new File([''], 'empty.csv', { type: 'text/csv' })] },
+    });
+    await waitFor(() => expect(screen.getByText('Keine gültigen E-Mail-Adressen in der CSV-Datei gefunden.')).toBeTruthy());
+    expectNoEnglishDefaults();
+  });
+
+  it('renders UserListComponent in German, including pagination and action feedback', async () => {
+    const confirm = vi.spyOn(window, 'confirm').mockReturnValue(false);
+    const alert = vi.spyOn(window, 'alert').mockImplementation(() => {});
+
+    render(withGermanI18n(
+      <UserListComponent
+        currentUser={{ id: 99, is_superuser: true, role: 'admin' }}
+        extraRowActions={[{
+          key: 'failing-action',
+          label: 'Aktion',
+          onClick: () => Promise.reject({}),
+        }]}
+      />,
+    ));
+
+    await waitFor(() => expect(screen.getByText('Alle Benutzer')).toBeTruthy());
+    expect(screen.getByLabelText('Suche')).toBeTruthy();
+    expect(screen.getByPlaceholderText('Benutzer suchen...')).toBeTruthy();
+    for (const german of ['Neu', 'Erfolgreiche Anmeldung', 'Rolle', 'Aktionen', 'Zeilen pro Seite:', 'Löschen']) {
+      expect(screen.getByText(german)).toBeTruthy();
+    }
+
+    fireEvent.click(screen.getByRole('button', { name: 'Löschen' }));
+    expect(confirm).toHaveBeenCalledWith('Möchten Sie diesen Benutzer wirklich löschen?');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Aktion' }));
+    await waitFor(() => expect(alert).toHaveBeenCalledWith('Vorgang fehlgeschlagen.'));
+    expectNoEnglishDefaults();
+  });
+
+  it('renders UserInviteComponent in German and translates the success message', async () => {
+    render(withGermanI18n(<UserInviteComponent />));
+
+    expect(screen.getByText('Neuen Benutzer einladen')).toBeTruthy();
+    fireEvent.change(screen.getByLabelText('E-Mail-Adresse'), {
+      target: { value: 'new@example.com' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'Einladen' }));
+
+    await waitFor(() => expect(screen.getByText('Einladung gesendet.')).toBeTruthy());
+    expectNoEnglishDefaults();
+  });
+
+  it('renders BulkInviteCsvTab in German with translated progress and table copy', async () => {
+    render(withGermanI18n(
+      <BulkInviteCsvTab inviteFn={vi.fn().mockResolvedValue({})} />,
+    ));
+
+    expect(screen.getByText('Masseneinladung per CSV')).toBeTruthy();
+    expect(screen.getByText('CSV-Datei mit E-Mail-Adressen hochladen. Header "email" wird unterstützt.')).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'CSV hochladen' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Einladungen senden' })).toBeTruthy();
+
+    const fileInput = document.querySelector('input[type="file"]');
+    fireEvent.change(fileInput, {
+      target: { files: [new File(['email\nperson@example.com'], 'users.csv', { type: 'text/csv' })] },
+    });
+    await waitFor(() => expect(screen.getByText('1 E-Mail-Adressen geladen')).toBeTruthy());
+
+    fireEvent.click(screen.getByRole('button', { name: 'Einladungen senden' }));
+    await waitFor(() => expect(screen.getByText('1 / 1 Einladungen gesendet.')).toBeTruthy());
+    for (const german of ['Einladung gesendet.', 'Erfolgreich', 'Status', 'Details']) {
+      expect(screen.getByText(german)).toBeTruthy();
+    }
+    expect(document.body.textContent).toContain('1 / 1 verarbeitet');
+    expect(document.body.textContent).toContain('1 erfolgreich');
+    expectNoEnglishDefaults();
+  });
+});