From 9deb6e8a6dedfd8def2e60f4a81bd30c834d144d Mon Sep 17 00:00:00 2001 From: Antriksh Date: Sun, 15 Dec 2024 02:15:38 +0530 Subject: [PATCH 1/2] refactored: Users from jest to vitest --- .../Users/{Users.test.tsx => Users.spec.tsx} | 224 ++++++++++-------- 1 file changed, 124 insertions(+), 100 deletions(-) rename src/screens/Users/{Users.test.tsx => Users.spec.tsx} (79%) diff --git a/src/screens/Users/Users.test.tsx b/src/screens/Users/Users.spec.tsx similarity index 79% rename from src/screens/Users/Users.test.tsx rename to src/screens/Users/Users.spec.tsx index 65558e6ea7..9aa668422f 100644 --- a/src/screens/Users/Users.test.tsx +++ b/src/screens/Users/Users.spec.tsx @@ -1,8 +1,13 @@ import React from 'react'; import { MockedProvider } from '@apollo/react-testing'; -import { act, fireEvent, render, screen } from '@testing-library/react'; -import 'jest-localstorage-mock'; -import 'jest-location-mock'; +import { + render, + screen, + waitFor, + act, + fireEvent, +} from '@testing-library/react'; +import { vi } from 'vitest'; import { I18nextProvider } from 'react-i18next'; import { Provider } from 'react-redux'; import { BrowserRouter } from 'react-router-dom'; @@ -13,15 +18,12 @@ import { StaticMockLink } from 'utils/StaticMockLink'; import i18nForTest from 'utils/i18nForTest'; import Users from './Users'; import { EMPTY_MOCKS, MOCKS, MOCKS2 } from './UsersMocks'; -import useLocalStorage from 'utils/useLocalstorage'; import { USER_LIST, ORGANIZATION_CONNECTION_LIST, } from 'GraphQl/Queries/Queries'; -const { setItem, removeItem } = useLocalStorage(); - const MOCK_USERS = [ { user: { @@ -284,19 +286,27 @@ const link2 = new StaticMockLink(EMPTY_MOCKS, true); const link3 = new StaticMockLink(MOCKS2, true); const link5 = new StaticMockLink(MOCKS_NEW, true); -async function wait(ms = 1000): Promise { - await act(() => { - return new Promise((resolve) => { - setTimeout(resolve, ms); - }); - }); -} +const mockLocalStorage = { + setItem: vi.fn(), + getItem: vi.fn(), + removeItem: vi.fn(), + clear: vi.fn(), +}; + beforeEach(() => { - setItem('id', '123'); - setItem('SuperAdmin', true); - setItem('FirstName', 'John'); - setItem('AdminFor', [{ name: 'adi', _id: '1234', image: '' }]); - setItem('LastName', 'Doe'); + Object.defineProperty(window, 'localStorage', { + value: mockLocalStorage, + writable: true, + }); + + mockLocalStorage.setItem('id', '123'); + mockLocalStorage.setItem('SuperAdmin', 'true'); + mockLocalStorage.setItem('FirstName', 'John'); + mockLocalStorage.setItem( + 'AdminFor', + JSON.stringify([{ name: 'adi', _id: '1234', image: '' }]), + ); + mockLocalStorage.setItem('LastName', 'Doe'); }); afterEach(() => { @@ -304,7 +314,7 @@ afterEach(() => { }); describe('Testing Users screen', () => { - test('Component should be rendered properly', async () => { + it('Component should be rendered properly', async () => { render( @@ -317,50 +327,52 @@ describe('Testing Users screen', () => { , ); - await wait(); - expect(screen.getByTestId('testcomp')).toBeInTheDocument(); + await waitFor(() => { + expect(screen.getByTestId('testcomp')).toBeInTheDocument(); + }); }); - test(`Component should be rendered properly when user is not superAdmin + it(`Component should be rendered properly when user is not superAdmin and or userId does not exists in localstorage`, async () => { - setItem('AdminFor', ['123']); - removeItem('SuperAdmin'); - await wait(); - setItem('id', ''); - render( - - - - - - - - - , - ); - await wait(); + mockLocalStorage.setItem('AdminFor', JSON.stringify(['123'])); + mockLocalStorage.removeItem('SuperAdmin'); + mockLocalStorage.setItem('id', ''); + + await waitFor(() => { + render( + + + + + + + + + , + ); + }); }); - test(`Component should be rendered properly when userId does not exists in localstorage`, async () => { - removeItem('AdminFor'); - removeItem('SuperAdmin'); - await wait(); - removeItem('id'); - render( - - - - - - - - - , - ); - await wait(); + it(`Component should be rendered properly when userId does not exists in localstorage`, async () => { + mockLocalStorage.removeItem('AdminFor'); + mockLocalStorage.removeItem('SuperAdmin'); + mockLocalStorage.removeItem('id'); + await waitFor(() => { + render( + + + + + + + + + , + ); + }); }); - test('Component should be rendered properly when user is superAdmin', async () => { + it('Component should be rendered properly when user is superAdmin', async () => { render( @@ -373,10 +385,12 @@ describe('Testing Users screen', () => { , ); - await wait(); + await waitFor(() => { + expect(screen.getByTestId('testcomp')).toBeInTheDocument(); + }); }); - test('Testing seach by name functionality', async () => { + it('Testing search by name functionality', async () => { render( @@ -389,33 +403,43 @@ describe('Testing Users screen', () => { , ); - await wait(); + await waitFor(() => {}); const searchBtn = screen.getByTestId('searchButton'); const search1 = 'John'; - userEvent.type(screen.getByTestId(/searchByName/i), search1); - userEvent.click(searchBtn); - await wait(); - expect(screen.queryByText(/not found/i)).not.toBeInTheDocument(); + await act(async () => { + userEvent.type(screen.getByTestId(/searchByName/i), search1); + userEvent.click(searchBtn); + await waitFor(() => {}); + expect(screen.queryByText(/not found/i)).not.toBeInTheDocument(); + }); const search2 = 'Pete{backspace}{backspace}{backspace}{backspace}'; - userEvent.type(screen.getByTestId(/searchByName/i), search2); + await act(async () => { + userEvent.type(screen.getByTestId(/searchByName/i), search2); + }); const search3 = 'John{backspace}{backspace}{backspace}{backspace}Sam{backspace}{backspace}{backspace}'; - userEvent.type(screen.getByTestId(/searchByName/i), search3); + await act(async () => { + userEvent.type(screen.getByTestId(/searchByName/i), search3); + }); const search4 = 'Sam{backspace}{backspace}P{backspace}'; - userEvent.type(screen.getByTestId(/searchByName/i), search4); + await act(async () => { + userEvent.type(screen.getByTestId(/searchByName/i), search4); + }); const search5 = 'Xe'; - userEvent.type(screen.getByTestId(/searchByName/i), search5); - userEvent.clear(screen.getByTestId(/searchByName/i)); - userEvent.type(screen.getByTestId(/searchByName/i), ''); - userEvent.click(searchBtn); - await wait(); + await act(async () => { + userEvent.type(screen.getByTestId(/searchByName/i), search5); + userEvent.clear(screen.getByTestId(/searchByName/i)); + userEvent.type(screen.getByTestId(/searchByName/i), ''); + userEvent.click(searchBtn); + await waitFor(() => {}); + }); }); - test('testing search not found', async () => { + it('testing search not found', async () => { await act(async () => { render( @@ -429,7 +453,7 @@ describe('Testing Users screen', () => { , ); }); - await wait(); + await waitFor(() => {}); const searchBtn = screen.getByTestId('searchButton'); const searchInput = screen.getByTestId(/searchByName/i); @@ -442,10 +466,12 @@ describe('Testing Users screen', () => { userEvent.click(searchBtn); }); - expect(screen.queryByText(/No User Found/i)).toBeInTheDocument(); + await waitFor(() => { + expect(screen.queryByText(/No User Found/i)).toBeInTheDocument(); + }); }); - test('Testing User data is not present', async () => { + it('Testing User data is not present', async () => { render( @@ -458,11 +484,11 @@ describe('Testing Users screen', () => { , ); - await wait(); + await waitFor(() => {}); expect(screen.getByText(/No User Found/i)).toBeTruthy(); }); - test('Should render warning alert when there are no organizations', async () => { + it('Should render warning alert when there are no organizations', async () => { const { container } = render( @@ -476,13 +502,13 @@ describe('Testing Users screen', () => { , ); - await wait(200); + await waitFor(() => new Promise((resolve) => setTimeout(resolve, 200))); expect(container.textContent).toMatch( 'Organizations not found, please create an organization through dashboard', ); }); - test('Should not render warning alert when there are organizations present', async () => { + it('Should not render warning alert when there are organizations present', async () => { const { container } = render( @@ -496,14 +522,14 @@ describe('Testing Users screen', () => { , ); - await wait(); + await waitFor(() => {}); expect(container.textContent).not.toMatch( 'Organizations not found, please create an organization through dashboard', ); }); - test('Testing filter functionality', async () => { + it('Testing filter functionality', async () => { await act(async () => { render( @@ -518,7 +544,7 @@ describe('Testing Users screen', () => { , ); }); - await wait(); + await waitFor(() => {}); const searchInput = screen.getByTestId('filter'); expect(searchInput).toBeInTheDocument(); @@ -571,12 +597,10 @@ describe('Testing Users screen', () => { fireEvent.click(toggleTite); }); - await wait(); - expect(searchInput).toBeInTheDocument(); }); - test('check for rerendering', async () => { + it('check for rerendering', async () => { const { rerender } = render( @@ -590,7 +614,7 @@ describe('Testing Users screen', () => { , ); - await wait(); + await waitFor(() => {}); rerender( @@ -603,10 +627,10 @@ describe('Testing Users screen', () => { , ); - await wait(); + await waitFor(() => {}); }); - test('should set hasMore to false if users length is less than perPageResult', async () => { + it('should set hasMore to false if users length is less than perPageResult', async () => { const link = new StaticMockLink(EMPTY_MOCKS, true); render( @@ -622,13 +646,13 @@ describe('Testing Users screen', () => { , ); - await wait(200); + await waitFor(() => new Promise((resolve) => setTimeout(resolve, 200))); // Check if "No User Found" is displayed expect(screen.getByText(/No User Found/i)).toBeInTheDocument(); }); - test('should filter users correctly', async () => { + it('should filter users correctly', async () => { await act(async () => { render( @@ -643,7 +667,7 @@ describe('Testing Users screen', () => { , ); }); - await wait(); + await waitFor(() => {}); const filterButton = screen.getByTestId('filterUsers'); @@ -657,7 +681,7 @@ describe('Testing Users screen', () => { fireEvent.click(filterAdmin); }); - await wait(); + await waitFor(() => {}); expect(screen.getByText('Jane Doe')).toBeInTheDocument(); await act(async () => { @@ -670,7 +694,7 @@ describe('Testing Users screen', () => { fireEvent.click(filterSuperAdmin); }); - await wait(); + await waitFor(() => {}); expect(screen.getByText('John Doe')).toBeInTheDocument(); await act(async () => { @@ -682,7 +706,7 @@ describe('Testing Users screen', () => { fireEvent.click(filterUser); }); - await wait(); + await waitFor(() => {}); expect(screen.getByText('Jack Smith')).toBeInTheDocument(); await act(async () => { @@ -695,13 +719,13 @@ describe('Testing Users screen', () => { fireEvent.click(filterCancel); }); - await wait(); + await waitFor(() => {}); expect(screen.getByText('John Doe')).toBeInTheDocument(); expect(screen.getByText('Jane Doe')).toBeInTheDocument(); expect(screen.getByText('Jack Smith')).toBeInTheDocument(); }); - test('Users should be sorted and filtered correctly', async () => { + it('Users should be sorted and filtered correctly', async () => { await act(async () => { render( @@ -716,7 +740,7 @@ describe('Testing Users screen', () => { , ); }); - await wait(); + await waitFor(() => {}); // Check if the sorting and filtering logic was applied correctly const rows = screen.getAllByRole('row'); @@ -727,7 +751,7 @@ describe('Testing Users screen', () => { expect(firstRow).toHaveTextContent('John Doe'); expect(secondRow).toHaveTextContent('Jane Doe'); - await wait(); + await waitFor(() => {}); const inputText = screen.getByTestId('sortUsers'); @@ -749,7 +773,7 @@ describe('Testing Users screen', () => { }); // Verify the users are sorted by oldest - await wait(); + await waitFor(() => {}); const displayedUsers = screen.getAllByRole('row'); expect(displayedUsers[1]).toHaveTextContent('John Doe'); // assuming User1 is the oldest @@ -757,7 +781,7 @@ describe('Testing Users screen', () => { 'Jack Smith', ); // assuming UserN is the newest - await wait(); + await waitFor(() => {}); await act(async () => { fireEvent.click(inputText); From e39e1b9c6f768bff5e5df9564ad3e6e122e58b39 Mon Sep 17 00:00:00 2001 From: Antriksh Date: Sun, 15 Dec 2024 02:28:40 +0530 Subject: [PATCH 2/2] changes --- src/screens/Users/Users.spec.tsx | 38 ++++++++++++-------------------- 1 file changed, 14 insertions(+), 24 deletions(-) diff --git a/src/screens/Users/Users.spec.tsx b/src/screens/Users/Users.spec.tsx index 9aa668422f..ee59695d55 100644 --- a/src/screens/Users/Users.spec.tsx +++ b/src/screens/Users/Users.spec.tsx @@ -7,7 +7,6 @@ import { act, fireEvent, } from '@testing-library/react'; -import { vi } from 'vitest'; import { I18nextProvider } from 'react-i18next'; import { Provider } from 'react-redux'; import { BrowserRouter } from 'react-router-dom'; @@ -18,12 +17,15 @@ import { StaticMockLink } from 'utils/StaticMockLink'; import i18nForTest from 'utils/i18nForTest'; import Users from './Users'; import { EMPTY_MOCKS, MOCKS, MOCKS2 } from './UsersMocks'; +import useLocalStorage from 'utils/useLocalstorage'; import { USER_LIST, ORGANIZATION_CONNECTION_LIST, } from 'GraphQl/Queries/Queries'; +const { setItem, removeItem } = useLocalStorage(); + const MOCK_USERS = [ { user: { @@ -286,27 +288,15 @@ const link2 = new StaticMockLink(EMPTY_MOCKS, true); const link3 = new StaticMockLink(MOCKS2, true); const link5 = new StaticMockLink(MOCKS_NEW, true); -const mockLocalStorage = { - setItem: vi.fn(), - getItem: vi.fn(), - removeItem: vi.fn(), - clear: vi.fn(), -}; - beforeEach(() => { - Object.defineProperty(window, 'localStorage', { - value: mockLocalStorage, - writable: true, - }); - - mockLocalStorage.setItem('id', '123'); - mockLocalStorage.setItem('SuperAdmin', 'true'); - mockLocalStorage.setItem('FirstName', 'John'); - mockLocalStorage.setItem( + setItem('id', '123'); + setItem('SuperAdmin', 'true'); + setItem('FirstName', 'John'); + setItem( 'AdminFor', JSON.stringify([{ name: 'adi', _id: '1234', image: '' }]), ); - mockLocalStorage.setItem('LastName', 'Doe'); + setItem('LastName', 'Doe'); }); afterEach(() => { @@ -334,11 +324,11 @@ describe('Testing Users screen', () => { it(`Component should be rendered properly when user is not superAdmin and or userId does not exists in localstorage`, async () => { - mockLocalStorage.setItem('AdminFor', JSON.stringify(['123'])); - mockLocalStorage.removeItem('SuperAdmin'); - mockLocalStorage.setItem('id', ''); + setItem('AdminFor', JSON.stringify(['123'])); + removeItem('SuperAdmin'); await waitFor(() => { + setItem('id', ''); render( @@ -354,10 +344,10 @@ describe('Testing Users screen', () => { }); it(`Component should be rendered properly when userId does not exists in localstorage`, async () => { - mockLocalStorage.removeItem('AdminFor'); - mockLocalStorage.removeItem('SuperAdmin'); - mockLocalStorage.removeItem('id'); + removeItem('AdminFor'); + removeItem('SuperAdmin'); await waitFor(() => { + removeItem('id'); render(