@griddo/ax 11.15.7 → 11.15.8-rc.0

package/src/__tests__/components/Fields/Wysiwyg/Wysiwyg.helpers.test.tsx

@@ -0,0 +1,418 @@
+import {
+	createPopupFunctions,
+	getLanguageMenuHtml,
+	getPopupPosition,
+	getRichTextConfig,
+	parseClassNames,
+	setLinkAttributes,
+} from "@ax/components/Fields/Wysiwyg/helpers";
+
+// Mock the config module
+jest.mock("components", () => ({
+	config: {
+		schemas: {
+			config: {
+				richTextConfig: {
+					paragraphStyles: [
+						{ label: "Normal", className: "normal" },
+						{ label: "Heading", className: "heading" },
+					],
+					editorLangs: [
+						{ name: "English", iso: "en" },
+						{ name: "Spanish", iso: "es" },
+					],
+				},
+			},
+		},
+	},
+}));
+
+describe("Wysiwyg helpers", () => {
+	describe("getRichTextConfig", () => {
+		it("should return richTextConfig from global config", () => {
+			const config = getRichTextConfig();
+
+			expect(config).not.toBeNull();
+			expect(config?.paragraphStyles).toBeDefined();
+			expect(config?.editorLangs).toBeDefined();
+		});
+
+		it("should return config with correct structure", () => {
+			const config = getRichTextConfig();
+
+			expect(config?.paragraphStyles).toHaveLength(2);
+			expect(config?.paragraphStyles?.[0]).toEqual({ label: "Normal", className: "normal" });
+		});
+	});
+
+	describe("parseClassNames", () => {
+		it("should convert array of styles to className map", () => {
+			const styles = [
+				{ label: "Normal", className: "normal-text" },
+				{ label: "Bold", className: "bold-text" },
+			];
+
+			const result = parseClassNames(styles);
+
+			expect(result).toEqual({
+				"normal-text": "Normal",
+				"bold-text": "Bold",
+			});
+		});
+
+		it("should handle empty array", () => {
+			const result = parseClassNames([]);
+
+			expect(result).toEqual({});
+		});
+
+		it("should handle single style", () => {
+			const styles = [{ label: "Italic", className: "italic-text" }];
+
+			const result = parseClassNames(styles);
+
+			expect(result).toEqual({ "italic-text": "Italic" });
+		});
+
+		it("should use className as key and label as value", () => {
+			const styles = [{ label: "My Label", className: "my-class" }];
+
+			const result = parseClassNames(styles);
+
+			expect(result).toEqual({ "my-class": "My Label" });
+		});
+	});
+
+	describe("getLanguageMenuHtml", () => {
+		it("should generate HTML with featured languages first", () => {
+			const languages = [
+				{ name: "English", iso: "en", featured: true },
+				{ name: "Spanish", iso: "es" },
+			];
+
+			const html = getLanguageMenuHtml(languages);
+
+			expect(html).toContain("English");
+			expect(html).toContain("Spanish");
+			expect(html).toContain("Remove");
+		});
+
+		it("should include Remove option with italic style", () => {
+			const languages = [{ name: "English", iso: "en" }];
+
+			const html = getLanguageMenuHtml(languages);
+
+			expect(html).toContain("Remove");
+			expect(html).toContain("font-style");
+		});
+
+		it("should set data-param1 attribute with language iso", () => {
+			const languages = [{ name: "English", iso: "en" }];
+
+			const html = getLanguageMenuHtml(languages);
+
+			expect(html).toContain('data-param1="en"');
+		});
+
+		it("should include fr-command class and lang dropdown data-cmd", () => {
+			const languages = [{ name: "English", iso: "en" }];
+
+			const html = getLanguageMenuHtml(languages);
+
+			expect(html).toContain("fr-command");
+			expect(html).toContain("data-cmd");
+			expect(html).toContain("langDropdown");
+		});
+
+		it("should handle multiple featured and non-featured languages", () => {
+			const languages = [
+				{ name: "English", iso: "en", featured: true },
+				{ name: "Spanish", iso: "es", featured: true },
+				{ name: "French", iso: "fr" },
+				{ name: "German", iso: "de" },
+			];
+
+			const html = getLanguageMenuHtml(languages);
+
+			expect(html).toContain("English");
+			expect(html).toContain("Spanish");
+			expect(html).toContain("French");
+			expect(html).toContain("German");
+		});
+	});
+
+	describe("setLinkAttributes", () => {
+		let linkElement: HTMLElement;
+
+		beforeEach(() => {
+			linkElement = document.createElement("a");
+		});
+
+		it("should set href attribute", () => {
+			setLinkAttributes(linkElement, "http://example.com");
+
+			expect(linkElement.getAttribute("href")).toBe("http://example.com");
+		});
+
+		it("should set target attribute when newTab is true", () => {
+			setLinkAttributes(linkElement, "http://example.com", { newTab: true });
+
+			expect(linkElement.getAttribute("target")).toBe("_blank");
+		});
+
+		it("should remove target attribute when newTab is false", () => {
+			linkElement.setAttribute("target", "_blank");
+
+			setLinkAttributes(linkElement, "http://example.com", { newTab: false });
+
+			expect(linkElement.getAttribute("target")).toBeNull();
+		});
+
+		it("should set rel attribute when noFollow is true", () => {
+			setLinkAttributes(linkElement, "http://example.com", { noFollow: true });
+
+			expect(linkElement.getAttribute("rel")).toBe("nofollow");
+		});
+
+		it("should remove rel attribute when noFollow is false", () => {
+			linkElement.setAttribute("rel", "nofollow");
+
+			setLinkAttributes(linkElement, "http://example.com", { noFollow: false });
+
+			expect(linkElement.getAttribute("rel")).toBeNull();
+		});
+
+		it("should set data-pageId attribute when linkTo is provided", () => {
+			setLinkAttributes(linkElement, "http://example.com", { linkTo: 42 });
+
+			expect(linkElement.getAttribute("data-pageId")).toBe("42");
+		});
+
+		it("should remove data-pageId attribute when linkTo is null or undefined", () => {
+			linkElement.setAttribute("data-pageId", "42");
+
+			setLinkAttributes(linkElement, "http://example.com", { linkTo: null });
+
+			expect(linkElement.getAttribute("data-pageId")).toBeNull();
+		});
+
+		it("should apply all options together", () => {
+			setLinkAttributes(linkElement, "http://example.com", {
+				newTab: true,
+				noFollow: true,
+				linkTo: 99,
+			});
+
+			expect(linkElement.getAttribute("href")).toBe("http://example.com");
+			expect(linkElement.getAttribute("target")).toBe("_blank");
+			expect(linkElement.getAttribute("rel")).toBe("nofollow");
+			expect(linkElement.getAttribute("data-pageId")).toBe("99");
+		});
+
+		it("should handle null element gracefully", () => {
+			expect(() => {
+				setLinkAttributes(null, "http://example.com");
+			}).not.toThrow();
+		});
+
+		it("should update href without changing other attributes", () => {
+			setLinkAttributes(linkElement, "http://old.com", { newTab: true, noFollow: true });
+			setLinkAttributes(linkElement, "http://new.com");
+
+			expect(linkElement.getAttribute("href")).toBe("http://new.com");
+			expect(linkElement.getAttribute("target")).toBeNull();
+			expect(linkElement.getAttribute("rel")).toBeNull();
+		});
+	});
+
+	describe("getPopupPosition", () => {
+		let editorEl: HTMLElement;
+
+		beforeEach(() => {
+			editorEl = document.createElement("div");
+			document.body.appendChild(editorEl);
+		});
+
+		afterEach(() => {
+			document.body.removeChild(editorEl);
+		});
+
+		it("should calculate position based on editor element bounds", () => {
+			// Mock getBoundingClientRect
+			editorEl.getBoundingClientRect = jest.fn(() => ({
+				left: 100,
+				top: 200,
+				width: 400,
+				height: 300,
+				right: 500,
+				bottom: 500,
+				x: 100,
+				y: 200,
+				toJSON: () => ({}),
+			}));
+
+			const pos = getPopupPosition(editorEl);
+
+			expect(pos.x).toBe(200); // 100 + 400/2 - 100
+			expect(pos.y).toBe(250); // 200 + 50
+		});
+
+		it("should use window center when getBoundingClientRect is unavailable", () => {
+			editorEl.getBoundingClientRect = undefined as any;
+
+			const pos = getPopupPosition(editorEl);
+
+			expect(pos.x).toBe(window.innerWidth / 2 - 100);
+			expect(pos.y).toBe(50);
+		});
+
+		it("should center popup horizontally in editor", () => {
+			editorEl.getBoundingClientRect = jest.fn(() => ({
+				left: 0,
+				top: 0,
+				width: 1000,
+				height: 500,
+				right: 1000,
+				bottom: 500,
+				x: 0,
+				y: 0,
+				toJSON: () => ({}),
+			}));
+
+			const pos = getPopupPosition(editorEl);
+
+			expect(pos.x).toBe(400); // 0 + 1000/2 - 100
+		});
+
+		it("should position popup 50px below editor top", () => {
+			editorEl.getBoundingClientRect = jest.fn(() => ({
+				left: 0,
+				top: 100,
+				width: 500,
+				height: 300,
+				right: 500,
+				bottom: 400,
+				x: 0,
+				y: 100,
+				toJSON: () => ({}),
+			}));
+
+			const pos = getPopupPosition(editorEl);
+
+			expect(pos.y).toBe(150); // 100 + 50
+		});
+	});
+
+	describe("createPopupFunctions", () => {
+		let mockEditor: any;
+		let editorEl: HTMLElement;
+
+		beforeEach(() => {
+			editorEl = document.createElement("div");
+			editorEl.getBoundingClientRect = jest.fn(() => ({
+				left: 0,
+				top: 0,
+				width: 400,
+				height: 300,
+				right: 400,
+				bottom: 300,
+				x: 0,
+				y: 0,
+				toJSON: () => ({}),
+			}));
+
+			mockEditor = {
+				popups: {
+					create: jest.fn(),
+					onHide: jest.fn(),
+					show: jest.fn(),
+					hide: jest.fn(),
+				},
+			};
+		});
+
+		it("should return object with showPopup and showErrorPopup functions", () => {
+			const { showPopup, showErrorPopup } = createPopupFunctions(mockEditor, editorEl);
+
+			expect(typeof showPopup).toBe("function");
+			expect(typeof showErrorPopup).toBe("function");
+		});
+
+		it("showPopup should create and show popup", () => {
+			const { showPopup } = createPopupFunctions(mockEditor, editorEl);
+			const template = { custom_layer: "<div>Test</div>" };
+
+			showPopup("test.popup", template);
+
+			expect(mockEditor.popups.create).toHaveBeenCalledWith("test.popup", template);
+			expect(mockEditor.popups.show).toHaveBeenCalled();
+		});
+
+		it("showPopup should register hide callback by default", () => {
+			const { showPopup } = createPopupFunctions(mockEditor, editorEl);
+
+			showPopup("test.popup", {});
+
+			expect(mockEditor.popups.onHide).toHaveBeenCalledWith("test.popup", expect.any(Function));
+		});
+
+		it("showPopup should not register hide callback when keepVisible is true", () => {
+			const { showPopup } = createPopupFunctions(mockEditor, editorEl);
+
+			showPopup("test.popup", {}, true);
+
+			expect(mockEditor.popups.onHide).not.toHaveBeenCalled();
+		});
+
+		it("showErrorPopup should show error popup with correct message", () => {
+			const { showErrorPopup } = createPopupFunctions(mockEditor, editorEl);
+
+			showErrorPopup();
+
+			expect(mockEditor.popups.create).toHaveBeenCalledWith(
+				"image.uploadError",
+				expect.objectContaining({
+					custom_layer: expect.stringContaining("Upload failed"),
+				}),
+			);
+		});
+
+		it("showErrorPopup should hide error popup after 3 seconds", (done) => {
+			jest.useFakeTimers();
+			const { showErrorPopup } = createPopupFunctions(mockEditor, editorEl);
+
+			showErrorPopup();
+
+			jest.advanceTimersByTime(3000);
+
+			expect(mockEditor.popups.hide).toHaveBeenCalledWith("image.uploadError");
+
+			jest.useRealTimers();
+			done();
+		});
+
+		it("showPopup should pass correct position arguments to show method", () => {
+			const { showPopup } = createPopupFunctions(mockEditor, editorEl);
+
+			showPopup("test.popup", {});
+
+			const showCall = mockEditor.popups.show.mock.calls[0];
+			expect(showCall[0]).toBe("test.popup");
+			expect(typeof showCall[1]).toBe("number"); // x
+			expect(typeof showCall[2]).toBe("number"); // y
+			expect(showCall[3]).toBe(50); // z-index
+		});
+
+		it("showErrorPopup should have correct styling", () => {
+			const { showErrorPopup } = createPopupFunctions(mockEditor, editorEl);
+
+			showErrorPopup();
+
+			const createCall = mockEditor.popups.create.mock.calls[0];
+			const template = createCall[1];
+
+			expect(template.custom_layer).toContain("color: #d32f2f");
+			expect(template.custom_layer).toContain("padding: 15px 30px");
+		});
+	});
+});