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(); - const { getByText } = render(); +test("female-only div is only displayed if the sex is selected as female", async () => { + const femaleOnlyFormFields = ["Pregnant?", "LMP", "Wants Planning?"]; + + const dom = render(); // 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(); + 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(); + 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(); + 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(); + 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(); - 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 ( -
+
- 'Sex'}> - {sexValues.map(i => ( - setSex(i.value)}> + "Sex"}> + {sexValues.map((i) => ( + setSex(i.value)} + > {i.label} ))} @@ -87,176 +120,147 @@ export default function Form(): ReactElement { {/* TODO: figure out how to access this value */} - Age + + Age{" "} + - Phone + + Phone + - + - 'Visit?'}> - {radioYesNo.map(i => ( - setVisit(i.value)}> + "Visit?"}> + {radioYesNo.map((i) => ( + setVisit(i.value)} + > {i.label} ))} {/* Only display the 'female-only' div if the patient is female */} - {sex ? -
+ {sex ? ( +
- 'Pregnant?'}> - {radioYesNo.map(i => ( - setPregnant(i.value)}> + "Pregnant?"}> + {radioYesNo.map((i) => ( + setPregnant(i.value)} + > {i.label} ))} - G + + G + - P + + P + - A + + A + - + - 'Wants Planning?'}> - {radioYesNo.map(i => ( - setPlanning(i.value)}> + "Wants Planning?"}> + {radioYesNo.map((i) => ( + setPlanning(i.value)} + > {i.label} ))}
- : null - } + ) : null} - Weight (kg) + + Weight (kg) + - Height (cm) + + Height (cm) + - BP + + BP + - Temp (F) + + Temp (F) + - Pulse + + Pulse + - Z-Score + + Z-Score + - 'Albendazole?'}> - {radioYesNo.map(i => ( - setAlbendazole(i.value)}> + "Albendazole?"}> + {radioYesNo.map((i) => ( + setAlbendazole(i.value)} + > {i.label} ))} - 'Alergies'}> - + "Alergies"}> + - 'Medicines'}> - + "Medicines"}> + - 'Chief Complaint'}> + "Chief Complaint"}> - - + + - 'History'}> - + "History"}> + - 'Exam'}> - + "Exam"}> + - - +
- ) + ); }