Use data-cy attribute for add patient spec

cypress/.eslintrc.json

@@ -1,4 +1,7 @@
 {
   "plugins": ["cypress"],
-  "extends": ["plugin:cypress/recommended"]
+  "extends": ["plugin:cypress/recommended"],
+  "rules": {
+    "cypress/require-data-selectors": "warn"
+  }
 }

cypress/e2e/02-add_patient.cy.js

@@ -26,59 +26,50 @@ describe("Adding a single patient", () => {
         setupRunData(currentSpecRunVersionName);
       })
   });
-  it("navigates to the add patient form", () => {
-    cy.visit("/");
-    cy.get(".usa-nav-container");
-    cy.get("#desktop-patient-nav-link").click();
-    cy.get(".prime-container");
-    cy.get("#add-patient").click();
-    cy.get("#individual_add-patient").click();
-    cy.get(".prime-edit-patient").contains("Add new patient");
+  it("navigates to and fills out add patient form", () => {
+    cy.visit('/');
+    cy.get('[data-cy="desktop-patient-nav-link"]').click();
+    cy.get('[data-cy="add-patients-button"]').click();
+    cy.get('[data-cy="individual"]').click();
+    cy.get('[data-cy="add-patient-header"]').contains("Add new patient");
     cy.injectSRAxe();
-    cy.checkAccessibility(); // Patient form
-  });
-  it("fills out some of the form fields", () => {
-    cy.get('input[name="firstName"]').type(patient.firstName);
-    cy.get('input[name="birthDate"]').type(patient.dobForInput);
-    cy.get('input[name="number"]').type(patient.phone);
-    cy.get('input[value="MOBILE"]+label').click();
-    cy.get('input[name="gender"][value="female"]+label').click();
-    cy.get('input[name="genderIdentity"][value="female"]+label').click();
-    cy.get('input[name="street"]').type(patient.address);
-    cy.get('select[name="state"]').select(patient.state);
-    cy.get('input[name="zipCode"]').type(patient.zip);
-    cy.get('select[name="role"]').select("STUDENT");
-    cy.get(".prime-edit-patient").contains("Student ID");
-    cy.get('input[name="lookupId"]').type(patient.studentId);
-    cy.get('input[name="race"][value="other"]+label').click();
-    cy.get('input[name="ethnicity"][value="refused"]+label').click();
-    cy.get('input[name="residentCongregateSetting"][value="NO"]+label').click();
-    cy.get('input[name="employedInHealthcare"][value="NO"]+label').click();
-  });
-  it("shows what fields are missing on submit", () => {
-    cy.get(".prime-save-patient-changes").first().click();
-
-    cy.get(".prime-edit-patient").contains("Last name is missing");
-    cy.get(".prime-edit-patient").contains("Testing facility is missing");
-    cy.get(".prime-edit-patient").contains("City is missing");
-  });
-  it("fills out the remaining fields, submits and checks for the patient", () => {
-    cy.get('input[name="lastName"]').type(patient.lastName);
-    cy.get('input[name="city"]').type(patient.city);
-    cy.get('select[name="facilityId"]').select("All facilities");
-    cy.get(".prime-save-patient-changes").first().click();
-    cy.get(
-      '.modal__container input[name="addressSelect-person"][value="userAddress"]+label',
-    ).click();
-
-    cy.checkAccessibility();
-
-    cy.get(".modal__container #save-confirmed-address").click();
-    cy.get(".usa-card__header").contains("Patients");
-    cy.get(".usa-card__header").contains("Showing");
-    cy.get("#search-field-small").type(patient.lastName);
-    cy.get(".prime-container").contains(patient.fullName);
-
-    cy.checkAccessibility();
+    cy.checkAccessibility(); // empty patient form
+    // fill out form
+    cy.get('[data-cy="personForm-firstName-input"]').type(patient.firstName);
+    cy.get('[data-cy="personForm-dob-input"]').type(patient.dobForInput);
+    cy.get('[data-cy="phone-input-0"]').type(patient.phone);
+    cy.get('[data-cy="radio-group-option-phoneType-0-MOBILE"]').click();
+    cy.get('[data-cy="radio-group-option-genderIdentity-female"]').click();
+    cy.get('[data-cy="radio-group-option-gender-female"]').click();
+    cy.get('[data-cy="street-input"]').type(patient.address);
+    cy.get('[data-cy="state-input"]').select(patient.state);
+    cy.get('[data-cy="zip-input"]').type(patient.zip);
+    cy.get('[data-cy="personForm-role-input"]').select("STUDENT");
+    cy.get('[data-cy="add-patient-page"]').contains("Student ID");
+    cy.get('[data-cy="personForm-lookupId-input"]').type(patient.studentId);
+    cy.get('[data-cy="radio-group-option-race-other"]').click();
+    cy.get('[data-cy="radio-group-option-ethnicity-refused"]').click();
+    cy.get('[data-cy="radio-group-option-residentCongregateSetting-NO"]').click();
+    cy.get('[data-cy="radio-group-option-employedInHealthcare-NO"]').click();
+    cy.get('[data-cy="add-patient-save-button"]').eq(0).click();
+    // check for errors
+    cy.get('[data-cy="add-patient-page"]').contains("Last name is missing");
+    cy.get('[data-cy="add-patient-page"]').contains("Testing facility is missing");
+    cy.get('[data-cy="add-patient-page"]').contains("City is missing");
+    cy.checkAccessibility(); // patient form with errors
+    // fill out remaining form
+    cy.get('[data-cy="personForm-lastName-input"]').type(patient.lastName);
+    cy.get('[data-cy="city-input"]').type(patient.city);
+    cy.get('[data-cy="personForm-facility-input"]').select("All facilities");
+    cy.get('[data-cy="add-patient-save-button"]').eq(0).click();
+    cy.get('[data-cy="radio-group-option-addressSelect-person-userAddress"]').click();
+    cy.checkAccessibility(); // address validation modal
+    cy.get('[data-cy="save-address-confirmation-button"]').click();
+    // check for newly created patient on Manage Patients page
+    cy.get('[data-cy="manage-patients-header"]').contains("Patients");
+    cy.get('[data-cy="manage-patients-header"]').contains("Showing");
+    cy.get('[data-cy="manage-patients-search-input"]').type(patient.lastName);
+    cy.get('[data-cy="manage-patients-page"]').contains(patient.fullName);
+    cy.checkAccessibility(); // manage patients page
   });
 });

cypress/e2e/10-save_and_start_covid_test.cy.js

@@ -28,13 +28,12 @@ describe("Save and start covid test", () => {
   context("edit patient and save and start test", () => {
     it("searches for the patient", () => {
       cy.visit("/");
-      cy.get(".usa-nav-container");
-      cy.get("#desktop-patient-nav-link").click();
-      cy.get(".sr-patient-list").should("exist");
-      cy.get(".sr-patient-list").contains("Loading...").should("not.exist");
-      cy.get("#search-field-small").type(lastName);
+      cy.get('[data-cy="desktop-patient-nav-link"]').click();
+      cy.get('[data-cy="manage-patients-header"]').contains("Patients");
+      cy.get('[data-cy="manage-patients-header"]').contains("Showing");
+      cy.get('[data-cy="manage-patients-search-input"]').type(lastName);
       cy.wait("@GetPatientsByFacility");
-      cy.get(".sr-patient-list").contains(patientName).should("exist");
+      cy.get('[data-cy="manage-patients-page"]').contains(patientName);
     });
 
     it("edits the found patient and clicks save and start test ", () => {

cypress/support/e2e.js

@@ -31,8 +31,8 @@ const getDobFormat = () => {
 // Generate a random patient
 export const generatePatient = () => {
   const patient = {};
-  patient.firstName = faker.name.firstName();
-  patient.lastName = faker.name.lastName();
+  patient.firstName = faker.person.firstName();
+  patient.lastName = faker.person.lastName();
   patient.fullName = `${patient.lastName}, ${patient.firstName}`;
   patient.dob = dayjs(
     faker.date.between({ from: "1920-01-01", to: "2002-12-31" }),
@@ -44,7 +44,7 @@ export const generatePatient = () => {
   patient.city = "Definitely not Washington";
   patient.state = "DC";
   patient.zip = "20503";
-  patient.studentId = faker.datatype.uuid();
+  patient.studentId = faker.string.uuid();
   return patient;
 };
 

frontend/src/app/commonComponents/AddressConfirmationModal.tsx

@@ -222,6 +222,7 @@ export const AddressConfirmationModal = <T extends string>({
             disabled={addressSuggestionConfig.some(
               ({ key }) => !selectedAddress[key]
             )}
+            dataCy="save-address-confirmation-button"
           >
             {t("address.save")}
           </Button>

frontend/src/app/commonComponents/Button/Button.tsx

@@ -25,6 +25,7 @@ interface Props {
   ariaHidden?: boolean;
   ariaLabel?: string;
   ref?: React.RefObject<HTMLButtonElement> | null;
+  dataCy?: string;
 }
 
 const Button = ({
@@ -40,6 +41,7 @@ const Button = ({
   id,
   ariaHidden,
   ariaLabel,
+  dataCy,
 }: Props) => (
   <button
     type={type}
@@ -56,6 +58,7 @@ const Button = ({
     onClick={onClick}
     aria-describedby={ariaDescribedBy || undefined}
     aria-label={ariaLabel}
+    data-cy={dataCy}
   >
     {icon && <FontAwesomeIcon icon={icon} className="margin-right-1" />}
     {label || children}

frontend/src/app/commonComponents/Dropdown.tsx

@@ -29,6 +29,7 @@ interface Props {
   validationStatus?: "error" | "success";
   selectClassName?: string;
   hintText?: string | React.ReactNode;
+  dataCy?: string;
   registrationProps?: UseFormRegisterReturn<any>;
 }
 
@@ -50,6 +51,7 @@ const Dropdown: React.FC<Props & SelectProps> = ({
   errorMessage,
   selectClassName,
   hintText,
+  dataCy,
   registrationProps,
   ...inputProps
 }) => {
@@ -98,6 +100,7 @@ const Dropdown: React.FC<Props & SelectProps> = ({
             onChange={onChange}
             value={selectedValue || defaultOption || ""}
             disabled={disabled}
+            data-cy={dataCy}
             {...inputProps}
             {...(validationStatus === "error"
               ? { "aria-describedby": `error_${id}`, "aria-invalid": true }

frontend/src/app/commonComponents/Header.tsx

@@ -158,6 +158,7 @@ const Header: React.FC<{}> = () => {
                 onClick={() => setMenuVisible(false)}
                 className={item.className}
                 id={`${deviceType}-${item.key}`}
+                data-cy={`${deviceType}-${item.key}`}
               >
                 {item.displayText}
               </LinkWithQuery>

frontend/src/app/commonComponents/Input.tsx

@@ -18,6 +18,7 @@ interface Props<T> {
   hintText?: string;
   min?: number | string;
   max?: number | string;
+  dataCy?: string;
 }
 
 export const Input = <T extends { [key: string]: any }>({
@@ -36,6 +37,7 @@ export const Input = <T extends { [key: string]: any }>({
   hintText,
   min,
   max,
+  dataCy,
 }: Props<T>): React.ReactElement => {
   const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
     onChange(field)(e.target.value);
@@ -66,6 +68,7 @@ export const Input = <T extends { [key: string]: any }>({
       min={min}
       max={max}
       hintText={hintText}
+      dataCy={dataCy}
     />
   );
 };

frontend/src/app/commonComponents/MenuButton.tsx

@@ -35,6 +35,7 @@ export const MenuButton = (props: Props) => (
             ? `${item.name.split(" ")[0].toLowerCase()}_${props.id}`
             : undefined
         }
+        data-cy={item.name}
       >
         {item.content ?? item.name}
       </MenuItem>

frontend/src/app/commonComponents/RadioGroup.tsx

@@ -127,7 +127,7 @@ const RadioGroup = <T extends string>({
                   <label
                     className={labelClasses}
                     htmlFor={uid(c.value)}
-                    data-cy={`radio-group-option-${c.value}`}
+                    data-cy={`radio-group-option-${name}-${c.value}`}
                   >
                     {c.label}
                     {c.labelDescription && (

frontend/src/app/commonComponents/Select.tsx

@@ -24,6 +24,7 @@ interface Props<T> {
   selectClassName?: string;
   disabled?: boolean;
   className?: string;
+  dataCy?: string;
   registrationProps?: UseFormRegisterReturn<any>;
 }
 
@@ -42,6 +43,7 @@ const Select = <T extends string>({
   selectClassName,
   disabled,
   className,
+  dataCy,
   registrationProps,
 }: Props<T>): React.ReactElement => {
   const onChangeWrapper = (e: React.ChangeEvent<HTMLSelectElement>) => {
@@ -64,6 +66,7 @@ const Select = <T extends string>({
       selectClassName={selectClassName}
       disabled={disabled}
       className={className}
+      dataCy={dataCy}
       registrationProps={registrationProps}
     />
   );

frontend/src/app/commonComponents/TextInput.tsx

@@ -44,6 +44,7 @@ interface Props {
   labelClassName?: string;
   min?: number | string;
   max?: number | string;
+  dataCy?: string;
   registrationProps?: UseFormRegisterReturn<any>;
 }
 
@@ -74,6 +75,7 @@ export const TextInput = ({
   labelClassName,
   min,
   max,
+  dataCy,
   registrationProps,
   ...inputProps
 }: Props & InputProps): React.ReactElement => {
@@ -129,6 +131,7 @@ export const TextInput = ({
             ref={inputRef}
             data-format={format}
             data-format-message={formatMessage}
+            data-cy={dataCy}
             {...inputProps}
             {...(validationStatus === "error"
               ? { "aria-describedby": `error_${id}`, "aria-invalid": true }

frontend/src/app/patients/AddPatient.tsx

@@ -315,6 +315,7 @@ const AddPatient = () => {
         label={
           loading ? `${t("common.button.saving")}...` : t("common.button.save")
         }
+        dataCy={"add-patient-save-button"}
       />
     </>
   );
@@ -344,7 +345,7 @@ const AddPatient = () => {
   }
 
   return (
-    <div className={"prime-edit-patient prime-home"}>
+    <div className={"prime-edit-patient prime-home"} data-cy="add-patient-page">
       <div className={"grid-container margin-bottom-4 maxw-desktop-lg"}>
         <DuplicatePatientModal
           showModal={

frontend/src/app/patients/Components/AddPatientsHeader.tsx

@@ -14,7 +14,7 @@ interface Props {
 export const AddPatientHeader = (props: Props) => {
   return (
     <>
-      <div className="display-flex flex-justify">
+      <div className="display-flex flex-justify" data-cy="add-patient-header">
         <div>
           <div className="display-flex flex-align-center">
             <svg

frontend/src/app/patients/Components/FacilitySelect.tsx

@@ -11,6 +11,7 @@ interface Props {
   validationStatus: (name: keyof PersonFormData) => "error" | undefined;
   errors: { [key: string]: string | undefined };
   hidden?: boolean;
+  dataCy?: string;
 }
 
 const ALL_FACILITIES = "~~ALL-FACILITIES~~";
@@ -47,6 +48,7 @@ const FacilitySelect: React.FC<Props> = (props) => {
       options={facilityList}
       defaultSelect={true}
       required
+      dataCy={props.dataCy}
     />
   );
 };

frontend/src/app/patients/Components/ManagePhoneNumbers.tsx

@@ -246,6 +246,7 @@ const ManagePhoneNumbers: React.FC<Props> = ({
                 validateField(idx, "type");
               }}
               errors={errors[idx] || {}}
+              dataCy={`phone-input-${idx}`}
             />
             {!isPrimary && (
               <div className="flex-align-self-end">

frontend/src/app/patients/Components/PersonAddressField.tsx

@@ -71,6 +71,7 @@ const PersonAddressField: React.FC<PersonAddressFieldProps> = (
               field="street"
               label={t("patient.form.contact.street1")}
               required
+              dataCy={"street-input"}
             />
           </div>
           <div className="usa-form">
@@ -86,6 +87,7 @@ const PersonAddressField: React.FC<PersonAddressFieldProps> = (
               field="city"
               label={t("patient.form.contact.city")}
               required
+              dataCy={"city-input"}
             />
             {view !== PersonFormView.SELF_REGISTRATION && (
               <Input
@@ -111,6 +113,7 @@ const PersonAddressField: React.FC<PersonAddressFieldProps> = (
                     validationStatus={errors.state ? "error" : undefined}
                     errorMessage={errors.state}
                     required
+                    dataCy={"state-input"}
                   />
                 </div>
                 <div className="mobile-lg:grid-col-6">
@@ -119,6 +122,7 @@ const PersonAddressField: React.FC<PersonAddressFieldProps> = (
                     field="zipCode"
                     label={t("patient.form.contact.zip")}
                     required
+                    dataCy={"zip-input"}
                   />
                 </div>
               </div>