@micha.bigler/ui-core-micha 2.16.0 → 2.17.0

package/tests/messagingThreadingQuoting.test.jsx

@@ -0,0 +1,86 @@
+// @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?.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 { applyFrame, MessagingProvider } from '../src/messaging/MessagingProvider';
+import { Thread } from '../src/messaging/Thread';
+
+function makeApi(messages = []) {
+  return {
+    listConversations: vi.fn().mockResolvedValue({ results: [{ id: 1, kind: 'group' }] }),
+    listMessages: vi.fn().mockResolvedValue({ results: messages }),
+    listThread: vi.fn().mockResolvedValue({ results: [] }),
+    getUnreadCount: vi.fn().mockResolvedValue({ unread_count: 0, by_conversation: {} }),
+    markConversationRead: vi.fn().mockResolvedValue({}),
+    markThreadRead: vi.fn().mockResolvedValue({}),
+    getReadStatus: vi.fn().mockResolvedValue({ all_read: false, delivered_count: 0 }),
+  };
+}
+function renderBubble(ui) {
+  return render(<MessagingProvider api={makeApi()} active={false}>{ui}</MessagingProvider>);
+}
+
+afterEach(cleanup);
+
+describe('messaging threading and quoting', () => {
+  it('groups REST-loaded server-shaped reply_to_id messages under their root', async () => {
+    const api = makeApi([
+      { id: 10, conversation_id: 1, body: 'Root', sender: { display_name: 'Ava' }, created_at: '2026-07-31T10:00:00Z' },
+      { id: 11, conversation_id: 1, body: 'Server reply', reply_to_id: 10, sender: { display_name: 'Ben' }, created_at: '2026-07-31T10:01:00Z' },
+    ]);
+    render(<MessagingProvider api={api} activeConversationId={1}><Thread conversationId={1} /></MessagingProvider>);
+    await screen.findByText('Root');
+    expect(screen.queryByText('Server reply')).toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: /MessagingThread\.SHOW_REPLIES/ }));
+    expect(await screen.findByText('Server reply')).toBeTruthy();
+  });
+
+  it('groups realtime server-shaped reply_to_id messages under their root', () => {
+    const state = { conversations: {}, messages: { 10: { id: 10, conversation_id: 1, body: 'Root' } }, threads: {}, polls: {}, reactions: {}, receipts: {}, unread: { unread_count: 0, by_conversation: {} }, cursors: { conversations: null, messages: {}, threads: {} } };
+    const next = applyFrame(state, { type: 'message', conversation_id: 1, message: { id: 11, body: 'Realtime reply', reply_to_id: 10 } }, 1);
+    expect(next.messages[11].reply_to_id).toBe(10);
+    expect(Object.values(next.messages).filter((message) => !((message.reply_to_id ?? message.reply_to))).map((message) => message.id)).toEqual([10]);
+  });
+
+  it('renders a quoted sender and snippet, blanking deleted quoted content', () => {
+    const { rerender } = renderBubble(<MessageBubble message={{ id: 2, body: 'Reply' }} replyTo={{ id: 1, body: 'Quoted words', sender: { display_name: 'Ava' } }} />);
+    expect(screen.getByText('MessagingThread.REPLY_TO:Ava')).toBeTruthy();
+    expect(screen.getByText('Quoted words')).toBeTruthy();
+    rerender(<MessagingProvider api={makeApi()} active={false}><MessageBubble message={{ id: 2, body: 'Reply' }} replyTo={{ id: 1, body: 'Secret', deleted_at: '2026-07-31T10:00:00Z', sender: { display_name: 'Ava' } }} /></MessagingProvider>);
+    expect(screen.getByText('MessagingThread.DELETED')).toBeTruthy();
+    expect(screen.queryByText('Secret')).toBeNull();
+  });
+
+  it('labels an attachment-only quoted source distinctly from a deleted one', () => {
+    renderBubble(<MessageBubble message={{ id: 2, body: 'Reply' }} replyTo={{ id: 1, attachments: [{ id: 9, filename: 'photo.png' }], sender: { display_name: 'Ava' } }} />);
+    expect(screen.getByText('MessagingThread.QUOTE_ATTACHMENT')).toBeTruthy();
+    expect(screen.queryByText('MessagingThread.DELETED')).toBeNull();
+  });
+
+  it("clears the Thread's own reply-target state when the message being replied to is deleted", async () => {
+    const api = makeApi([{ id: 20, conversation_id: 1, body: 'Reply target', sender: { id: 1, display_name: 'Ava' }, created_at: '2026-07-31T10:00:00Z' }]);
+    api.deleteMessage = vi.fn().mockResolvedValue({});
+    render(<AuthContext.Provider value={{ user: { id: 1 } }}><MessagingProvider api={api} activeConversationId={1}><Thread conversationId={1} /></MessagingProvider></AuthContext.Provider>);
+    await screen.findByText('Reply target');
+    fireEvent.click(screen.getByRole('button', { name: /MessagingThread\.REPLY\b/ }));
+    expect(screen.getByText(/MessagingThread\.REPLYING_TO/)).toBeTruthy();
+    fireEvent.click(screen.getByRole('button', { name: /MessagingActions\.MENU/ }));
+    fireEvent.click(screen.getByRole('menuitem', { name: /MessagingActions\.DELETE/ }));
+    fireEvent.click(screen.getByRole('button', { name: /MessagingActions\.DELETE/ }));
+    await waitFor(() => expect(api.deleteMessage).toHaveBeenCalledWith(20));
+    await waitFor(() => expect(screen.queryByText(/MessagingThread\.REPLYING_TO/)).toBeNull());
+  });
+
+  it('jumps from a quote to the original message', () => {
+    const onJumpToMessage = vi.fn();
+    renderBubble(<MessageBubble message={{ id: 2, body: 'Reply' }} replyTo={{ id: 1, body: 'Quoted words', sender: { display_name: 'Ava' } }} onJumpToMessage={onJumpToMessage} />);
+    fireEvent.click(screen.getByText('Quoted words'));
+    expect(onJumpToMessage).toHaveBeenCalledWith(1);
+  });
+});

package/tests/messagingUnreadLifecycle.test.jsx

@@ -0,0 +1,63 @@
+// @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) => key }) }));
+vi.mock('../src/notifications/realtime', () => ({ useRealtime: () => ({ subscribe: () => () => {}, onReconnect: () => () => {} }) }));
+
+import { ConversationList } from '../src/messaging/ConversationList';
+import { messagingReducer, MessagingProvider, useMessaging } from '../src/messaging/MessagingProvider';
+import { Thread } from '../src/messaging/Thread';
+
+function cache() { return { conversations: {}, messages: {}, threads: {}, polls: {}, reactions: {}, receipts: {}, unread: { unread_count: 0, by_conversation: {} }, cursors: { conversations: null, messages: {}, threads: {} } }; }
+function State() { const { cache: current } = useMessaging(); return <output data-testid="cache">{JSON.stringify(current)}</output>; }
+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: {} }),
+    markConversationRead: vi.fn().mockResolvedValue({}), markThreadRead: vi.fn().mockResolvedValue({}),
+    ...overrides,
+  };
+}
+
+afterEach(cleanup);
+
+describe('messaging unread lifecycle', () => {
+  it('marks the selected conversation read', async () => {
+    const api = makeApi({ listConversations: vi.fn().mockResolvedValue({ results: [{ id: 12, title: 'Support' }] }) });
+    render(<MessagingProvider api={api}><ConversationList /></MessagingProvider>);
+    fireEvent.click(await screen.findByRole('button', { name: /Support/ }));
+    await waitFor(() => expect(api.markConversationRead).toHaveBeenCalledWith(12, undefined));
+  });
+
+  it('marks a conversation read when its thread opens', async () => {
+    const api = makeApi();
+    render(<MessagingProvider api={api} active={false}><Thread conversationId={12} /></MessagingProvider>);
+    await waitFor(() => expect(api.markConversationRead).toHaveBeenCalledWith(12, undefined));
+  });
+
+  it('decrements the global unread count by the selected conversation prior count', () => {
+    const initial = { ...cache(), unread: { unread_count: 5, by_conversation: { 12: 2, 7: 3 } } };
+    const next = messagingReducer(initial, { type: 'conversationRead', conversationId: 12 });
+    expect(next.unread).toEqual({ unread_count: 3, by_conversation: { 12: 0, 7: 3 } });
+  });
+
+  it('marks a reply thread read when it expands', async () => {
+    const api = makeApi({ listMessages: vi.fn().mockResolvedValue({ results: [{ id: 40, conversation_id: 12, body: 'Root', reply_count: 1 }] }) });
+    render(<MessagingProvider api={api} activeConversationId={12}><Thread conversationId={12} /></MessagingProvider>);
+    fireEvent.click(await screen.findByRole('button', { name: 'MessagingThread.SHOW_REPLIES' }));
+    await waitFor(() => expect(api.markThreadRead).toHaveBeenCalledWith(40, undefined));
+  });
+
+  it('increments unread only for a new message in a non-active conversation', () => {
+    const initial = { ...cache(), unread: { unread_count: 2, by_conversation: { 7: 2 } } };
+    const incoming = { type: 'frame', activeConversationId: 7, frame: { type: 'message', conversation_id: 12, message: { id: 50, body: 'hello' } } };
+    const nonActive = messagingReducer(initial, incoming);
+    expect(nonActive.unread).toEqual({ unread_count: 3, by_conversation: { 7: 2, 12: 1 } });
+    const active = messagingReducer(nonActive, { ...incoming, frame: { type: 'message', conversation_id: 7, message: { id: 51, body: 'active' } } });
+    expect(active.unread).toEqual(nonActive.unread);
+    const optimistic = messagingReducer(initial, { type: 'messageOptimistic', message: { id: 'local-r1', conversation_id: 12, client_request_id: 'r1', status: 'pending' } });
+    const reconciled = messagingReducer(optimistic, { ...incoming, frame: { type: 'message', conversation_id: 12, message: { id: 52, client_request_id: 'r1', body: 'mine' } } });
+    expect(reconciled.unread).toEqual(initial.unread);
+  });
+});