From 21700c5a83e7a3bc30f5c73ceb6e1942bf65777f Mon Sep 17 00:00:00 2001 From: codyarose Date: Mon, 11 Jan 2021 22:59:47 -0600 Subject: [PATCH 1/3] test: refactor setup and correct test --- .../patients/care-goals/ViewCareGoal.test.tsx | 30 ++++++++----------- 1 file changed, 12 insertions(+), 18 deletions(-) diff --git a/src/__tests__/patients/care-goals/ViewCareGoal.test.tsx b/src/__tests__/patients/care-goals/ViewCareGoal.test.tsx index f50a381247..692219f5b4 100644 --- a/src/__tests__/patients/care-goals/ViewCareGoal.test.tsx +++ b/src/__tests__/patients/care-goals/ViewCareGoal.test.tsx @@ -1,17 +1,12 @@ -import { render as rtlRender } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import { createMemoryHistory } from 'history' -import React, { ReactNode, ReactElement } from 'react' +import React from 'react' import { Router, Route } from 'react-router-dom' import ViewCareGoal from '../../../patients/care-goals/ViewCareGoal' import PatientRepository from '../../../shared/db/PatientRepository' import Patient from '../../../shared/model/Patient' -type WrapperProps = { - // eslint-disable-next-line react/require-default-props - children?: ReactNode -} - describe('View Care Goal', () => { const patient = { id: '123', @@ -20,24 +15,23 @@ describe('View Care Goal', () => { careGoals: [{ id: '123', description: 'some description' }], } as Patient - const render = () => { + const setup = () => { jest.spyOn(PatientRepository, 'find').mockResolvedValue(patient) const history = createMemoryHistory() history.push(`/patients/${patient.id}/care-goals/${patient.careGoals[0].id}`) - const Wrapper = ({ children }: WrapperProps): ReactElement => ( + return render( - {children} - + + + + , ) - - const results = rtlRender(, { wrapper: Wrapper }) - - return results } - it('should render the care goal form', () => { - const { container } = render() - expect(container.querySelectorAll('div').length).toBe(4) + it('should render the care goal form', async () => { + setup() + + expect(await screen.findByLabelText('care-goal-form')).toBeInTheDocument() }) }) From ac3efd20815c64819326d8b2f9cfaeed66d3eeb4 Mon Sep 17 00:00:00 2001 From: codyarose Date: Mon, 11 Jan 2021 23:11:01 -0600 Subject: [PATCH 2/3] test: refactor setup and queries --- .../patients/visits/AddVisitModal.test.tsx | 36 +++++++++---------- 1 file changed, 16 insertions(+), 20 deletions(-) diff --git a/src/__tests__/patients/visits/AddVisitModal.test.tsx b/src/__tests__/patients/visits/AddVisitModal.test.tsx index 721dcc6dd6..8e7a021564 100644 --- a/src/__tests__/patients/visits/AddVisitModal.test.tsx +++ b/src/__tests__/patients/visits/AddVisitModal.test.tsx @@ -1,4 +1,4 @@ -import { screen, render as rtlRender, fireEvent, waitFor } from '@testing-library/react' +import { screen, render, fireEvent, waitFor, within } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { createMemoryHistory } from 'history' import React from 'react' @@ -26,32 +26,26 @@ describe('Add Visit Modal', () => { } as Patient const onCloseSpy = jest.fn() - const render = () => { + const setup = () => { jest.spyOn(PatientRepository, 'find').mockResolvedValue(patient) jest.spyOn(PatientRepository, 'saveOrUpdate') const history = createMemoryHistory() - // eslint-disable-next-line react/prop-types - const Wrapper: React.FC = ({ children }) => {children} - - const results = rtlRender( - , - { - wrapper: Wrapper, - }, + return render( + + + , ) - - return results } it('should render a modal and within a form', () => { - render() + setup() expect(screen.getByRole('dialog').querySelector('form')).toBeInTheDocument() }) it('should call the on close function when the cancel button is clicked', () => { - render() + setup() userEvent.click( screen.getByRole('button', { name: /close/i, @@ -61,14 +55,16 @@ describe('Add Visit Modal', () => { }) it('should save the visit when the save button is clicked', async () => { - render() + setup() const testPatient = patient.visits[0] - const modal = screen.getByRole('dialog') /* Date Pickers */ - const modalDatePickerWrappers = modal.querySelectorAll('.react-datepicker__input-container') - const startDateInput = modalDatePickerWrappers[0].querySelector('input') as HTMLInputElement - const endDateInput = modalDatePickerWrappers[1].querySelector('input') as HTMLInputElement + const startDateInput = within(screen.getByTestId('startDateTimeDateTimePicker')).getByRole( + 'textbox', + ) + const endDateInput = within(screen.getByTestId('endDateTimeDateTimePicker')).getByRole( + 'textbox', + ) fireEvent.change(startDateInput, { target: { value: testPatient.startDateTime } }) fireEvent.change(endDateInput, { target: { value: testPatient.endDateTime } }) @@ -80,7 +76,7 @@ describe('Add Visit Modal', () => { const statusInput = screen.getByRole('combobox') userEvent.type(statusInput, `${testPatient.status}{arrowdown}{enter}`) - const textareaReason = screen.getAllByRole('textbox')[4] + const textareaReason = screen.getByLabelText(/patient\.visits\.reason/i) userEvent.type(textareaReason, testPatient.reason) const locationInput = screen.getByLabelText(/patient.visits.location/i) From 0b5535a193c634d4525f50654e05d724780813a6 Mon Sep 17 00:00:00 2001 From: codyarose Date: Mon, 11 Jan 2021 23:16:01 -0600 Subject: [PATCH 3/3] test: refactor setup to remove wrapper --- .../medications/ViewMedication.test.tsx | 9 ++-- .../patients/care-goals/CareGoalTab.test.tsx | 46 ++++++++----------- .../care-plans/AddCarePlanModal.test.tsx | 10 ++-- .../patients/edit/EditPatient.test.tsx | 23 +++++----- .../patients/notes/NewNoteModal.test.tsx | 17 ++++--- .../patients/view/ViewPatient.test.tsx | 30 ++++++------ .../edit/EditAppointment.test.tsx | 11 ++--- .../appointments/new/NewAppointment.test.tsx | 24 +++++----- .../view/ViewAppointment.test.tsx | 31 ++++++------- 9 files changed, 94 insertions(+), 107 deletions(-) diff --git a/src/__tests__/medications/ViewMedication.test.tsx b/src/__tests__/medications/ViewMedication.test.tsx index fb7c39beed..523719497f 100644 --- a/src/__tests__/medications/ViewMedication.test.tsx +++ b/src/__tests__/medications/ViewMedication.test.tsx @@ -60,18 +60,19 @@ describe('View Medication', () => { }, } as any) - const Wrapper: React.FC = ({ children }: any) => ( + return render( - {children} + + + - + , ) - return render(, { wrapper: Wrapper }) } describe('page content', () => { diff --git a/src/__tests__/patients/care-goals/CareGoalTab.test.tsx b/src/__tests__/patients/care-goals/CareGoalTab.test.tsx index 8c2ac21444..8941908c74 100644 --- a/src/__tests__/patients/care-goals/CareGoalTab.test.tsx +++ b/src/__tests__/patients/care-goals/CareGoalTab.test.tsx @@ -1,7 +1,7 @@ import { render, screen, waitFor, waitForElementToBeRemoved, within } from '@testing-library/react' import userEvent, { specialChars } from '@testing-library/user-event' import format from 'date-fns/format' -import { createMemoryHistory, MemoryHistory } from 'history' +import { createMemoryHistory } from 'history' import React from 'react' import { Provider } from 'react-redux' import { Router, Route } from 'react-router-dom' @@ -18,30 +18,10 @@ import { RootState } from '../../../shared/store' const mockStore = createMockStore([thunk]) const { selectAll, arrowDown, enter } = specialChars -type CareGoalTabWrapper = (store: any, history: MemoryHistory) => React.FC - -// eslint-disable-next-line react/prop-types -const TabWrapper: CareGoalTabWrapper = (store, history) => ({ children }) => ( - - - {children} - - -) - -// eslint-disable-next-line react/prop-types -const ViewWrapper: CareGoalTabWrapper = (store: any, history: MemoryHistory) => ({ children }) => ( - - - {children} - - -) - const setup = ( route: string, permissions: Permissions[], - wrapper = TabWrapper, + wrapper = 'tab', includeCareGoal = true, ) => { const expectedCareGoal = { @@ -63,8 +43,22 @@ const setup = ( jest.spyOn(PatientRepository, 'find').mockResolvedValue(expectedPatient) const history = createMemoryHistory({ initialEntries: [route] }) const store = mockStore({ user: { permissions } } as any) - - return render(, { wrapper: wrapper(store, history) }) + const path = + wrapper === 'tab' + ? '/patients/:id' + : wrapper === 'view' + ? '/patients/:id/care-goals/:careGoalId' + : '' + + return render( + + + + + + + , + ) } describe('Care Goals Tab', () => { @@ -84,7 +78,7 @@ describe('Care Goals Tab', () => { dueDate: new Date('2020-02-01'), } - setup('/patients/123/care-goals', [Permissions.AddCareGoal], TabWrapper, false) + setup('/patients/123/care-goals', [Permissions.AddCareGoal], 'tab', false) userEvent.click(await screen.findByRole('button', { name: /patient.careGoal.new/i })) @@ -148,7 +142,7 @@ describe('Care Goals Tab', () => { }) it('should render care goal view when on patients/:id/care-goals/:careGoalId', async () => { - setup('/patients/123/care-goals/456', [Permissions.ReadCareGoal], ViewWrapper) + setup('/patients/123/care-goals/456', [Permissions.ReadCareGoal], 'view') expect(await screen.findByRole('form')).toBeInTheDocument() }) diff --git a/src/__tests__/patients/care-plans/AddCarePlanModal.test.tsx b/src/__tests__/patients/care-plans/AddCarePlanModal.test.tsx index 609b1a63e9..21c522a7e5 100644 --- a/src/__tests__/patients/care-plans/AddCarePlanModal.test.tsx +++ b/src/__tests__/patients/care-plans/AddCarePlanModal.test.tsx @@ -25,14 +25,12 @@ describe('Add Care Plan Modal', () => { jest.spyOn(PatientRepository, 'find').mockResolvedValue(patient) jest.spyOn(PatientRepository, 'saveOrUpdate') const history = createMemoryHistory() - // eslint-disable-next-line react/prop-types - const Wrapper: React.FC = ({ children }) => {children} - const result = render( - , - { wrapper: Wrapper }, + return render( + + + , ) - return result } beforeEach(() => { diff --git a/src/__tests__/patients/edit/EditPatient.test.tsx b/src/__tests__/patients/edit/EditPatient.test.tsx index 514a6455ec..cce690b662 100644 --- a/src/__tests__/patients/edit/EditPatient.test.tsx +++ b/src/__tests__/patients/edit/EditPatient.test.tsx @@ -42,20 +42,19 @@ const setup = () => { const history = createMemoryHistory({ initialEntries: ['/patients/edit/123'] }) const store = mockStore({ patient: { patient } } as any) - // eslint-disable-next-line react/prop-types - const Wrapper: React.FC = ({ children }) => ( - - - - {children} - - - - ) - return { history, - ...render(, { wrapper: Wrapper }), + ...render( + + + + + + + + + , + ), } } diff --git a/src/__tests__/patients/notes/NewNoteModal.test.tsx b/src/__tests__/patients/notes/NewNoteModal.test.tsx index b6c6064c4f..55a74071d1 100644 --- a/src/__tests__/patients/notes/NewNoteModal.test.tsx +++ b/src/__tests__/patients/notes/NewNoteModal.test.tsx @@ -1,4 +1,4 @@ -import { screen, render as rtlRender, waitFor } from '@testing-library/react' +import { screen, render, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' import React from 'react' @@ -14,10 +14,10 @@ describe('New Note Modal', () => { } as Patient const onCloseSpy = jest.fn() - const render = () => { + const setup = () => { jest.spyOn(PatientRepository, 'saveOrUpdate').mockResolvedValue(mockPatient) jest.spyOn(PatientRepository, 'find').mockResolvedValue(mockPatient) - const results = rtlRender( + return render( { patientId={mockPatient.id} />, ) - return results } it('should render a modal with the correct labels', async () => { - render() + setup() expect(await screen.findByRole('dialog')).toBeInTheDocument() expect( @@ -49,7 +48,7 @@ describe('New Note Modal', () => { }) it('should render a notes rich text editor', () => { - render() + setup() expect(screen.getByRole('textbox')).toBeInTheDocument() expect(screen.getByText('patient.note').querySelector('svg')).toHaveAttribute( @@ -65,7 +64,7 @@ describe('New Note Modal', () => { } expectOneConsoleError(expectedError) - render() + setup() userEvent.click( screen.getByRole('button', { @@ -82,7 +81,7 @@ describe('New Note Modal', () => { describe('on cancel', () => { it('should call the onCloseButtonCLick function when the cancel button is clicked', async () => { - render() + setup() userEvent.click( screen.getByRole('button', { @@ -96,7 +95,7 @@ describe('New Note Modal', () => { describe('on save', () => { it('should dispatch add note', async () => { const expectedNote = 'some note' - render() + setup() const noteTextField = screen.getByRole('textbox') userEvent.type(noteTextField, expectedNote) diff --git a/src/__tests__/patients/view/ViewPatient.test.tsx b/src/__tests__/patients/view/ViewPatient.test.tsx index ab47c9a6c6..5c8f160a80 100644 --- a/src/__tests__/patients/view/ViewPatient.test.tsx +++ b/src/__tests__/patients/view/ViewPatient.test.tsx @@ -54,24 +54,23 @@ describe('ViewPatient', () => { user: { permissions: [Permissions.ReadPatients, ...permissions] }, } as any) - // eslint-disable-next-line react/prop-types - const Wrapper: React.FC = ({ children }) => ( - - - - - - {children} - - - - - ) - return { history, store, - ...render(, { wrapper: Wrapper }), + ...render( + + + + + + + + + + + + , + ), } } @@ -89,7 +88,6 @@ describe('ViewPatient', () => { await waitFor(() => { expect(screen.getByText(/actions\.edit/i)).toBeInTheDocument() }) - screen.logTestingPlaygroundURL() }) it('should render an empty button toolbar if the user has only ReadPatients permissions', async () => { diff --git a/src/__tests__/scheduling/appointments/edit/EditAppointment.test.tsx b/src/__tests__/scheduling/appointments/edit/EditAppointment.test.tsx index 6d1161823a..16b11f8260 100644 --- a/src/__tests__/scheduling/appointments/edit/EditAppointment.test.tsx +++ b/src/__tests__/scheduling/appointments/edit/EditAppointment.test.tsx @@ -63,18 +63,17 @@ describe('Edit Appointment', () => { history.push('/appointments/edit/123') - // eslint-disable-next-line react/prop-types - const Wrapper: React.FC = ({ children }) => ( + return render( - {children} + + + - + , ) - - return render(, { wrapper: Wrapper }) } beforeEach(() => { diff --git a/src/__tests__/scheduling/appointments/new/NewAppointment.test.tsx b/src/__tests__/scheduling/appointments/new/NewAppointment.test.tsx index d56b011a27..f81329819b 100644 --- a/src/__tests__/scheduling/appointments/new/NewAppointment.test.tsx +++ b/src/__tests__/scheduling/appointments/new/NewAppointment.test.tsx @@ -58,21 +58,21 @@ describe('New Appointment', () => { const history = createMemoryHistory({ initialEntries: ['/appointments/new'] }) - const Wrapper: React.FC = ({ children }: any) => ( - - - - {children} - - - - - ) - return { expectedAppointment, history, - ...render(, { wrapper: Wrapper }), + ...render( + + + + + + + + + + , + ), } } diff --git a/src/__tests__/scheduling/appointments/view/ViewAppointment.test.tsx b/src/__tests__/scheduling/appointments/view/ViewAppointment.test.tsx index fba8b4bb6d..d28fad6a37 100644 --- a/src/__tests__/scheduling/appointments/view/ViewAppointment.test.tsx +++ b/src/__tests__/scheduling/appointments/view/ViewAppointment.test.tsx @@ -55,26 +55,25 @@ const setup = (permissions = [Permissions.ReadAppointments], skipSpies = false) }, } as any) - // eslint-disable-next-line react/prop-types - const Wrapper: React.FC = ({ children }) => ( - - - - - - {children} - - - - - - ) - return { history, expectedAppointment, expectedPatient, - ...render(, { wrapper: Wrapper }), + ...render( + + + + + + + + + + + + + , + ), } }