added tests

pwa/src/components/DiagnosisForm.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, fireEvent } from '@testing-library/react'
+import { render, fireEvent, getByTestId } from '@testing-library/react'
 import DiagnosisForm from './DiagnosisForm'
 
 /*
@@ -24,14 +24,39 @@ Diagnosis Fields are stored in DiagnosisFields.json in the format:
 }
 */
 
+import * as data from './DiagnosisFields.json'
+const diagnosisFields = data.diagnoses
+
 test('renders the form', async () => {
     const dom = render(<DiagnosisForm />)
     expect(dom.getByTestId('diagnosis-form-wrapper')).toBeTruthy()
 })
 
-test('renders each diagnoses.name data field as a checkbox', () => {})
+test('renders each diagnoses.name data field', () => {
+    const { getByText } = render(<DiagnosisForm />)
 
-test(' each diagnoses.name data is able to be checked/unchecked', () => {})
+    diagnosisFields.forEach((diagnosis) => {
+        if (diagnosis.name != null) {
+            const re = new RegExp(diagnosis.name, 'gi')
+            const field = getByText(re)
+            expect(field).toBeInTheDocument()
+        }
+    })
+})
+
+test(' each diagnoses.name has a corresponding checkbox and is able to be checked/unchecked', () => {
+    const { getByText, getByTestId } = render(<DiagnosisForm />)
+
+    diagnosisFields.forEach((diagnosis) => {
+        if (diagnosis.name != null) {
+            const re = new RegExp(diagnosis.id, 'gi')
+            const field = getByTestId(re)
+            expect(field).toHaveClass('am-checkbox-item')
+
+            // TODO: ensure it can be checked /unchecked
+        }
+    })
+})
 
 test('finds and element with each id in the DOM', () => {})
 

pwa/src/components/DiagnosisForm.tsx

@@ -37,7 +37,11 @@ export default function DiagnosisForm(): ReactElement {
 
                 if (field.name != null) {
                     formElements.push(
-                        <CheckboxItem id={field.id} key={field.id}>
+                        <CheckboxItem
+                            id={field.id}
+                            data-testid={field.id}
+                            key={field.id}
+                        >
                             {field.name}
                         </CheckboxItem>,
                     )
@@ -46,7 +50,11 @@ export default function DiagnosisForm(): ReactElement {
                 if (field['text-input-title'] != null) {
                     formElements.push(
                         <List renderHeader={() => field['text-input-title']}>
-                            <TextareaItem autoHeight id={field.id} />
+                            <TextareaItem
+                                autoHeight
+                                id={field.id}
+                                data-testid={field.id}
+                            />
                         </List>,
                     )
                 }
@@ -57,7 +65,11 @@ export default function DiagnosisForm(): ReactElement {
                     // add each group element to the internalElement arrat
                     field.group.forEach((ele: any) => {
                         groupElements.push(
-                            <CheckboxItem id={ele.id} key={ele.id}>
+                            <CheckboxItem
+                                id={ele.id}
+                                data-testid={ele.id}
+                                key={ele.id}
+                            >
                                 {ele.name}
                             </CheckboxItem>,
                         )
@@ -66,7 +78,10 @@ export default function DiagnosisForm(): ReactElement {
                     // Render the entire list with the internal elements
                     if (field['group-title'] != null) {
                         formElements.push(
-                            <List renderHeader={() => field['group-title']}>
+                            <List
+                                renderHeader={() => field['group-title']}
+                                data-testid={field.id}
+                            >
                                 {groupElements}
                             </List>,
                         )