From 01628d37d9554f9fedafa692fd409d175d8f28db Mon Sep 17 00:00:00 2001 From: Jacob Evans Date: Fri, 25 Dec 2020 12:44:18 -0600 Subject: [PATCH] NewImagingRequest - complete conversion --- package.json | 3 +- .../requests/NewImagingRequest.test.tsx | 185 +++++++----------- 2 files changed, 69 insertions(+), 119 deletions(-) diff --git a/package.json b/package.json index 512323e8f0..29e26af1d8 100644 --- a/package.json +++ b/package.json @@ -109,6 +109,7 @@ "lint-staged": "~10.5.0", "memdown": "~5.1.0", "prettier": "~2.2.0", + "react-select-event": "~5.1.0", "redux-mock-store": "~1.5.4", "rimraf": "~3.0.2", "source-map-explorer": "^2.2.2", @@ -163,4 +164,4 @@ "git add ." ] } -} \ No newline at end of file +} diff --git a/src/__tests__/imagings/requests/NewImagingRequest.test.tsx b/src/__tests__/imagings/requests/NewImagingRequest.test.tsx index 1b1da2623d..9595a8a0ad 100644 --- a/src/__tests__/imagings/requests/NewImagingRequest.test.tsx +++ b/src/__tests__/imagings/requests/NewImagingRequest.test.tsx @@ -1,10 +1,10 @@ -// import { Button, Typeahead, Label } from '@hospitalrun/components' import { render, screen } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { createMemoryHistory } from 'history' import React from 'react' import { Provider } from 'react-redux' import { Router, Route } from 'react-router-dom' +import selectEvent from 'react-select-event' import createMockStore from 'redux-mock-store' import thunk from 'redux-thunk' @@ -12,12 +12,6 @@ import NewImagingRequest from '../../../imagings/requests/NewImagingRequest' import * as breadcrumbUtil from '../../../page-header/breadcrumbs/useAddBreadcrumbs' import * as ButtonBarProvider from '../../../page-header/button-toolbar/ButtonBarProvider' import * as titleUtil from '../../../page-header/title/TitleContext' -// import SelectWithLabelFormGroup from '../../../shared/components/input/SelectWithLabelFormGroup' -// import TextFieldWithLabelFormGroup from '../../../shared/components/input/TextFieldWithLabelFormGroup' -// import TextInputWithLabelFormGroup from '../../../shared/components/input/TextInputWithLabelFormGroup' -import ImagingRepository from '../../../shared/db/ImagingRepository' -import Imaging from '../../../shared/model/Imaging' -// import Patient from '../../../shared/model/Patient' import { RootState } from '../../../shared/store' const mockStore = createMockStore([thunk]) @@ -54,16 +48,16 @@ describe('New Imaging Request', () => { // ? Does the TitleComponent/Provider and Breadcrumb have its own tests // describe('title and breadcrumbs', () => { - // it('should have called the useUpdateTitle hook', async () => { + // it(' have called the useUpdateTitle hook', async () => { // await setup() // expect(titleUtil.useUpdateTitle).toHaveBeenCalledTimes(1) // }) // }) describe('form layout', () => { - it('patient input field w/ label', () => { + it('Patient input field w/ label', () => { setup() - const imgPatientInput = screen.getByPlaceholderText(/imagings.imaging.patient/i) + const imgPatientInput = screen.getByPlaceholderText(/imagings\.imaging\.patient/i) expect(screen.getAllByText(/imagings\.imaging\.patient/i)[0]).toBeInTheDocument() @@ -71,136 +65,91 @@ describe('New Imaging Request', () => { expect(imgPatientInput).toHaveDisplayValue('Cmdr. Data') }) - it('should render a dropdown list of visits', async () => { + it('Render a dropdown list of visits', async () => { setup() - // const visitsTypeSelect = wrapper.find('.visits').find(SelectWithLabelFormGroup) - // expect(visitsTypeSelect).toBeDefined() - // expect(visitsTypeSelect.prop('label')).toEqual('patient.visits.label') - // expect(visitsTypeSelect.prop('isRequired')).toBeTruthy() - }) - - it('should render a type input box', async () => { - setup() - // const typeInputBox = wrapper.find(TextInputWithLabelFormGroup) + const dropdownVisits = screen.getAllByPlaceholderText('-- Choose --')[0] + expect(screen.getByText(/patient\.visits\.label/i)).toBeInTheDocument() + expect(dropdownVisits.getAttribute('aria-expanded')).toBe('false') - // expect(typeInputBox).toBeDefined() - // expect(typeInputBox.prop('label')).toEqual('imagings.imaging.type') - // expect(typeInputBox.prop('isRequired')).toBeTruthy() - // expect(typeInputBox.prop('isEditable')).toBeTruthy() + selectEvent.openMenu(dropdownVisits) + expect(dropdownVisits).toHaveDisplayValue(['']) + expect(dropdownVisits.getAttribute('aria-expanded')).toBe('true') }) - it('should render a status types select', async () => { + it('Render a image type input box', async () => { setup() - // const statusTypesSelect = wrapper.find('.imaging-status').find(SelectWithLabelFormGroup) - - // expect(statusTypesSelect).toBeDefined() - // expect(statusTypesSelect.prop('label')).toEqual('imagings.imaging.status') - // expect(statusTypesSelect.prop('isRequired')).toBeTruthy() - // expect(statusTypesSelect.prop('isEditable')).toBeTruthy() - // expect(statusTypesSelect.prop('options')).toHaveLength(3) - // expect(statusTypesSelect.prop('options')[0].label).toEqual('imagings.status.requested') - // expect(statusTypesSelect.prop('options')[0].value).toEqual('requested') - // expect(statusTypesSelect.prop('options')[1].label).toEqual('imagings.status.completed') - // expect(statusTypesSelect.prop('options')[1].value).toEqual('completed') - // expect(statusTypesSelect.prop('options')[2].label).toEqual('imagings.status.canceled') - // expect(statusTypesSelect.prop('options')[2].value).toEqual('canceled') - }) + const imgTypeInput = screen.getByPlaceholderText(/imagings\.imaging\.type/i) + expect(screen.getByLabelText(/imagings\.imaging\.type/i)).toBeInTheDocument() - it('should render a notes text field', async () => { - setup() - // const notesTextField = wrapper.find(TextFieldWithLabelFormGroup) - - // expect(notesTextField).toBeDefined() - // expect(notesTextField.prop('label')).toEqual('imagings.imaging.notes') - // expect(notesTextField.prop('isRequired')).toBeFalsy() - // expect(notesTextField.prop('isEditable')).toBeTruthy() + userEvent.type(imgTypeInput, 'tricorder imaging') + expect(imgTypeInput).toHaveDisplayValue('tricorder imaging') }) - it('should render a save button', async () => { + it('Render a status types select', async () => { setup() - // const saveButton = wrapper.find(Button).at(0) - // expect(saveButton).toBeDefined() - // expect(saveButton.text().trim()).toEqual('imagings.requests.create') + const dropdownStatusTypes = screen.getAllByPlaceholderText('-- Choose --')[1] + expect(screen.getByText(/patient\.visits\.label/i)).toBeInTheDocument() + + expect(dropdownStatusTypes.getAttribute('aria-expanded')).toBe('false') + selectEvent.openMenu(dropdownStatusTypes) + expect(dropdownStatusTypes.getAttribute('aria-expanded')).toBe('true') + expect(dropdownStatusTypes).toHaveDisplayValue(['imagings.status.requested']) + + const optionsContent = screen + .getAllByRole('option') + .map((option) => option.lastElementChild?.innerHTML) + expect( + optionsContent.includes( + 'imagings.status.requested' && 'imagings.status.completed' && 'imagings.status.canceled', + ), + ).toBe(true) }) - it('should render a cancel button', async () => { + it('Render a notes text field', async () => { setup() - // const cancelButton = wrapper.find(Button).at(1) - // expect(cancelButton).toBeDefined() - // expect(cancelButton.text().trim()).toEqual('actions.cancel') + const notesInputField = screen.getByRole('textbox', { + name: /imagings\.imaging\.notes/i, + }) + expect(screen.getByLabelText(/imagings\.imaging\.notes/i)).toBeInTheDocument() + expect(notesInputField).toBeInTheDocument() + userEvent.type(notesInputField, 'Spot likes nutritional formula 221') }) }) describe('on cancel', () => { - it('should navigate back to /imaging', async () => { + it('Navigate back to /imaging', async () => { setup() - // const cancelButton = wrapper.find(Button).at(1) - - // * find button userEvent.click() - // act(() => { - // const onClick = cancelButton.prop('onClick') as any - // onClick({} as React.MouseEvent) - // }) - - // expect(history.location.pathname).toEqual('/imaging') + expect(history.location.pathname).toEqual('/imaging/new') + userEvent.click( + screen.getByRole('button', { + name: /actions\.cancel/i, + }), + ) + + expect(history.location.pathname).toEqual('/imaging') }) }) describe('on save', () => { - it('should save the imaging request and navigate to "/imaging"', async () => { - const expectedDate = new Date() - const expectedImaging = { - patient: 'patient', - type: 'expected type', - status: 'requested', - visitId: 'expected visitId', - notes: 'expected notes', - id: '1234', - requestedOn: expectedDate.toISOString(), - } as Imaging - + it('Save the imaging request and navigate to "/imaging"', async () => { setup() - // ? Look more into the thing this is Spying on - jest.spyOn(ImagingRepository, 'save').mockResolvedValue({ ...expectedImaging }) - - // const patientTypeahead = wrapper.find(Typeahead) - // await act(async () => { - // const onChange = patientTypeahead.prop('onChange') - // await onChange([{ fullName: expectedImaging.patient }] as Patient[]) - // }) - - // // const typeInput = wrapper.find(TextInputWithLabelFormGroup) - // act(() => { - // const onChange = typeInput.prop('onChange') as any - // onChange({ currentTarget: { value: expectedImaging.type } }) - // }) - - // // const statusSelect = wrapper.find('.imaging-status').find(SelectWithLabelFormGroup) - // act(() => { - // const onChange = statusSelect.prop('onChange') as any - // onChange({ currentTarget: { value: expectedImaging.status } }) - // }) - - // // const visitsSelect = wrapper.find('.visits').find(SelectWithLabelFormGroup) - // act(() => { - // const onChange = visitsSelect.prop('onChange') as any - // onChange({ currentTarget: { value: expectedImaging.visitId } }) - // }) - - // // const notesTextField = wrapper.find(TextFieldWithLabelFormGroup) - // act(() => { - // const onChange = notesTextField.prop('onChange') as any - // onChange({ currentTarget: { value: expectedImaging.notes } }) - // }) - // wrapper.update() - - //* userEvent click on found button element - // const saveButton = wrapper.find(Button).at(0) - // const onClick = saveButton.prop('onClick') as any - // expect(saveButton.text().trim()).toEqual('imagings.requests.create') - // await act(async () => { - // await onClick() - // }) + const patient = screen.getByPlaceholderText(/imagings\.imaging\.patient/i) + const imgTypeInput = screen.getByPlaceholderText(/imagings.imaging.type/i) + const notesInputField = screen.getByRole('textbox', { + name: /imagings\.imaging\.notes/i, + }) + const dropdownStatusTypes = screen.getAllByPlaceholderText('-- Choose --')[1] + const dropdownVisits = screen.getAllByPlaceholderText('-- Choose --')[0] + userEvent.type(patient, 'Worf') + userEvent.type(imgTypeInput, 'Medical Tricorder') + userEvent.type(notesInputField, 'Batliff') + selectEvent.create(dropdownVisits, 'Med Bay') + selectEvent.select(dropdownStatusTypes, 'imagings.status.requested') + userEvent.click( + screen.getByRole('button', { + name: /imagings\.requests\.create/i, + }), + ) expect(history.location.pathname).toEqual(`/imaging/new`) })