Repository: HospitalRun/hospitalrun-frontend (ts)
Issue: Lab - In the Request Lab routine make the visit field required
## 🐛 Bug Report

When **Request Lab** for a patient without any visit, it will crash.

## To Reproduce

Steps to reproduce the behavior:
1. Create an patient without adding a visit
2. Click **Request Lab**, input the patient field, leave the visit field blank since it is not required.
3. Notice the crash/error (see screenshot in comments)

## Expected behavior

Request Lab should behave similar to **New Imaging Request** i.e. make the visit field required

## Technical Details

Make the visit field required (as in Imaging Request)

## Your Environment

- *node version*: 12
- *os*: Windows

Pull request description: fix(lab): In New lab request make the visit field required
Fixes #2551 .

**Changes proposed in this pull request:**

- I make the `NewLabRequest` use the exact same method to solve the `null` visit issue. [`NewImagingRequest.tsx` line65](https://github.com/HospitalRun/hospitalrun-frontend/blob/45647d3b4a15ca8d9c57ebda66b3712658d62f19/src/imagings/requests/NewImagingRequest.tsx#L65)
- My concern is, we use the `as Option[]` at line 57. So that the type of the variable `visits` is not right. It should be `Option[] | null`. Maybe we should do some refactor in `NewImagingRequest.tsx` and `NewLabRequest.tsx` to fix this wrong type. Otherwise, it may lead to other bugs in the future.


Patch:
diff --git a/src/labs/requests/NewLabRequest.tsx b/src/labs/requests/NewLabRequest.tsx
index 9a10429e..1841b14f 100644
--- a/src/labs/requests/NewLabRequest.tsx
+++ b/src/labs/requests/NewLabRequest.tsx
@@ -51,7 +51,7 @@ const NewLabRequest = () => {
 
   const onPatientChange = (patient: Patient) => {
     if (patient) {
-      const visits = patient.visits.map((v) => ({
+      const visits = patient.visits?.map((v) => ({
         label: `${v.type} at ${format(new Date(v.startDateTime), 'yyyy-MM-dd hh:mm a')}`,
         value: v.id,
       })) as Option[]
@@ -149,8 +149,9 @@ const NewLabRequest = () => {
               <SelectWithLabelFormGroup
                 name="visit"
                 label={t('patient.visit')}
+                isRequired
                 isEditable={newLabRequest.patient !== undefined}
-                options={visitOptions}
+                options={visitOptions || []}
                 defaultSelected={defaultSelectedVisitsOption()}
                 onChange={(values) => {
                   onVisitChange(values[0])


Test patch:
diff --git a/src/__tests__/labs/requests/NewLabRequest.test.tsx b/src/__tests__/labs/requests/NewLabRequest.test.tsx
index 2fa484c3..9cfa2b75 100644
--- a/src/__tests__/labs/requests/NewLabRequest.test.tsx
+++ b/src/__tests__/labs/requests/NewLabRequest.test.tsx
@@ -122,7 +122,7 @@ describe('New Lab Request', () => {
       expect(selectInput).toBeInTheDocument()
       expect(selectInput).toHaveDisplayValue([''])
       expect(selectLabel).toBeInTheDocument()
-      expect(selectLabel).not.toHaveAttribute('title', 'This is a required input')
+      expect(selectLabel).toHaveAttribute('title', 'This is a required input')
     })
 
     it('should render a save button', () => {