render-labels-compat.test.tsx1.8 KBView on GitHub
import React from 'react';
import { render, screen } from '@testing-library/react';
import { RenderLabels } from '@/modules/threads/threadList/components/render-labels';

jest.mock('@/modules/threads/hooks/use-search-value', () => ({
  useSearchValue: () => [{ value: '' }, jest.fn()],
}));

jest.mock('@/modules/aop/aop-icons', () => ({
  AopIconDisplay: () => null,
}));

jest.mock('@/components/ui/horizontal-scroll-container', () => ({
  HorizontalScrollContainer: ({
    items,
    renderItem,
  }: {
    items: Array<{ id: string }>;
    renderItem: (item: { id: string }) => React.ReactNode;
  }) => <div>{items.map((item) => <div key=[redacted],
}));

jest.mock('@/modules/store', () => ({
  useCedarStore: (
    selector: (state: {
      aopsById: Record<string, { name: string; color?: string | null; icon?: string | null }>;
    }) => unknown,
  ) =>
    selector({
      aopsById: {
        aop_1: { name: 'Deals', color: '#3366ff', icon: null },
      },
    }),
}));

describe('RenderLabels Cedar compatibility', () => {
  it('renders modern Cedar/aop labels', () => {
    render(
      <RenderLabels
        labels={[{ id: '1', name: 'Cedar/aop/Deals' } as never]}
      />,
    );

    expect(screen.getByText('Deals')).toBeInTheDocument();
  });

  it('renders legacy [Cedar]/aop labels', () => {
    render(
      <RenderLabels
        labels={[{ id: '1', name: '[Cedar]/aop/Deals' } as never]}
      />,
    );

    expect(screen.getByText('Deals')).toBeInTheDocument();
  });

  it('hides internal Cedar labels that are not AOP/AI', () => {
    const { container } = render(
      <RenderLabels
        labels={[
          { id: '1', name: 'Cedar/inbox/other' } as never,
          { id: '2', name: '[Cedar]/inbox/other' } as never,
        ]}
      />,
    );

    expect(container).toBeEmptyDOMElement();
  });
});