diff --git a/src/__tests__/patients/care-goals/CareGoalTab.test.tsx b/src/__tests__/patients/care-goals/CareGoalTab.test.tsx index 2ce1f2e2ae..28092bc2e6 100644 --- a/src/__tests__/patients/care-goals/CareGoalTab.test.tsx +++ b/src/__tests__/patients/care-goals/CareGoalTab.test.tsx @@ -1,17 +1,15 @@ -import { mount, ReactWrapper } from 'enzyme' +import { render, screen, waitFor } from '@testing-library/react' +import userEvent from '@testing-library/user-event' import { createMemoryHistory } from 'history' import React from 'react' -import { act } from 'react-dom/test-utils' import { Provider } from 'react-redux' import { Router, Route } from 'react-router-dom' import createMockStore from 'redux-mock-store' import thunk from 'redux-thunk' -import AddCareGoalModal from '../../../patients/care-goals/AddCareGoalModal' import CareGoalTab from '../../../patients/care-goals/CareGoalTab' -import CareGoalTable from '../../../patients/care-goals/CareGoalTable' -import ViewCareGoal from '../../../patients/care-goals/ViewCareGoal' import PatientRepository from '../../../shared/db/PatientRepository' +import CareGoal from '../../../shared/model/CareGoal' import Patient from '../../../shared/model/Patient' import Permissions from '../../../shared/model/Permissions' import { RootState } from '../../../shared/store' @@ -19,95 +17,70 @@ import { RootState } from '../../../shared/store' const mockStore = createMockStore([thunk]) describe('Care Goals Tab', () => { - const patient = { id: 'patientId' } as Patient + const careGoal = { + id: '456', + status: 'accepted', + startDate: new Date().toISOString(), + dueDate: new Date().toISOString(), + achievementStatus: 'improving', + priority: 'high', + description: 'test description', + createdOn: new Date().toISOString(), + note: '', + } as CareGoal + const patient = { id: '123', careGoals: [careGoal] as CareGoal[] } as Patient const setup = async (route: string, permissions: Permissions[]) => { + jest.resetAllMocks() jest.spyOn(PatientRepository, 'find').mockResolvedValue(patient) const store = mockStore({ user: { permissions } } as any) const history = createMemoryHistory() history.push(route) - let wrapper: any - await act(async () => { - wrapper = await mount( - - - - - - - , - ) - }) - wrapper.update() - - return wrapper as ReactWrapper + return render( + + + + + + + , + ) } it('should render add care goal button if user has correct permissions', async () => { - const wrapper = await setup('patients/123/care-goals', [Permissions.AddCareGoal]) - - const addNewButton = wrapper.find('Button').at(0) - expect(addNewButton).toHaveLength(1) - expect(addNewButton.text().trim()).toEqual('patient.careGoal.new') + setup('patients/123/care-goals', [Permissions.AddCareGoal]) + expect(await screen.findByRole('button', { name: /patient.careGoal.new/i })).toBeInTheDocument() }) it('should not render add care goal button if user does not have permissions', async () => { - const wrapper = await setup('patients/123/care-goals', []) - - const addNewButton = wrapper.find('Button') - expect(addNewButton).toHaveLength(0) + setup('patients/123/care-goals', []) + expect(screen.queryByRole('button', { name: /patient.careGoal.new/i })).not.toBeInTheDocument() }) it('should open the add care goal modal on click', async () => { - const wrapper = await setup('patients/123/care-goals', [Permissions.AddCareGoal]) - - await act(async () => { - const addNewButton = wrapper.find('Button').at(0) - const onClick = addNewButton.prop('onClick') as any - onClick() - }) - - wrapper.update() - - const modal = wrapper.find(AddCareGoalModal) - expect(modal.prop('show')).toBeTruthy() + setup('patients/123/care-goals', [Permissions.AddCareGoal]) + userEvent.click(await screen.findByRole('button', { name: /patient.careGoal.new/i })) + expect(screen.getByRole('dialog')).toBeVisible() }) it('should close the modal when the close button is clicked', async () => { - const wrapper = await setup('patients/123/care-goals', [Permissions.AddCareGoal]) - - await act(async () => { - const addNewButton = wrapper.find('Button').at(0) - const onClick = addNewButton.prop('onClick') as any - onClick() - }) - - wrapper.update() - - await act(async () => { - const modal = wrapper.find(AddCareGoalModal) - const onClose = modal.prop('onCloseButtonClick') as any - onClose() - }) - - wrapper.update() - - const modal = wrapper.find(AddCareGoalModal) - expect(modal.prop('show')).toBeFalsy() + setup('patients/123/care-goals', [Permissions.AddCareGoal]) + userEvent.click(await screen.findByRole('button', { name: /patient.careGoal.new/i })) + expect(screen.getByRole('dialog')).toBeVisible() + userEvent.click(screen.getByRole('button', { name: /close/i })) + expect(screen.getByRole('dialog')).not.toBeVisible() }) it('should render care goal table when on patients/123/care-goals', async () => { - const wrapper = await setup('patients/123/care-goals', [Permissions.ReadCareGoal]) - - const careGoalTable = wrapper.find(CareGoalTable) - expect(careGoalTable).toHaveLength(1) + const { container } = await setup('patients/123/care-goals', [Permissions.ReadCareGoal]) + await waitFor(() => { + expect(container.querySelector('table')).toBeInTheDocument() + }) }) it('should render care goal view when on patients/123/care-goals/456', async () => { - const wrapper = await setup('patients/123/care-goals/456', [Permissions.ReadCareGoal]) - - const viewCareGoal = wrapper.find(ViewCareGoal) - expect(viewCareGoal).toHaveLength(1) + setup('patients/123/care-goals/456', [Permissions.ReadCareGoal]) + expect(await screen.findByRole('form')).toBeInTheDocument() }) })