From 4391649988c4f40059f2a0f7342fe0f9812eac17 Mon Sep 17 00:00:00 2001 From: Shiwani Rajagopalan Date: Thu, 23 May 2024 14:53:46 -0400 Subject: [PATCH 1/3] added test cases for TeamReport --- .../TeamReport/__tests__/TeamReport.test.js | 169 ++++++++++++++++++ 1 file changed, 169 insertions(+) create mode 100644 src/components/Reports/TeamReport/__tests__/TeamReport.test.js diff --git a/src/components/Reports/TeamReport/__tests__/TeamReport.test.js b/src/components/Reports/TeamReport/__tests__/TeamReport.test.js new file mode 100644 index 0000000000..41fe6cc937 --- /dev/null +++ b/src/components/Reports/TeamReport/__tests__/TeamReport.test.js @@ -0,0 +1,169 @@ +import React from 'react'; +import { render, screen, fireEvent, waitFor } from '@testing-library/react'; +import '@testing-library/jest-dom/extend-expect'; +import TeamReport from '../TeamReport'; +import { useDispatch, Provider } from 'react-redux'; +import thunk from 'redux-thunk'; +import configureStore from 'redux-mock-store'; +import { rolesMock } from '__tests__/mockStates'; + +import axios from 'axios'; + +const match = {params:{teamId:"team123"}} + +const mockStore = configureStore([thunk]); + +const auth={user: { + permissions: { + frontPermissions: [], + backPermissions: [], + }, + role: 'Manager', + userid:'user123' +}} + +const theme={darkMode:false} + +let store; + +const allTeams = [{ + _id: "team1", + modifiedDatetime: '2024-04-05T01:42:33.329+00:00', + teamName: "team name 1", + createdDatetime: '2018-04-04T17:59:18.717+00:00', + __v: 0, + isActive: true, + members:[{ + addDateTime: '2024-03-27T17:40:32.346+00:00', + _id: 'teamMember1', + userId: 'user123' + }] +}, +{ + _id: "team2", + modifiedDatetime: '2024-04-05T01:42:33.329+00:00', + teamName: "team name 2", + createdDatetime: '2018-04-04T17:59:18.717+00:00', + __v: 0, + isActive: true, + members:[] +} +] + +const team = { + _id: "team2", + modifiedDatetime: '2024-04-05T01:42:33.329+00:00', + teamName: "team name 2", + createdDatetime: '2018-04-04T17:59:18.717+00:00', + __v: 0, + isActive: true, + members:[] +} + +beforeEach(() => { + store = mockStore({ + auth: auth, + theme:theme, + team:team, + role: rolesMock + }) +}); + +jest.mock('axios'); + +describe("Team Report component",()=>{ + + it("renders without crashing", async ()=>{ + axios.get.mockResolvedValue({ + status: 200, + data: [], + }); + + render() + await waitFor(()=>{}) + }) + it('check if team not found is displaying as expected when there are no teams', async ()=>{ + axios.get.mockResolvedValue({ + status: 200, + data: [], + }); + + const testStore = mockStore({ + auth: auth, + theme:theme, + role: rolesMock + }) + render() + await waitFor(()=>{}) + expect(screen.getByText('Team not found!')).toBeInTheDocument(); + }) + it('check if the team name is getting displayed when the team is present', async ()=>{ + + axios.get.mockResolvedValue({ + status: 200, + data: [], + }); + render() + await waitFor(()=>{}) + expect(screen.getAllByText('team name 2')[0]).toBeInTheDocument() + }) + it('check if the created date and its is getting displayed when the team is present', async ()=>{ + + axios.get.mockResolvedValue({ + status: 200, + data: [], + }); + render() + await waitFor(()=>{}) + expect(screen.getByText('Apr-04-18')).toBeInTheDocument() + expect(screen.getByText('Created Date')).toBeInTheDocument() + }) + it('check if team ID header and its value is getting displayed when the team is present',async ()=>{ + axios.get.mockResolvedValue({ + status: 200, + data: [], + }); + render() + await waitFor(()=>{}) + expect(screen.getByText('Team ID\:\ team2')).toBeInTheDocument() + }) + it('check if Last updated header and its value is getting displayed when the team is present',async ()=>{ + axios.get.mockResolvedValue({ + status: 200, + data: [], + }); + render() + await waitFor(()=>{}) + expect(screen.getByText('Last updated\:\Apr-04-24')).toBeInTheDocument() + }) + it('check if Number of Members and its value is getting displayed as expected',async ()=>{ + axios.get.mockResolvedValue({ + status: 200, + data: [], + }); + render() + await waitFor(()=>{}) + expect(screen.getAllByText('Number of Members')[0]).toBeInTheDocument() + }) + it('check if Total Team Blue Squares, Weekly Committed Hours, Total Worked Hours This Week gets displayed as expected', async ()=>{ + axios.get.mockResolvedValue({ + status: 200, + data: [], + }); + render() + await waitFor(()=>{}) + expect(screen.getAllByText('Total Team Blue Squares')[0]).toBeInTheDocument() + expect(screen.getAllByText('Weekly Committed Hours')[0]).toBeInTheDocument() + expect(screen.getAllByText('Total Worked Hours This Week')[0]).toBeInTheDocument() + }) + it('check if Breakdown of Weekly Hours So Far This Week header gets displayed as expected',async ()=>{ + axios.get.mockResolvedValue({ + status: 200, + data: [], + }); + render() + await waitFor(()=>{}) + expect(screen.getByText('Breakdown of Weekly Hours So Far This Week')).toBeInTheDocument() + }) + +}) \ No newline at end of file From d23118faa4084681b374acf63b0a5b762d25e333 Mon Sep 17 00:00:00 2001 From: Shiwani Rajagopalan Date: Thu, 6 Jun 2024 16:25:31 -0400 Subject: [PATCH 2/3] modified test cases to add more assertions --- .../TeamReport/__tests__/TeamReport.test.js | 198 +++++++++++++----- 1 file changed, 150 insertions(+), 48 deletions(-) diff --git a/src/components/Reports/TeamReport/__tests__/TeamReport.test.js b/src/components/Reports/TeamReport/__tests__/TeamReport.test.js index 41fe6cc937..685cc83351 100644 --- a/src/components/Reports/TeamReport/__tests__/TeamReport.test.js +++ b/src/components/Reports/TeamReport/__tests__/TeamReport.test.js @@ -2,7 +2,7 @@ import React from 'react'; import { render, screen, fireEvent, waitFor } from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; import TeamReport from '../TeamReport'; -import { useDispatch, Provider } from 'react-redux'; +import { Provider } from 'react-redux'; import thunk from 'redux-thunk'; import configureStore from 'redux-mock-store'; import { rolesMock } from '__tests__/mockStates'; @@ -26,30 +26,6 @@ const theme={darkMode:false} let store; -const allTeams = [{ - _id: "team1", - modifiedDatetime: '2024-04-05T01:42:33.329+00:00', - teamName: "team name 1", - createdDatetime: '2018-04-04T17:59:18.717+00:00', - __v: 0, - isActive: true, - members:[{ - addDateTime: '2024-03-27T17:40:32.346+00:00', - _id: 'teamMember1', - userId: 'user123' - }] -}, -{ - _id: "team2", - modifiedDatetime: '2024-04-05T01:42:33.329+00:00', - teamName: "team name 2", - createdDatetime: '2018-04-04T17:59:18.717+00:00', - __v: 0, - isActive: true, - members:[] -} -] - const team = { _id: "team2", modifiedDatetime: '2024-04-05T01:42:33.329+00:00', @@ -79,10 +55,12 @@ describe("Team Report component",()=>{ data: [], }); - render() - await waitFor(()=>{}) + const {container} = render() + await waitFor(()=>{ + expect(container.querySelector('.report-page-profile')).toBeInTheDocument() + }) }) - it('check if team not found is displaying as expected when there are no teams', async ()=>{ + it('check if team not found message is displaying as expected when there are no teams', async ()=>{ axios.get.mockResolvedValue({ status: 200, data: [], @@ -94,8 +72,9 @@ describe("Team Report component",()=>{ role: rolesMock }) render() - await waitFor(()=>{}) - expect(screen.getByText('Team not found!')).toBeInTheDocument(); + await waitFor(()=>{ + expect(screen.getByText('Team not found!')).toBeInTheDocument(); + }) }) it('check if the team name is getting displayed when the team is present', async ()=>{ @@ -104,8 +83,9 @@ describe("Team Report component",()=>{ data: [], }); render() - await waitFor(()=>{}) - expect(screen.getAllByText('team name 2')[0]).toBeInTheDocument() + await waitFor(()=>{ + expect(screen.getAllByText('team name 2')[0]).toBeInTheDocument() + }) }) it('check if the created date and its is getting displayed when the team is present', async ()=>{ @@ -114,9 +94,11 @@ describe("Team Report component",()=>{ data: [], }); render() - await waitFor(()=>{}) - expect(screen.getByText('Apr-04-18')).toBeInTheDocument() - expect(screen.getByText('Created Date')).toBeInTheDocument() + await waitFor(()=>{ + expect(screen.getByText('Apr-04-18')).toBeInTheDocument() + expect(screen.getByText('Created Date')).toBeInTheDocument() + }) + }) it('check if team ID header and its value is getting displayed when the team is present',async ()=>{ axios.get.mockResolvedValue({ @@ -124,8 +106,9 @@ describe("Team Report component",()=>{ data: [], }); render() - await waitFor(()=>{}) - expect(screen.getByText('Team ID\:\ team2')).toBeInTheDocument() + await waitFor(()=>{ + expect(screen.getByText('Team ID\:\ team2')).toBeInTheDocument() + }) }) it('check if Last updated header and its value is getting displayed when the team is present',async ()=>{ axios.get.mockResolvedValue({ @@ -133,8 +116,9 @@ describe("Team Report component",()=>{ data: [], }); render() - await waitFor(()=>{}) - expect(screen.getByText('Last updated\:\Apr-04-24')).toBeInTheDocument() + await waitFor(()=>{ + expect(screen.getByText('Last updated\:\Apr-04-24')).toBeInTheDocument() + }) }) it('check if Number of Members and its value is getting displayed as expected',async ()=>{ axios.get.mockResolvedValue({ @@ -142,8 +126,9 @@ describe("Team Report component",()=>{ data: [], }); render() - await waitFor(()=>{}) - expect(screen.getAllByText('Number of Members')[0]).toBeInTheDocument() + await waitFor(()=>{ + expect(screen.getAllByText('Number of Members')[0]).toBeInTheDocument() + }) }) it('check if Total Team Blue Squares, Weekly Committed Hours, Total Worked Hours This Week gets displayed as expected', async ()=>{ axios.get.mockResolvedValue({ @@ -151,10 +136,11 @@ describe("Team Report component",()=>{ data: [], }); render() - await waitFor(()=>{}) - expect(screen.getAllByText('Total Team Blue Squares')[0]).toBeInTheDocument() - expect(screen.getAllByText('Weekly Committed Hours')[0]).toBeInTheDocument() - expect(screen.getAllByText('Total Worked Hours This Week')[0]).toBeInTheDocument() + await waitFor(()=>{ + expect(screen.getAllByText('Total Team Blue Squares')[0]).toBeInTheDocument() + expect(screen.getAllByText('Weekly Committed Hours')[0]).toBeInTheDocument() + expect(screen.getAllByText('Total Worked Hours This Week')[0]).toBeInTheDocument() + }) }) it('check if Breakdown of Weekly Hours So Far This Week header gets displayed as expected',async ()=>{ axios.get.mockResolvedValue({ @@ -162,8 +148,124 @@ describe("Team Report component",()=>{ data: [], }); render() - await waitFor(()=>{}) - expect(screen.getByText('Breakdown of Weekly Hours So Far This Week')).toBeInTheDocument() + await waitFor(()=>{ + expect(screen.getByText('Breakdown of Weekly Hours So Far This Week')).toBeInTheDocument() + }) + }) + it('check Name, Created After, Modified After header displays as expected',async ()=>{ + axios.get.mockResolvedValue({ + status: 200, + data: [], + }); + render() + await waitFor(()=>{ + expect(screen.getAllByText('Name')[1]).toBeInTheDocument() + expect(screen.getByText('Created After')).toBeInTheDocument() + expect(screen.getByText('Modified After')).toBeInTheDocument() + }) + }) + it('check All, Team, Status header displays as expected',async ()=>{ + axios.get.mockResolvedValue({ + status: 200, + data: [], + }); + render() + await waitFor(()=>{ + expect(screen.getByText('All')).toBeInTheDocument() + expect(screen.getByText('Team')).toBeInTheDocument() + expect(screen.getByText('Status')).toBeInTheDocument() + }) + }) + it('check Team Members, ID, Created At header displays as expected',async ()=>{ + axios.get.mockResolvedValue({ + status: 200, + data: [], + }); + render() + await waitFor(()=>{ + expect(screen.getByText('Team Members')).toBeInTheDocument() + expect(screen.getByText('ID')).toBeInTheDocument() + expect(screen.getByText('Created At')).toBeInTheDocument() + }) + }) + it('check if date picker for Created After works as expected when the correct date is given',async ()=>{ + axios.get.mockResolvedValue({ + status: 200, + data: [], + }); + const {container} = render() + await waitFor(()=>{ + expect(container.querySelector('.report-page-profile')).toBeInTheDocument() + }) + const datePickerElement = container.querySelector('[id="search-by-startDate"]') + fireEvent.change(datePickerElement, { target: { value: '05/29/2024' } }); + const updatedDatePicker = container.querySelector('[id="search-by-startDate"]') + expect(updatedDatePicker.value).toBe('05/29/2024') + }) + it('check if date picker for Created After gives updated date when invalid date is given',async ()=>{ + axios.get.mockResolvedValue({ + status: 200, + data: [], + }); + const {container} = render() + await waitFor(()=>{ + expect(container.querySelector('.report-page-profile')).toBeInTheDocument() + }) + const datePickerElement = container.querySelector('[id="search-by-startDate"]') + fireEvent.change(datePickerElement, { target: { value: '02/31/2024' } }); + const updatedDatePicker = container.querySelector('[id="search-by-startDate"]') + expect(updatedDatePicker.value).toBe('03/02/2024') + }) + it('check Active checkbox works as expected when the box is checked',async ()=>{ + axios.get.mockResolvedValue({ + status: 200, + data: [], + }); + const {container} = render() + await waitFor(()=>{ + expect(container.querySelector('.report-page-profile')).toBeInTheDocument() + }) + const activeCheckbox = container.querySelector('[id="active"]') + expect(activeCheckbox).not.toBeChecked() + fireEvent.click(activeCheckbox) + expect(activeCheckbox).toBeChecked() + }) + it('check Inactive checkbox works as expected when the box is checked',async ()=>{ + axios.get.mockResolvedValue({ + status: 200, + data: [], + }); + const {container} = render() + await waitFor(()=>{ + expect(container.querySelector('.report-page-profile')).toBeInTheDocument() + }) + const inActiveCheckbox = container.querySelector('[id="inactive"]') + expect(inActiveCheckbox).not.toBeChecked() + fireEvent.click(inActiveCheckbox) + expect(inActiveCheckbox).toBeChecked() + }) + it('check if loading message is getting displayed when all teams is empty',async ()=>{ + axios.get.mockResolvedValue({ + status: 200, + data: [], + }); + render() + await waitFor(()=>{ + expect(screen.getByText('Loading...')).toBeInTheDocument() + }) + }) + it('check if Name input element is working as expected',async ()=>{ + axios.get.mockResolvedValue({ + status: 200, + data: [], + }); + const {container} = render() + await waitFor(()=>{ + expect(container.querySelector('.report-page-profile')).toBeInTheDocument() + }) + const inputElement = container.querySelector('[id="search-by-name"]') + fireEvent.change(inputElement, { target: { value: 'team 1' } }); + expect(inputElement.value).toBe('team 1') }) -}) \ No newline at end of file +}) From c23026c95e264f6d82c258ef9407b4f601ac7a25 Mon Sep 17 00:00:00 2001 From: Shiwani Rajagopalan Date: Thu, 6 Jun 2024 17:00:01 -0400 Subject: [PATCH 3/3] fixed date test case by modifying the difference in time zone --- src/components/Reports/TeamReport/__tests__/TeamReport.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Reports/TeamReport/__tests__/TeamReport.test.js b/src/components/Reports/TeamReport/__tests__/TeamReport.test.js index 685cc83351..cb9d5dad16 100644 --- a/src/components/Reports/TeamReport/__tests__/TeamReport.test.js +++ b/src/components/Reports/TeamReport/__tests__/TeamReport.test.js @@ -28,7 +28,7 @@ let store; const team = { _id: "team2", - modifiedDatetime: '2024-04-05T01:42:33.329+00:00', + modifiedDatetime: '2024-04-04T12:00:00.000+00:00', teamName: "team name 2", createdDatetime: '2018-04-04T17:59:18.717+00:00', __v: 0,