Merge pull request #707 from MeasureAuthoringTool/MAT-7673_UriComponent

MAT-7673 URI component

src/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/TypeEditor.test.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import TypeEditor from "./TypeEditor";
+import useFhirDefinitionsServiceApi, {
+  FhirDefinitionsServiceApi,
+} from "../../../../../../../api/useFhirDefinitionsService";
+
+jest.mock("@madie/madie-util", () => ({
+  useOktaTokens: () => ({
+    getAccessToken: () => "test.jwt",
+  }),
+}));
+
+const adverseEventStructureDefinition = {
+  id: "AdverseEvent.actuality",
+  path: "AdverseEvent.actuality",
+};
+const codingDef = {
+  path: "Coding",
+  definition: { resourceType: "StructureDefinition", id: "Coding" },
+};
+const codingTopLevelElements = [
+  {
+    id: "Coding.id",
+    path: "Coding.id",
+  },
+  {
+    id: "Coding.extension",
+    path: "Coding.extension",
+  },
+  {
+    id: "Coding.system",
+    path: "Coding.system",
+  },
+  {
+    id: "Coding.version",
+    path: "Coding.version",
+  },
+  {
+    id: "Coding.code",
+    path: "Coding.code",
+  },
+  {
+    id: "Coding.display",
+    path: "Coding.display",
+  },
+  {
+    id: "Coding.userSelected",
+    path: "Coding.userSelected",
+  },
+];
+
+jest.mock("../../../../../../../api/useFhirDefinitionsService");
+const useFhirDefinitionsServiceApiMock =
+  useFhirDefinitionsServiceApi as jest.Mock<FhirDefinitionsServiceApi>;
+const fhirDefinitionsServiceApiMock = {
+  isComponentDataType: jest.fn().mockResolvedValue(true),
+  getResourceTree: jest.fn().mockResolvedValue(codingDef),
+  getTopLevelElements: jest.fn().mockResolvedValue(codingTopLevelElements),
+} as unknown as FhirDefinitionsServiceApi;
+useFhirDefinitionsServiceApiMock.mockImplementation(
+  () => fhirDefinitionsServiceApiMock
+);
+
+describe("TypeEditor Component", () => {
+  test("Should render Boolean component", () => {
+    const handleChange = jest.fn();
+    render(
+      <TypeEditor
+        type={`boolean`}
+        required={false}
+        value={`True`}
+        onChange={handleChange}
+        structureDefinition={null}
+      />
+    );
+    expect(screen.getByTestId("qicore-boolean-undefined")).toBeInTheDocument();
+  });
+
+  test("Should render URI component", () => {
+    const handleChange = jest.fn();
+    render(
+      <TypeEditor
+        type={`uri`}
+        required={true}
+        value={`urn:oid:2.16.840.1.113883.6.238`}
+        onChange={handleChange}
+        structureDefinition={null}
+      />
+    );
+    expect(screen.getByTestId("uri-input-field-")).toBeInTheDocument();
+  });
+});

src/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/TypeEditor.tsx

@@ -6,6 +6,7 @@ import StringComponent from "./types/StringComponent";
 import PeriodComponent from "./types/PeriodComponent";
 import DateTimeComponent from "./types/DateTimeComponent";
 import BooleanComponent from "./types/BooleanComponent";
+import UriComponent from "./types/UriComponent";
 import DateComponent from "./types/DateComponent";
 
 const TypeEditor = ({
@@ -71,6 +72,17 @@ const TypeEditor = ({
             fieldRequired={false}
           />
         );
+      case "uri":
+        return (
+          <UriComponent
+            canEdit={true}
+            structureDefinition={structureDefinition}
+            fieldRequired={required}
+            label={label}
+            onChange={onChange}
+            value={value}
+          />
+        );
       case "date":
         return (
           <DateComponent

src/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/UriComponent.test.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import UriComponent from "./UriComponent";
+
+describe("BooleanComponent Component", () => {
+  test("Should render BooleanComponent component", () => {
+    const handleChange = jest.fn();
+    render(
+      <UriComponent
+        value={`urn:oid:2.16.840.1.113883.6.238`}
+        canEdit={true}
+        fieldRequired={false}
+        onChange={handleChange}
+        label="URI"
+        structureDefinition={null}
+      />
+    );
+
+    const uriField = screen.getByTestId("uri-field-URI");
+    expect(uriField).toBeInTheDocument();
+    const uriFieldInput = screen.getByTestId("uri-input-field-URI");
+    expect(uriFieldInput).toBeInTheDocument();
+    expect(uriFieldInput.value).toBe("urn:oid:2.16.840.1.113883.6.238");
+  });
+
+  test("Test change of value", () => {
+    const handleChange = jest.fn();
+    const { rerender } = render(
+      <UriComponent
+        value={`urn:oid:2.16.840.1.113883.6.238`}
+        canEdit={true}
+        fieldRequired={false}
+        onChange={handleChange}
+        label="URI"
+        structureDefinition={null}
+      />
+    );
+
+    const uriField = screen.getByTestId("uri-field-URI");
+    expect(uriField).toBeInTheDocument();
+    const uriFieldInput = screen.getByTestId("uri-input-field-URI");
+    expect(uriFieldInput).toBeInTheDocument();
+    expect(uriFieldInput.value).toBe("urn:oid:2.16.840.1.113883.6.238");
+    fireEvent.change(uriFieldInput, {
+      target: { value: "urn:oid:2.16.840.1.113883.4.642.3.224" },
+    });
+    rerender(
+      <UriComponent
+        value={`urn:oid:2.16.840.1.113883.4.642.3.224`}
+        canEdit={true}
+        fieldRequired={false}
+        onChange={handleChange}
+        structureDefinition={null}
+      />
+    );
+    expect(uriFieldInput.value).toBe("urn:oid:2.16.840.1.113883.4.642.3.224");
+  });
+});

src/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/UriComponent.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { TypeComponentProps } from "./TypeComponentProps";
+import Box from "@mui/material/Box";
+import { TextField } from "@madie/madie-design-system/dist/react/";
+
+const UriComponent = ({
+  canEdit,
+  fieldRequired,
+  value,
+  onChange,
+  label = "URI",
+  structureDefinition,
+}: TypeComponentProps) => {
+  return (
+    <TextField
+      required={fieldRequired}
+      disabled={!canEdit}
+      id={`uri-field-${label}`}
+      label={label}
+      placeholder={label}
+      inputProps={{
+        "data-testid": `uri-input-field-${label}`,
+        "aria-describedby": `uri-input-field-helper-text-${label}`,
+        required: fieldRequired,
+        "aria-required": fieldRequired,
+      }}
+      data-testid={`uri-field-${label}`}
+      size="small"
+      fullWidth
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+    />
+  );
+};
+
+export default UriComponent;