From c6acecc3c89b0aeb96fa6c6fea15b316ee0669a2 Mon Sep 17 00:00:00 2001 From: ocBruno Date: Tue, 4 Feb 2020 20:46:16 -0300 Subject: [PATCH] feat(navigation): navigate to patients profile on related person click fix #1763 --- .../related-persons/RelatedPersons.test.tsx | 82 ++++++++++--------- src/patients/list/Patients.tsx | 2 +- .../related-persons/RelatedPersonTab.tsx | 13 ++- 3 files changed, 57 insertions(+), 40 deletions(-) diff --git a/src/__tests__/patients/related-persons/RelatedPersons.test.tsx b/src/__tests__/patients/related-persons/RelatedPersons.test.tsx index aa162492e9..07a48715c1 100644 --- a/src/__tests__/patients/related-persons/RelatedPersons.test.tsx +++ b/src/__tests__/patients/related-persons/RelatedPersons.test.tsx @@ -1,5 +1,9 @@ import '../../../__mocks__/matchMediaMock' import React from 'react' +import { Router } from 'react-router' + +import { createMemoryHistory } from 'history' + import { mount, ReactWrapper } from 'enzyme' import RelatedPersonTab from 'patients/related-persons/RelatedPersonTab' import { Button, List, ListItem } from '@hospitalrun/components' @@ -18,12 +22,23 @@ const mockStore = createMockStore([thunk]) describe('Related Persons Tab', () => { let wrapper: ReactWrapper - + let history = createMemoryHistory() + const setup = async (location: string, patient: Patient, user: any) => { + history = createMemoryHistory() + history.push(location) + return mount( + + + + + , + ) + } describe('Add New Related Person', () => { let patient: any let user: any - beforeEach(() => { + beforeEach(async () => { patient = { id: '123', rev: '123', @@ -32,11 +47,8 @@ describe('Related Persons Tab', () => { user = { permissions: [Permissions.WritePatients, Permissions.ReadPatients], } - wrapper = mount( - - - , - ) + // general test wrapper + wrapper = await setup('/', patient, user) }) it('should render a New Related Person button', () => { @@ -46,14 +58,10 @@ describe('Related Persons Tab', () => { expect(newRelatedPersonButton.text().trim()).toEqual('patient.relatedPersons.new') }) - it('should not render a New Related Person button if the user does not have write privileges for a patient', () => { + it('should not render a New Related Person button if the user does not have write privileges for a patient', async () => { user = { permissions: [Permissions.ReadPatients] } - wrapper = mount( - - - , - ) + wrapper = await setup('/', patient, user) const newRelatedPersonButton = wrapper.find(Button) expect(newRelatedPersonButton).toHaveLength(0) }) @@ -78,7 +86,7 @@ describe('Related Persons Tab', () => { expect(newRelatedPersonModal.prop('show')).toBeTruthy() }) - it('should call update patient with the data from the modal', () => { + it('should call update patient with the data from the modal', async () => { jest.spyOn(patientSlice, 'updatePatient') jest.spyOn(PatientRepository, 'saveOrUpdate') const expectedRelatedPerson = { patientId: '123', type: 'type' } @@ -86,26 +94,28 @@ describe('Related Persons Tab', () => { ...patient, relatedPersons: [expectedRelatedPerson], } - - act(() => { - const newRelatedPersonButton = wrapper.find(Button) - const onClick = newRelatedPersonButton.prop('onClick') as any - onClick() - }) - - wrapper.update() - - act(() => { - const newRelatedPersonModal = wrapper.find(NewRelatedPersonModal) - - const onSave = newRelatedPersonModal.prop('onSave') as any - onSave(expectedRelatedPerson) + await act(async () => { + wrapper = await setup('/', patient, user) + }).then(() => { + act(() => { + const newRelatedPersonButton = wrapper.find(Button) + const onClick = newRelatedPersonButton.prop('onClick') as any + onClick() + }) + + wrapper.update() + + act(() => { + const newRelatedPersonModal = wrapper.find(NewRelatedPersonModal) + const onSave = newRelatedPersonModal.prop('onSave') as any + onSave(expectedRelatedPerson) + }) + + wrapper.update() + + expect(patientSlice.updatePatient).toHaveBeenCalledTimes(1) + expect(patientSlice.updatePatient).toHaveBeenCalledWith(expectedPatient) }) - - wrapper.update() - - expect(patientSlice.updatePatient).toHaveBeenCalledTimes(1) - expect(patientSlice.updatePatient).toHaveBeenCalledWith(expectedPatient) }) it('should close the modal when the save button is clicked', () => { @@ -146,11 +156,7 @@ describe('Related Persons Tab', () => { mocked(PatientRepository.find).mockResolvedValue({ fullName: 'test test' } as Patient) await act(async () => { - wrapper = await mount( - - - , - ) + wrapper = await setup('/', patient, user) }) wrapper.update() diff --git a/src/patients/list/Patients.tsx b/src/patients/list/Patients.tsx index a3153b6fb6..307727e6ab 100644 --- a/src/patients/list/Patients.tsx +++ b/src/patients/list/Patients.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react' import { useSelector, useDispatch } from 'react-redux' -import { useHistory } from 'react-router-dom' +import { useHistory } from 'react-router' import { useTranslation } from 'react-i18next' import { Spinner, TextInput, Button, List, ListItem, Container, Row } from '@hospitalrun/components' import { RootState } from '../../store' diff --git a/src/patients/related-persons/RelatedPersonTab.tsx b/src/patients/related-persons/RelatedPersonTab.tsx index 2069429d0a..437394d10d 100644 --- a/src/patients/related-persons/RelatedPersonTab.tsx +++ b/src/patients/related-persons/RelatedPersonTab.tsx @@ -3,6 +3,7 @@ import { Button, Panel, List, ListItem } from '@hospitalrun/components' import NewRelatedPersonModal from 'patients/related-persons/NewRelatedPersonModal' import RelatedPerson from 'model/RelatedPerson' import { useTranslation } from 'react-i18next' +import { useHistory } from 'react-router' import Patient from 'model/Patient' import { updatePatient } from 'patients/patient-slice' import { useDispatch, useSelector } from 'react-redux' @@ -16,6 +17,11 @@ interface Props { const RelatedPersonTab = (props: Props) => { const dispatch = useDispatch() + const history = useHistory() + + const navigateTo = (location: string) => { + history.push(location) + } const { patient } = props const { t } = useTranslation() const { permissions } = useSelector((state: RootState) => state.user) @@ -44,6 +50,9 @@ const RelatedPersonTab = (props: Props) => { setShowRelatedPersonModal(true) } + const onRelatedPersonClick = (id: string) => { + navigateTo(`/patients/${id}`) + } const closeNewRelatedPersonModal = () => { setShowRelatedPersonModal(false) } @@ -90,7 +99,9 @@ const RelatedPersonTab = (props: Props) => { {relatedPersons ? ( {relatedPersons.map((r) => ( - {r.fullName} + onRelatedPersonClick(r.id)}> + {r.fullName} + ))} ) : (