@griddo/ax 11.15.7 → 11.15.8

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "11.15.7",
+	"version": "11.15.8",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -219,5 +219,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "f6fc4a53d78b828ea1e7edc27efab35b98291f5f"
+	"gitHead": "2d50b3828919cceb67f86fe7283056d4207a0eaf"
 }

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

@@ -0,0 +1,409 @@
+import "@testing-library/jest-dom";
+import type React from "react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@ax/helpers";
+import globalTheme from "@ax/themes/theme.json";
+import { LinkPopover } from "@ax/components/Fields/Wysiwyg/atoms";
+
+// Mock createPortal to render content directly in the test DOM
+jest.mock("react-dom", () => {
+	const actual = jest.requireActual("react-dom");
+	return {
+		...actual,
+		createPortal: (element: React.ReactNode) => element,
+	};
+});
+
+// Mock FieldsBehavior and Button components
+jest.mock("@ax/components", () => ({
+	Button: ({ onClick, disabled, children }: any) => (
+		<button type="button" onClick={onClick} disabled={disabled} data-testid="insert-button">
+			{children}
+		</button>
+	),
+	FieldsBehavior: ({ name, value, onChange, placeholder, fieldType }: any) => {
+		if (fieldType === "CheckGroup") {
+			return (
+				<div data-testid={`field-${name}`}>
+					<label>
+						<input
+							type="checkbox"
+							data-testid="checkbox-newTab"
+							onChange={(e) => {
+								const newValue = e.target.checked ? [...value, "newTab"] : value.filter((v: string) => v !== "newTab");
+								onChange(newValue);
+							}}
+							checked={value.includes("newTab")}
+						/>
+						Open in new tab
+					</label>
+					<label>
+						<input
+							type="checkbox"
+							data-testid="checkbox-noFollow"
+							onChange={(e) => {
+								const newValue = e.target.checked
+									? [...value, "noFollow"]
+									: value.filter((v: string) => v !== "noFollow");
+								onChange(newValue);
+							}}
+							checked={value.includes("noFollow")}
+						/>
+						Add nofollow
+					</label>
+				</div>
+			);
+		}
+
+		if (fieldType === "UrlField") {
+			return (
+				<input
+					data-testid={`field-${name}`}
+					type="text"
+					value={value?.href || value?.linkToURL || ""}
+					onChange={(e) => onChange({ ...value, href: e.target.value })}
+					placeholder={placeholder}
+				/>
+			);
+		}
+
+		return (
+			<input
+				data-testid={`field-${name}`}
+				type="text"
+				value={value}
+				onChange={(e) => onChange(e.target.value)}
+				placeholder={placeholder}
+			/>
+		);
+	},
+}));
+
+const renderWithTheme = (ui: React.ReactElement) => {
+	return render(<ThemeProvider theme={parseTheme(globalTheme)}>{ui}</ThemeProvider>);
+};
+
+describe("LinkPopover", () => {
+	const defaultProps = {
+		x: 100,
+		y: 100,
+		selectedText: "Click here",
+		onInsert: jest.fn(),
+		onClose: jest.fn(),
+		linkData: null,
+	};
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe("Rendering", () => {
+		it("should render text field for link text when not image link", () => {
+			renderWithTheme(<LinkPopover {...defaultProps} />);
+
+			const textField = screen.getByTestId("field-text");
+			expect(textField).toBeTruthy();
+		});
+
+		it("should render URL field", () => {
+			renderWithTheme(<LinkPopover {...defaultProps} />);
+
+			const urlField = screen.getByTestId("field-url");
+			expect(urlField).toBeTruthy();
+		});
+
+		it("should render INSERT button", () => {
+			renderWithTheme(<LinkPopover {...defaultProps} />);
+
+			const button = screen.getByTestId("insert-button");
+			expect(button).toBeTruthy();
+			expect(button).toHaveTextContent("INSERT");
+		});
+
+		it("should not render text field when isImageLink is true", () => {
+			const props = {
+				...defaultProps,
+				linkData: {
+					url: "http://example.com",
+					newTab: false,
+					noFollow: false,
+					isEditing: false,
+					isImageLink: true,
+				},
+			};
+
+			renderWithTheme(<LinkPopover {...props} />);
+
+			const textField = screen.queryByTestId("field-text");
+			expect(textField).not.toBeInTheDocument();
+		});
+
+		it("should render link options (newTab, noFollow)", () => {
+			renderWithTheme(<LinkPopover {...defaultProps} />);
+
+			const checkbox = screen.getByTestId("checkbox-newTab");
+			expect(checkbox).toBeTruthy();
+		});
+	});
+
+	describe("Link insertion", () => {
+		it("should disable INSERT button when URL is empty", () => {
+			renderWithTheme(<LinkPopover {...defaultProps} />);
+
+			const button = screen.getByTestId("insert-button");
+			expect(button).toBeDisabled();
+		});
+
+		it("should enable INSERT button when URL is provided", async () => {
+			renderWithTheme(<LinkPopover {...defaultProps} />);
+
+			const urlField = screen.getByTestId("field-url") as HTMLInputElement;
+			fireEvent.change(urlField, { target: { value: "http://example.com" } });
+
+			await waitFor(() => {
+				const button = screen.getByTestId("insert-button");
+				expect(button).not.toBeDisabled();
+			});
+		});
+
+		it("should call onInsert with URL and text when INSERT is clicked", async () => {
+			const mockOnInsert = jest.fn();
+			const props = {
+				...defaultProps,
+				onInsert: mockOnInsert,
+			};
+
+			renderWithTheme(<LinkPopover {...props} />);
+
+			const urlField = screen.getByTestId("field-url") as HTMLInputElement;
+			fireEvent.change(urlField, { target: { value: "http://example.com" } });
+
+			const button = screen.getByTestId("insert-button");
+			fireEvent.click(button);
+
+			await waitFor(() => {
+				expect(mockOnInsert).toHaveBeenCalledWith(
+					"http://example.com",
+					"Click here",
+					expect.objectContaining({
+						newTab: false,
+						noFollow: false,
+					}),
+				);
+			});
+		});
+
+		it("should use URL as text if link text is empty", async () => {
+			const mockOnInsert = jest.fn();
+			const props = {
+				...defaultProps,
+				selectedText: "",
+				onInsert: mockOnInsert,
+			};
+
+			renderWithTheme(<LinkPopover {...props} />);
+
+			const urlField = screen.getByTestId("field-url") as HTMLInputElement;
+			fireEvent.change(urlField, { target: { value: "http://example.com" } });
+
+			const button = screen.getByTestId("insert-button");
+			fireEvent.click(button);
+
+			await waitFor(() => {
+				const callArgs = mockOnInsert.mock.calls[0];
+				expect(callArgs[0]).toBe("http://example.com");
+				expect(callArgs[1]).toBe("http://example.com");
+			});
+		});
+	});
+
+	describe("Link options", () => {
+		it("should include newTab option when checkbox is checked", async () => {
+			const mockOnInsert = jest.fn();
+			const props = {
+				...defaultProps,
+				onInsert: mockOnInsert,
+			};
+
+			renderWithTheme(<LinkPopover {...props} />);
+
+			const urlField = screen.getByTestId("field-url") as HTMLInputElement;
+			fireEvent.change(urlField, { target: { value: "http://example.com" } });
+
+			const newTabCheckbox = screen.getByTestId("checkbox-newTab");
+			fireEvent.click(newTabCheckbox);
+
+			const button = screen.getByTestId("insert-button");
+			fireEvent.click(button);
+
+			await waitFor(() => {
+				expect(mockOnInsert).toHaveBeenCalledWith(
+					expect.any(String),
+					expect.any(String),
+					expect.objectContaining({ newTab: true }),
+				);
+			});
+		});
+
+		it("should include noFollow option when checkbox is checked", async () => {
+			const mockOnInsert = jest.fn();
+			const props = {
+				...defaultProps,
+				onInsert: mockOnInsert,
+			};
+
+			renderWithTheme(<LinkPopover {...props} />);
+
+			const urlField = screen.getByTestId("field-url") as HTMLInputElement;
+			fireEvent.change(urlField, { target: { value: "http://example.com" } });
+
+			const noFollowCheckbox = screen.getByTestId("checkbox-noFollow");
+			fireEvent.click(noFollowCheckbox);
+
+			const button = screen.getByTestId("insert-button");
+			fireEvent.click(button);
+
+			await waitFor(() => {
+				expect(mockOnInsert).toHaveBeenCalledWith(
+					expect.any(String),
+					expect.any(String),
+					expect.objectContaining({ noFollow: true }),
+				);
+			});
+		});
+
+		it("should have both options checked when linkData has them", async () => {
+			const props = {
+				...defaultProps,
+				linkData: {
+					url: "http://example.com",
+					newTab: true,
+					noFollow: true,
+					isEditing: true,
+				},
+			};
+
+			renderWithTheme(<LinkPopover {...props} />);
+
+			await waitFor(() => {
+				const newTabCheckbox = screen.getByTestId("checkbox-newTab") as HTMLInputElement;
+				const noFollowCheckbox = screen.getByTestId("checkbox-noFollow") as HTMLInputElement;
+
+				expect(newTabCheckbox.checked).toBe(true);
+				expect(noFollowCheckbox.checked).toBe(true);
+			});
+		});
+	});
+
+	describe("Editing existing links", () => {
+		it("should load existing link data when isEditing is true", async () => {
+			const props = {
+				...defaultProps,
+				linkData: {
+					url: "http://example.com/page",
+					newTab: true,
+					noFollow: false,
+					isEditing: true,
+				},
+			};
+
+			renderWithTheme(<LinkPopover {...props} />);
+
+			await waitFor(() => {
+				const textField = screen.getByTestId("field-text") as HTMLInputElement;
+				expect(textField.value).toBe("Click here");
+			});
+		});
+
+		it("should populate checkbox options from linkData when editing", async () => {
+			const props = {
+				...defaultProps,
+				selectedText: "Edit me",
+				linkData: {
+					url: "http://old-url.com",
+					newTab: true,
+					noFollow: true,
+					isEditing: true,
+				},
+			};
+
+			renderWithTheme(<LinkPopover {...props} />);
+
+			await waitFor(() => {
+				const newTabCheckbox = screen.getByTestId("checkbox-newTab") as HTMLInputElement;
+				const noFollowCheckbox = screen.getByTestId("checkbox-noFollow") as HTMLInputElement;
+
+				expect(newTabCheckbox.checked).toBe(true);
+				expect(noFollowCheckbox.checked).toBe(true);
+			});
+		});
+	});
+
+	describe("Text field handling", () => {
+		it("should update link text when text field changes", async () => {
+			const mockOnInsert = jest.fn();
+			const props = {
+				...defaultProps,
+				onInsert: mockOnInsert,
+			};
+
+			renderWithTheme(<LinkPopover {...props} />);
+
+			const textField = screen.getByTestId("field-text") as HTMLInputElement;
+			fireEvent.change(textField, { target: { value: "New text" } });
+
+			const urlField = screen.getByTestId("field-url") as HTMLInputElement;
+			fireEvent.change(urlField, { target: { value: "http://example.com" } });
+
+			const button = screen.getByTestId("insert-button");
+			fireEvent.click(button);
+
+			await waitFor(() => {
+				expect(mockOnInsert).toHaveBeenCalledWith(
+					"http://example.com",
+					"New text",
+					expect.any(Object),
+				);
+			});
+		});
+	});
+
+	describe("Image link mode", () => {
+		it("should hide text field when isImageLink is true", () => {
+			const props = {
+				...defaultProps,
+				linkData: {
+					url: "http://example.com",
+					newTab: false,
+					noFollow: false,
+					isImageLink: true,
+					isEditing: false,
+				},
+			};
+
+			renderWithTheme(<LinkPopover {...props} />);
+
+			const textField = screen.queryByTestId("field-text");
+			expect(textField).not.toBeInTheDocument();
+		});
+
+		it("should render URL field for image links", () => {
+			const props = {
+				...defaultProps,
+				linkData: {
+					url: "http://example.com",
+					newTab: false,
+					noFollow: false,
+					isImageLink: true,
+					isEditing: false,
+				},
+			};
+
+			renderWithTheme(<LinkPopover {...props} />);
+
+			const urlField = screen.getByTestId("field-url");
+			expect(urlField).toBeTruthy();
+		});
+	});
+});