Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve Code Coverage in src/screens/UserPortal/Chat/Chat.tsx #3163

Merged
merged 5 commits into from
Jan 6, 2025
Merged

Improve Code Coverage in src/screens/UserPortal/Chat/Chat.tsx #3163

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
18823c4
chore: test msgs for all messages added
abbi4code Jan 5, 2025
320753b
chore: Increase test coverage in chat.tsx
abbi4code Jan 5, 2025
3f9d2c1
refactor: remove redundant data-testid prop from ContactCard usage
abbi4code Jan 5, 2025
e91018c
Merge remote-tracking branch 'upstream/develop-postgres' into chat-te…
abbi4code Jan 5, 2025
92dee41
added a mock for markchatmessagesasread mutation that fixes the runti…
abbi4code Jan 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
204 changes: 201 additions & 3 deletions src/screens/UserPortal/Chat/Chat.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import {
UNREAD_CHAT_LIST,
} from 'GraphQl/Queries/PlugInQueries';
import useLocalStorage from 'utils/useLocalstorage';
// import userEvent from '@testing-library/user-event';

/**
* Unit tests for the ChatScreen component.
Expand Down Expand Up @@ -4280,7 +4281,126 @@ describe('Testing Chat Screen [User Portal]', () => {
...GROUP_CHAT_LIST_QUERY_MOCK,
...MARK_CHAT_MESSAGES_AS_READ_MOCK,
];
beforeEach(() => {
vi.clearAllMocks();
});
abbi4code marked this conversation as resolved.
Show resolved Hide resolved

it('should handle filter changes in sequence', async () => {
const mockChatsData = {
chatsByUserId: [
{
_id: '1',
isGroup: false,
users: [{ _id: '1', firstName: 'John', lastName: 'Doe' }],
messages: [],
unseenMessagesByUsers: '{}',
},
],
};

const mocks = [
{
request: {
query: CHATS_LIST,
variables: { id: '1' },
},
result: {
data: mockChatsData,
},
},
];
setItem('userId', '1');
render(
<MockedProvider mocks={mocks} addTypename={false}>
<BrowserRouter>
<Provider store={store}>
<I18nextProvider i18n={i18nForTest}>
<Chat />
</I18nextProvider>
</Provider>
</BrowserRouter>
</MockedProvider>,
);

const allChatButton = await screen.findByTestId('allChat');
const unreadChatButton = await screen.findByTestId('unreadChat');
const groupChatButton = await screen.findByTestId('groupChat');

await act(async () => {
fireEvent.click(unreadChatButton);
});
await act(async () => {
await new Promise((resolve) => setTimeout(resolve, 0));
});

await act(async () => {
fireEvent.click(groupChatButton);
});
await act(async () => {
await new Promise((resolve) => setTimeout(resolve, 0));
});

await act(async () => {
fireEvent.click(allChatButton);
});
await act(async () => {
await new Promise((resolve) => setTimeout(resolve, 0));
});

const contactCards = await screen.findAllByTestId('contactContainer');
expect(contactCards).toHaveLength(mockChatsData.chatsByUserId.length);
});
abbi4code marked this conversation as resolved.
Show resolved Hide resolved
it('should fetch and set all chats when filterType is "all"', async () => {
setItem('userId', '1');
const mockChatsData = {
chatsByUserId: [
{
_id: '1',
isGroup: false,
users: [{ _id: '1', firstName: 'John', lastName: 'Doe' }],
messages: [],
unseenMessagesByUsers: '{}',
},
],
};

const mocks = [
{
request: {
query: CHATS_LIST,
variables: { id: '1' },
},
result: {
data: mockChatsData,
},
},
];

render(
<MockedProvider mocks={mocks} addTypename={false}>
<BrowserRouter>
<Provider store={store}>
<I18nextProvider i18n={i18nForTest}>
<Chat />
</I18nextProvider>
</Provider>
</BrowserRouter>
</MockedProvider>,
);

const allChatButton = await screen.findByTestId('allChat');

await act(async () => {
fireEvent.click(allChatButton);
});

await act(async () => {
await new Promise((resolve) => setTimeout(resolve, 0));
});

const contactCards = await screen.findAllByTestId('contactContainer');
expect(contactCards).toHaveLength(mockChatsData.chatsByUserId.length);
});
test('Screen should be rendered properly', async () => {
render(
<MockedProvider addTypename={false} mocks={mock}>
Expand Down Expand Up @@ -4377,7 +4497,6 @@ describe('Testing Chat Screen [User Portal]', () => {
fireEvent.click(closeButton);
});

// filter chat test
test('Testing chat filters', async () => {
setItem('userId', '1');

Expand All @@ -4399,8 +4518,6 @@ describe('Testing Chat Screen [User Portal]', () => {
fireEvent.click(await screen.findByTestId('unreadChat'));
});

await wait(1000);

await act(async () => {
fireEvent.click(await screen.findByTestId('groupChat'));
});
Expand All @@ -4411,4 +4528,85 @@ describe('Testing Chat Screen [User Portal]', () => {
fireEvent.click(await screen.findByTestId('allChat'));
});
});
it('should fetch and set group chats when filterType is "group"', async () => {
setItem('userId', '1');
const mockGroupChatsData = {
getGroupChatsByUserId: [
{
_id: '1',
isGroup: true,
name: 'Test Group',
users: [
{ _id: '1', firstName: 'John', lastName: 'Doe', image: 'test.jpg' },
{
_id: '2',
firstName: 'Jane',
lastName: 'Smith',
image: 'test.jpg',
},
],
messages: [],
unseenMessagesByUsers: '{"1": 0}',
image: 'group.jpg',
},
{
_id: '2',
isGroup: true,
name: 'Another Group',
users: [
{ _id: '1', firstName: 'John', lastName: 'Doe', image: 'test.jpg' },
{
_id: '3',
firstName: 'Alice',
lastName: 'Johnson',
image: 'test.jpg',
},
],
messages: [],
unseenMessagesByUsers: '{"1": 2}',
image: 'group2.jpg',
},
],
};

const mocks = [
{
request: {
query: GROUP_CHAT_LIST,
},
result: {
data: mockGroupChatsData,
},
},
];

render(
<MockedProvider mocks={mocks} addTypename={false}>
<BrowserRouter>
<Provider store={store}>
<I18nextProvider i18n={i18nForTest}>
<Chat />
</I18nextProvider>
</Provider>
</BrowserRouter>
</MockedProvider>,
);

const groupChatButton = await screen.findByTestId('groupChat');

await act(async () => {
fireEvent.click(groupChatButton);
});

await act(async () => {
await new Promise((resolve) => setTimeout(resolve, 0));
});
const contactCards = await screen.findAllByTestId('contactContainer');
expect(contactCards).toHaveLength(
mockGroupChatsData.getGroupChatsByUserId.length,
);

expect(screen.getByText('Test Group')).toBeInTheDocument();
expect(screen.getByText('Another Group')).toBeInTheDocument();
});
abbi4code marked this conversation as resolved.
Show resolved Hide resolved
});
19 changes: 2 additions & 17 deletions src/screens/UserPortal/Chat/Chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,27 +105,12 @@ export default function chat(): JSX.Element {
});
const { t: tCommon } = useTranslation('common');

const [hideDrawer, setHideDrawer] = useState<boolean | null>(null);
const [chats, setChats] = useState<Chat[]>([]);
const [selectedContact, setSelectedContact] = useState('');
const [filterType, setFilterType] = useState('all');
const { getItem } = useLocalStorage();
const userId = getItem('userId');

const handleResize = (): void => {
if (window.innerWidth <= 820) {
setHideDrawer(!hideDrawer);
}
};
palisadoes marked this conversation as resolved.
Show resolved Hide resolved

useEffect(() => {
handleResize();
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);

React.useEffect(() => {
if (filterType === 'all') {
chatsListRefetch();
Expand All @@ -152,7 +137,7 @@ export default function chat(): JSX.Element {
setCreateDirectChatModalisOpen(true);
}

const toggleCreateDirectChatModal = /* istanbul ignore next */ (): void =>
const toggleCreateDirectChatModal = (): void =>
setCreateDirectChatModalisOpen(!createDirectChatModalisOpen);

const [createGroupChatModalisOpen, setCreateGroupChatModalisOpen] =
Expand All @@ -162,7 +147,7 @@ export default function chat(): JSX.Element {
setCreateGroupChatModalisOpen(true);
}

const toggleCreateGroupChatModal = /* istanbul ignore next */ (): void => {
const toggleCreateGroupChatModal = (): void => {
setCreateGroupChatModalisOpen(!createGroupChatModalisOpen);
};

Expand Down
Loading