increased coverage

services/ui-src/src/components/fields/RadioField.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { RadioField } from "components";
 import { useFormContext } from "react-hook-form";
-import { PageElement } from "types";
+import { ElementType, PageElement } from "types";
 import { testA11y } from "utils/testing/commonTests";
 
 const mockTrigger = jest.fn();
@@ -37,6 +37,12 @@ const mockRadioElement = {
     {
       label: "Choice 2",
       value: "B",
+      checkedChildren: [
+        {
+          type: ElementType.Textbox,
+          label: "mock-text-box",
+        },
+      ],
       checked: false,
     },
     {
@@ -75,6 +81,17 @@ describe("<RadioField />", () => {
     });
   });
 
+  test("RadioField displays children fields after selection", async () => {
+    mockGetValues(undefined);
+    render(RadioFieldComponent);
+    const firstRadio = screen.getByLabelText("Choice 2") as HTMLInputElement;
+    await userEvent.click(firstRadio);
+    expect(mockSetValue).toHaveBeenCalledWith("elements.0.answer", "B", {
+      shouldValidate: true,
+    });
+    expect(screen.getByLabelText("mock-text-box")).toBeInTheDocument();
+  });
+
   testA11y(RadioFieldComponent, () => {
     mockGetValues(undefined);
   });

services/ui-src/src/components/fields/RadioField.tsx

@@ -2,34 +2,24 @@ import React, { useState, useEffect } from "react";
 import { Box } from "@chakra-ui/react";
 import { PageElementProps } from "components/report/Elements";
 import { useFormContext } from "react-hook-form";
-import { ChoiceTemplate, ElementType, RadioTemplate } from "types";
+import { ChoiceTemplate, RadioTemplate } from "types";
 import { parseCustomHtml } from "utils";
 import { ChoiceList as CmsdsChoiceList } from "@cmsgov/design-system";
-import { TextField } from "components";
+import { Page } from "components/report/Page";
 
 export const formatChoices = (choices: ChoiceTemplate[], answer?: string) => {
   return choices.map((choice) => {
-    const formatFields =
-      choice?.checkedChildren?.map((element, index) => {
-        if (element.type === ElementType.Textbox) {
-          return (
-            <Box key={element.label} sx={sx.children}>
-              <TextField
-                element={{
-                  type: ElementType.Textbox,
-                  label: element.label,
-                }}
-                formkey={`${choice.value}.${index}`}
-              ></TextField>
-            </Box>
-          );
-        }
-        return <></>;
-      }) ?? [];
+    const formatFields = choice?.checkedChildren ? (
+      <Box sx={sx.children}>
+        <Page elements={choice?.checkedChildren} />
+      </Box>
+    ) : (
+      <></>
+    );
     return {
       ...choice,
       checked: choice.value === answer,
-      checkedChildren: formatFields,
+      checkedChildren: [formatFields],
     };
   });
 };

services/ui-src/src/components/report/ReportPageWrapper.test.tsx

@@ -64,6 +64,10 @@ const testReport: Report = {
           label: "Return to Required Measures Results Dashboard",
           to: "req-measure-result",
         },
+        {
+          type: ElementType.QualityMeasureTable,
+          measureDisplay: "quality",
+        },
       ],
     },
     [MeasureTemplateName["LTSS-2"]]: {