Skip to content

Commit

Permalink
Refactor src/components/UserPortal/* from Jest to Vitest (#2982)
Browse files Browse the repository at this point in the history 
* chatroom tests migrated from jest to vitest

* chore: fixed undefined typescript _id error in chatroom component & add missing mutation in orginizationCard_

* chore: createDirectChat tests migrated from jest to vitest

* chore: creategroupchat tests migrated from jest to vitest

* chore: donationcard,orgcard, orgnavbar, orgsidebar tests migrated from jest to vitest

* chore: peoplecard, postcard, promotedPost, register, securedrouteforuser tests migrated from jest to vitest

* chore: startPostModal, usernavbar, userprofile, usersidebar, usersidebarorg tests migrated from jest to vitest
  • Loading branch information
@abbi4code
abbi4code authored Dec 27, 2024
1 parent 2327a4b commit e73d61d
Show file tree
Hide file tree
Showing 22 changed files with 523 additions and 209 deletions.
25 changes: 17 additions & 8 deletions ...nts/UserPortal/ChatRoom/ChatRoom.test.tsx → ...nts/UserPortal/ChatRoom/ChatRoom.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,15 @@ import {
import ChatRoom from './ChatRoom';
import { useLocalStorage } from 'utils/useLocalstorage';
import { StaticMockLink } from 'utils/StaticMockLink';
import { vi } from 'vitest';

/**
* Unit tests for the ChatRoom component
*
* Tests cover component rendering, message functionality (sending/replying),
* user interactions, GraphQL integration, and provider integrations
* (Router, Redux, i18n) for both direct and group chats.
*/

const { setItem } = useLocalStorage();

Expand Down Expand Up @@ -1188,9 +1197,9 @@ const SEND_MESSAGE_TO_CHAT_MOCK = [
];

describe('Testing Chatroom Component [User Portal]', () => {
window.HTMLElement.prototype.scrollIntoView = jest.fn();
window.HTMLElement.prototype.scrollIntoView = vi.fn();

test('Chat room should display fallback content if no chat is active', async () => {
it('Chat room should display fallback content if no chat is active', async () => {
const mocks = [
...MESSAGE_SENT_TO_CHAT_MOCK,
...CHAT_BY_ID_QUERY_MOCK,
Expand All @@ -1212,7 +1221,7 @@ describe('Testing Chatroom Component [User Portal]', () => {
expect(await screen.findByTestId('noChatSelected')).toBeInTheDocument();
});

test('Selected contact is direct chat', async () => {
it('Selected contact is direct chat', async () => {
const link = new MockSubscriptionLink();
const mocks = [
...MESSAGE_SENT_TO_CHAT_MOCK,
Expand All @@ -1234,7 +1243,7 @@ describe('Testing Chatroom Component [User Portal]', () => {
await wait();
});

test('send message direct chat', async () => {
it('send message direct chat', async () => {
setItem('userId', '2');
const mocks = [
...MESSAGE_SENT_TO_CHAT_MOCK,
Expand Down Expand Up @@ -1319,7 +1328,7 @@ describe('Testing Chatroom Component [User Portal]', () => {
await wait(400);
});

test('send message direct chat when userId is different', async () => {
it('send message direct chat when userId is different', async () => {
setItem('userId', '8');
const mocks = [
...GROUP_CHAT_BY_ID_QUERY_MOCK,
Expand Down Expand Up @@ -1404,7 +1413,7 @@ describe('Testing Chatroom Component [User Portal]', () => {
await wait(400);
});

test('Selected contact is group chat', async () => {
it('Selected contact is group chat', async () => {
const mocks = [
...MESSAGE_SENT_TO_CHAT_MOCK,
...CHAT_BY_ID_QUERY_MOCK,
Expand All @@ -1425,7 +1434,7 @@ describe('Testing Chatroom Component [User Portal]', () => {
await wait();
});

test('send message group chat', async () => {
it('send message group chat', async () => {
const mocks = [
...MESSAGE_SENT_TO_CHAT_MOCK,
...CHAT_BY_ID_QUERY_MOCK,
Expand Down Expand Up @@ -1505,7 +1514,7 @@ describe('Testing Chatroom Component [User Portal]', () => {
await wait(500);
});

test('reply to message', async () => {
it('reply to message', async () => {
const mocks = [
...MESSAGE_SENT_TO_CHAT_MOCK,
...CHAT_BY_ID_QUERY_MOCK,
Expand Down
15 changes: 6 additions & 9 deletions src/components/UserPortal/ChatRoom/ChatRoom.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,17 +159,14 @@ export default function chatRoom(props: InterfaceChatRoomProps): JSX.Element {
userId: userId,
},
onData: (messageSubscriptionData) => {
if (
messageSubscriptionData?.data.data.messageSentToChat &&
messageSubscriptionData?.data.data.messageSentToChat
.chatMessageBelongsTo['_id'] == props.selectedContact
) {
const chatMessage = messageSubscriptionData.data?.data?.messageSentToChat;
const chatId = chatMessage?.chatMessageBelongsTo?._id;

if (!chatId) return;
if (chatId === props.selectedContact) {
chatRefetch();
} else {
chatRefetch({
id: messageSubscriptionData?.data.data.messageSentToChat
.chatMessageBelongsTo['_id'],
});
chatRefetch({ id: chatId });
}
},
});
Expand Down
27 changes: 19 additions & 8 deletions ...erPortal/CommentCard/CommentCard.test.tsx → ...erPortal/CommentCard/CommentCard.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,23 @@ import { BrowserRouter } from 'react-router-dom';
import { store } from 'state/store';
import i18nForTest from 'utils/i18nForTest';
import { StaticMockLink } from 'utils/StaticMockLink';

import CommentCard from './CommentCard';
import userEvent from '@testing-library/user-event';
import { LIKE_COMMENT, UNLIKE_COMMENT } from 'GraphQl/Mutations/mutations';
import useLocalStorage from 'utils/useLocalstorage';

import { vi } from 'vitest';

/**
* Unit tests for the CommentCard component.
*
* These tests ensure the CommentCard component renders and behaves as expected
* under different scenarios. They cover various functionalities like:
* - Initial rendering with comment liked/not liked by user
* - User liking a comment
* - User unliking a comment
* Mocked dependencies like `useLocalStorage` and Apollo Client mocks are used
* to isolate the component and test its behavior independently.
*/
const { getItem, setItem } = useLocalStorage();

async function wait(ms = 100): Promise<void> {
Expand Down Expand Up @@ -56,8 +67,8 @@ const MOCKS = [
},
];

const handleLikeComment = jest.fn();
const handleDislikeComment = jest.fn();
const handleLikeComment = vi.fn();
const handleDislikeComment = vi.fn();
const link = new StaticMockLink(MOCKS, true);

describe('Testing CommentCard Component [User Portal]', () => {
Expand All @@ -67,7 +78,7 @@ describe('Testing CommentCard Component [User Portal]', () => {
});
});

test('Component should be rendered properly if comment is already liked by the user.', async () => {
it('Component should be rendered properly if comment is already liked by the user.', async () => {
const cardProps = {
id: '1',
creator: {
Expand Down Expand Up @@ -108,7 +119,7 @@ describe('Testing CommentCard Component [User Portal]', () => {
}
});

test('Component should be rendered properly if comment is not already liked by the user.', async () => {
it('Component should be rendered properly if comment is not already liked by the user.', async () => {
const cardProps = {
id: '1',
creator: {
Expand Down Expand Up @@ -149,7 +160,7 @@ describe('Testing CommentCard Component [User Portal]', () => {
}
});

test('Component renders as expected if user likes the comment.', async () => {
it('Component renders as expected if user likes the comment.', async () => {
const cardProps = {
id: '1',
creator: {
Expand Down Expand Up @@ -195,7 +206,7 @@ describe('Testing CommentCard Component [User Portal]', () => {
}
});

test('Component renders as expected if user unlikes the comment.', async () => {
it('Component renders as expected if user unlikes the comment.', async () => {
const cardProps = {
id: '1',
creator: {
Expand Down
26 changes: 19 additions & 7 deletions ...erPortal/ContactCard/ContactCard.test.tsx → ...erPortal/ContactCard/ContactCard.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,19 @@ import i18nForTest from 'utils/i18nForTest';
import { StaticMockLink } from 'utils/StaticMockLink';
import ContactCard from './ContactCard';
import userEvent from '@testing-library/user-event';

import { vi } from 'vitest';

/**
* Unit tests for the ContactCard component.
*
* These tests ensure the ContactCard component renders and behaves as expected
* under different scenarios. They cover various functionalities like:
* - Rendering the contact card with and without a profile image
* - Selecting a contact by clicking on the card
* - Applying a grey background color to the selected contact card (for groups)
* Mocked dependencies like StaticMockLink are used
* to isolate the component and test its behavior independently.
*/
const link = new StaticMockLink([], true);

async function wait(ms = 100): Promise<void> {
Expand All @@ -30,12 +42,12 @@ let props = {
image: '',
selectedContact: '',
type: '',
setSelectedContact: jest.fn(),
setSelectedChatType: jest.fn(),
setSelectedContact: vi.fn(),
setSelectedChatType: vi.fn(),
};

describe('Testing ContactCard Component [User Portal]', () => {
test('Component should be rendered properly if person image is undefined', async () => {
it('Component should be rendered properly if person image is undefined', async () => {
render(
<MockedProvider addTypename={false} link={link}>
<BrowserRouter>
Expand All @@ -51,7 +63,7 @@ describe('Testing ContactCard Component [User Portal]', () => {
await wait();
});

test('Component should be rendered properly if person image is not undefined', async () => {
it('Component should be rendered properly if person image is not undefined', async () => {
props = {
...props,
image: 'personImage',
Expand All @@ -72,7 +84,7 @@ describe('Testing ContactCard Component [User Portal]', () => {
await wait();
});

test('Contact gets selectected when component is clicked', async () => {
it('Contact gets selectected when component is clicked', async () => {
render(
<MockedProvider addTypename={false} link={link}>
<BrowserRouter>
Expand All @@ -92,7 +104,7 @@ describe('Testing ContactCard Component [User Portal]', () => {
await wait();
});

test('Component is rendered with background color grey if the contact is selected', async () => {
it('Component is rendered with background color grey if the contact is selected', async () => {
props = {
...props,
selectedContact: '1',
Expand Down
35 changes: 25 additions & 10 deletions ...reateDirectChat/CreateDirectChat.test.tsx → ...reateDirectChat/CreateDirectChat.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,24 @@ import {
} from 'GraphQl/Mutations/OrganizationMutations';
import { CHATS_LIST, CHAT_BY_ID } from 'GraphQl/Queries/PlugInQueries';
import useLocalStorage from 'utils/useLocalstorage';

import { vi } from 'vitest';
const { setItem } = useLocalStorage();

/**
* Unit tests for the Create Direct Chat Modal functionality in the User Portal
*
* These tests cover the following scenarios:
* 1. Opening and closing the create new direct chat modal, ensuring proper UI elements
* like dropdown, search input, and submit button are displayed and functional.
* 2. Creating a new direct chat, which includes testing the interaction with the add button,
* submitting the chat, and closing the modal.
*
* Tests involve interacting with the modal's UI elements, performing actions like
* opening the dropdown, searching for users, clicking on the submit button, and closing
* the modal. GraphQL mocks are used for testing chat-related queries and mutations,
* ensuring that the modal behaves as expected when interacting with the GraphQL API.
*/

const UserConnectionListMock = [
{
request: {
Expand Down Expand Up @@ -1380,23 +1395,23 @@ async function wait(ms = 100): Promise<void> {
}

describe('Testing Create Direct Chat Modal [User Portal]', () => {
window.HTMLElement.prototype.scrollIntoView = jest.fn();
window.HTMLElement.prototype.scrollIntoView = vi.fn();

Object.defineProperty(window, 'matchMedia', {
writable: true,
value: jest.fn().mockImplementation((query) => ({
value: vi.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(),
addListener: vi.fn(), // Deprecated
removeListener: vi.fn(), // Deprecated
addEventListener: vi.fn(),
removeEventListener: vi.fn(),
dispatchEvent: vi.fn(),
})),
});

test('Open and close create new direct chat modal', async () => {
it('Open and close create new direct chat modal', async () => {
const mock = [
...GROUP_CHAT_BY_ID_QUERY_MOCK,
...MESSAGE_SENT_TO_CHAT_MOCK,
Expand Down Expand Up @@ -1446,7 +1461,7 @@ describe('Testing Create Direct Chat Modal [User Portal]', () => {
fireEvent.click(closeButton);
});

test('create new direct chat', async () => {
it('create new direct chat', async () => {
setItem('userId', '1');
const mock = [
...GROUP_CHAT_BY_ID_QUERY_MOCK,
Expand Down
38 changes: 28 additions & 10 deletions .../CreateGroupChat/CreateGroupChat.test.tsx → .../CreateGroupChat/CreateGroupChat.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,24 @@ import {
import { CHATS_LIST, CHAT_BY_ID } from 'GraphQl/Queries/PlugInQueries';
import useLocalStorage from 'utils/useLocalstorage';
import userEvent from '@testing-library/user-event';
import { vi } from 'vitest';

/**
* Unit tests for the Create Group Chat Modal functionality in the User Portal
*
* These tests cover the following scenarios:
* 1. Opening and closing the create new group chat modal, ensuring proper UI elements
* like the dropdown, new group chat button, and close button are displayed and functional.
* 2. Creating a new group chat by interacting with the group name input field, organization
* selection, and submission process. It also ensures that the create button is properly
* triggered after filling out the required fields.
* 3. Adding and removing users from the group chat, testing the interactions with the add
* and remove buttons, and verifying the submit button and search functionality for user selection.
*
* GraphQL mocks are used to simulate chat-related queries and mutations. The tests ensure that
* the modal behaves correctly in various user interaction scenarios, including handling of form
* fields, user management, and modal navigation.
*/

const { setItem } = useLocalStorage();

Expand Down Expand Up @@ -2212,23 +2230,23 @@ async function wait(ms = 100): Promise<void> {
}

describe('Testing Create Group Chat Modal [User Portal]', () => {
window.HTMLElement.prototype.scrollIntoView = jest.fn();
window.HTMLElement.prototype.scrollIntoView = vi.fn();

Object.defineProperty(window, 'matchMedia', {
writable: true,
value: jest.fn().mockImplementation((query) => ({
value: vi.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(),
addListener: vi.fn(), // Deprecated
removeListener: vi.fn(), // Deprecated
addEventListener: vi.fn(),
removeEventListener: vi.fn(),
dispatchEvent: vi.fn(),
})),
});

test('open and close create new direct chat modal', async () => {
it('open and close create new direct chat modal', async () => {
const mock = [
...USER_JOINED_ORG_MOCK,
...GROUP_CHAT_BY_ID_QUERY_MOCK,
Expand Down Expand Up @@ -2266,7 +2284,7 @@ describe('Testing Create Group Chat Modal [User Portal]', () => {
fireEvent.click(closeButton);
});

test('create new group chat', async () => {
it('create new group chat', async () => {
const mock = [
...USER_JOINED_ORG_MOCK,
...GROUP_CHAT_BY_ID_QUERY_MOCK,
Expand Down Expand Up @@ -2366,7 +2384,7 @@ describe('Testing Create Group Chat Modal [User Portal]', () => {
// });
}, 3000);

test('add and remove user', async () => {
it('add and remove user', async () => {
setItem('userId', '1');
const mock = [
...USER_JOINED_ORG_MOCK,
Expand Down
Loading

0 comments on commit e73d61d

Please sign in to comment.