Add Hepatitis-C support to test card (#8226)

* Update constants and hooks for hep C

* Add Hepatitis-C AOE constants

* Add Hepatitis-C AOE form

* Fix padding on checkboxes

* Use auto col width for Hep C and syphilis AOE forms

* Update snapshots for checkboxes

* Update test for hep c

* Add AOE utils test for hep c

* Update hep c mock tests

* Update spacing on COVID AOE form

frontend/src/app/commonComponents/Checkboxes.tsx

@@ -89,7 +89,7 @@ const Checkboxes = (props: Props) => {
   return (
     <div
       className={classnames(
-        "usa-form-group padding-0",
+        "usa-form-group",
         validationStatus === "error" && "usa-form-group--error"
       )}
     >

frontend/src/app/commonComponents/__snapshots__/Checkboxes.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Checkboxes renders correctly 1`] = `
 <div>
   <div
-    class="usa-form-group padding-0"
+    class="usa-form-group"
   >
     <fieldset
       class="usa-fieldset prime-checkboxes"

frontend/src/app/signUp/Organization/__snapshots__/UnsupportedStateModal.test.tsx.snap

@@ -63,7 +63,7 @@ Object {
                     You can join the waitlist to be notified when SimpleReport is available in your state, or if your organization is reporting to a SimpleReport state, you can continue.
                   </p>
                   <div
-                    class="usa-form-group padding-0"
+                    class="usa-form-group"
                   >
                     <fieldset
                       class="usa-fieldset prime-checkboxes"

frontend/src/app/supportAdmin/DeviceType/mocks/mockSupportedDiseaseTestPerformedHepatitisC.ts

@@ -0,0 +1,15 @@
+const mockSupportedDiseaseTestPerformedHepatitisC = [
+  {
+    supportedDisease: {
+      internalId: "82748233-1780-4303-b5fe-05c1d3f34ab7",
+      loinc: "LP14400-3",
+      name: "Hepatitis-C",
+    },
+    testPerformedLoincCode: "80389-6",
+    equipmentUid: "HepatitisCEquipmentUid123",
+    testkitNameId: "HepatitisCTestkitNameId123",
+    testOrderedLoincCode: "80389-6",
+  },
+];
+
+export default mockSupportedDiseaseTestPerformedHepatitisC;

frontend/src/app/testQueue/TestCard/TestCard.test.tsx

@@ -63,6 +63,12 @@ import {
   specimen3Name,
   specimen3Id,
   device8Id,
+  device9Name,
+  device9Id,
+  NO_SYMPTOMS_FALSE_OVERRIDE,
+  mutationResponse,
+  updateHepCAoeMocks,
+  baseStiAoeUpdateMock,
 } from "../testCardTestConstants";
 import { QueriedFacility } from "../TestCardForm/types";
 import mockSupportedDiseaseMultiplex, {
@@ -71,17 +77,25 @@ import mockSupportedDiseaseMultiplex, {
 import mockSupportedDiseaseTestPerformedHIV from "../../supportAdmin/DeviceType/mocks/mockSupportedDiseaseTestPerformedHIV";
 import mockSupportedDiseaseTestPerformedSyphilis from "../../supportAdmin/DeviceType/mocks/mockSupportedDiseaseTestPerformedSyphilis";
 import { UpdateTestOrderTimerStartedAtDocument } from "../../../generated/graphql";
+import mockSupportedDiseaseTestPerformedHepatitisC from "../../supportAdmin/DeviceType/mocks/mockSupportedDiseaseTestPerformedHepatitisC";
 
 import { TestCard, TestCardProps } from "./TestCard";
 
 jest.mock("../../TelemetryService", () => ({
   getAppInsights: jest.fn(),
 }));
 
-const mockDiseaseEnabledFlag = (diseaseName: string) =>
+const mockDiseaseEnabledFlag = (
+  diseaseName: string,
+  skipLowercase: boolean = false
+) =>
   jest
     .spyOn(flaggedMock, "useFeature")
     .mockImplementation((flagName: string) => {
+      // to handle casing of Hepatitis-C as hepatitisC
+      if (skipLowercase) {
+        return flagName === `${diseaseName}Enabled`;
+      }
       return flagName === `${diseaseName.toLowerCase()}Enabled`;
     });
 
@@ -255,6 +269,21 @@ const facilityInfo: QueriedFacility = {
         },
       ],
     },
+    {
+      internalId: device9Id,
+      name: device9Name,
+      testLength: 15,
+      supportedDiseaseTestPerformed: [
+        ...mockSupportedDiseaseTestPerformedHepatitisC,
+      ],
+      swabTypes: [
+        {
+          name: specimen3Name,
+          internalId: specimen3Id,
+          typeCode: "122555007",
+        },
+      ],
+    },
   ],
 };
 export const devicesMap = new Map();
@@ -1295,6 +1324,175 @@ describe("TestCard", () => {
       ).not.toBeInTheDocument();
     });
 
+    it("shows radio buttons for Hepatitis C when a hepatitis c device is chosen", async function () {
+      mockDiseaseEnabledFlag("hepatitisC", true);
+
+      const mocks = [
+        generateEditQueueMock(
+          MULTIPLEX_DISEASES.HEPATITIS_C,
+          TEST_RESULTS.POSITIVE
+        ),
+        blankUpdateAoeEventMock,
+      ];
+
+      const { user } = await renderQueueItem({ mocks });
+      expect(screen.queryByText("Hepatitis-C result")).not.toBeInTheDocument();
+
+      const deviceDropdown = await getDeviceTypeDropdown();
+
+      await user.selectOptions(deviceDropdown, device9Name);
+      expect(screen.getByText("Hepatitis-C result")).toBeInTheDocument();
+    });
+
+    it("shows required Hepatitis-C AOE questions when a positive Hepatitis-C result is present", async function () {
+      mockDiseaseEnabledFlag("hepatitisC", true);
+
+      const mocks = [
+        generateEditQueueMock(
+          MULTIPLEX_DISEASES.HEPATITIS_C,
+          TEST_RESULTS.POSITIVE
+        ),
+        blankUpdateAoeEventMock,
+        {
+          ...baseStiAoeUpdateMock({
+            ...NO_SYMPTOMS_FALSE_OVERRIDE,
+          }),
+          ...mutationResponse,
+        },
+      ];
+
+      const { user } = await renderQueueItem({ mocks });
+      const deviceDropdown = await getDeviceTypeDropdown();
+      expect(deviceDropdown.options.length).toEqual(
+        DEFAULT_DEVICE_OPTIONS_LENGTH + 1
+      );
+
+      await user.selectOptions(deviceDropdown, device9Name);
+      expect(screen.getByText("Hepatitis-C result")).toBeInTheDocument();
+
+      await user.click(
+        screen.getByLabelText("Positive", {
+          exact: false,
+        })
+      );
+
+      expect(screen.getByText("Is the patient pregnant?")).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          "Is the patient currently experiencing or showing signs of symptoms?"
+        )
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText("What is the gender of their sexual partners?")
+      ).toBeInTheDocument();
+
+      const symptomFieldSet = screen.getByTestId(
+        `has-any-symptoms-${sharedTestOrderInfo.internalId}`
+      );
+      await user.click(within(symptomFieldSet).getByLabelText("Yes"));
+
+      expect(
+        screen.getByText("Select any symptoms the patient is experiencing")
+      ).toBeInTheDocument();
+    });
+
+    it("hides AOE questions when there is no positive Hepatitis-C result", async function () {
+      mockDiseaseEnabledFlag("hepatitisC", true);
+
+      const mocks = [
+        generateEditQueueMock(
+          MULTIPLEX_DISEASES.HEPATITIS_C,
+          TEST_RESULTS.POSITIVE
+        ),
+        blankUpdateAoeEventMock,
+      ];
+
+      const { user } = await renderQueueItem({ mocks });
+      const deviceDropdown = await getDeviceTypeDropdown();
+
+      await user.selectOptions(deviceDropdown, device9Name);
+      expect(screen.getByText("Hepatitis-C result")).toBeInTheDocument();
+      expect(
+        screen.queryByText("Is the patient pregnant?")
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByText(
+          "Is the patient currently experiencing or showing signs of symptoms?"
+        )
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByText("What is the gender of their sexual partners?")
+      ).not.toBeInTheDocument();
+
+      await user.click(
+        screen.getByLabelText("Inconclusive", {
+          exact: false,
+        })
+      );
+      expect(
+        screen.queryByText("Is the patient pregnant?")
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByText(
+          "Is the patient currently experiencing or showing signs of symptoms?"
+        )
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByText("What is the gender of their sexual partners?")
+      ).not.toBeInTheDocument();
+    });
+
+    it("checks that Hep C submission only works if AOE questions are valid", async function () {
+      mockDiseaseEnabledFlag("hepatitisC", true);
+
+      const { user } = await renderQueueItem({ mocks: updateHepCAoeMocks });
+      const deviceDropdown = await getDeviceTypeDropdown();
+
+      await user.selectOptions(deviceDropdown, device9Name);
+      await user.click(
+        screen.getByLabelText("Positive", {
+          exact: false,
+        })
+      );
+      await user.click(
+        screen.getByText("Submit results", {
+          exact: false,
+        })
+      );
+      const AOE_ERROR_TEXT = "Please answer this required question.";
+
+      const requiredQuestions = screen.getAllByText(AOE_ERROR_TEXT);
+      expect(requiredQuestions.length).toEqual(
+        REQUIRED_AOE_QUESTIONS_BY_DISEASE.HEPATITIS_C.length
+      );
+
+      const pregnancyFieldSet = screen.getByTestId(
+        `pregnancy-${sharedTestOrderInfo.internalId}`
+      );
+      await user.click(within(pregnancyFieldSet).getByLabelText("Yes"));
+
+      const symptomFieldSet = screen.getByTestId(
+        `has-any-symptoms-${sharedTestOrderInfo.internalId}`
+      );
+      await user.click(within(symptomFieldSet).getByLabelText("No"));
+
+      const genderSexualPartnersFieldSet = screen.getByTestId(
+        `multi-select-option-list`
+      );
+      await user.click(
+        within(genderSexualPartnersFieldSet).getByTestId(
+          "multi-select-option-female"
+        )
+      );
+
+      await user.click(
+        screen.getByText("Submit results", {
+          exact: false,
+        })
+      );
+      expect(screen.queryByText(AOE_ERROR_TEXT)).not.toBeInTheDocument();
+    });
+
     it("checks that submission only works if AOE questions are valid", async function () {
       mockDiseaseEnabledFlag("Syphilis");
 

frontend/src/app/testQueue/TestCardForm/TestCardForm.test.tsx

@@ -12,6 +12,8 @@ import {
   fluDeviceId,
   fluDeviceName,
   generateSubmitQueueMock,
+  hepatitisCDeviceId,
+  hepatitisCDeviceName,
   hivDeviceId,
   hivDeviceName,
   multiplexDeviceId,
@@ -183,6 +185,26 @@ describe("TestCardForm", () => {
 
       expect(await renderTestCardForm({ props })).toMatchSnapshot();
     });
+
+    it("matches snapshot for hepatitis c device", async () => {
+      const props = {
+        ...testProps,
+        testOrder: {
+          ...testProps.testOrder,
+          results: [
+            { testResult: "POSITIVE", disease: { name: "HEPATITIS-C" } },
+          ],
+          deviceType: {
+            internalId: hepatitisCDeviceId,
+            name: hepatitisCDeviceName,
+            model: hepatitisCDeviceName,
+            testLength: 15,
+          },
+        },
+      };
+
+      expect(await renderTestCardForm({ props })).toMatchSnapshot();
+    });
   });
 
   describe("error handling", () => {

frontend/src/app/testQueue/TestCardForm/TestCardForm.tsx

@@ -58,6 +58,7 @@ import { HIVAoEForm } from "./diseaseSpecificComponents/HIVAoEForm";
 import { stringifySymptomJsonForAoeUpdate } from "./diseaseSpecificComponents/aoeUtils";
 import { SyphilisAoEForm } from "./diseaseSpecificComponents/SyphilisAoEForm";
 import { WhereResultsAreSentModal } from "./WhereResultsAreSentModal";
+import { HepatitisCAoeForm } from "./diseaseSpecificComponents/HepatitisCAoeForm";
 
 const DEBOUNCE_TIME = 300;
 
@@ -603,6 +604,21 @@ const TestCardForm = ({
             />
           </div>
         )}
+        {whichAoeFormOption === AOEFormOption.HEPATITIS_C && (
+          <div className="grid-row grid-gap">
+            <HepatitisCAoeForm
+              testOrder={testOrder}
+              responses={state.aoeResponses}
+              hasAttemptedSubmit={hasAttemptedSubmit}
+              onResponseChange={(responses) => {
+                dispatch({
+                  type: TestFormActionCase.UPDATE_AOE_RESPONSES,
+                  payload: responses,
+                });
+              }}
+            />
+          </div>
+        )}
         <div className="grid-row margin-top-4">
           <div className="grid-col-auto">
             <Button onClick={() => submitForm()} type={"button"}>