chore: added test cases for testing the pseudo element

Author: SahilCs15

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

@@ -40,6 +40,7 @@ vi.mock("../../generators/generatePseudoEditableField", () => ({
     generatePseudoEditableElement: vi.fn(() => {
         const pseudoElement = document.createElement("div");
         pseudoElement.setAttribute("data-testid", "pseudo-element");
+        pseudoElement.className = "visual-builder__pseudo-editable-element";
         return pseudoElement;
     }),
     isEllipsisActive: vi.fn(() => false),
@@ -276,4 +277,116 @@ describe("enableInlineEditing", () => {
             VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue
         ).toBe("Test content");
     });
+
+    it("should create pseudo element when field is last edited", () => {
+        document.body.appendChild(editableElement);
+        editableElement.setAttribute("data-cs-last-edited", "true");
+
+        enableInlineEditing({
+            expectedFieldData: "Test content",
+            editableElement,
+            fieldType: FieldDataType.SINGLELINE,
+            elements: {
+                visualBuilderContainer,
+                resizeObserver,
+                lastEditedField: null,
+            },
+        });
+
+        expect(generatePseudoEditableElement).toHaveBeenCalled();
+        expect(editableElement.style.visibility).toBe("hidden");
+        expect(resizeObserver.observe).toHaveBeenCalled();
+        
+        document.body.removeChild(editableElement);
+    });
+
+    it("should set data-cs-last-edited attribute on editable element", () => {
+        enableInlineEditing({
+            expectedFieldData: "Test content",
+            editableElement,
+            fieldType: FieldDataType.SINGLELINE,
+            elements: {
+                visualBuilderContainer,
+                resizeObserver,
+                lastEditedField: null,
+            },
+        });
+
+        expect(editableElement.getAttribute("data-cs-last-edited")).toBe("true");
+    });
+
+    it("should create pseudo element when field is last edited even with same content", () => {
+        document.body.appendChild(editableElement);
+        editableElement.setAttribute("data-cs-last-edited", "true");
+        editableElement.textContent = "Test content";
+        editableElement.innerText = "Test content";
+
+        enableInlineEditing({
+            expectedFieldData: "Test content",
+            editableElement,
+            fieldType: FieldDataType.SINGLELINE,
+            elements: {
+                visualBuilderContainer,
+                resizeObserver,
+                lastEditedField: null,
+            },
+        });
+
+        expect(generatePseudoEditableElement).toHaveBeenCalled();
+        expect(editableElement.style.visibility).toBe("hidden");
+        
+        document.body.removeChild(editableElement);
+    });
+
+    it("should not create pseudo element when field is not last edited and content matches", () => {
+        const otherElement = document.createElement("div");
+        otherElement.setAttribute("data-cs-last-edited", "true");
+        document.body.appendChild(otherElement);
+
+        editableElement.textContent = "Test content";
+        editableElement.innerText = "Test content";
+
+        enableInlineEditing({
+            expectedFieldData: "Test content",
+            editableElement,
+            fieldType: FieldDataType.SINGLELINE,
+            elements: {
+                visualBuilderContainer,
+                resizeObserver,
+                lastEditedField: null,
+            },
+        });
+
+        expect(generatePseudoEditableElement).not.toHaveBeenCalled();
+        expect(editableElement.style.visibility).toBe("");
+        expect(editableElement.getAttribute("data-cs-last-edited")).toBe("true");
+
+        document.body.removeChild(otherElement);
+    });
+
+    it("should not create nested pseudo elements when pseudo element is clicked", () => {
+        document.body.appendChild(editableElement);
+        editableElement.setAttribute("data-cs-last-edited", "true");
+
+        enableInlineEditing({
+            expectedFieldData: "Test content",
+            editableElement,
+            fieldType: FieldDataType.SINGLELINE,
+            elements: {
+                visualBuilderContainer,
+                resizeObserver,
+                lastEditedField: null,
+            },
+        });
+
+        expect(generatePseudoEditableElement).toHaveBeenCalled();
+        expect(editableElement.style.visibility).toBe("hidden");
+        
+        const pseudoElement = visualBuilderContainer.querySelector(".visual-builder__pseudo-editable-element");
+        expect(pseudoElement).toBeTruthy();
+        expect(pseudoElement?.getAttribute("data-cslp")).toBeNull();
+        expect(editableElement.getAttribute("data-cs-last-edited")).toBe("true");
+        
+        document.body.removeChild(editableElement);
+    });
 });

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

@@ -328,4 +328,69 @@ describe("`handleFieldInput`", () => {
             VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput
         ).toBe(true);
     });
+
+    test("should manage data-cs-last-edited attribute when field receives input", () => {
+        const previousField = document.createElement("div");
+        previousField.setAttribute("data-cs-last-edited", "true");
+        document.body.appendChild(previousField);
+
+        const inputEvent = new InputEvent("input", {
+            bubbles: true,
+        });
+        h1.dispatchEvent(inputEvent);
+
+        expect(previousField.getAttribute("data-cs-last-edited")).toBeNull();
+        expect(h1.getAttribute("data-cs-last-edited")).toBe("true");
+
+        document.body.removeChild(previousField);
+    });
+
+    test("should not change data-cs-last-edited attribute when same field receives input", () => {
+        h1.setAttribute("data-cs-last-edited", "true");
+
+        const inputEvent = new InputEvent("input", {
+            bubbles: true,
+        });
+        h1.dispatchEvent(inputEvent);
+
+        expect(h1.getAttribute("data-cs-last-edited")).toBe("true");
+    });
+
+    test("should set data-cs-last-edited attribute on new field when no previous field exists", () => {
+        const inputEvent = new InputEvent("input", {
+            bubbles: true,
+        });
+        h1.dispatchEvent(inputEvent);
+
+        expect(h1.getAttribute("data-cs-last-edited")).toBe("true");
+    });
+
+    test("should transfer data-cs-last-edited attribute between multiple fields", () => {
+        const field1 = document.createElement("div");
+        const field2 = document.createElement("div");
+        field1.setAttribute(VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY, "number");
+        field2.setAttribute(VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY, "number");
+        field1.setAttribute("data-cs-last-edited", "true");
+
+        field1.addEventListener("input", handleFieldInput);
+        field2.addEventListener("input", handleFieldInput);
+
+        document.body.appendChild(field1);
+        document.body.appendChild(field2);
+
+        const inputEvent1 = new InputEvent("input", { bubbles: true });
+        field1.dispatchEvent(inputEvent1);
+
+        expect(field1.getAttribute("data-cs-last-edited")).toBe("true");
+        expect(field2.getAttribute("data-cs-last-edited")).toBeNull();
+
+        const inputEvent2 = new InputEvent("input", { bubbles: true });
+        field2.dispatchEvent(inputEvent2);
+
+        expect(field1.getAttribute("data-cs-last-edited")).toBeNull();
+        expect(field2.getAttribute("data-cs-last-edited")).toBe("true");
+
+        document.body.removeChild(field1);
+        document.body.removeChild(field2);
+    });
 });