diff --git a/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/OidComponent.test.tsx b/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/OidComponent.test.tsx new file mode 100644 index 00000000..cad19bbe --- /dev/null +++ b/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/OidComponent.test.tsx @@ -0,0 +1,56 @@ +import * as React from "react"; +import { render, screen } from "@testing-library/react"; +import OidComponent from "./OidComponent"; +import userEvent from "@testing-library/user-event"; + +describe("OidComponent", () => { + it("Should render OidComponent", async () => { + const handleChange = jest.fn(); + + render( + + ); + + expect(screen.getByText("OID")).toBeInTheDocument(); + expect(screen.getByTestId("field-input-OID")).toBeInTheDocument(); + }); + + it("Should validate input", async () => { + const handleChange = jest.fn(); + + render( + + ); + + const oidInput = screen.getByTestId("field-input-OID") as HTMLInputElement; + + // valid oidInput + userEvent.type(oidInput, "urn:oid:1.2.3.4.5"); + expect(oidInput.value).toBe("urn:oid:1.2.3.4.5"); + expect( + screen.getByTestId("field-input-helper-text-OID") + ).not.toHaveTextContent("Please enter a valid OID"); + + // invalid oidInput + userEvent.clear(oidInput); + userEvent.type(oidInput, "invalid OID."); + expect(oidInput).toHaveValue("invalid OID."); + expect(screen.getByTestId("field-input-helper-text-OID")).toHaveTextContent( + "Please enter a valid OID" + ); + }); +}); diff --git a/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/OidComponent.tsx b/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/OidComponent.tsx new file mode 100644 index 00000000..cc2503be --- /dev/null +++ b/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/OidComponent.tsx @@ -0,0 +1,55 @@ +import React, { useState } from "react"; +import { FormHelperText } from "@mui/material"; +import { TypeComponentProps } from "./TypeComponentProps"; +import { TextField } from "@madie/madie-design-system/dist/react"; +import _ from "lodash"; + +const OidComponent = ({ + canEdit, + fieldRequired, + label = "OID", + value, + onChange, + structureDefinition, +}: TypeComponentProps) => { + const oidRegex = /urn:oid:[0-2](\.(0|[1-9][0-9]*))+/; + const [isValid, setValid] = useState( + value ? value.match(oidRegex) : true + ); + + const handleChange = (oid) => { + setValid(true); + if (oid.match(oidRegex)) { + onChange(oid); + } else if (!_.isEmpty(oid)) { + setValid(false); + } + }; + return ( + handleChange(e.target.value)} + helperText={ + + {isValid ? "" : "Please enter a valid OID"} + + } + /> + ); +}; + +export default OidComponent;