CedarCopilot/cedar-mail

import React from 'react';
import { render } from '@testing-library/react';
import { MemoryRouter } from 'react-router';
import { StackedInboxView } from '@/modules/threads/components/stacked-inbox-view';

const inboxes = [
  { id: 'important', name: 'Important', position: 0, system: true, rule: { kind: 'all' } },
  { id: 'inbox-cal', name: 'Calendar', position: 1, rule: { kind: 'all_of', clauses: [] } },
  { id: 'other', name: 'Other', position: 2, system: true, rule: { kind: 'all' } },
];

const getRowInboxOrder = (xs: typeof inboxes) => {
  const important = xs.find((i) => i.id === 'important');
  const other = xs.find((i) => i.id === 'other');
  const middle = xs.filter((i) => i.id !== 'important' && i.id !== 'other');
  if (important && other) return [important, ...middle, other];
  if (important) return [important, ...middle];
  if (other) return [...middle, other];
  return middle;
};

jest.mock('@/modules/threads/hooks/use-inboxes', () => ({
  useInboxes: () => ({ inboxes }),
  getRowInboxOrder,
}));

jest.mock('@/modules/threads/components/inbox-section', () => ({
  InboxSection: ({ inbox }: { inbox: { id: string; name: string } }) => (
    <div data-testid={`section-${inbox.id}`}>{inbox.name}</div>
  ),
}));

describe('StackedInboxView', () => {
  it('renders one section per inbox in canonical row order', () => {
    const view = render(
      <MemoryRouter>
        <StackedInboxView />
      </MemoryRouter>,
    );
    const sections = view.container.querySelectorAll('[data-testid^="section-"]');
    expect(sections).toHaveLength(3);
    expect(sections[0].textContent).toBe('Important');
    expect(sections[1].textContent).toBe('Calendar');
    expect(sections[2].textContent).toBe('Other');
  });
});