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

Refactor: src/screens/UserPortal/People from Jest to Vitest #2766

Merged
merged 1 commit into from
Dec 24, 2024
Merged

Refactor: src/screens/UserPortal/People from Jest to Vitest #2766

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
44 changes: 30 additions & 14 deletions ...screens/UserPortal/People/People.test.tsx → ...screens/UserPortal/People/People.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,19 @@ import i18nForTest from 'utils/i18nForTest';
import { StaticMockLink } from 'utils/StaticMockLink';
import People from './People';
import userEvent from '@testing-library/user-event';
import { vi } from 'vitest';

/**
* This file contains unit tests for the People component.
*
* The tests cover:
* - Proper rendering of the People screen and its elements.
* - Functionality of the search input and search button.
* - Correct behavior when switching between member and admin modes.
* - Integration with mocked GraphQL queries for testing data fetching.
*
* These tests use Vitest for test execution, MockedProvider for mocking GraphQL queries, and react-testing-library for rendering and interactions.
*/

const MOCKS = [
{
Expand Down Expand Up @@ -113,27 +126,30 @@ async function wait(ms = 100): Promise<void> {
});
}

jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useParams: () => ({ orgId: '' }),
}));
vi.mock('react-router-dom', async () => {
const actual = await vi.importActual('react-router-dom');
return {
...actual,
useParams: () => ({ orgId: '' }),
};
});

describe('Testing People Screen [User Portal]', () => {
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('Screen should be rendered properly', async () => {
it('Screen should be rendered properly', async () => {
render(
<MockedProvider addTypename={false} link={link}>
<BrowserRouter>
Expand All @@ -151,7 +167,7 @@ describe('Testing People Screen [User Portal]', () => {
expect(screen.queryAllByText('Noble Mittal')).not.toBe([]);
});

test('Search works properly by pressing enter', async () => {
it('Search works properly by pressing enter', async () => {
render(
<MockedProvider addTypename={false} link={link}>
<BrowserRouter>
Expand All @@ -173,7 +189,7 @@ describe('Testing People Screen [User Portal]', () => {
expect(screen.queryByText('Noble Mittal')).not.toBeInTheDocument();
});

test('Search works properly by clicking search Btn', async () => {
it('Search works properly by clicking search Btn', async () => {
render(
<MockedProvider addTypename={false} link={link}>
<BrowserRouter>
Expand All @@ -199,7 +215,7 @@ describe('Testing People Screen [User Portal]', () => {
expect(screen.queryByText('Noble Mittal')).not.toBeInTheDocument();
});

test('Mode is changed to Admins', async () => {
it('Mode is changed to Admins', async () => {
render(
<MockedProvider addTypename={false} link={link}>
<BrowserRouter>
Expand Down
Loading