add team and livestream pin UI tests

Author: DanC5

src/components/Message/MessageLivestream.js

@@ -473,7 +473,7 @@ MessageLivestreamComponent.propTypes = {
    * Returns all allowed actions on message by current user e.g., ['edit', 'delete', 'flag', 'mute', 'react', 'reply']
    * Please check [Message](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message.js) component for default implementation.
    * */
-  getMessageActions: PropTypes.func.isRequired,
+  getMessageActions: /** @type {PropTypes.Validator<() => Array<string>>} */ (PropTypes.func),
   /**
    * Function to publish updates on message to channel
    *

src/components/Message/__tests__/MessageLivestream.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { cleanup, render, fireEvent } from '@testing-library/react';
+import { cleanup, render, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import {
   generateChannel,
@@ -163,6 +163,36 @@ describe('<MessageLivestream />', () => {
     expect(getByTestId('custom-avatar')).toBeInTheDocument();
   });
 
+  it('should render pin indicator when pinned is true', async () => {
+    const message = generateAliceMessage({ pinned: true });
+    const CustomPinIndicator = () => (
+      <div data-testid="pin-indicator">Pin Indicator</div>
+    );
+
+    const { getByTestId } = await renderMessageLivestream(message, {
+      PinIndicator: CustomPinIndicator,
+    });
+
+    await waitFor(() => {
+      expect(getByTestId('pin-indicator')).toBeInTheDocument();
+    });
+  });
+
+  it('should not render pin indicator when pinned is false', async () => {
+    const message = generateAliceMessage({ pinned: false });
+    const CustomPinIndicator = () => (
+      <div data-testid="pin-indicator">Pin Indicator</div>
+    );
+
+    const { queryAllByTestId } = await renderMessageLivestream(message, {
+      PinIndicator: CustomPinIndicator,
+    });
+
+    await waitFor(() => {
+      expect(queryAllByTestId('pin-indicator')).toHaveLength(0);
+    });
+  });
+
   it('should render custom edit message input component when one is given', async () => {
     const message = generateAliceMessage();
     const updateMessage = jest.fn();

src/components/Message/__tests__/MessageTeam.test.js

@@ -1,6 +1,6 @@
 /* eslint-disable sonarjs/no-duplicate-string */
 import React from 'react';
-import { cleanup, render, fireEvent } from '@testing-library/react';
+import { cleanup, render, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import {
   generateChannel,
@@ -160,6 +160,36 @@ describe('<MessageTeam />', () => {
     expect(getByTestId('custom-avatar')).toBeInTheDocument();
   });
 
+  it('should render pin indicator when pinned is true', async () => {
+    const message = generateAliceMessage({ pinned: true });
+    const CustomPinIndicator = () => (
+      <div data-testid="pin-indicator">Pin Indicator</div>
+    );
+
+    const { getByTestId } = await renderMessageTeam(message, {
+      PinIndicator: CustomPinIndicator,
+    });
+
+    await waitFor(() => {
+      expect(getByTestId('pin-indicator')).toBeInTheDocument();
+    });
+  });
+
+  it('should not render pin indicator when pinned is false', async () => {
+    const message = generateAliceMessage({ pinned: false });
+    const CustomPinIndicator = () => (
+      <div data-testid="pin-indicator">Pin Indicator</div>
+    );
+
+    const { queryAllByTestId } = await renderMessageTeam(message, {
+      PinIndicator: CustomPinIndicator,
+    });
+
+    await waitFor(() => {
+      expect(queryAllByTestId('pin-indicator')).toHaveLength(0);
+    });
+  });
+
   it('should render custom edit message input component when one is given', async () => {
     const message = generateAliceMessage();
     const updateMessage = jest.fn();