From 7525dddf4cc04f7507511138315c2f8a38b0e078 Mon Sep 17 00:00:00 2001 From: Garrett Rabian Date: Tue, 17 Oct 2023 16:00:34 -0400 Subject: [PATCH] write more tests --- .../modals/AddEditReportModal.test.tsx | 54 +++++++++++++++++-- 1 file changed, 51 insertions(+), 3 deletions(-) diff --git a/services/ui-src/src/components/modals/AddEditReportModal.test.tsx b/services/ui-src/src/components/modals/AddEditReportModal.test.tsx index b27291ec0..c12a3563b 100644 --- a/services/ui-src/src/components/modals/AddEditReportModal.test.tsx +++ b/services/ui-src/src/components/modals/AddEditReportModal.test.tsx @@ -12,6 +12,7 @@ import { mockMlrReportContext, RouterWrappedComponent, } from "utils/testing/setupJest"; +import { convertDateUtcToEt } from "utils"; const mockCreateReport = jest.fn(); const mockUpdateReport = jest.fn(); @@ -50,12 +51,28 @@ const modalComponent = ( ); +// a similar assignment is performed in DashboardPage and is needed here to make sure the modal form hydrates +const mockSelectedMcparReport = { + ...mockMcparReport, + fieldData: { + programName: mockMcparReport.programName, + reportingPeriodEndDate: convertDateUtcToEt( + mockMcparReport.reportingPeriodEndDate + ), + reportingPeriodStartDate: convertDateUtcToEt( + mockMcparReport.reportingPeriodStartDate + ), + combinedData: mockMcparReport.combinedData, + programIsPCCM: mockMcparReport?.programIsPCCM, + }, +}; + const modalComponentWithSelectedReport = ( { const endDateField = form.querySelector("[name='reportingPeriodEndDate']")!; await userEvent.type(endDateField, "12/31/2022"); const isPccmNo = screen.getByLabelText("No") as HTMLInputElement; - await userEvent.click(isPccmNo); + if (!isPccmNo.disabled) { + await userEvent.click(isPccmNo); + } const submitButton = screen.getByRole("button", { name: "Save" }); await userEvent.click(submitButton); }; @@ -161,14 +180,43 @@ describe("Test AddEditReportModal functionality for MCPAR", () => { await expect(mockCloseHandler).toHaveBeenCalledTimes(1); }); - test("Editing an existing report", async () => { + test("Edit modal hydrates with report info and disables fields", async () => { mockLDFlags.setDefault({ yoyCopy: true }); const result = await render(modalComponentWithSelectedReport); const form = result.getByTestId("add-edit-report-form"); const copyFieldDataSourceId = form.querySelector( "[name='copyFieldDataSourceId']" )!; + const programIsPCCMField = form.querySelectorAll("[name='programIsPCCM']")!; + // yoy copy and pccm fields are disabled expect(copyFieldDataSourceId).toHaveProperty("disabled", true); + expect(programIsPCCMField[0]).toHaveProperty("disabled", true); + expect(programIsPCCMField[1]).toHaveProperty("disabled", true); + // hydrated values are in the modal + const programNameField = form.querySelector("[name='programName']")!; + const startDateField = form.querySelector( + "[name='reportingPeriodStartDate']" + )!; + const endDateField = form.querySelector("[name='reportingPeriodEndDate']")!; + expect(programNameField).toHaveProperty( + "value", + mockMcparReport.programName + ); + expect(startDateField).toHaveProperty( + "value", + convertDateUtcToEt(mockMcparReport.reportingPeriodStartDate) + ); + expect(endDateField).toHaveProperty( + "value", + convertDateUtcToEt(mockMcparReport.reportingPeriodEndDate) + ); + userEvent.click(screen.getByText("Cancel")); + }); + + test("Editing an existing report", async () => { + mockLDFlags.setDefault({ yoyCopy: true }); + const result = await render(modalComponentWithSelectedReport); + const form = result.getByTestId("add-edit-report-form"); await fillForm(form); await expect(mockUpdateReport).toHaveBeenCalledTimes(1); await expect(mockFetchReportsByState).toHaveBeenCalledTimes(1);