test: remove skipped number field tests and add validation for numeric input

Author: hitesh-shetty-cstk

src/visualBuilder/__test__/visualBuilderInput.test.tsx

@@ -661,59 +661,4 @@ describe("When an inline element is edited in visual builder mode", () => {
             });
         });
     });
-    describe.skip("number field", () => {
-        let numberField: HTMLParagraphElement;
-        let visualBuilder: VisualBuilder;
-        let overlayWrapper: HTMLDivElement;
-
-        beforeAll(() => {
-            (visualBuilderPostMessage?.send as Mock).mockImplementation(
-                (eventName: string, args) => {
-                    if (
-                        eventName ===
-                        VisualBuilderPostMessageEvents.GET_FIELD_DATA
-                    ) {
-                        return Promise.resolve({
-                            fieldData: "87",
-                        });
-                    }
-                    return Promise.resolve({});
-                }
-            );
-        });
-
-        beforeEach(() => {
-            numberField = document.createElement("p");
-            numberField.setAttribute(
-                "data-cslp",
-                "all_fields.bltapikey.en-us.number"
-            );
-            numberField.textContent = "87";
-            document.body.appendChild(numberField);
-            visualBuilder = new VisualBuilder();
-            overlayWrapper = document.querySelector(
-                ".visual-builder__overlay__wrapper"
-            ) as HTMLDivElement;
-        });
-
-        afterEach(() => {
-            visualBuilder.destroy();
-        });
-
-        test("should only accept characters like a number input", async () => {
-            await userEvent.click(numberField);
-            await waitFor(() => {
-                expect(numberField).toHaveAttribute("contenteditable");
-            });
-            await userEvent.keyboard("ab56c78e-h10");
-
-            await waitFor(() => {
-                // TODO cursor is placed at the start, instead of the end
-                // so typed content appears at the start
-                expect(numberField).toHaveTextContent(`5678e-1087`);
-            });
-        });
-    }, {
-        timeout: 20 * 1000
-    });
 });

src/visualBuilder/utils/__test__/handleFieldMouseDown.test.ts

@@ -5,6 +5,8 @@ import * as insertSpaceAtCursor from "../insertSpaceAtCursor";
 import * as generateOverlay from "../../generators/generateOverlay";
 import { VisualBuilderPostMessageEvents } from "../types/postMessage.types";
 import { FieldDataType } from "../types/index.types";
+import userEvent from "@testing-library/user-event";
+import { waitFor, screen } from "@testing-library/preact";
 
 vi.mock("lodash-es", async () => ({
     ...(await import("lodash-es")),
@@ -113,6 +115,16 @@ describe("handle numeric field key down", () => {
         h1.dispatchEvent(keyDownEvent);
         expect(spiedPreventDefault).toHaveBeenCalledTimes(1);
     });
+
+    test("should only accept characters like a number input", async () => {
+        h1.innerHTML = '';
+        await userEvent.click(h1);
+        await userEvent.keyboard("ab56c78e-h10");
+
+        await waitFor(() => {
+            expect(h1).toHaveTextContent(`5678e-10`);
+        });
+    });
 });
 
 describe("handle keydown in button contenteditable", () => {