enableInlineEditing.test.ts

import { throttle as throttleActual } from "lodash-es";
import { MockedObject } from "vitest";
import {
    generatePseudoEditableElement as generatePseudoEditableElementActual,
    isEllipsisActive as isEllipsisActiveActual,
} from "../../generators/generatePseudoEditableField";
import { VisualBuilder } from "../../index";
import { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from "../constants";
import { enableInlineEditing } from "../enableInlineEditing";
import { getMultilinePlaintext as getMultilinePlaintextActual } from "../getMultilinePlaintext";
import { handleFieldInput, handleFieldKeyDown } from "../handleFieldMouseDown";
import { pasteAsPlainText } from "../pasteAsPlainText";
import { FieldDataType } from "../types/index.types";
import { updateFocussedState as updateFocussedStateActual } from "../updateFocussedState";

const isEllipsisActive = vi.mocked(isEllipsisActiveActual);
const generatePseudoEditableElement = vi.mocked(
    generatePseudoEditableElementActual
);
const getMultilinePlaintext = vi.mocked(getMultilinePlaintextActual);
const updateFocussedState = vi.mocked(updateFocussedStateActual);
const throttle = vi.mocked(throttleActual);

vi.mock("../../index", () => ({
    VisualBuilder: {
        VisualBuilderGlobalState: {
            value: {
                focusFieldValue: null,
            },
        },
    },
}));

// Mock utility functions that are imported in the original file
vi.mock("../getMultilinePlaintext", () => ({
    getMultilinePlaintext: vi.fn((element) => element.textContent || ""),
}));

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),
}));

vi.mock("../updateFocussedState", () => ({
    updateFocussedState: vi.fn(),
}));

vi.mock("lodash-es", () => ({
    throttle: vi.fn((fn) => fn),
    debounce: vi.fn((fn) => fn),
}));

vi.mock("../handleFieldInput", () => ({
    handleFieldInput: vi.fn(),
}));

vi.mock("../handleFieldKeyDown", () => ({
    handleFieldKeyDown: vi.fn(),
}));

vi.mock("../pasteAsPlainText", () => ({
    pasteAsPlainText: vi.fn(),
}));

describe("enableInlineEditing", () => {
    let editableElement: HTMLDivElement;
    let mockedEditableElement: MockedObject<HTMLDivElement>;
    let visualBuilderContainer: HTMLDivElement;
    let resizeObserver: ResizeObserver;

    beforeEach(() => {
        // Set up the DOM elements
        editableElement = document.createElement("div");
        // after this point the editableElement is mocked
        // but we have reference to both just for the types
        mockedEditableElement = vi.mocked(editableElement);

        editableElement.textContent = "Test content";
        editableElement.innerText = "Test content";

        mockedEditableElement.focus = vi.fn();
        mockedEditableElement.addEventListener = vi.fn();

        visualBuilderContainer = document.createElement("div");
        document.body.appendChild(visualBuilderContainer);

        // Mock ResizeObserver
        resizeObserver = {
            observe: vi.fn(),
            unobserve: vi.fn(),
            disconnect: vi.fn(),
        } as unknown as ResizeObserver;

        // clear mocks
        vi.clearAllMocks();

        // @ts-expect-error only mocking required properties
        vi.spyOn(window, "getComputedStyle").mockReturnValue({
            display: "block",
        });
    });

    afterEach(() => {
        VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue = null;
        isEllipsisActive.mockReturnValue(false);
        document.body.removeChild(visualBuilderContainer);
    });

    it("should make element editable and set focus", () => {
        enableInlineEditing({
            expectedFieldData: "Test content",
            editableElement,
            fieldType: FieldDataType.SINGLELINE,
            elements: {
                visualBuilderContainer,
                resizeObserver,
                lastEditedField: null,
            },
        });

        expect(editableElement.getAttribute("contenteditable")).toBe("true");
        expect(editableElement.focus).toHaveBeenCalled();
    });

    it("should handle multiline fields correctly", () => {
        enableInlineEditing({
            expectedFieldData: "Test content",
            editableElement,
            fieldType: FieldDataType.MULTILINE,
            elements: {
                visualBuilderContainer,
                resizeObserver,
                lastEditedField: null,
            },
        });

        expect(getMultilinePlaintext).toHaveBeenCalledWith(editableElement);
        expect(editableElement.getAttribute("contenteditable")).toBe("true");

        // Check event listeners
        const eventListeners =
            mockedEditableElement.addEventListener.mock.calls;
        expect(
            eventListeners.some(
                (call) => call[0] === "paste" && call[1] === pasteAsPlainText
            )
        ).toBe(true);
    });

    it("should create pseudo element when text content differs from expected", () => {
        enableInlineEditing({
            expectedFieldData: "Different content",
            editableElement,
            fieldType: FieldDataType.SINGLELINE,
            elements: {
                visualBuilderContainer,
                resizeObserver,
                lastEditedField: null,
            },
        });

        expect(generatePseudoEditableElement).toHaveBeenCalled();
        expect(editableElement.style.visibility).toBe("hidden");
        expect(resizeObserver.observe).toHaveBeenCalled();
    });

    it("should create pseudo element when ellipsis is active", () => {
        isEllipsisActive.mockReturnValue(true);

        enableInlineEditing({
            expectedFieldData: "Test content",
            editableElement,
            fieldType: FieldDataType.SINGLELINE,
            elements: {
                visualBuilderContainer,
                resizeObserver,
                lastEditedField: null,
            },
        });

        expect(generatePseudoEditableElement).toHaveBeenCalled();
        expect(editableElement.style.visibility).toBe("hidden");
    });

    it("should set field type attribute on pseudo element", () => {
        enableInlineEditing({
            expectedFieldData: "Different content",
            editableElement,
            fieldType: FieldDataType.MULTILINE,
            elements: {
                visualBuilderContainer,
                resizeObserver,
                lastEditedField: null,
            },
        });

        const pseudoElement =
            generatePseudoEditableElement.mock.results[0].value;
        expect(
            pseudoElement.getAttribute(VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY)
        ).toBe(FieldDataType.MULTILINE);
    });

    it("should handle inline elements correctly", () => {
        // @ts-expect-error mocking only required properties
        vi.spyOn(window, "getComputedStyle").mockReturnValue({
            display: "inline",
        });

        enableInlineEditing({
            expectedFieldData: "Test content",
            editableElement,
            fieldType: FieldDataType.SINGLELINE,
            elements: {
                visualBuilderContainer,
                resizeObserver,
                lastEditedField: null,
            },
        });

        expect(throttle).toHaveBeenCalled();

        const onInlineElementInput =
            mockedEditableElement.addEventListener.mock.calls[0][1];

        expect(onInlineElementInput).toBeInstanceOf(Function);
        (onInlineElementInput as () => void)();

        expect(updateFocussedState).toHaveBeenCalled();
    });

    it("should add event listeners for input and keydown", () => {
        enableInlineEditing({
            expectedFieldData: "Test content",
            editableElement,
            fieldType: FieldDataType.SINGLELINE,
            elements: {
                visualBuilderContainer,
                resizeObserver,
                lastEditedField: null,
            },
        });

        const eventListeners =
            mockedEditableElement.addEventListener.mock.calls;
        expect(
            eventListeners.some(
                (call) => call[0] === "input" && call[1] === handleFieldInput
            )
        ).toBe(true);
        expect(
            eventListeners.some(
                (call) =>
                    call[0] === "keydown" && call[1] === handleFieldKeyDown
            )
        ).toBe(true);
    });

    it("should update global state with field value", () => {
        enableInlineEditing({
            expectedFieldData: "Test content",
            editableElement,
            fieldType: FieldDataType.SINGLELINE,
            elements: {
                visualBuilderContainer,
                resizeObserver,
                lastEditedField: null,
            },
        });

        expect(
            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);
    });
});