Updated the UI & the API unit-test cases as per the new app.

Author: hanoak20

ui/src/containers/ConfigScreen/index.spec.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import ConfigPage from "./index";
+
+const inputLabel = "Data format In Entry";
+
+const UIElementsIDs = [
+  "cs-form",
+  "cs-field",
+  "cs-field-label",
+  "cs-tooltip",
+  "cs-radio-one",
+  "cs-radio-two",
+  "cs-instruction-text",
+];
+
+beforeEach(async () => {
+  render(<ConfigPage />);
+});
+jest.spyOn(React, "useEffect").mockImplementation();
+
+afterEach(cleanup);
+
+describe(`UI Elements of Custom Field Screen`, () => {
+  UIElementsIDs.forEach((id: string) => {
+    test(`Rendered ${id} element`, async () => {
+      expect(screen.getByTestId(`${id}`)).toBeInTheDocument();
+    });
+  });
+
+  test(`Text Label`, async () => {
+    expect(screen.getByText(inputLabel)).toBeInTheDocument();
+  });
+
+  test(`FireEvent Functionality`, async () => {
+    const input = screen
+      .getByTestId(`cs-radio-one`)
+      .querySelector("input") as HTMLInputElement;
+    fireEvent.change(input, { target: { value: "false" } });
+    expect(input.value).toBe("false");
+  });
+});

ui/src/containers/ConfigScreen/index.tsx

@@ -108,16 +108,16 @@ const ConfigScreen: React.FC = function () {
   return (
     <div className="layout-container">
       <div className="page-wrapper">
-        <form data-test-id="cs-form" className="config-wrapper">
+        <form data-testid="cs-form" className="config-wrapper">
           <div className="Form__item">
             <div
               className="Field Field--full json-field"
-              data-test-id="cs-field"
+              data-testid="cs-field"
             >
               <label
                 className="FieldLabel"
                 htmlFor="isStringified"
-                data-test-id="cs-field-label"
+                data-testid="cs-field-label"
               >
                 {localeTexts.configFields.entrySaveRadioButton.label}
                 <span className="FieldLabel__required-text">
@@ -127,12 +127,12 @@ const ConfigScreen: React.FC = function () {
               <div
                 className="tippy-wrapper"
                 id="help-text"
-                data-test-id="cs-tooltip"
+                data-testid="cs-tooltip"
               >
                 <VenusHelp />
               </div>
               <div className="Radio-wrapper">
-                <label data-test-id="cs-radio" className="Radio label-text">
+                <label data-testid="cs-radio-one" className="Radio label-text">
                   <input
                     id="jsonObject"
                     type="radio"
@@ -147,7 +147,7 @@ const ConfigScreen: React.FC = function () {
                     {localeTexts.configFields.entrySaveRadioButton.jsonObject}
                   </span>
                 </label>
-                <label data-test-id="cs-radio" className="Radio label-text">
+                <label data-testid="cs-radio-two" className="Radio label-text">
                   <input
                     id="stringified"
                     type="radio"
@@ -166,7 +166,7 @@ const ConfigScreen: React.FC = function () {
                   </span>
                 </label>
               </div>
-              <p className="InstructionText" data-test-id="cs-instruction-text">
+              <p className="InstructionText" data-testid="cs-instruction-text">
                 {localeTexts.configFields.entrySaveRadioButton.instruction}
               </p>
             </div>