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

package/tests/messagingPollRendering.test.jsx

@@ -0,0 +1,115 @@
+// @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?.message ? `${key}:${options.message}` : 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 { PollCard } from '../src/messaging/PollCard';
+import { MessagingProvider, useMessaging } from '../src/messaging/MessagingProvider';
+
+function baseApi(overrides = {}) {
+  return {
+    listConversations: vi.fn().mockResolvedValue({ results: [] }), listMessages: vi.fn().mockResolvedValue({ results: [] }),
+    getUnreadCount: vi.fn().mockResolvedValue({ unread_count: 0, by_conversation: {} }),
+    votePoll: vi.fn(), closePoll: vi.fn(),
+    ...overrides,
+  };
+}
+
+// A genuinely server-shaped serialize_poll payload (django_core_micha
+// serializers.py:52-64): id/question/allow_multiple/closed_at/created_by_id,
+// options carry {id,text,order,vote_count,voters} — never selected/voted
+// flags, never created_by as an object. voted_option_ids is added ONLY on
+// the vote/create/close REST responses (views.py _poll_response), never here.
+function serverPoll(overrides = {}) {
+  return {
+    id: 'poll-1', question: 'Where should we meet?', allow_multiple: false, closed_at: null, created_by_id: 'user-9',
+    options: [
+      { id: 'opt-a', text: 'Library', order: 0, vote_count: 2, voters: ['user-1', 'user-2'] },
+      { id: 'opt-b', text: 'Cafe', order: 1, vote_count: 1, voters: ['user-3'] },
+    ],
+    ...overrides,
+  };
+}
+function State() { const { cache } = useMessaging(); return <output data-testid="cache">{JSON.stringify(cache)}</output>; }
+// PollCard is a "dumb" prop-driven component (matches Thread.jsx's usage,
+// which passes down cache.messages[id] directly) — it does not subscribe to
+// the cache itself. A live-frame test must read the message back out of the
+// cache, not hold a static prop, or it can never observe a frame update.
+function ConnectedPollCard({ messageId }) {
+  const { cache } = useMessaging();
+  return <PollCard message={cache.messages[messageId]} />;
+}
+
+afterEach(() => { cleanup(); realtimeSubscribers.clear(); });
+
+describe('poll rendering against the real server contract', () => {
+  it('renders question, options, vote counts and per-option voters from a server-shaped payload', () => {
+    render(<MessagingProvider api={baseApi()} active={false}><PollCard message={{ id: 'msg-1', poll: serverPoll() }} /></MessagingProvider>);
+    expect(screen.getByText('Where should we meet?')).toBeTruthy();
+    expect(screen.getByText(/Library \(2\)/)).toBeTruthy();
+    expect(screen.getByText(/Cafe \(1\)/)).toBeTruthy();
+  });
+
+  it('derives selection from voted_option_ids (REST-only) and marks the viewer\'s own vote', () => {
+    const poll = serverPoll({ voted_option_ids: ['opt-a'] });
+    render(<MessagingProvider api={baseApi()} active={false}><PollCard message={{ id: 'msg-1', poll }} /></MessagingProvider>);
+    const checkboxes = screen.getAllByRole('checkbox');
+    expect(checkboxes[0].checked).toBe(true);
+    expect(checkboxes[1].checked).toBe(false);
+    expect(screen.getByText(/Library.*MessagingPoll\.YOU_VOTED/)).toBeTruthy();
+  });
+
+  it('does not clear or invert the viewer\'s own vote when a poll_updated frame carries no voted_option_ids', async () => {
+    const api = baseApi();
+    const votedPoll = serverPoll({ voted_option_ids: ['opt-a'] });
+    render(<MessagingProvider api={api} active={false}><ConnectedPollCard messageId="msg-1" /><State /></MessagingProvider>);
+    // Seed the cache the way a real poll message arrives: a `message` frame
+    // (kind: 'poll') carrying the just-voted poll, exactly as this viewer's
+    // own castPollVote reconciliation would leave it — not a static prop the
+    // component can never observe a later frame update against.
+    dispatchMessagingFrame({ envelope: 'messaging', type: 'message', event_id: 'seed', conversation_id: 'conv-1', message: { id: 'msg-1', conversation_id: 'conv-1', kind: 'poll', poll: votedPoll } });
+    await waitFor(() => expect(screen.getAllByRole('checkbox')[0].checked).toBe(true));
+    // The real poll_updated frame shape: payload.poll is a bare serialize_poll
+    // result (verified against services.py's _poll_updated_payload) — never
+    // carries voted_option_ids. A vote_count bump from another viewer must
+    // not touch this viewer's own selection.
+    dispatchMessagingFrame({
+      envelope: 'messaging', type: 'poll_updated', event_id: 'evt-1', conversation_id: 'conv-1', message_id: 'msg-1', poll_id: 'poll-1',
+      poll: { ...serverPoll(), options: [{ id: 'opt-a', text: 'Library', order: 0, vote_count: 3, voters: ['user-1', 'user-2', 'user-4'] }, { id: 'opt-b', text: 'Cafe', order: 1, vote_count: 1, voters: ['user-3'] }] },
+    });
+    await waitFor(() => expect(screen.getByText(/Library \(3\)/)).toBeTruthy());
+    // The frame carries no voted_option_ids at all — the viewer's REST-known
+    // vote must be carried forward, not wiped, by this update.
+    expect(screen.getAllByRole('checkbox')[0].checked).toBe(true);
+  });
+
+  it('grants close only to the poll creator (created_by_id) or a host override, never a guess from an object shape', () => {
+    const poll = serverPoll({ created_by_id: 'user-9' });
+    const { rerender } = render(<AuthContext.Provider value={{ user: { id: 'user-9' } }}><MessagingProvider api={baseApi()} active={false}><PollCard message={{ id: 'msg-1', poll }} /></MessagingProvider></AuthContext.Provider>);
+    expect(screen.getByRole('button', { name: 'MessagingPoll.CLOSE' })).toBeTruthy();
+    rerender(<AuthContext.Provider value={{ user: { id: 'user-2' } }}><MessagingProvider api={baseApi()} active={false}><PollCard message={{ id: 'msg-1', poll }} /></MessagingProvider></AuthContext.Provider>);
+    expect(screen.queryByRole('button', { name: 'MessagingPoll.CLOSE' })).toBeNull();
+    rerender(<AuthContext.Provider value={{ user: { id: 'user-2' } }}><MessagingProvider api={baseApi()} active={false}><PollCard canClose message={{ id: 'msg-1', poll }} /></MessagingProvider></AuthContext.Provider>);
+    expect(screen.getByRole('button', { name: 'MessagingPoll.CLOSE' })).toBeTruthy();
+  });
+
+  it('disables voting once the poll is closed', () => {
+    const poll = serverPoll({ closed_at: '2026-07-31T10:00:00Z' });
+    render(<MessagingProvider api={baseApi()} active={false}><PollCard message={{ id: 'msg-1', poll }} /></MessagingProvider>);
+    screen.getAllByRole('checkbox').forEach((checkbox) => expect(checkbox.disabled).toBe(true));
+    expect(screen.getByRole('button', { name: 'MessagingPoll.VOTE' }).disabled).toBe(true);
+    expect(screen.getByText('MessagingPoll.CLOSED')).toBeTruthy();
+  });
+});

package/tests/messagingReactionMerge.test.jsx

@@ -0,0 +1,79 @@
+// @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?.emoji ? `${key}:${options.emoji}:${options.count}` : 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 { ReactionBar } from '../src/messaging/ReactionBar';
+import { MessagingProvider, useMessaging } from '../src/messaging/MessagingProvider';
+
+function baseApi(overrides = {}) {
+  return {
+    listConversations: vi.fn().mockResolvedValue({ results: [] }), listMessages: vi.fn().mockResolvedValue({ results: [] }),
+    getUnreadCount: vi.fn().mockResolvedValue({ unread_count: 0, by_conversation: {} }),
+    addReaction: vi.fn(), removeReaction: vi.fn(),
+    ...overrides,
+  };
+}
+// ReactionBar is prop-driven (matches every other messaging leaf component) —
+// a live-frame test must read the message back out of the cache.
+function ConnectedReactionBar({ messageId }) {
+  const { cache } = useMessaging();
+  return <ReactionBar message={cache.messages[messageId]} />;
+}
+
+afterEach(() => { cleanup(); realtimeSubscribers.clear(); });
+
+describe('reaction frame/REST merge against the real aggregate-only contract', () => {
+  it('an unrelated reaction frame updates its own emoji without touching the viewer\'s known reacted state on other emoji', async () => {
+    const api = baseApi();
+    render(<MessagingProvider api={api} active={false}><ConnectedReactionBar messageId="msg-1" /></MessagingProvider>);
+    // Seed: the viewer has already reacted with 👍 (locally known — e.g. from
+    // an earlier REST confirmation), the server aggregate never carries that.
+    dispatchMessagingFrame({ envelope: 'messaging', type: 'message', event_id: 'seed', conversation_id: 'conv-1', message: { id: 'msg-1', conversation_id: 'conv-1', body: 'Hi', reactions: [{ emoji: '👍', count: 1, reacted: true }] } });
+    await waitFor(() => expect(screen.getByRole('button', { name: 'MessagingReactions.TOGGLE:👍:1' })).toBeTruthy());
+    // A different viewer reacts with 🎉 — dcm's real reaction frame shape
+    // (serialize_reactions): {emoji, count} only, never reacted, for the
+    // WHOLE aggregate list including 👍.
+    dispatchMessagingFrame({ envelope: 'messaging', type: 'reaction', event_id: 'evt-1', conversation_id: 'conv-1', message_id: 'msg-1', reactions: [{ emoji: '👍', count: 1 }, { emoji: '🎉', count: 1 }] });
+    await waitFor(() => expect(screen.getByRole('button', { name: 'MessagingReactions.TOGGLE:🎉:1' })).toBeTruthy());
+    const thumbsUp = screen.getByRole('button', { name: 'MessagingReactions.TOGGLE:👍:1' });
+    expect(thumbsUp.className.includes('MuiChip-colorPrimary')).toBe(true); // still marked as the viewer's own reaction
+  });
+
+  it('the viewer\'s own optimistic reacted flag survives its own REST confirmation, which returns an aggregate-only shape', async () => {
+    const api = baseApi({ addReaction: vi.fn().mockResolvedValue({ reactions: [{ emoji: '👍', count: 1 }] }) });
+    render(<MessagingProvider api={api} active={false}><ConnectedReactionBar messageId="msg-1" /></MessagingProvider>);
+    dispatchMessagingFrame({ envelope: 'messaging', type: 'message', event_id: 'seed', conversation_id: 'conv-1', message: { id: 'msg-1', conversation_id: 'conv-1', body: 'Hi', reactions: [] } });
+    await waitFor(() => screen.getByLabelText('MessagingReactions.ADD'));
+    fireEvent.click(screen.getByLabelText('MessagingReactions.ADD'));
+    fireEvent.click(screen.getByText('👍'));
+    await waitFor(() => expect(api.addReaction).toHaveBeenCalledWith('msg-1', '👍'));
+    await waitFor(() => {
+      const chip = screen.getByRole('button', { name: 'MessagingReactions.TOGGLE:👍:1' });
+      expect(chip.className.includes('MuiChip-colorPrimary')).toBe(true);
+    });
+  });
+
+  it('a duplicate event_id changes nothing', async () => {
+    const api = baseApi();
+    render(<MessagingProvider api={api} active={false}><ConnectedReactionBar messageId="msg-1" /></MessagingProvider>);
+    dispatchMessagingFrame({ envelope: 'messaging', type: 'message', event_id: 'seed', conversation_id: 'conv-1', message: { id: 'msg-1', conversation_id: 'conv-1', body: 'Hi', reactions: [{ emoji: '👍', count: 1 }] } });
+    await waitFor(() => screen.getByRole('button', { name: 'MessagingReactions.TOGGLE:👍:1' }));
+    dispatchMessagingFrame({ envelope: 'messaging', type: 'reaction', event_id: 'dup-1', conversation_id: 'conv-1', message_id: 'msg-1', reactions: [{ emoji: '👍', count: 2 }] });
+    await waitFor(() => expect(screen.getByRole('button', { name: 'MessagingReactions.TOGGLE:👍:2' })).toBeTruthy());
+    dispatchMessagingFrame({ envelope: 'messaging', type: 'reaction', event_id: 'dup-1', conversation_id: 'conv-1', message_id: 'msg-1', reactions: [{ emoji: '👍', count: 99 }] });
+    expect(screen.queryByRole('button', { name: 'MessagingReactions.TOGGLE:👍:99' })).toBeNull();
+    expect(screen.getByRole('button', { name: 'MessagingReactions.TOGGLE:👍:2' })).toBeTruthy();
+  });
+});

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);
+  });
+});