Refactor test card (#6653)

* Use storysource addon * Initial TestQueueCard * Refactor test card and form * Use TestCard.scss * Change accordion to collapsible card * Add Covid AoE form * Update symptoms and save form edits * Add submit and validation * Update card styling * Revert demo changes to single card * Add test date and time validation style * Update test result radio group style * Update card styling, add submit loader, correction alert * Update timer styling * Fix lint warnings in timer * Revert timer and close button style change * Fix error summary display logic * Add unordered list for error summary * Add submit modal * Update CovidAoEForm and check if completed * Add testCardRefactorEnabled feature flag * Start test without AOE modal * Revert explicit null aoe fields * Organize disease specific components * Remove from queue and fix adding from manage patients * Fix active patient added again after submit * Save AOE responses * Reposition close button * Update test timer design * Cleanup and refactor * Fix dirty state update and test results comparison * Update validation messages * Update tests with timer changes * Move files and use feature flag on submit loader * Add required asterisks * Prevent patient re-add after page refresh * Fix fade out transition on test card * Check for active mutations before updates from backend * Remove useMemo on options hooks with complex object dependencies * WIP test card frontend tests * Scroll to active patient and update test * Update test snapshots for new timer * Update test for handling deleted device * Revert "Use storysource addon" This reverts commit 6883490. * Fix eslint import order * fix snap * fixed frontend test and fixed crash when sysmptomOnSet date was set * update snapshots * fix linting * address sonar feedback * follow up fix * add MultiplexResultInputGroup tests * add CovidResultInputGroup tests * clean console.log * refactor all userEvents to use the user.setup object in testcard.test.tsx * added more test coverage * Hide AOE for flu only devices * disable new test card in e2e and improve testing * turn off new test card in stg demo training and e2e * more direct ignore coverage * update snapshot * add more coverage and fix error message logic * add more test coverage * update snaps * Revert storybook react-docgen config * Cleanup comments and unused variables * Move modals to individual files * Use covid AOE for devices w/o disease info * Fix AOE symptoms boolean quote bug * Fix track AOE test and snapshots * Fix check if AOE answers completed * Update snapshot * Update test to use async find instead of get * Enable test card refactor in training * set fixed date for now on test-queue test * Reset startTestPatientId in error catch * Update accessibility attributes * Filter rsv devices on test card * Update snapshots --------- Co-authored-by: Zedd Shmais <[email protected]>
CDCgov · Oct 23, 2023 · 9275f36 · 9275f36
1 parent 5140abc
commit 9275f36
Show file tree

Hide file tree

Showing 50 changed files with 12,299 additions and 140 deletions.
diff --git a/backend/src/main/resources/application-azure-demo.yaml b/backend/src/main/resources/application-azure-demo.yaml
@@ -12,3 +12,5 @@ simple-report:
       - https://demo.simplereport.gov
 twilio:
   enabled: false
+features:
+  testCardRefactorEnabled: false
diff --git a/backend/src/main/resources/application-azure-stg.yaml b/backend/src/main/resources/application-azure-stg.yaml
@@ -15,3 +15,5 @@ simple-report:
       - https://stg.simplereport.gov
   experian:
     enabled: true
+features:
+  testCardRefactorEnabled: false
diff --git a/backend/src/main/resources/application-azure-training.yaml b/backend/src/main/resources/application-azure-training.yaml
@@ -12,3 +12,5 @@ simple-report:
       - https://training.simplereport.gov
 twilio:
   enabled: false
+features:
+  testCardRefactorEnabled: true
diff --git a/backend/src/main/resources/application-e2e.yaml b/backend/src/main/resources/application-e2e.yaml
@@ -131,4 +131,6 @@ simple-report-initialization:
           test-ordered-loinc-code: "94558-4"
 datahub:
   url: "http://invalidhost:8080"
-  api-key: "placeholder"
+  api-key: "placeholder"
+features:
+  testCardRefactorEnabled: false
diff --git a/frontend/.storybook/main.js b/frontend/.storybook/main.js
@@ -1,4 +1,3 @@
-const { resolve } = require("path");
 module.exports = {
   stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [

diff --git a/frontend/package.json b/frontend/package.json
@@ -250,7 +250,9 @@
     "coveragePathIgnorePatterns": [
       "<rootDir>/src/index.tsx",
       "<rootDir>/src/serviceWorker.ts",
-      ".stories.tsx"
+      ".stories.tsx",
+      "<rootDir>/src/app/testQueue/constants.ts",
+      "<rootDir>/src/patientApp/timeOfTest/constants.ts"
     ]
   }
 }
diff --git a/frontend/src/app/commonComponents/TextInput.tsx b/frontend/src/app/commonComponents/TextInput.tsx
@@ -96,6 +96,7 @@ export const TextInput = ({
               labelClassName
             )}
             htmlFor={id}
+            id={`label-for-${id}`}
             aria-describedby={ariaDescribedBy}
           >
             {required ? <Required label={label} /> : <Optional label={label} />}
@@ -112,7 +113,6 @@ export const TextInput = ({
               "usa-input",
               validationStatus === "error" && "usa-input--error"
             )}
-            id={id}
             data-testid={idString}
             name={name}
             value={value || ""}
@@ -135,6 +135,7 @@ export const TextInput = ({
               ? { "aria-describedby": `error_${id}`, "aria-invalid": true }
               : null)}
             {...registrationProps}
+            id={id}
           />
         </div>
       )}

diff --git a/frontend/src/app/commonComponents/YesNoRadioGroup.test.tsx b/frontend/src/app/commonComponents/YesNoRadioGroup.test.tsx
@@ -1,12 +1,9 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import YesNoRadioGroup, {
-  boolToYesNoUnknown,
-  yesNoUnknownToBool,
-} from "./YesNoRadioGroup";
+import YesNoRadioGroup, { boolToYesNo, yesNoToBool } from "./YesNoRadioGroup";
 
-describe("Yes/No/Unknown RadioGroup", () => {
+describe("Yes/No RadioGroup", () => {
   const onChangeFn = jest.fn(() => {});
   const onBlurFn = jest.fn(() => {});
 
@@ -41,8 +38,6 @@ describe("Yes/No/Unknown RadioGroup", () => {
     expect(onChangeFn).toHaveBeenCalledWith("YES");
     await userEvent.click(screen.getByLabelText("No"));
     expect(onChangeFn).toHaveBeenCalledWith("NO");
-    await userEvent.click(screen.getByLabelText("Unknown"));
-    expect(onChangeFn).toHaveBeenCalledWith("UNKNOWN");
   });
 
   it("calls function on blur", async () => {
@@ -53,19 +48,18 @@ describe("Yes/No/Unknown RadioGroup", () => {
     expect(onBlurFn).toHaveBeenCalled();
   });
 
-  describe("Yes/No/Unknown utility methods", () => {
+  describe("Yes/No utility methods", () => {
     it("converts value to bool", () => {
-      expect(yesNoUnknownToBool("YES")).toBeTruthy();
-      expect(yesNoUnknownToBool("NO")).toBeFalsy();
-      expect(yesNoUnknownToBool("UNKNOWN")).toBeNull();
+      expect(yesNoToBool("YES")).toBeTruthy();
+      expect(yesNoToBool("NO")).toBeFalsy();
       // @ts-ignore
-      expect(yesNoUnknownToBool(undefined)).toBeUndefined();
+      expect(yesNoToBool(undefined)).toBeUndefined();
     });
     it("converts bool to value", () => {
-      expect(boolToYesNoUnknown(true)).toBe("YES");
-      expect(boolToYesNoUnknown(false)).toBe("NO");
-      expect(boolToYesNoUnknown(null)).toBe("UNKNOWN");
-      expect(boolToYesNoUnknown(undefined)).toBeUndefined();
+      expect(boolToYesNo(true)).toBe("YES");
+      expect(boolToYesNo(false)).toBe("NO");
+      expect(boolToYesNo(null)).toBeUndefined();
+      expect(boolToYesNo(undefined)).toBeUndefined();
     });
   });
 });
diff --git a/frontend/src/app/commonComponents/YesNoRadioGroup.tsx b/frontend/src/app/commonComponents/YesNoRadioGroup.tsx
@@ -4,41 +4,33 @@ import { useTranslatedConstants } from "../constants";
 
 import RadioGroup from "./RadioGroup";
 
-export const boolToYesNoUnknown = (
+export const boolToYesNo = (
   value: boolean | null | undefined
-): YesNoUnknown | undefined => {
+): YesNo | undefined => {
   if (value) {
     return "YES";
   }
   if (value === false) {
     return "NO";
   }
-  if (value === null) {
-    return "UNKNOWN";
-  }
   return undefined;
 };
 
-export const yesNoUnknownToBool = (
-  value: YesNoUnknown
-): boolean | null | undefined => {
+export const yesNoToBool = (value: YesNo): boolean | undefined => {
   if (value === "YES") {
     return true;
   }
   if (value === "NO") {
     return false;
   }
-  if (value === "UNKNOWN") {
-    return null;
-  }
   return undefined;
 };
 
 interface Props {
   name: string;
   legend: React.ReactNode;
-  value: YesNoUnknown | undefined;
-  onChange: (value: YesNoUnknown) => void;
+  value: YesNo | undefined;
+  onChange: (value: YesNo) => void;
   hintText?: string;
   onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
   validationStatus?: "error" | "success";
@@ -57,7 +49,7 @@ const YesNoRadioGroup: React.FC<Props> = ({
   errorMessage,
   required,
 }) => {
-  const { YES_NO_UNKNOWN_VALUES: values } = useTranslatedConstants();
+  const { YES_NO_VALUES: values } = useTranslatedConstants();
 
   return (
     <RadioGroup

diff --git a/frontend/src/app/patients/__snapshots__/EditPatient.test.tsx.snap b/frontend/src/app/patients/__snapshots__/EditPatient.test.tsx.snap
@@ -103,6 +103,7 @@ exports[`EditPatient facility select input matches screenshot 1`] = `
                   <label
                     class="usa-label"
                     for="103"
+                    id="label-for-103"
                   >
                     First name
                     <abbr
@@ -129,6 +130,7 @@ exports[`EditPatient facility select input matches screenshot 1`] = `
                   <label
                     class="usa-label"
                     for="104"
+                    id="label-for-104"
                   >
                     Middle name
                   </label>
@@ -148,6 +150,7 @@ exports[`EditPatient facility select input matches screenshot 1`] = `
                   <label
                     class="usa-label"
                     for="105"
+                    id="label-for-105"
                   >
                     Last name
                     <abbr
@@ -1922,6 +1925,7 @@ exports[`EditPatient facility select input matches screenshot 1`] = `
                   <label
                     class="usa-label"
                     for="108"
+                    id="label-for-108"
                   >
                     Date of birth (mm/dd/yyyy)
                     <abbr
@@ -2000,6 +2004,7 @@ exports[`EditPatient facility select input matches screenshot 1`] = `
                         <label
                           class="usa-label"
                           for="109"
+                          id="label-for-109"
                         >
                           Primary phone number
                           <abbr
@@ -2191,6 +2196,7 @@ exports[`EditPatient facility select input matches screenshot 1`] = `
                         <label
                           class="usa-label"
                           for="112"
+                          id="label-for-112"
                         >
                           Email address
                         </label>
@@ -3920,6 +3926,7 @@ exports[`EditPatient facility select input matches screenshot 1`] = `
                     <label
                       class="usa-label"
                       for="115"
+                      id="label-for-115"
                     >
                       Street address 1
                       <abbr
@@ -3949,6 +3956,7 @@ exports[`EditPatient facility select input matches screenshot 1`] = `
                     <label
                       class="usa-label"
                       for="116"
+                      id="label-for-116"
                     >
                       Street address 2
                     </label>
@@ -3971,6 +3979,7 @@ exports[`EditPatient facility select input matches screenshot 1`] = `
                     <label
                       class="usa-label"
                       for="117"
+                      id="label-for-117"
                     >
                       City
                       <abbr
@@ -3996,6 +4005,7 @@ exports[`EditPatient facility select input matches screenshot 1`] = `
                     <label
                       class="usa-label"
                       for="118"
+                      id="label-for-118"
                     >
                       County
                     </label>

diff --git a/frontend/src/app/supportAdmin/DeviceType/__snapshots__/DeviceForm.test.tsx.snap b/frontend/src/app/supportAdmin/DeviceType/__snapshots__/DeviceForm.test.tsx.snap
@@ -293,6 +293,7 @@ exports[`update existing devices renders the Device Form 1`] = `
                   <label
                     class="usa-label"
                     for="41"
+                    id="label-for-41"
                   >
                     Device Name
                     <abbr
@@ -328,6 +329,7 @@ exports[`update existing devices renders the Device Form 1`] = `
                   <label
                     class="usa-label"
                     for="42"
+                    id="label-for-42"
                   >
                     Model
                     <abbr
@@ -363,6 +365,7 @@ exports[`update existing devices renders the Device Form 1`] = `
                   <label
                     class="usa-label"
                     for="43"
+                    id="label-for-43"
                   >
                     Manufacturer
                     <abbr
@@ -398,6 +401,7 @@ exports[`update existing devices renders the Device Form 1`] = `
                   <label
                     class="usa-label"
                     for="44"
+                    id="label-for-44"
                   >
                     Test length (minutes)
                     <abbr
@@ -617,6 +621,7 @@ exports[`update existing devices renders the Device Form 1`] = `
                         <label
                           class="usa-label"
                           for="47"
+                          id="label-for-47"
                         >
                           Test performed code
                           <abbr
@@ -648,6 +653,7 @@ exports[`update existing devices renders the Device Form 1`] = `
                         <label
                           class="usa-label"
                           for="48"
+                          id="label-for-48"
                         >
                           Test ordered code
                           <abbr
@@ -679,6 +685,7 @@ exports[`update existing devices renders the Device Form 1`] = `
                         <label
                           class="usa-label"
                           for="49"
+                          id="label-for-49"
                         >
                           Testkit Name Id
                         </label>
@@ -703,6 +710,7 @@ exports[`update existing devices renders the Device Form 1`] = `
                         <label
                           class="usa-label"
                           for="50"
+                          id="label-for-50"
                         >
                           Equipment Uid
                         </label>

diff --git a/frontend/src/app/supportAdmin/DeviceType/__snapshots__/DeviceTypeFormContainer.test.tsx.snap b/frontend/src/app/supportAdmin/DeviceType/__snapshots__/DeviceTypeFormContainer.test.tsx.snap
@@ -92,6 +92,7 @@ exports[`DeviceTypeFormContainer should render the device type form 1`] = `
                   <label
                     class="usa-label"
                     for="1"
+                    id="label-for-1"
                   >
                     Device Name
                     <abbr
@@ -126,6 +127,7 @@ exports[`DeviceTypeFormContainer should render the device type form 1`] = `
                   <label
                     class="usa-label"
                     for="2"
+                    id="label-for-2"
                   >
                     Model
                     <abbr
@@ -160,6 +162,7 @@ exports[`DeviceTypeFormContainer should render the device type form 1`] = `
                   <label
                     class="usa-label"
                     for="3"
+                    id="label-for-3"
                   >
                     Manufacturer
                     <abbr
@@ -194,6 +197,7 @@ exports[`DeviceTypeFormContainer should render the device type form 1`] = `
                   <label
                     class="usa-label"
                     for="4"
+                    id="label-for-4"
                   >
                     Test length (minutes)
                     <abbr
@@ -371,6 +375,7 @@ exports[`DeviceTypeFormContainer should render the device type form 1`] = `
                         <label
                           class="usa-label"
                           for="7"
+                          id="label-for-7"
                         >
                           Test performed code
                           <abbr
@@ -401,6 +406,7 @@ exports[`DeviceTypeFormContainer should render the device type form 1`] = `
                         <label
                           class="usa-label"
                           for="8"
+                          id="label-for-8"
                         >
                           Test ordered code
                           <abbr
@@ -431,6 +437,7 @@ exports[`DeviceTypeFormContainer should render the device type form 1`] = `
                         <label
                           class="usa-label"
                           for="9"
+                          id="label-for-9"
                         >
                           Testkit Name Id
                         </label>
@@ -454,6 +461,7 @@ exports[`DeviceTypeFormContainer should render the device type form 1`] = `
                         <label
                           class="usa-label"
                           for="10"
+                          id="label-for-10"
                         >
                           Equipment Uid
                         </label>