test: add ChannelHeader tests

Author: MartinCupela

src/components/ChannelHeader/ChannelHeader.tsx

@@ -5,12 +5,12 @@ import { MenuIcon as DefaultMenuIcon } from './icons';
 import { ChannelAvatarProps, Avatar as DefaultAvatar } from '../Avatar';
 import { useChannelPreviewInfo } from '../ChannelPreview/hooks/useChannelPreviewInfo';
 
+import { useComponentContext } from '../../context';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useChatContext } from '../../context/ChatContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { useComponentContext } from '../../context';
 
 export type ChannelHeaderProps = {
   /** UI component to display an avatar, defaults to [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) component and accepts the same props as: [ChannelAvatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/ChannelAvatar.tsx) */

src/components/ChannelHeader/__tests__/ChannelHeader.test.js

@@ -21,6 +21,8 @@ import {
 import { toHaveNoViolations } from 'jest-axe';
 import { axe } from '../../../../axe-helper';
 import { ChannelAvatar } from '../../Avatar';
+import { ComponentProvider } from '../../../context';
+
 expect.extend(toHaveNoViolations);
 
 const AVATAR_IMG_TEST_ID = 'avatar-img';
@@ -37,87 +39,98 @@ const defaultChannelState = {
 
 const t = jest.fn((key) => key);
 
-const renderComponentBase = ({ channel, client, props }) =>
+const renderComponentBase = ({ channel, client, componentOverrides, props }) =>
   render(
     <ChatProvider value={{ channel, client }}>
-      <ChannelStateProvider value={{ channel }}>
-        <TranslationProvider value={{ t }}>
-          <ChannelHeader {...props} />
-        </TranslationProvider>
-      </ChannelStateProvider>
+      <ComponentProvider value={componentOverrides}>
+        <ChannelStateProvider value={{ channel }}>
+          <TranslationProvider value={{ t }}>
+            <ChannelHeader {...props} />
+          </TranslationProvider>
+        </ChannelStateProvider>
+      </ComponentProvider>
     </ChatProvider>,
   );
 
-async function renderComponent(props, channelData, channelType = 'messaging') {
+async function renderComponent({
+  channelData,
+  channelType = 'messaging',
+  componentOverrides,
+  props,
+}) {
   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.id, channelData);
   await channel.query();
 
-  return renderComponentBase({ channel, client, props });
+  return renderComponentBase({ channel, client, componentOverrides, props });
 }
 
 afterEach(cleanup); // eslint-disable-line
 
 describe('ChannelHeader', () => {
   it('should display live label when prop live is true', async () => {
-    const { container } = await renderComponent(
-      { live: true },
-      { image: 'image.jpg', name: 'test-channel-1' },
-    );
+    const { container } = await renderComponent({
+      channelData: { image: 'image.jpg', name: 'test-channel-1' },
+      props: { live: true },
+    });
     const results = await axe(container);
     expect(results).toHaveNoViolations();
     expect(container.querySelector('.str-chat__header-livestream-livelabel')).toBeInTheDocument();
   });
 
   it("should display avatar with fallback image only if other user's name is available", async () => {
-    await renderComponent(null, { image: null });
+    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(
-      { live: false },
-      { image: 'image.jpg', name: 'test-channel-1' },
-    );
+    const { container, getByTestId } = await renderComponent({
+      channelData: { image: 'image.jpg', name: 'test-channel-1' },
+      props: { live: false },
+    });
     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(
-      { title: 'Custom Title' },
-      { image: 'image.jpg', name: 'test-channel-1' },
-    );
+    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 display subtitle if present in channel data', async () => {
-    const { container, getByText } = await renderComponent(null, {
-      image: 'image.jpg',
-      name: 'test-channel-1',
-      subtitle: 'test subtitle',
+    const { container, getByText } = await renderComponent({
+      channelData: {
+        image: 'image.jpg',
+        name: 'test-channel-1',
+        subtitle: 'test subtitle',
+      },
     });
     const results = await axe(container);
     expect(results).toHaveNoViolations();
     expect(getByText('test subtitle')).toBeInTheDocument();
   });
 
   it('should display watcher_count', async () => {
-    const { container, getByText } = await renderComponent(null, {
-      image: 'image.jpg',
-      name: 'test-channel-1',
-      subtitle: 'test subtitle',
-      watcher_count: 34,
+    const { container, getByText } = await renderComponent({
+      channelData: {
+        image: 'image.jpg',
+        name: 'test-channel-1',
+        subtitle: 'test subtitle',
+        watcher_count: 34,
+      },
     });
     const results = await axe(container);
     expect(results).toHaveNoViolations();
@@ -127,11 +140,13 @@ describe('ChannelHeader', () => {
   });
 
   it('should display correct member_count', async () => {
-    const { container, getByText } = await renderComponent(null, {
-      image: 'image.jpg',
-      member_count: 34,
-      name: 'test-channel-1',
-      subtitle: 'test subtitle',
+    const { container, getByText } = await renderComponent({
+      channelData: {
+        image: 'image.jpg',
+        member_count: 34,
+        name: 'test-channel-1',
+        subtitle: 'test subtitle',
+      },
     });
     const results = await axe(container);
     expect(results).toHaveNoViolations();
@@ -161,7 +176,9 @@ describe('ChannelHeader', () => {
 
   it('should display custom menu icon', async () => {
     const { container } = await renderComponent({
-      MenuIcon: CustomMenuIcon,
+      props: {
+        MenuIcon: CustomMenuIcon,
+      },
     });
     expect(container.querySelector('div#custom-icon')).toBeInTheDocument();
   });
@@ -194,6 +211,21 @@ describe('ChannelHeader', () => {
     );
   });
 
+  it('prefers the ChannelAvatar provided over component context', async () => {
+    const channelAvatarTestID = 'custom-channel-avatar';
+    const propsAvatarTestID = 'props-avatar';
+    const ChannelAvatar = () => <div data-testid={channelAvatarTestID} />;
+    const PropsAvatar = () => <div data-testid={propsAvatarTestID} />;
+
+    await renderComponent({
+      componentOverrides: { ChannelAvatar },
+      props: { Avatar: PropsAvatar },
+    });
+
+    expect(screen.queryByTestId(propsAvatarTestID)).not.toBeInTheDocument();
+    expect(screen.getByTestId(channelAvatarTestID)).toBeInTheDocument();
+  });
+
   describe('group channel', () => {
     const props = {
       Avatar: ChannelAvatar,