From 350875e02f1d12e1fdb89909bcd2705ef580ed80 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20Demazi=C3=A8re?= Date: Fri, 25 Aug 2023 14:19:21 +0200 Subject: [PATCH] fix: mock new function in dataformatter --- package.json | 2 +- src/components/Review/Review.test.jsx | 501 ++++++++++++++------------ 2 files changed, 271 insertions(+), 232 deletions(-) diff --git a/package.json b/package.json index c6c4ce7..41be8a5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sonor", - "version": "0.5.16", + "version": "0.5.17", "private": true, "dependencies": { "@testing-library/jest-dom": "^4.2.4", diff --git a/src/components/Review/Review.test.jsx b/src/components/Review/Review.test.jsx index 398d1aa..3ba644d 100644 --- a/src/components/Review/Review.test.jsx +++ b/src/components/Review/Review.test.jsx @@ -1,32 +1,43 @@ // Link.react.test.js -import React from 'react'; +import React from "react"; import { - render, screen, fireEvent, cleanup, wait, -} from '@testing-library/react'; -import { Router, Route, Switch } from 'react-router-dom'; -import { createMemoryHistory } from 'history'; -import { NotificationManager } from 'react-notifications'; -import DataFormatter from '../../utils/DataFormatter'; -import Review from './Review'; -import mocks from '../../tests/mocks'; -import D from '../../i18n'; + render, + screen, + fireEvent, + cleanup, + wait, +} from "@testing-library/react"; +import { Router, Route, Switch } from "react-router-dom"; +import { createMemoryHistory } from "history"; +import { NotificationManager } from "react-notifications"; +import DataFormatter from "../../utils/DataFormatter"; +import Review from "./Review"; +import mocks from "../../tests/mocks"; +import D from "../../i18n"; const history = createMemoryHistory(); const toLocaleDateString = Date.prototype.toLocaleString; -Date.prototype.toLocaleDateString = function() { - return toLocaleDateString.call(this, 'en-EN', { timeZone: 'UTC',year: "numeric", month: "numeric", day: "numeric" }); +Date.prototype.toLocaleDateString = function () { + return toLocaleDateString.call(this, "en-EN", { + timeZone: "UTC", + year: "numeric", + month: "numeric", + day: "numeric", + }); }; const OriginalDate = global.Date; jest - .spyOn(global, 'Date') - .mockImplementation((a) => (a ? new OriginalDate(a) : new OriginalDate('2020-08-20T11:01:58.135Z'))); + .spyOn(global, "Date") + .mockImplementation((a) => + a ? new OriginalDate(a) : new OriginalDate("2020-08-20T11:01:58.135Z") + ); Date.now = jest.fn(() => 1597916474000); afterEach(cleanup); -jest.mock('../../utils/DataFormatter'); -jest.mock('react-notifications'); +jest.mock("../../utils/DataFormatter"); +jest.mock("react-notifications"); const survey = mocks.surveyVqs; @@ -35,9 +46,11 @@ const { surveySimpsons } = mocks; const respAllSurvey = mocks.reviewDataAllSurveys; const respOneSurvey = mocks.reviewDataOneSurvey; -const mockFinalizeSurveyUnits = jest.fn((listSU) => Promise.resolve( - listSU.map((su) => (su === '4818' ? { status: 500 } : { status: 200 })), -)); +const mockFinalizeSurveyUnits = jest.fn((listSU) => + Promise.resolve( + listSU.map((su) => (su === "4818" ? { status: 500 } : { status: 200 })) + ) +); const mockGetDataForReview = jest.fn((s, cb) => { if (s) { cb(respOneSurvey); @@ -45,11 +58,16 @@ const mockGetDataForReview = jest.fn((s, cb) => { cb(respAllSurvey); } }); +const mockGetQuestionnaireModelIdForReviewLink = jest.fn((suIds, cb) => { + cb(["questionnaireId"]); +}); const mockDataFormatter = DataFormatter.mockImplementation(() => ({ getDataForReview: mockGetDataForReview, finalizeSurveyUnits: mockFinalizeSurveyUnits, updateSurveyUnitViewed: jest.fn(() => ({ status: 200 })), + getQuestionnaireModelIdForReviewLink: + mockGetQuestionnaireModelIdForReviewLink, })); const mockSuccess = jest.fn(); @@ -60,13 +78,22 @@ NotificationManager.error = mockError; const TestingRouter = ({ ComponentWithRedirection }) => ( - } /> + } + /> (
-
{JSON.stringify(routeProps.history.location.pathname)}
-
{!routeProps.history.location || !routeProps.history.location.survey || JSON.stringify(routeProps.history.location.survey)}
+
+ {JSON.stringify(routeProps.history.location.pathname)} +
+
+ {!routeProps.history.location || + !routeProps.history.location.survey || + JSON.stringify(routeProps.history.location.survey)} +
)} /> @@ -76,354 +103,366 @@ const TestingRouter = ({ ComponentWithRedirection }) => ( const mockDataRetreiver = new DataFormatter(); -it('Component is correctly displayed (for one survey)', async () => { - history.push('/review/vqs2021x00'); +it("Component is correctly displayed (for one survey)", async () => { + history.push("/review/vqs2021x00"); const component = render( ( - - ) - } - />, + ComponentWithRedirection={(props) => ( + + )} + /> ); // Should match snapshot (rows displayed) expect(component).toMatchSnapshot(); }); -it('Component is correctly displayed (for all surveys)', async () => { - history.push('/review'); +it("Component is correctly displayed (for all surveys)", async () => { + history.push("/review"); const component = render( ( - - ) - } - />, + ComponentWithRedirection={(props) => ( + + )} + /> ); // Should match snapshot (rows displayed) expect(component).toMatchSnapshot(); }); -it('Sort by interviewer name', async () => { - history.push('/review/vqs2021x00'); +it("Sort by interviewer name", async () => { + history.push("/review/vqs2021x00"); const component = render( ( - - ) - } - />, + ComponentWithRedirection={(props) => ( + + )} + /> ); - screen.getByTestId('TableHeader_interviewer_name_review').click(); + screen.getByTestId("TableHeader_interviewer_name_review").click(); // Should match snapshot (rows sorted by name) expect(component).toMatchSnapshot(); }); -it('Change page', async () => { - history.push('/review'); +it("Change page", async () => { + history.push("/review"); const component = render( ( - - ) - } - />, + ComponentWithRedirection={(props) => ( + + )} + /> ); - screen.getByTestId('pagination-nav').lastChild.firstChild.click(); + screen.getByTestId("pagination-nav").lastChild.firstChild.click(); // Should match snapshot (rows displayed have changed) expect(component).toMatchSnapshot(); }); -it('Change pagination size', async () => { - history.push('/review'); +it("Change pagination size", async () => { + history.push("/review"); const component = render( ( - - ) - } - />, + ComponentWithRedirection={(props) => ( + + )} + /> ); - fireEvent.change(component.getByTestId('pagination-size-selector'), { target: { value: '10' } }); + fireEvent.change(component.getByTestId("pagination-size-selector"), { + target: { value: "10" }, + }); // Should match snapshot (all rows are now displayed) expect(component).toMatchSnapshot(); }); -it('Select another survey', async () => { - history.push('/review/vqs2021x00'); - const redirectUrl = '/review/simpsons2020x00'; +it("Select another survey", async () => { + history.push("/review/vqs2021x00"); + const redirectUrl = "/review/simpsons2020x00"; const component = render( ( - - ) - } - />, + ComponentWithRedirection={(props) => ( + + )} + /> ); - fireEvent.change(component.getByTestId('Survey_selector'), { target: { value: 'simpsons2020x00' } }); + fireEvent.change(component.getByTestId("Survey_selector"), { + target: { value: "simpsons2020x00" }, + }); // Should redirect to '/review/simpsons2020x00' - expect(screen.getByTestId('Redirect-url').innerHTML).toEqual(`\"${redirectUrl}\"`); + expect(screen.getByTestId("Redirect-url").innerHTML).toEqual( + `\"${redirectUrl}\"` + ); // Location should contain survey object - expect(screen.getByTestId('Redirect-survey').innerHTML).not.toEqual(''); - expect(screen.getByTestId('Redirect-survey')).toMatchSnapshot(); + expect(screen.getByTestId("Redirect-survey").innerHTML).not.toEqual(""); + expect(screen.getByTestId("Redirect-survey")).toMatchSnapshot(); }); -it('Reloading the page with no survey set (F5) (for one survey)', async () => { - history.push('/review/vqs2021x00'); - const redirectUrl = '/'; +it("Reloading the page with no survey set (F5) (for one survey)", async () => { + history.push("/review/vqs2021x00"); + const redirectUrl = "/"; render( ( - - ) - } - />, + ComponentWithRedirection={(props) => ( + + )} + /> ); // Should redirect to '/' - expect(screen.getByTestId('Redirect-url').innerHTML).toEqual(`\"${redirectUrl}\"`); + expect(screen.getByTestId("Redirect-url").innerHTML).toEqual( + `\"${redirectUrl}\"` + ); }); -it('Select 2 survey units and validate', async () => { - history.push('/review'); +it("Select 2 survey units and validate", async () => { + history.push("/review"); const component = render( ( - - ) - } - />, + ComponentWithRedirection={(props) => ( + + )} + /> ); - const firstCheckbox = component.baseElement.querySelector('input[value="1032"]'); - const secondCheckbox = component.baseElement.querySelector('input[value="4819"]'); + const firstCheckbox = component.baseElement.querySelector( + 'input[value="1032"]' + ); + const secondCheckbox = component.baseElement.querySelector( + 'input[value="4819"]' + ); firstCheckbox.click(); secondCheckbox.click(); // Checkboxes should be checked - expect(firstCheckbox).toHaveProperty('checked', true); - expect(secondCheckbox).toHaveProperty('checked', true); + expect(firstCheckbox).toHaveProperty("checked", true); + expect(secondCheckbox).toHaveProperty("checked", true); - screen.getByTestId('validate-su').click(); + screen.getByTestId("validate-su").click(); // Modal dialog should show - expect(component.baseElement.querySelector('.modal-dialog')).toBeTruthy(); + expect(component.baseElement.querySelector(".modal-dialog")).toBeTruthy(); - screen.getByTestId('confirm-validate').click(); + screen.getByTestId("confirm-validate").click(); // Validate survey units should be called with correct arguments - expect(mockFinalizeSurveyUnits).toHaveBeenLastCalledWith(['1032', '4819']); + expect(mockFinalizeSurveyUnits).toHaveBeenLastCalledWith(["1032", "4819"]); // Notification manager should have been called to display success - await wait(() => expect(mockSuccess).toHaveBeenLastCalledWith( - `${D.reviewAlertSuccess}: 1032, 4819.`, - D.updateSuccess, - 3500, - )); + await wait(() => + expect(mockSuccess).toHaveBeenLastCalledWith( + `${D.reviewAlertSuccess}: 1032, 4819.`, + D.updateSuccess, + 3500 + ) + ); }); -it('Select a survey unit and validate (error response)', async () => { - history.push('/review'); +it("Select a survey unit and validate (error response)", async () => { + history.push("/review"); const component = render( ( - - ) - } - />, + ComponentWithRedirection={(props) => ( + + )} + /> ); - const firstCheckbox = component.baseElement.querySelector('input[value="4818"]'); + const firstCheckbox = component.baseElement.querySelector( + 'input[value="4818"]' + ); firstCheckbox.click(); // Checkbox should be checked - expect(firstCheckbox).toHaveProperty('checked', true); + expect(firstCheckbox).toHaveProperty("checked", true); - screen.getByTestId('validate-su').click(); + screen.getByTestId("validate-su").click(); // Modal dialog should show - expect(component.baseElement.querySelector('.modal-dialog')).toBeTruthy(); + expect(component.baseElement.querySelector(".modal-dialog")).toBeTruthy(); - screen.getByTestId('confirm-validate').click(); + screen.getByTestId("confirm-validate").click(); // Validate survey units should be called with correct arguments - expect(mockFinalizeSurveyUnits).toHaveBeenLastCalledWith(['4818']); + expect(mockFinalizeSurveyUnits).toHaveBeenLastCalledWith(["4818"]); // Notification manager should have been called to display error - await wait(() => expect(mockError).toHaveBeenLastCalledWith( - `${D.reviewAlertError}: 4818.`, - D.error, - 3500, - )); + await wait(() => + expect(mockError).toHaveBeenLastCalledWith( + `${D.reviewAlertError}: 4818.`, + D.error, + 3500 + ) + ); }); -it('Check and uncheck all SUs', async () => { - history.push('/review'); +it("Check and uncheck all SUs", async () => { + history.push("/review"); const component = render( ( - - ) - } - />, + ComponentWithRedirection={(props) => ( + + )} + /> ); - const checkAllBox = component.baseElement.querySelector('input[name="checkAll"]'); + const checkAllBox = component.baseElement.querySelector( + 'input[name="checkAll"]' + ); checkAllBox.click(); // Checkboxes should all be checked - component.baseElement.querySelectorAll('input[type="checkbox"]').forEach((box) => { - expect(box).toHaveProperty('checked', true); - }); + component.baseElement + .querySelectorAll('input[type="checkbox"]') + .forEach((box) => { + expect(box).toHaveProperty("checked", true); + }); checkAllBox.click(); // Checkboxes should all be unchecked - component.baseElement.querySelectorAll('input[type="checkbox"]').forEach((box) => { - expect(box).not.toHaveProperty('checked', true); - }); + component.baseElement + .querySelectorAll('input[type="checkbox"]') + .forEach((box) => { + expect(box).not.toHaveProperty("checked", true); + }); }); -it('Close modal with cross', async () => { - history.push('/review'); +it("Close modal with cross", async () => { + history.push("/review"); const component = render( ( - - ) - } - />, + ComponentWithRedirection={(props) => ( + + )} + /> ); - const firstCheckbox = component.baseElement.querySelector('input[value="4818"]'); + const firstCheckbox = component.baseElement.querySelector( + 'input[value="4818"]' + ); firstCheckbox.click(); - screen.getByTestId('validate-su').click(); + screen.getByTestId("validate-su").click(); // Modal dialog should show - expect(component.baseElement.querySelector('.modal-dialog')).toBeTruthy(); - component.baseElement.querySelector('button.close').click(); + expect(component.baseElement.querySelector(".modal-dialog")).toBeTruthy(); + component.baseElement.querySelector("button.close").click(); // Modal dialog should close - await wait(() => expect(component.baseElement.querySelector('.modal-dialog')).not.toBeTruthy()); + await wait(() => + expect( + component.baseElement.querySelector(".modal-dialog") + ).not.toBeTruthy() + ); }); -it('Close modal with button', async () => { - history.push('/review'); +it("Close modal with button", async () => { + history.push("/review"); const component = render( ( - - ) - } - />, + ComponentWithRedirection={(props) => ( + + )} + /> ); - const firstCheckbox = component.baseElement.querySelector('input[value="4818"]'); + const firstCheckbox = component.baseElement.querySelector( + 'input[value="4818"]' + ); firstCheckbox.click(); - screen.getByTestId('validate-su').click(); + screen.getByTestId("validate-su").click(); // Modal dialog should show - expect(component.baseElement.querySelector('.modal-dialog')).toBeTruthy(); - screen.getByTestId('close-modal').click(); + expect(component.baseElement.querySelector(".modal-dialog")).toBeTruthy(); + screen.getByTestId("close-modal").click(); // Modal dialog should close - await wait(() => expect(component.baseElement.querySelector('.modal-dialog')).not.toBeTruthy()); + await wait(() => + expect( + component.baseElement.querySelector(".modal-dialog") + ).not.toBeTruthy() + ); }); -it('Click on the 3 cells of a SU line', async () => { - history.push('/review'); +it("Click on the 3 cells of a SU line", async () => { + history.push("/review"); const component = render( ( - - ) - } - />, + ComponentWithRedirection={(props) => ( + + )} + /> ); window.open = jest.fn(); - const questionnaireButton = component.baseElement.querySelectorAll('tbody')[0].querySelectorAll('.fa-calendar')[0]; + const questionnaireButton = component.baseElement + .querySelectorAll("tbody")[0] + .querySelectorAll(".fa-calendar")[0]; questionnaireButton.click(); // window.open should have been called 3 times expect(window.open).toHaveBeenCalledTimes(1); -}); \ No newline at end of file +});