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

package/tests/i18nAggregate.test.js

@@ -1,120 +0,0 @@
-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,
-  chatTranslations as publicChatTranslations,
-  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');
-const REQUIRED_LOCALES = ['de', 'en', 'fr', 'sw'];
-const bundleImporters = import.meta.glob('../src/i18n/*.ts');
-const PUBLIC_BUNDLES = {
-  authTranslations: publicAuthTranslations,
-  chartsTranslations: publicChartsTranslations,
-  chatTranslations: publicChatTranslations,
-  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);
-    }
-  });
-});

package/tests/i18nGermanVariant.test.js

@@ -1,65 +0,0 @@
-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/loginPageErrorResolution.test.jsx

@@ -1,102 +0,0 @@
-// @vitest-environment jsdom
-import React from 'react';
-import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
-import { I18nextProvider } from 'react-i18next';
-import i18next from 'i18next';
-import { MemoryRouter } from 'react-router-dom';
-
-const authApi = vi.hoisted(() => ({
-  fetchRecoverySessionToken: vi.fn(),
-  loginWithPassword: vi.fn(),
-  loginWithRecoveryPassword: vi.fn(),
-}));
-
-vi.mock('../src/auth/authApi', () => authApi);
-vi.mock('../src/utils/authService', () => ({
-  loginWithPasskey: vi.fn(),
-  startSocialLogin: vi.fn(),
-}));
-vi.mock('react-helmet', () => ({ Helmet: ({ children }) => <>{children}</> }));
-
-import { authTranslations } from '../src/i18n/authTranslations';
-import { AuthContext } from '../src/auth/AuthContext';
-import { LoginPage } from '../src/pages/LoginPage';
-
-const translations = Object.fromEntries(
-  Object.entries(authTranslations).map(([key, value]) => [key, value.en]),
-);
-const i18n = i18next.createInstance();
-
-beforeAll(async () => {
-  await i18n.init({
-    lng: 'en',
-    fallbackLng: 'en',
-    resources: { en: { translation: translations } },
-    keySeparator: false,
-    nsSeparator: false,
-    interpolation: { escapeValue: false },
-  });
-});
-
-beforeEach(() => {
-  authApi.loginWithPassword.mockRejectedValue({
-    response: {
-      data: {
-        errors: [{
-          message: 'Gib eine gültige E-Mail Adresse an.',
-          code: 'invalid',
-          param: 'email',
-        }],
-      },
-    },
-  });
-});
-
-afterEach(() => {
-  cleanup();
-  vi.clearAllMocks();
-});
-
-function renderLoginPage() {
-  return render(
-    <I18nextProvider i18n={i18n}>
-      <MemoryRouter initialEntries={['/login']}>
-        <AuthContext.Provider value={{
-          user: null,
-          loading: false,
-          login: vi.fn(),
-          authMethods: {
-            password_login: true,
-            password_reset: false,
-            signup: false,
-            signup_modes: [],
-            social_login: false,
-            passkey_login: false,
-          },
-        }}>
-          <LoginPage />
-        </AuthContext.Provider>
-      </MemoryRouter>
-    </I18nextProvider>,
-  );
-}
-
-describe('LoginPage error resolution', () => {
-  it('shows the email field translation for the exact allauth invalid-email response', async () => {
-    renderLoginPage();
-
-    fireEvent.change(screen.getByRole('textbox', { name: new RegExp(authTranslations['Auth.EMAIL_LABEL'].en) }), {
-      target: { value: 'not-an-email@example.com' },
-    });
-    fireEvent.change(screen.getByLabelText(new RegExp(authTranslations['Auth.LOGIN_PASSWORD_LABEL'].en)), {
-      target: { value: 'password' },
-    });
-    fireEvent.click(screen.getByRole('button', { name: authTranslations['Auth.PAGE_LOGIN_TITLE'].en }));
-
-    await waitFor(() => {
-      expect(screen.getByText(authTranslations['Auth.field.email.invalid'].en)).toBeTruthy();
-    });
-    expect(screen.queryByText('invalid')).toBeNull();
-  });
-});

package/tests/messagingApi.test.js

@@ -1,32 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-
-const client = vi.hoisted(() => ({ get: vi.fn(), post: vi.fn(), patch: vi.fn(), delete: vi.fn() }));
-vi.mock('../src/auth/apiClient', () => ({ default: client }));
-
-import * as api from '../src/messaging/api';
-
-const response = { data: { ok: true } };
-beforeEach(() => { vi.clearAllMocks(); Object.values(client).forEach((method) => method.mockResolvedValue(response)); });
-
-describe('messaging API contract', () => {
-  it('uses the published conversations and message routes', async () => {
-    await api.listConversations({ scope_kind: 'container', cursor: 'opaque' });
-    await api.createDirectConversation({ target_user_id: 8 });
-    await api.createGroupConversation({ title: 'Group' }); await api.createBroadcastConversation({}); await api.createManagedConversation({}); await api.createObjectThreadConversation({});
-    await api.getConversationConfig(1); await api.patchConversationConfig(1, {}); await api.archiveConversation(1, true); await api.patchConversationPreferences(1, {});
-    await api.listMessages(1, { cursor: 'opaque' }); await api.createMessage(1, { body: 'x' }, { idempotencyKey: 'key' }); await api.uploadAttachments(1, new FormData()); await api.createPoll(1, {});
-    expect(client.get).toHaveBeenCalledWith('/api/messaging/conversations/', { params: { scope_kind: 'container', cursor: 'opaque' } });
-    expect(client.post).toHaveBeenCalledWith('/api/messaging/conversations/direct/', { target_user_id: 8 });
-    expect(client.post).toHaveBeenCalledWith('/api/messaging/conversations/1/messages/', { body: 'x' }, { headers: { 'Idempotency-Key': 'key' } });
-    expect(client.get).toHaveBeenCalledWith('/api/messaging/conversations/1/messages/', { params: { cursor: 'opaque' } });
-  });
-
-  it('uses the published detail, receipt, poll and attachment routes', async () => {
-    await api.getMessage(2); await api.patchMessage(2, {}); await api.deleteMessage(2); await api.addReaction(2, '👍'); await api.removeReaction(2, '👍');
-    await api.listThread(2, { cursor: 'opaque' }); await api.markThreadRead(2); await api.markConversationRead(3); await api.getReadStatus(2); await api.votePoll(4, [5]); await api.closePoll(4); await api.getAttachment(6); await api.getAttachmentThumbnail(6); await api.getUnreadCount();
-    expect(client.delete).toHaveBeenCalledWith('/api/messaging/messages/2/reactions/%F0%9F%91%8D/');
-    expect(client.get).toHaveBeenCalledWith('/api/messaging/messages/2/thread/', { params: { cursor: 'opaque' } });
-    expect(client.post).toHaveBeenCalledWith('/api/messaging/conversations/3/read/', {});
-    expect(client.get).toHaveBeenCalledWith('/api/messaging/unread-count/');
-  });
-});

package/tests/messagingChunk6.test.jsx

@@ -1,116 +0,0 @@
-// @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';
-
-// Thread.jsx (MSG-6f scope C) now subscribes to the messaging envelope
-// independently of MessagingProvider's own subscription -- a Set of handlers,
-// not a single captured variable, so frameHandler(...) still reaches every
-// current subscriber, matching the real registry's multi-handler support.
-let frameHandlers;
-function frameHandler(frame) { frameHandlers.forEach((handler) => handler(frame)); }
-vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key, options) => options?.count != null ? `${key}:${options.count}` : key, i18n: { language: 'en' } }) }));
-vi.mock('../src/notifications/realtime', () => ({ useRealtime: () => ({ subscribe: (_envelope, handler) => { frameHandlers.add(handler); return () => frameHandlers.delete(handler); }, onReconnect: () => () => {} }) }));
-
-import { Composer } from '../src/messaging/Composer';
-import { ConversationList } from '../src/messaging/ConversationList';
-import { MessageBubble } from '../src/messaging/MessageBubble';
-import { MessagingProvider } from '../src/messaging/MessagingProvider';
-import { ReadTicks } from '../src/messaging/ReadTicks';
-import { Thread } from '../src/messaging/Thread';
-
-function makeApi(overrides = {}) {
-  return {
-    listConversations: vi.fn().mockResolvedValue({ results: [] }),
-    listMessages: vi.fn().mockResolvedValue({ results: [] }),
-    listThread: vi.fn().mockResolvedValue({ results: [] }),
-    getUnreadCount: vi.fn().mockResolvedValue({ unread_count: 0, by_conversation: {} }),
-    getReadStatus: vi.fn().mockResolvedValue({ all_read: false }),
-    markConversationRead: vi.fn().mockResolvedValue({}), markThreadRead: vi.fn().mockResolvedValue({}),
-    createPoll: vi.fn().mockResolvedValue({}),
-    ...overrides,
-  };
-}
-
-beforeEach(() => { frameHandlers = new Set(); });
-afterEach(() => { cleanup(); vi.useRealTimers(); vi.restoreAllMocks(); frameHandlers = new Set(); });
-
-describe('MSG-3b chunk 6', () => {
-  it('renders localized relative list timestamps for now, minutes, hours, and days', async () => {
-    vi.spyOn(Date, 'now').mockReturnValue(new Date('2026-07-31T12:00:00Z').getTime());
-    const api = makeApi({ listConversations: vi.fn().mockResolvedValue({ results: [
-      { id: 1, title: 'Now', last_message_at: '2026-07-31T11:59:50Z' },
-      { id: 2, title: 'Minutes', last_message_at: '2026-07-31T11:55:00Z' },
-      { id: 3, title: 'Hours', last_message_at: '2026-07-31T09:00:00Z' },
-      { id: 4, title: 'Days', last_message_at: '2026-07-29T12:00:00Z' },
-    ] }) });
-    render(<MessagingProvider api={api}><ConversationList /></MessagingProvider>);
-    await screen.findByText('Now');
-    expect(screen.getByText('now')).toBeTruthy();
-    expect(screen.getByText(/5m/)).toBeTruthy();
-    expect(screen.getByText(/3h/)).toBeTruthy();
-    expect(screen.getByText(/2d/)).toBeTruthy();
-  });
-
-  it('auto-scrolls only for active-conversation messages when the reader was near the bottom', async () => {
-    const api = makeApi({ listConversations: vi.fn().mockResolvedValue({ results: [{ id: 1, kind: 'group' }] }), listMessages: vi.fn().mockResolvedValue({ results: [{ id: 1, conversation_id: 1, body: 'First' }] }) });
-    render(<MessagingProvider api={api} activeConversationId={1}><Thread conversationId={1} /></MessagingProvider>);
-    const timeline = await screen.findByLabelText('MessagingThread.TIMELINE');
-    Object.defineProperties(timeline, { scrollHeight: { configurable: true, value: 1000 }, clientHeight: { configurable: true, value: 300 }, scrollTop: { configurable: true, writable: true, value: 690 } });
-    timeline.scrollTo = vi.fn();
-    fireEvent.scroll(timeline);
-    frameHandler({ type: 'message', conversation_id: 1, message: { id: 2, body: 'Near bottom' } });
-    await waitFor(() => expect(timeline.scrollTo).toHaveBeenCalledTimes(1));
-    timeline.scrollTo.mockClear(); timeline.scrollTop = 100;
-    fireEvent.scroll(timeline);
-    frameHandler({ type: 'message', conversation_id: 1, message: { id: 3, body: 'Reading history' } });
-    await screen.findByText('Reading history');
-    expect(timeline.scrollTo).not.toHaveBeenCalled();
-  });
-
-  it('renders announcement deep links only with a host handler and supplies its exact target', () => {
-    const onAnnouncementLink = vi.fn();
-    const message = { id: 3, kind: 'announcement', title: 'Notice', body: 'Read this', link_target: '/events/7' };
-    const bubble = (props) => <MessagingProvider api={makeApi()} active={false}><MessageBubble {...props} /></MessagingProvider>;
-    const view = render(bubble({ message, onAnnouncementLink }));
-    fireEvent.click(screen.getByRole('button', { name: 'MessagingAnnouncement.OPEN_LINK' }));
-    expect(onAnnouncementLink).toHaveBeenCalledWith('/events/7');
-    view.rerender(bubble({ message }));
-    expect(screen.queryByRole('button', { name: 'MessagingAnnouncement.OPEN_LINK' })).toBeNull();
-    view.rerender(bubble({ message: { ...message, link_target: null }, onAnnouncementLink }));
-    expect(screen.queryByRole('button', { name: 'MessagingAnnouncement.OPEN_LINK' })).toBeNull();
-  });
-
-  it('shows senders for group messages and suppresses them for direct messages', () => {
-    const message = { id: 4, body: 'Hi', sender: { display_name: 'Ava' } };
-    const bubble = (conversation) => <MessagingProvider api={makeApi()} active={false}><MessageBubble message={message} conversation={conversation} /></MessagingProvider>;
-    const view = render(bubble({ kind: 'group' }));
-    expect(screen.getByText('Ava')).toBeTruthy();
-    view.rerender(bubble({ kind: 'direct' }));
-    expect(screen.queryByText('Ava')).toBeNull();
-  });
-
-  it('opens receipt recipients by click for non-direct conversations with counts, and never exposes direct details', async () => {
-    const api = makeApi({ getReadStatus: vi.fn().mockResolvedValue({ all_read: false, read_count: 1, recipient_count: 2, recipient_detail: [{ display_name: 'Ava' }] }) });
-    const view = render(<MessagingProvider api={api} active={false}><ReadTicks messageId={7} conversation={{ kind: 'group' }} /></MessagingProvider>);
-    const detail = await screen.findByRole('button', { name: 'MessagingReadTicks.READ_RATIO' });
-    fireEvent.click(detail);
-    expect(await screen.findByText('Ava')).toBeTruthy();
-    view.unmount();
-    api.getReadStatus.mockResolvedValue({ all_read: false, recipient_detail: [{ display_name: 'Ava' }] });
-    render(<MessagingProvider api={api} active={false}><ReadTicks messageId={7} conversation={{ kind: 'direct' }} /></MessagingProvider>);
-    await screen.findByLabelText('MessagingReadTicks.SENT');
-    expect(screen.queryByRole('button', { name: 'MessagingReadTicks.READ_RATIO' })).toBeNull();
-    expect(screen.queryByText('Ava')).toBeNull();
-  });
-
-  it('caps poll composer options at ten without changing the existing two-option start', () => {
-    render(<MessagingProvider api={makeApi()} active={false}><Composer conversationId={1} /></MessagingProvider>);
-    fireEvent.click(screen.getByRole('button', { name: 'MessagingPoll.CREATE' }));
-    const addOption = screen.getByRole('button', { name: 'MessagingPoll.ADD_OPTION' });
-    expect(screen.getAllByLabelText(/MessagingPoll.OPTION/)).toHaveLength(2);
-    for (let count = 0; count < 8; count += 1) fireEvent.click(addOption);
-    expect(screen.getAllByLabelText(/MessagingPoll.OPTION/)).toHaveLength(10);
-    expect(addOption.disabled).toBe(true);
-  });
-});

package/tests/messagingCompactBubble.test.jsx

@@ -1,64 +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';
-
-vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key, options) => options?.count != null ? `${key}:${options.count}` : options?.sender ? `${key}:${options.sender}` : key }) }));
-vi.mock('../src/notifications/realtime', () => ({ useRealtime: () => ({ subscribe: () => () => {}, onReconnect: () => () => {} }) }));
-
-import { AuthContext } from '../src/auth/AuthContext';
-import { MessageBubble } from '../src/messaging/MessageBubble';
-import { MessagingProvider } from '../src/messaging/MessagingProvider';
-import { ReadTicks } from '../src/messaging/ReadTicks';
-
-const api = () => ({
-  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 renderBubble(message, { conversation = { kind: 'group' }, replyTo, onJumpToMessage, child, ownId = 1 } = {}) {
-  return render(<AuthContext.Provider value={{ user: { id: ownId } }}><MessagingProvider api={api()} active={false}><MessageBubble message={message} conversation={conversation} replyTo={replyTo} onJumpToMessage={onJumpToMessage}>{child}</MessageBubble></MessagingProvider></AuthContext.Provider>);
-}
-
-afterEach(cleanup);
-
-describe('compact message bubbles', () => {
-  it('keeps the timestamp and own-message status icon inside the bubble and has no standalone plain-message controls', async () => {
-    const { container } = renderBubble({ id: 1, body: 'Hallo', sender: { id: 1, display_name: 'Me' }, created_at: '2026-08-02T10:00:00Z' }, { child: <ReadTicks messageId={1} conversation={{ kind: 'direct' }} /> });
-    const tick = await screen.findByLabelText('MessagingReadTicks.SENT');
-    const paper = container.querySelector('[data-message-id="1"] .MuiPaper-root');
-    expect(paper.contains(tick)).toBe(true);
-    expect(paper.querySelector('[data-testid="message-meta"]')).toBeTruthy();
-    expect(screen.queryByText('MessagingThread.REPLY')).toBeNull();
-    expect(screen.queryByLabelText('MessagingReactions.LABEL')).toBeNull();
-  });
-
-  it('marks own and incoming bubbles differently and only shows a sender in non-direct conversations', () => {
-    const { container, rerender } = renderBubble({ id: 2, body: 'Mine', sender: { id: 1, display_name: 'Me' } });
-    expect(container.querySelector('[data-message-id="2"]').getAttribute('data-message-side')).toBe('own');
-    expect(screen.getByText('Me')).toBeTruthy();
-    rerender(<AuthContext.Provider value={{ user: { id: 1 } }}><MessagingProvider api={api()} active={false}><MessageBubble message={{ id: 3, body: 'Theirs', sender: { id: 9, display_name: 'Ava' } }} conversation={{ kind: 'direct' }} /></MessagingProvider></AuthContext.Provider>);
-    expect(container.querySelector('[data-message-id="3"]').getAttribute('data-message-side')).toBe('incoming');
-    expect(screen.queryByText('Ava')).toBeNull();
-  });
-
-  it('keeps a reply quote clickable inside the bubble', () => {
-    const onJumpToMessage = vi.fn();
-    const { container } = renderBubble({ id: 5, body: 'Reply', sender: { id: 1 } }, { replyTo: { id: 4, body: 'Quoted words', sender: { display_name: 'Ava' } }, onJumpToMessage });
-    fireEvent.click(screen.getByText('Quoted words'));
-    expect(onJumpToMessage).toHaveBeenCalledWith(4);
-    expect(container.querySelector('[data-message-id="5"] .MuiPaper-root').contains(screen.getByText('Quoted words'))).toBe(true);
-  });
-
-  it('continues to render announcement, poll and attachment content inside the bubble', async () => {
-    const { container, rerender } = renderBubble({ id: 6, kind: 'announcement', title: 'Notice', body: 'Update', sender: { id: 1 } });
-    expect(container.querySelector('.MuiPaper-root').contains(screen.getByText('Notice'))).toBe(true);
-    rerender(<AuthContext.Provider value={{ user: { id: 1 } }}><MessagingProvider api={api()} active={false}><MessageBubble message={{ id: 7, kind: 'poll', body: 'Poll', sender: { id: 1 }, poll: { id: 1, question: 'Where?', options: [], allow_multiple: false } }} conversation={{ kind: 'group' }} /></MessagingProvider></AuthContext.Provider>);
-    expect(container.querySelector('.MuiPaper-root').contains(screen.getByText('Where?'))).toBe(true);
-    rerender(<AuthContext.Provider value={{ user: { id: 1 } }}><MessagingProvider api={api()} active={false}><MessageBubble message={{ id: 8, body: 'File', sender: { id: 1 }, attachments: [{ id: 1, filename: 'notes.pdf', content_type: 'application/pdf' }] }} conversation={{ kind: 'group' }} /></MessagingProvider></AuthContext.Provider>);
-    // MSG-6h: a non-image attachment's visible content is now its filename +
-    // a file icon (the download semantics live in the accessible name).
-    await waitFor(() => expect(screen.getByText('notes.pdf')).toBeTruthy());
-    expect(container.querySelector('.MuiPaper-root').contains(screen.getByText('notes.pdf'))).toBe(true);
-  });
-});

package/tests/messagingComposer.test.jsx

@@ -1,136 +0,0 @@
-// @vitest-environment jsdom
-import React from 'react';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
-
-vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key, options) => options?.message ? `${key}:${options.message}` : (options?.sender ? `${key}:${options.sender}` : key) }) }));
-
-const realtimeSubscribers = new Map();
-vi.mock('../src/notifications/realtime', () => ({
-  useRealtime: () => ({
-    subscribe: (envelope, handler) => { realtimeSubscribers.set(envelope, handler); return () => realtimeSubscribers.delete(envelope); },
-    onReconnect: () => () => {},
-  }),
-}));
-function dispatchMessagingFrame(frame) { realtimeSubscribers.get('messaging')?.(frame); }
-
-import { AuthContext } from '../src/auth/AuthContext';
-import { AttachmentList } from '../src/messaging/AttachmentList';
-import { Composer } from '../src/messaging/Composer';
-import { messagingReducer, MessagingProvider, useMessaging } from '../src/messaging/MessagingProvider';
-
-function State() { const { cache } = useMessaging(); return <output data-testid="cache">{JSON.stringify(cache)}</output>; }
-function makeApi() {
-  return {
-    listConversations: vi.fn().mockResolvedValue({ results: [] }), listMessages: vi.fn().mockResolvedValue({ results: [] }), getUnreadCount: vi.fn().mockResolvedValue({ unread_count: 0, by_conversation: {} }),
-    createMessage: vi.fn(), uploadAttachments: vi.fn(), getAttachment: vi.fn().mockResolvedValue(new Blob(['file'])), getAttachmentThumbnail: vi.fn().mockResolvedValue(new Blob(['image'], { type: 'image/png' })),
-  };
-}
-function renderComposer(api, { userId } = {}) {
-  const tree = <MessagingProvider api={api} active={false}><Composer conversationId={7} /><State /></MessagingProvider>;
-  return render(userId ? <AuthContext.Provider value={{ user: { id: userId, username: 'me' } }}>{tree}</AuthContext.Provider> : tree);
-}
-function typeAndSend(text = 'hello') { fireEvent.change(screen.getByLabelText('MessagingComposer.MESSAGE'), { target: { value: text } }); fireEvent.click(screen.getByRole('button', { name: 'MessagingComposer.SEND' })); }
-const state = () => JSON.parse(screen.getByTestId('cache').textContent);
-
-afterEach(() => { cleanup(); realtimeSubscribers.clear(); });
-
-describe('Composer optimistic send and attachments', () => {
-  it('reconciles REST then websocket confirmation into exactly one row', () => {
-    const pending = { id: 'local-r1', conversation_id: 7, client_request_id: 'r1', status: 'pending' };
-    const rest = { id: 88, conversation_id: 7, body: 'hello', client_request_id: 'r1' };
-    let next = messagingReducer({ conversations: {}, messages: {}, cursors: { conversations: null, messages: {}, threads: {} } }, { type: 'messageOptimistic', message: pending });
-    next = messagingReducer(next, { type: 'messageReconciled', message: rest });
-    next = messagingReducer(next, { type: 'frame', frame: { type: 'message', conversation_id: 7, message: rest } });
-    expect(Object.values(next.messages)).toHaveLength(1);
-    expect(next.messages[88].client_request_id).toBe('r1');
-  });
-
-  it('reconciles websocket then REST confirmation into exactly one row', () => {
-    const pending = { id: 'local-r2', conversation_id: 7, client_request_id: 'r2', status: 'pending' };
-    const websocket = { id: 89, conversation_id: 7, body: 'hello', client_request_id: 'r2' };
-    let next = messagingReducer({ conversations: {}, messages: {}, cursors: { conversations: null, messages: {}, threads: {} } }, { type: 'messageOptimistic', message: pending });
-    next = messagingReducer(next, { type: 'frame', frame: { type: 'message', conversation_id: 7, message: websocket } });
-    next = messagingReducer(next, { type: 'messageReconciled', message: websocket });
-    expect(Object.values(next.messages)).toHaveLength(1);
-    expect(next.messages[89].client_request_id).toBe('r2');
-  });
-
-  it('retries a failed send with the same idempotency key and optimistic row', async () => {
-    const api = makeApi(); api.createMessage.mockRejectedValueOnce(new Error('offline')).mockResolvedValueOnce({ id: 90, conversation_id: 7, body: 'hello' });
-    renderComposer(api); typeAndSend(); await screen.findByRole('alert'); const first = api.createMessage.mock.calls[0][1].client_request_id;
-    fireEvent.click(screen.getByRole('button', { name: 'MessagingComposer.RETRY' }));
-    await waitFor(() => expect(api.createMessage).toHaveBeenCalledTimes(2));
-    expect(api.createMessage.mock.calls[1][1].client_request_id).toBe(first);
-    await waitFor(() => expect(Object.keys(state().messages)).toEqual(['90']));
-  });
-
-  it('shows the server validation message for a rejected attachment upload', async () => {
-    // dcm's ConversationAttachmentView translates a rejected upload into a
-    // field-keyed {"files": [...]} body (the MSG-2 chunk-4 fix), not {detail}.
-    const api = makeApi(); api.uploadAttachments.mockRejectedValue({ response: { data: { files: ['File type application/octet-stream is not allowed.'] } } });
-    renderComposer(api); const input = document.querySelector('input[type=file]'); const file = new File(['x'], 'bad.exe', { type: 'application/octet-stream' });
-    fireEvent.change(input, { target: { files: [file] } }); fireEvent.click(screen.getByRole('button', { name: 'MessagingComposer.SEND' }));
-    await screen.findByText('MessagingComposer.UPLOAD_ERROR:File type application/octet-stream is not allowed.');
-  });
-
-  it('shows the server validation message when it arrives as {detail} (the text-message error shape)', async () => {
-    const api = makeApi(); api.createMessage.mockRejectedValue({ response: { data: { detail: 'Posting is not permitted.' } } });
-    renderComposer(api); typeAndSend('hello');
-    await screen.findByText('MessagingComposer.SEND_ERROR:Posting is not permitted.');
-  });
-
-  it('populates the optimistic row with the current user as sender, not "unknown sender"', async () => {
-    let resolveCreate; const api = makeApi(); api.createMessage.mockReturnValue(new Promise((resolve) => { resolveCreate = resolve; }));
-    renderComposer(api, { userId: 9 }); typeAndSend('hello');
-    await waitFor(() => expect(Object.keys(state().messages)).toHaveLength(1));
-    const [optimistic] = Object.values(state().messages);
-    expect(optimistic.status).toBe('pending');
-    expect(optimistic.sender).toEqual({ id: 9, display_name: 'me' });
-    resolveCreate({ id: 91, conversation_id: 7, body: 'hello' });
-  });
-
-  it('end-to-end: a real in-flight send reconciled by a WS frame arriving before the REST response settles produces exactly one row', async () => {
-    let resolveCreate; const api = makeApi(); api.createMessage.mockReturnValue(new Promise((resolve) => { resolveCreate = resolve; }));
-    renderComposer(api); typeAndSend('hello');
-    await waitFor(() => expect(Object.keys(state().messages)).toHaveLength(1));
-    const requestId = api.createMessage.mock.calls[0][1].client_request_id;
-    // The WS frame for this message's creation arrives while the REST POST is still in flight.
-    act(() => dispatchMessagingFrame({ envelope: 'messaging', type: 'message', conversation_id: 7, message: { id: 91, conversation_id: 7, body: 'hello', client_request_id: requestId } }));
-    expect(Object.keys(state().messages)).toEqual(['91']);
-    // The REST response for the same send resolves afterward and must not create a second row.
-    await act(async () => resolveCreate({ id: 91, conversation_id: 7, body: 'hello', client_request_id: requestId }));
-    expect(Object.keys(state().messages)).toEqual(['91']);
-  });
-
-  it('mounts Composer and AttachmentList independently', async () => {
-    const api = makeApi(); const { unmount } = renderComposer(api); expect(screen.getByLabelText('MessagingComposer.LABEL')).toBeTruthy(); unmount();
-    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);
-  });
-});