test: add ChannelPreview tests

Author: MartinCupela

src/components/ChannelPreview/ChannelPreviewMessenger.tsx

@@ -1,10 +1,10 @@
 import React, { useRef } from 'react';
 import clsx from 'clsx';
 import { Avatar as DefaultAvatar } from '../Avatar';
+import { useComponentContext } from '../../context';
 
 import type { ChannelPreviewUIComponentProps } from './ChannelPreview';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { useComponentContext } from '../../context';
 
 const UnMemoizedChannelPreviewMessenger = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
@@ -13,7 +13,7 @@ const UnMemoizedChannelPreviewMessenger = <
 ) => {
   const {
     active,
-    Avatar: SimpleAvatar = DefaultAvatar,
+    Avatar: PropsAvatar = DefaultAvatar,
     channel,
     className: customClassName = '',
     displayImage,
@@ -43,7 +43,7 @@ const UnMemoizedChannelPreviewMessenger = <
     }
   };
 
-  const Avatar = ChannelAvatar ?? SimpleAvatar;
+  const Avatar = ChannelAvatar ?? PropsAvatar;
 
   return (
     <button

src/components/ChannelPreview/__tests__/ChannelPreview.test.js

@@ -172,6 +172,36 @@ describe('ChannelPreview', () => {
     await expectLastEventMessageToBe(getByTestId, c0.data.name);
   });
 
+  it('allows to imperatively state the component represents an active channel', () => {
+    const previewUITestId = 'preview-ui-test-id';
+    const ChannelPreviewUI = ({ active }) => (
+      <div data-isactive={active} data-testid={previewUITestId} />
+    );
+    const { rerender } = renderComponent(
+      {
+        activeChannel: c1,
+        channel: c0,
+        Preview: ChannelPreviewUI,
+      },
+      render,
+    );
+    const previewUI = screen.getByTestId(previewUITestId);
+    expect(previewUI).toBeInTheDocument();
+    expect(previewUI).toHaveAttribute('data-isactive', 'false');
+
+    renderComponent(
+      {
+        active: true,
+        activeChannel: c1,
+        channel: c0,
+        Preview: ChannelPreviewUI,
+      },
+      rerender,
+    );
+    expect(previewUI).toBeInTheDocument();
+    expect(previewUI).toHaveAttribute('data-isactive', 'true');
+  });
+
   const eventCases = [
     ['message.new', dispatchMessageNewEvent],
     ['message.updated', dispatchMessageUpdatedEvent],

src/components/ChannelPreview/__tests__/ChannelPreviewMessenger.test.js

@@ -13,7 +13,7 @@ import {
 } from 'mock-builders';
 
 import { ChannelPreviewMessenger } from '../ChannelPreviewMessenger';
-import { ChatProvider } from '../../../context';
+import { ChatProvider, ComponentProvider } from '../../../context';
 
 expect.extend(toHaveNoViolations);
 
@@ -23,19 +23,21 @@ describe('ChannelPreviewMessenger', () => {
   const clientUser = generateUser();
   let chatClient;
   let channel;
-  const renderComponent = (props) => (
+  const renderComponent = (props, componentOverrides) => (
     <ChatProvider value={{ client: { user: { id: 'id' } } }}>
-      <div aria-label='Select Channel' role='listbox'>
-        <ChannelPreviewMessenger
-          channel={channel}
-          displayImage='https://randomimage.com/src.jpg'
-          displayTitle='Channel name'
-          latestMessagePreview='Latest message!'
-          setActiveChannel={jest.fn()}
-          unread={10}
-          {...props}
-        />
-      </div>
+      <ComponentProvider value={componentOverrides}>
+        <div aria-label='Select Channel' role='listbox'>
+          <ChannelPreviewMessenger
+            channel={channel}
+            displayImage='https://randomimage.com/src.jpg'
+            displayTitle='Channel name'
+            latestMessagePreview='Latest message!'
+            setActiveChannel={jest.fn()}
+            unread={10}
+            {...props}
+          />
+        </div>
+      </ComponentProvider>
     </ChatProvider>
   );
 
@@ -58,6 +60,23 @@ describe('ChannelPreviewMessenger', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it('gives preference to ChannelAvatar from component context over the props Avatar component', () => {
+    const channelAvatarTestID = 'custom-channel-avatar';
+    const propsAvatarTestID = 'props-avatar';
+    const ChannelAvatar = () => <div data-testid={channelAvatarTestID} />;
+    const PropsAvatar = () => <div data-testid={propsAvatarTestID} />;
+    render(
+      renderComponent(
+        {
+          Avatar: PropsAvatar,
+        },
+        { ChannelAvatar },
+      ),
+    );
+    expect(screen.queryByTestId(propsAvatarTestID)).not.toBeInTheDocument();
+    expect(screen.getByTestId(channelAvatarTestID)).toBeInTheDocument();
+  });
+
   it('should call setActiveChannel on click', async () => {
     const setActiveChannel = jest.fn();
     const { container, getByTestId } = render(