Add chat screen tests and fix other bugs

package.json

@@ -11,6 +11,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.8.3",
     "@mui/material": "^5.14.1",
+    "@mui/private-theming": "^5.14.13",
     "@mui/system": "^5.14.12",
     "@mui/x-charts": "^6.0.0-alpha.13",
     "@mui/x-data-grid": "^6.8.0",

src/components/UserPortal/ContactCard/ContactCard.test.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { act, render, screen } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import ContactCard from './ContactCard';
+import userEvent from '@testing-library/user-event';
+
+const link = new StaticMockLink([], true);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+let props = {
+  id: '1',
+  firstName: 'Noble',
+  lastName: 'Mittal',
+  email: '[email protected]',
+  image: '',
+  selectedContact: '',
+  setSelectedContact: jest.fn(),
+  setSelectedContactName: jest.fn(),
+};
+
+describe('Testing ContactCard Component [User Portal]', () => {
+  test('Component should be rendered properly  if person image is undefined', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ContactCard {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+
+    await wait();
+  });
+
+  test('Component should be rendered properly if person image is not undefined', async () => {
+    props = {
+      ...props,
+      image: 'personImage',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ContactCard {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+
+    await wait();
+  });
+
+  test('Contact gets selectected when component is clicked', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ContactCard {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('contactContainer'));
+
+    await wait();
+  });
+
+  test('Component is rendered with background color grey if the contact is selected', async () => {
+    props = {
+      ...props,
+      selectedContact: '1',
+    };
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ContactCard {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('contactContainer'));
+
+    await wait();
+  });
+});

src/components/UserPortal/ContactCard/ContactCard.tsx

@@ -38,6 +38,7 @@ function contactCard(props: InterfaceContactCardProps): JSX.Element {
           isSelected ? styles.bgGrey : styles.bgWhite
         }`}
         onClick={handleSelectedContactChange}
+        data-testid="contactContainer"
       >
         <img src={imageUrl} alt={contactName} className={styles.contactImage} />
         <div className={styles.contactNameContainer}>

src/screens/UserPortal/Chat/Chat.test.tsx

@@ -0,0 +1,173 @@
+import React from 'react';
+import { act, render, screen } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+
+import { ORGANIZATIONS_MEMBER_CONNECTION_LIST } from 'GraphQl/Queries/Queries';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import Chat from './Chat';
+import * as getOrganizationId from 'utils/getOrganizationId';
+import userEvent from '@testing-library/user-event';
+
+const MOCKS = [
+  {
+    request: {
+      query: ORGANIZATIONS_MEMBER_CONNECTION_LIST,
+      variables: {
+        orgId: '',
+        firstName_contains: '',
+      },
+    },
+    result: {
+      data: {
+        organizationsMemberConnection: {
+          edges: [
+            {
+              _id: '64001660a711c62d5b4076a2',
+              firstName: 'Noble',
+              lastName: 'Mittal',
+              image: null,
+              email: '[email protected]',
+              createdAt: '2023-03-02T03:22:08.101Z',
+            },
+            {
+              _id: '64001660a711c62d5b4076a3',
+              firstName: 'Noble',
+              lastName: 'Mittal',
+              image: 'mockImage',
+              email: '[email protected]',
+              createdAt: '2023-03-02T03:22:08.101Z',
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: ORGANIZATIONS_MEMBER_CONNECTION_LIST,
+      variables: {
+        orgId: '',
+        firstName_contains: 'j',
+      },
+    },
+    result: {
+      data: {
+        organizationsMemberConnection: {
+          edges: [
+            {
+              _id: '64001660a711c62d5b4076a2',
+              firstName: 'John',
+              lastName: 'Cena',
+              image: null,
+              email: '[email protected]',
+              createdAt: '2023-03-02T03:22:08.101Z',
+            },
+          ],
+        },
+      },
+    },
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+describe('Testing People Screen [User Portal]', () => {
+  jest.mock('utils/getOrganizationId');
+
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(), // Deprecated
+      removeListener: jest.fn(), // Deprecated
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+
+  const getOrganizationIdSpy = jest
+    .spyOn(getOrganizationId, 'default')
+    .mockImplementation(() => {
+      return '';
+    });
+
+  test('Screen should be rendered properly', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Chat />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+
+    await wait();
+
+    expect(getOrganizationIdSpy).toHaveBeenCalled();
+    expect(screen.queryAllByText('Noble Mittal')).not.toBe([]);
+  });
+
+  test('User is able to select a contact', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Chat />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByText('[email protected]'));
+    await wait();
+
+    expect(getOrganizationIdSpy).toHaveBeenCalled();
+    expect(screen.queryAllByText('Noble Mittal')).not.toBe([]);
+  });
+
+  test('Search functionality works as expected', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Chat />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+
+    await wait();
+
+    userEvent.type(screen.getByTestId('searchInput'), 'j');
+    await wait();
+
+    expect(getOrganizationIdSpy).toHaveBeenCalled();
+    expect(screen.queryByText('John Cena')).toBeInTheDocument();
+    expect(screen.queryByText('Noble Mittal')).not.toBeInTheDocument();
+  });
+});

src/screens/UserPortal/Chat/Chat.tsx

@@ -76,10 +76,6 @@ export default function chat(): JSX.Element {
     }
   }, [contactData]);
 
-  React.useEffect(() => {
-    console.log(selectedContact);
-  }, [selectedContact]);
-
   return (
     <>
       <OrganizationNavbar {...navbarProps} />