From d52ee1378796fb3cdcfce97de31839a98a45ab1b Mon Sep 17 00:00:00 2001
From: Ben Mitchinson <mitchinson.dev@gmail.com>
Date: Tue, 14 Apr 2020 22:23:16 -0500
Subject: [PATCH] 100% Unit Coverage (+ Accidental Linting)

---
 pwa/src/components/PatientInfoForm.test.tsx |  87 ++++--
 pwa/src/components/PatientInfoForm.tsx      | 298 ++++++++++----------
 2 files changed, 213 insertions(+), 172 deletions(-)

diff --git a/pwa/src/components/PatientInfoForm.test.tsx b/pwa/src/components/PatientInfoForm.test.tsx
index 34558a0..b1009fd 100644
--- a/pwa/src/components/PatientInfoForm.test.tsx
+++ b/pwa/src/components/PatientInfoForm.test.tsx
@@ -1,35 +1,73 @@
 import React from "react";
-import { render} from "@testing-library/react";
+import { render, fireEvent, prettyDOM } from "@testing-library/react";
 import PatientInfoForm from "./PatientInfoForm";
-/*
-test("female-only div is only displayed if the sex is selected as female", async ()  => {
-  const femaleOnlyFormFields = [
-    "Pregnant",
-    "LMP",
-    "wants planning"
-  ]
 
-  // render(<PatientInfoForm />);
-  const { getByText } = render(<PatientInfoForm />);
+test("female-only div is only displayed if the sex is selected as female", async () => {
+  const femaleOnlyFormFields = ["Pregnant?", "LMP", "Wants Planning?"];
+
+  const dom = render(<PatientInfoForm />);
 
   // ensure the female-only div is not displayed
   femaleOnlyFormFields.forEach((fieldText) => {
-    let re = new RegExp(fieldText, 'gi');
-    expect(screen.queryByText(re)).toBeNull();
-  })
+    expect(dom.queryByText(fieldText)).toBeNull();
+  });
 
   // click the radio button for 'female'
-  fireEvent.click(screen.getByText(/Female/i));
+  const femaleButton = dom.getByTestId("female-button");
+  fireEvent.click(femaleButton);
 
-  // ensure the female-only div is displayed
   femaleOnlyFormFields.forEach((fieldText) => {
-    let re = new RegExp(fieldText, 'gi');
-    expect(screen.getByText(re)).toBeInTheDocument();
-  })
-})
-*/
+    expect(dom.queryByText(fieldText)).toBeTruthy();
+  });
+});
 
+test("sets visit input", () => {
+  const dom = render(<PatientInfoForm />);
+  const visitYesInput = dom.queryByTestId("visit-Yes");
+  const checkBox = visitYesInput.getElementsByTagName("span")[0];
 
+  expect(checkBox).not.toHaveClass("am-radio-checked");
+  fireEvent.click(visitYesInput);
+  expect(checkBox).toHaveClass("am-radio-checked");
+});
+
+test("sets pregnant input", () => {
+  const dom = render(<PatientInfoForm />);
+  const femaleButton = dom.getByTestId("female-button");
+  fireEvent.click(femaleButton);
+
+  const pregnantYesInput = dom.queryByTestId("pregnant-Yes");
+  const checkBox = pregnantYesInput.getElementsByTagName("span")[0];
+
+  expect(checkBox).not.toHaveClass("am-radio-checked");
+  fireEvent.click(pregnantYesInput);
+  expect(checkBox).toHaveClass("am-radio-checked");
+});
+
+test("sets planning input", () => {
+  const dom = render(<PatientInfoForm />);
+  const femaleButton = dom.getByTestId("female-button");
+  fireEvent.click(femaleButton);
+
+  const planningYesInput = dom.queryByTestId("planning-Yes");
+  const checkBox = planningYesInput.getElementsByTagName("span")[0];
+
+  expect(checkBox).not.toHaveClass("am-radio-checked");
+  fireEvent.click(planningYesInput);
+  expect(checkBox).toHaveClass("am-radio-checked");
+});
+
+test("sets albendazole input", () => {
+  const dom = render(<PatientInfoForm />);
+  const femaleButton = dom.getByTestId("female-button");
+
+  const albendazoleYesInput = dom.queryByTestId("albendazole-Yes");
+  const checkBox = albendazoleYesInput.getElementsByTagName("span")[0];
+
+  expect(checkBox).not.toHaveClass("am-radio-checked");
+  fireEvent.click(albendazoleYesInput);
+  expect(checkBox).toHaveClass("am-radio-checked");
+});
 
 test("renders the Patient Info Form fields", () => {
   const formFields = [
@@ -55,14 +93,13 @@ test("renders the Patient Info Form fields", () => {
     "Medicines",
     "Chief Complaint",
     "History",
-    "Exam"
+    "Exam",
   ];
 
   const { getByText } = render(<PatientInfoForm />);
 
-
   formFields.forEach((fieldText) => {
-    let re = new RegExp(fieldText, 'gi');
+    let re = new RegExp(fieldText, "gi");
     expect(getByText(re)).toBeInTheDocument();
-  })
-})
\ No newline at end of file
+  });
+});
diff --git a/pwa/src/components/PatientInfoForm.tsx b/pwa/src/components/PatientInfoForm.tsx
index c813917..305f398 100644
--- a/pwa/src/components/PatientInfoForm.tsx
+++ b/pwa/src/components/PatientInfoForm.tsx
@@ -1,50 +1,76 @@
-import React, { ReactElement, useState } from 'react'
-import { DatePicker, InputItem, List, TextareaItem, Button, Radio, WhiteSpace } from 'antd-mobile'
-import enUs from 'antd-mobile/lib/date-picker/locale/en_US';
-import '../scss/Login.scss'
+import React, { ReactElement, useState } from "react";
+import {
+  DatePicker,
+  InputItem,
+  List,
+  TextareaItem,
+  Button,
+  Radio,
+  WhiteSpace,
+} from "antd-mobile";
+import enUs from "antd-mobile/lib/date-picker/locale/en_US";
+import "../scss/Login.scss";
 
 const RadioItem = Radio.RadioItem;
 
-
 export default function Form(): ReactElement {
   // State Hooks for Radio Buttons
   // useState returns a value, and a function to set that value
-  const [sex, setSex] = useState(null as Number)        // Default: null
-  const [albendazole, setAlbendazole] = useState(0)     // Default: No
-  const [visit, setVisit] = useState(0)                 // Default: No
-  const [pregnant, setPregnant] = useState(0)           // Default: No
-  const [planning, setPlanning] = useState(0)           // Default: No
+  const [sex, setSex] = useState(null as Number); // Default: null
+  const [albendazole, setAlbendazole] = useState(0); // Default: No
+  const [visit, setVisit] = useState(0); // Default: No
+  const [pregnant, setPregnant] = useState(0); // Default: No
+  const [planning, setPlanning] = useState(0); // Default: No
 
   // Data for Radio Buttons
   const sexValues = [
-    { value: 0, label: 'Male' },
-    { value: 1, label: 'Female' }
-  ]
+    { value: 0, label: "Male" },
+    { value: 1, label: "Female" },
+  ];
 
   const radioYesNo = [
-    { value: 0, label: 'No' },
-    { value: 1, label: 'Yes' },
+    { value: 0, label: "No" },
+    { value: 1, label: "Yes" },
   ];
 
   /* istanbul ignore next */
   const onSubmit = () => {
     // This shows how to access the values of the form
-    const firstNameField: HTMLInputElement = document.getElementById('firstname') as HTMLInputElement
-    const lastNameField: HTMLInputElement = document.getElementById('lastname') as HTMLInputElement
-    const nicknameField: HTMLInputElement = document.getElementById('nickname') as HTMLInputElement
-    const complaintField1: HTMLInputElement = document.getElementById('complaint1') as HTMLInputElement
-    const complaintField2: HTMLInputElement = document.getElementById('complaint2') as HTMLInputElement
-    const complaintField3: HTMLInputElement = document.getElementById('complaint3') as HTMLInputElement
+    const firstNameField: HTMLInputElement = document.getElementById(
+      "firstname"
+    ) as HTMLInputElement;
+    const lastNameField: HTMLInputElement = document.getElementById(
+      "lastname"
+    ) as HTMLInputElement;
+    const nicknameField: HTMLInputElement = document.getElementById(
+      "nickname"
+    ) as HTMLInputElement;
+    const complaintField1: HTMLInputElement = document.getElementById(
+      "complaint1"
+    ) as HTMLInputElement;
+    const complaintField2: HTMLInputElement = document.getElementById(
+      "complaint2"
+    ) as HTMLInputElement;
+    const complaintField3: HTMLInputElement = document.getElementById(
+      "complaint3"
+    ) as HTMLInputElement;
 
-    console.log("First name:", firstNameField.value)
-    console.log("Last name:", lastNameField.value)
-    console.log("Nickname:", nicknameField.value)
-    console.log("Complaints: ", complaintField1.value + " " + complaintField2.value + " " + complaintField3.value)
-    console.log("Wants Planning?: " + planning)
-  }
+    console.log("First name:", firstNameField.value);
+    console.log("Last name:", lastNameField.value);
+    console.log("Nickname:", nicknameField.value);
+    console.log(
+      "Complaints: ",
+      complaintField1.value +
+        " " +
+        complaintField2.value +
+        " " +
+        complaintField3.value
+    );
+    console.log("Wants Planning?: " + planning);
+  };
 
   return (
-    <div id='patient-info-wrapper'>
+    <div id="patient-info-wrapper">
       <TextareaItem
         title="First Name"
         placeholder="First Name"
@@ -66,9 +92,16 @@ export default function Form(): ReactElement {
         autoHeight
       />
 
-      <List renderHeader={() => 'Sex'}>
-        {sexValues.map(i => (
-          <RadioItem id={`${i.label.toLowerCase()}-button`} key={i.value} name='sex' checked={sex === i.value} onChange={() => setSex(i.value)}>
+      <List renderHeader={() => "Sex"}>
+        {sexValues.map((i) => (
+          <RadioItem
+            data-testid={`${i.label.toLowerCase()}-button`}
+            id={`${i.label.toLowerCase()}-button`}
+            key={i.value}
+            name="sex"
+            checked={sex === i.value}
+            onClick={() => setSex(i.value)}
+          >
             {i.label}
           </RadioItem>
         ))}
@@ -87,176 +120,147 @@ export default function Form(): ReactElement {
         {/* TODO: figure out how to access this value */}
       </DatePicker>
 
-      <InputItem
-        type="number"
-        placeholder="Age"
-        id='age'
-      >Age </InputItem>
+      <InputItem type="number" placeholder="Age" id="age">
+        Age{" "}
+      </InputItem>
 
-      <InputItem
-        type="number"
-        placeholder="Phone"
-        id='phone'
-      >Phone</InputItem>
+      <InputItem type="number" placeholder="Phone" id="phone">
+        Phone
+      </InputItem>
 
-      <TextareaItem
-        title="Town"
-        placeholder="Town"
-        id="town"
-        autoHeight
-      />
+      <TextareaItem title="Town" placeholder="Town" id="town" autoHeight />
 
-      <List renderHeader={() => 'Visit?'}>
-        {radioYesNo.map(i => (
-          <RadioItem key={i.value} name='visit' checked={visit === i.value} onChange={() => setVisit(i.value)}>
+      <List renderHeader={() => "Visit?"}>
+        {radioYesNo.map((i) => (
+          <RadioItem
+            key={i.value}
+            data-testid={`visit-${i.label}`}
+            name="visit"
+            checked={visit === i.value}
+            onClick={() => setVisit(i.value)}
+          >
             {i.label}
           </RadioItem>
         ))}
       </List>
 
       {/* Only display the 'female-only' div if the patient is female */}
-      {sex ?
-        <div id='female-only'>
+      {sex ? (
+        <div id="female-only">
           <WhiteSpace />
-          <List renderHeader={() => 'Pregnant?'}>
-            {radioYesNo.map(i => (
-              <RadioItem key={i.value} name='pregnant' checked={pregnant === i.value} onChange={() => setPregnant(i.value)}>
+          <List renderHeader={() => "Pregnant?"}>
+            {radioYesNo.map((i) => (
+              <RadioItem
+                data-testid={`pregnant-${i.label}`}
+                key={i.value}
+                name="pregnant"
+                checked={pregnant === i.value}
+                onClick={() => setPregnant(i.value)}
+              >
                 {i.label}
               </RadioItem>
             ))}
           </List>
 
-          <InputItem
-            title="G"
-            type="number"
-            id='gravida'
-          >G</InputItem>
+          <InputItem title="G" type="number" id="gravida">
+            G
+          </InputItem>
 
-          <InputItem
-            title="P"
-            type="number"
-            id='para'
-          >P</InputItem>
+          <InputItem title="P" type="number" id="para">
+            P
+          </InputItem>
 
-          <InputItem
-            title="A"
-            type="number"
-            id='abortus'
-          >A</InputItem>
+          <InputItem title="A" type="number" id="abortus">
+            A
+          </InputItem>
 
-          <TextareaItem
-            title="LMP"
-            id='lmp'
-          />
+          <TextareaItem title="LMP" id="lmp" />
 
-          <List renderHeader={() => 'Wants Planning?'}>
-            {radioYesNo.map(i => (
-              <RadioItem key={i.value} name='planning' checked={planning === i.value} onChange={() => setPlanning(i.value)}>
+          <List renderHeader={() => "Wants Planning?"}>
+            {radioYesNo.map((i) => (
+              <RadioItem
+                data-testid={`planning-${i.label}`}
+                key={i.value}
+                name="planning"
+                checked={planning === i.value}
+                onClick={() => setPlanning(i.value)}
+              >
                 {i.label}
               </RadioItem>
             ))}
           </List>
         </div>
-        : null
-      }
+      ) : null}
 
       <WhiteSpace />
 
-      <InputItem
-        type="number"
-        placeholder="Weight"
-        id='weight'
-      >Weight (kg)</InputItem>
+      <InputItem type="number" placeholder="Weight" id="weight">
+        Weight (kg)
+      </InputItem>
 
-      <InputItem
-        type="number"
-        placeholder="Height"
-        id='height'
-      >Height (cm)</InputItem>
+      <InputItem type="number" placeholder="Height" id="height">
+        Height (cm)
+      </InputItem>
 
-      <InputItem
-        type="number"
-        placeholder="Blood Pressure"
-        id='bp'
-      >BP</InputItem>
+      <InputItem type="number" placeholder="Blood Pressure" id="bp">
+        BP
+      </InputItem>
 
-      <InputItem
-        type="number"
-        placeholder="Temp"
-        id='temp'
-      >Temp (F)</InputItem>
+      <InputItem type="number" placeholder="Temp" id="temp">
+        Temp (F)
+      </InputItem>
 
-      <InputItem
-        type="number"
-        placeholder="Pulse"
-        id='pulse'
-      >Pulse</InputItem>
+      <InputItem type="number" placeholder="Pulse" id="pulse">
+        Pulse
+      </InputItem>
 
-      <InputItem
-        type="number"
-        placeholder="Z-Score"
-        id='z-score'
-      >Z-Score</InputItem>
+      <InputItem type="number" placeholder="Z-Score" id="z-score">
+        Z-Score
+      </InputItem>
 
-      <List renderHeader={() => 'Albendazole?'}>
-        {radioYesNo.map(i => (
-          <RadioItem key={i.value} checked={albendazole === i.value} onChange={() => setAlbendazole(i.value)}>
+      <List renderHeader={() => "Albendazole?"}>
+        {radioYesNo.map((i) => (
+          <RadioItem
+            data-testid={`albendazole-${i.label}`}
+            key={i.value}
+            checked={albendazole === i.value}
+            onClick={() => setAlbendazole(i.value)}
+          >
             {i.label}
           </RadioItem>
         ))}
       </List>
 
-      <List renderHeader={() => 'Alergies'}>
-        <TextareaItem
-          autoHeight
-          id='alergies'
-        />
+      <List renderHeader={() => "Alergies"}>
+        <TextareaItem autoHeight id="alergies" />
       </List>
 
-      <List renderHeader={() => 'Medicines'}>
-        <TextareaItem
-          autoHeight
-          id='medicines'
-        />
+      <List renderHeader={() => "Medicines"}>
+        <TextareaItem autoHeight id="medicines" />
       </List>
 
-      <List renderHeader={() => 'Chief Complaint'}>
+      <List renderHeader={() => "Chief Complaint"}>
         <TextareaItem
           placeholder="1."
           // autoHeight
           autoHeight
-          id='complaint1'
-        />
-        <TextareaItem
-          placeholder="2."
-          autoHeight
-          id='complaint2'
-        />
-        <TextareaItem
-          placeholder="3."
-          autoHeight
-          id='complaint3'
+          id="complaint1"
         />
+        <TextareaItem placeholder="2." autoHeight id="complaint2" />
+        <TextareaItem placeholder="3." autoHeight id="complaint3" />
       </List>
 
-      <List renderHeader={() => 'History'}>
-        <TextareaItem
-          autoHeight
-          id='history'
-        />
+      <List renderHeader={() => "History"}>
+        <TextareaItem autoHeight id="history" />
       </List>
 
-      <List renderHeader={() => 'Exam'}>
-        <TextareaItem
-          autoHeight
-          id='exam'
-        />
+      <List renderHeader={() => "Exam"}>
+        <TextareaItem autoHeight id="exam" />
       </List>
 
       <WhiteSpace />
 
-      <Button onClick={onSubmit} >Submit</Button>
-
+      <Button onClick={onSubmit}>Submit</Button>
     </div>
-  )
+  );
 }