ChannelHeader.test.tsx

import React from 'react';
import { act, cleanup, render, screen, waitFor } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn';

import { ChannelHeader } from '../ChannelHeader';

import { ChannelStateProvider } from '../../../context/ChannelStateContext';
import { ChatProvider } from '../../../context/ChatContext';
import { WithComponents } from '../../../context/WithComponents';
import { TranslationProvider } from '../../../context/TranslationContext';
import {
  dispatchUserUpdatedEvent,
  generateChannel,
  generateMember,
  generateMessage,
  generateUser,
  getOrCreateChannelApi,
  getTestClientWithUser,
  initClientWithChannels,
  mockChannelStateContext,
  mockChatContext,
  mockTranslationContextValue,
  useMockedApis,
} from '../../../mock-builders';
import { axe } from '../../../../axe-helper';
import { ChannelAvatar } from '../../Avatar';
import type {
  ChannelAPIResponse,
  ChannelResponse,
  Channel as ChannelType,
  StreamChat,
  UserResponse,
} from 'stream-chat';
import type { ChannelHeaderProps } from '../ChannelHeader';
import type { GenerateChannelOptions } from '../../../mock-builders/generator/channel';

const AVATAR_IMG_TEST_ID = 'avatar-img';

const user1 = generateUser();
const user2 = generateUser({ image: null });
let testChannel1: ChannelAPIResponse;
let client: StreamChat;

const defaultChannelState = {
  members: [generateMember({ user: user1 }), generateMember({ user: user2 })],
};

const t = vi.fn((key) => key);

const renderComponentBase = ({
  channel,
  client,
  props,
}: {
  channel: ChannelType;
  client: StreamChat;
  props?: ChannelHeaderProps;
}) =>
  render(
    <ChatProvider value={mockChatContext({ channel, client })}>
      <ChannelStateProvider value={mockChannelStateContext({ channel })}>
        <TranslationProvider value={mockTranslationContextValue({ t })}>
          <ChannelHeader {...props} />
        </TranslationProvider>
      </ChannelStateProvider>
    </ChatProvider>,
  );

async function renderComponent({
  channelData,
  channelType = 'messaging',
  props,
}: {
  channelData?: Partial<ChannelResponse> & Record<string, unknown>;
  channelType?: string;
  props?: ChannelHeaderProps;
} = {}) {
  client = await getTestClientWithUser(user1);
  testChannel1 = generateChannel({ ...defaultChannelState, channel: channelData });
  /* eslint-disable-next-line react-hooks/rules-of-hooks */
  useMockedApis(client, [getOrCreateChannelApi(testChannel1)]);
  const channel = client.channel(channelType, testChannel1.channel.id, channelData);
  await channel.query();

  return renderComponentBase({ channel, client, props });
}

afterEach(cleanup);

describe('ChannelHeader', () => {
  it('should render without crashing', async () => {
    const { container } = await renderComponent({
      channelData: { image: 'image.jpg', name: 'test-channel-1' },
    });
    const results = await axe(container);
    expect(results).toHaveNoViolations();
    expect(container.querySelector('.str-chat__channel-header')).toBeInTheDocument();
  });

  it("should display avatar with fallback image only if other user's name is available", async () => {
    await renderComponent({ channelData: { image: null } });
    await waitFor(() => {
      expect(screen.queryByTestId('avatar-img')).not.toBeInTheDocument();
      expect(screen.queryByTestId('avatar-fallback')).toBeInTheDocument();
    });
  });

  it('should display avatar when channel has an image', async () => {
    const { container, getByTestId } = await renderComponent({
      channelData: { image: 'image.jpg', name: 'test-channel-1' },
    });
    const results = await axe(container);
    expect(results).toHaveNoViolations();
    expect(getByTestId('avatar-img')).toBeInTheDocument();
    expect(getByTestId('avatar-img')).toHaveAttribute('src', 'image.jpg');
  });

  it('should display custom title', async () => {
    const { container, getByText } = await renderComponent({
      channelData: { image: 'image.jpg', name: 'test-channel-1' },
      props: { title: 'Custom Title' },
    });
    const results = await axe(container);
    expect(results).toHaveNoViolations();
    expect(getByText('Custom Title')).toBeInTheDocument();
  });

  it('should render subtitle area for online status', async () => {
    const { container } = await renderComponent({
      channelData: {
        image: 'image.jpg',
        member_count: 5,
        name: 'test-channel-1',
      },
    });
    const results = await axe(container);
    expect(results).toHaveNoViolations();
    // The subtitle area now shows online status or typing indicator, not channel.data.subtitle
    const subtitleEl = container.querySelector(
      '.str-chat__channel-header__data__subtitle',
    );
    // Subtitle renders when there is member count and thus online status text
    await waitFor(() => {
      expect(subtitleEl).toBeInTheDocument();
    });
  });

  it('should display watcher_count in subtitle', async () => {
    const { container } = await renderComponent({
      channelData: {
        image: 'image.jpg',
        member_count: 10,
        name: 'test-channel-1',
        watcher_count: 34,
      },
    });
    const results = await axe(container);
    expect(results).toHaveNoViolations();
    await waitFor(() => {
      expect(
        container.querySelector('.str-chat__channel-header__data__subtitle'),
      ).toBeInTheDocument();
    });
  });

  it('should display correct member_count in subtitle', async () => {
    const { container } = await renderComponent({
      channelData: {
        image: 'image.jpg',
        member_count: 34,
        name: 'test-channel-1',
      },
    });
    const results = await axe(container);
    expect(results).toHaveNoViolations();
    await waitFor(() => {
      expect(
        container.querySelector('.str-chat__channel-header__data__subtitle'),
      ).toBeInTheDocument();
    });
  });

  describe('SidebarToggle slot', () => {
    const SidebarToggle = () => <div data-testid='sidebar-toggle' />;

    it('should not render SidebarToggle when not provided via ComponentContext', async () => {
      await renderComponent();
      expect(screen.queryByTestId('sidebar-toggle')).not.toBeInTheDocument();
    });

    it('should render SidebarToggle when navOpen is false', async () => {
      client = await getTestClientWithUser(user1);
      testChannel1 = generateChannel({ ...defaultChannelState });
      useMockedApis(client, [getOrCreateChannelApi(testChannel1)]);
      const channel = client.channel('messaging', testChannel1.channel.id);
      await channel.query();

      render(
        <WithComponents overrides={{ SidebarToggle }}>
          <ChatProvider value={mockChatContext({ channel, client, navOpen: false })}>
            <ChannelStateProvider value={mockChannelStateContext({ channel })}>
              <TranslationProvider value={mockTranslationContextValue({ t })}>
                <ChannelHeader />
              </TranslationProvider>
            </ChannelStateProvider>
          </ChatProvider>
        </WithComponents>,
      );

      expect(screen.getByTestId('sidebar-toggle')).toBeInTheDocument();
    });

    it('should not render SidebarToggle when navOpen is true', async () => {
      client = await getTestClientWithUser(user1);
      testChannel1 = generateChannel({ ...defaultChannelState });
      useMockedApis(client, [getOrCreateChannelApi(testChannel1)]);
      const channel = client.channel('messaging', testChannel1.channel.id);
      await channel.query();

      render(
        <WithComponents overrides={{ SidebarToggle }}>
          <ChatProvider value={mockChatContext({ channel, client, navOpen: true })}>
            <ChannelStateProvider value={mockChannelStateContext({ channel })}>
              <TranslationProvider value={mockTranslationContextValue({ t })}>
                <ChannelHeader />
              </TranslationProvider>
            </ChannelStateProvider>
          </ChatProvider>
        </WithComponents>,
      );

      expect(screen.queryByTestId('sidebar-toggle')).not.toBeInTheDocument();
    });
  });

  it("DM channel should reflect change of other user's name", async () => {
    const updatedAttribute = { name: 'new-name' };
    await renderComponent();

    await waitFor(() =>
      expect(screen.queryByText(updatedAttribute.name)).not.toBeInTheDocument(),
    );
    act(() => {
      dispatchUserUpdatedEvent(client, { ...user2, ...updatedAttribute });
    });
    await waitFor(() =>
      expect(screen.queryAllByText(updatedAttribute.name).length).toBeGreaterThan(0),
    );
  });

  it("DM channel should reflect change of other user's image", async () => {
    const updatedAttribute = { image: 'new-image' };
    await renderComponent();
    await waitFor(() => {
      expect(screen.queryByTestId('avatar-img')).not.toBeInTheDocument();
      expect(screen.queryByTestId('avatar-fallback')).toBeInTheDocument();
    });
    act(() => {
      dispatchUserUpdatedEvent(client, { ...user2, ...updatedAttribute });
    });
    await waitFor(() =>
      expect(screen.getByTestId('avatar-img')).toHaveAttribute(
        'src',
        updatedAttribute.image,
      ),
    );
  });

  describe('group channel', () => {
    const props = {
      Avatar: ChannelAvatar,
    };

    const getChannelState = (
      memberCount: number,
      channelData?: GenerateChannelOptions,
    ) => {
      const users = Array.from({ length: memberCount }, generateUser);
      const members = users.map((user) => generateMember({ user }));
      return generateChannel({
        members,
        messages: users.map((user) => generateMessage({ user })),
        ...channelData,
      });
    };
    const channelName = 'channel-name';
    const channelState = getChannelState(3, { channel: { name: channelName } });

    it('renders group avatar for channels with more than 2 members', async () => {
      const channelState = getChannelState(5);
      const ownUser = channelState.members[0].user;
      const {
        channels: [channel],
        client,
      } = await initClientWithChannels({
        channelsData: [channelState],
        customUser: ownUser,
      });
      await renderComponentBase({ channel, client, props });
      await waitFor(() => {
        // For 5 members, getGroupChannelDisplayInfo returns overflowCount,
        // so GroupAvatar renders 2 avatars + a "+N" overflow badge
        const groupAvatar = screen.getByTestId('group-avatar');
        expect(groupAvatar).toBeInTheDocument();
        const avatarImages = screen.getAllByTestId(AVATAR_IMG_TEST_ID);
        expect(avatarImages).toHaveLength(2);
      });
    });

    it.each([
      ['own user', channelState.members[0].user],
      ['other user', channelState.members[2].user],
    ])(
      "should not update the direct messaging channel's preview title if %s's name has changed",
      async (_, user) => {
        const {
          channels: [channel],
          client,
        } = await initClientWithChannels({ channelsData: [channelState] });
        const updatedAttribute = { name: 'new-name' };
        await renderComponentBase({ channel, client, props });

        await waitFor(() => {
          expect(screen.queryByText(updatedAttribute.name)).not.toBeInTheDocument();
          expect(screen.getByText(channelName)).toBeInTheDocument();
        });
        act(() => {
          dispatchUserUpdatedEvent(client, { ...user, ...updatedAttribute });
        });
        await waitFor(() => {
          expect(screen.queryByText(updatedAttribute.name)).not.toBeInTheDocument();
          expect(screen.getByText(channelName)).toBeInTheDocument();
        });
      },
    );

    it("should update the direct messaging channel's preview image if own user's image has changed", async () => {
      const ownUser = channelState.members[0].user;
      const {
        channels: [channel],
        client,
      } = await initClientWithChannels({
        channelsData: [channelState],
        customUser: ownUser,
      });
      const updatedAttribute = { image: 'new-image' };
      await renderComponentBase({ channel, client, props });
      await waitFor(() => {
        const avatarImages = screen.getAllByTestId(AVATAR_IMG_TEST_ID);
        expect(avatarImages).toHaveLength(3);
        expect(avatarImages[0]).toHaveAttribute('src', ownUser.image);
        expect(avatarImages[1]).toHaveAttribute(
          'src',
          channelState.members[1].user.image,
        );
        expect(avatarImages[2]).toHaveAttribute(
          'src',
          channelState.members[2].user.image,
        );
      });

      act(() => {
        dispatchUserUpdatedEvent(client, { ...ownUser, ...updatedAttribute });
      });

      await waitFor(() => {
        const avatarImages = screen.getAllByTestId(AVATAR_IMG_TEST_ID);
        expect(avatarImages[0]).toHaveAttribute('src', updatedAttribute.image);
        expect(avatarImages[1]).toHaveAttribute(
          'src',
          channelState.members[1].user.image,
        );
        expect(avatarImages[2]).toHaveAttribute(
          'src',
          channelState.members[2].user.image,
        );
      });
    });

    it("should update the direct messaging channel's preview image if other user's image has changed", async () => {
      const ownUser = channelState.members[0].user;
      const otherUser = channelState.members[2].user;
      const {
        channels: [channel],
        client,
      } = await initClientWithChannels({
        channelsData: [channelState],
        customUser: ownUser,
      });
      const updatedAttribute = { image: 'new-image' };
      await renderComponentBase({ channel, client, props });
      await waitFor(() => {
        const avatarImages = screen.getAllByTestId(AVATAR_IMG_TEST_ID);
        expect(avatarImages).toHaveLength(3);
        expect(avatarImages[0]).toHaveAttribute('src', ownUser.image);
        expect(avatarImages[1]).toHaveAttribute(
          'src',
          channelState.members[1].user.image,
        );
        expect(avatarImages[2]).toHaveAttribute(
          'src',
          channelState.members[2].user.image,
        );
      });

      act(() => {
        dispatchUserUpdatedEvent(client, { ...otherUser, ...updatedAttribute });
      });

      await waitFor(() => {
        const avatarImages = screen.getAllByTestId(AVATAR_IMG_TEST_ID);
        expect(avatarImages[0]).toHaveAttribute('src', ownUser.image);
        expect(avatarImages[1]).toHaveAttribute(
          'src',
          channelState.members[1].user.image,
        );
        expect(avatarImages[2]).toHaveAttribute('src', updatedAttribute.image);
      });
    });

    it("should not update the direct messaging channel's preview if other user's attribute than name or image has changed", async () => {
      const ownUser = channelState.members[0].user;
      const otherUser = channelState.members[2].user;
      const {
        channels: [channel],
        client,
      } = await initClientWithChannels({
        channelsData: [channelState],
        customUser: ownUser,
      });
      const updatedAttribute = { custom: 'new-custom' };
      await renderComponentBase({ channel, client, props });

      await waitFor(() => {
        expect(screen.queryByText(updatedAttribute.custom)).not.toBeInTheDocument();
        expect(screen.getByText(channelName)).toBeInTheDocument();
        const avatarImages = screen.getAllByTestId(AVATAR_IMG_TEST_ID);
        avatarImages.forEach((img, i) => {
          expect(img).toHaveAttribute('src', channelState.members[i]['userimage']);
        });
      });

      act(() => {
        dispatchUserUpdatedEvent(
          client,
          fromPartial<UserResponse>({ ...otherUser, ...updatedAttribute }),
        );
      });

      await waitFor(() => {
        expect(screen.queryByText(updatedAttribute.custom)).not.toBeInTheDocument();
        expect(screen.getByText(channelName)).toBeInTheDocument();
        const avatarImages = screen.getAllByTestId(AVATAR_IMG_TEST_ID);
        avatarImages.forEach((img, i) => {
          expect(img).toHaveAttribute('src', channelState.members[i]['userimage']);
        });
      });
    });

    it("should not update the direct messaging channel's preview if own user's attribute than name or image has changed", async () => {
      const ownUser = channelState.members[0].user;
      const {
        channels: [channel],
        client,
      } = await initClientWithChannels({
        channelsData: [channelState],
        customUser: ownUser,
      });
      const updatedAttribute = { custom: 'new-custom' };
      await renderComponentBase({ channel, client, props });

      await waitFor(() => {
        expect(screen.queryByText(updatedAttribute.custom)).not.toBeInTheDocument();
        expect(screen.getByText(channelName)).toBeInTheDocument();
        const avatarImages = screen.getAllByTestId(AVATAR_IMG_TEST_ID);
        avatarImages.forEach((img, i) => {
          expect(img).toHaveAttribute('src', channelState.members[i]['userimage']);
        });
      });

      act(() => {
        dispatchUserUpdatedEvent(
          client,
          fromPartial<UserResponse>({ ...ownUser, ...updatedAttribute }),
        );
      });

      await waitFor(() => {
        expect(screen.queryByText(updatedAttribute.custom)).not.toBeInTheDocument();
        expect(screen.getByText(channelName)).toBeInTheDocument();
        const avatarImages = screen.getAllByTestId(AVATAR_IMG_TEST_ID);
        avatarImages.forEach((img, i) => {
          expect(img).toHaveAttribute('src', channelState.members[i]['userimage']);
        });
      });
    });
  });
});