@griddo/ax 11.11.8-rc.1 → 11.12.0

package/config/jest/componentsMock.js

@@ -3,13 +3,11 @@ module.exports = {
 	config: {
 		schemas: {
 			config: {
-				themes: [
-					{
-						label: "theme",
-						value: "1",
-						default: false,
-					},
-				],
+				themes: {
+					label: "theme",
+					value: "1",
+					default: false,
+				},
 				moduleCategories: [
 					{
 						label: "Developing",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.11.8-rc.1",
+  "version": "11.12.0",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -217,5 +217,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a40684db16cac0b3d08bb0437fad6a825d8451e6"
+  "gitHead": "47dd37fe46a7bb09187b0c475c4ece29a6abc289"
 }

package/src/__tests__/components/Browser/Browser.test.tsx

@@ -1,473 +1,122 @@
-import { MemoryRouter } from "react-router-dom";
+import * as React from "react";
+import { BrowserRouter } from "react-router-dom";
 
-import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { mock } from "jest-mock-extended";
 import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent, waitFor, act } from "@testing-library/react";
+import { mock } from "jest-mock-extended";
 import "@testing-library/jest-dom";
 
-import Browser, { type IBrowserProps } from "@ax/components/Browser";
 import { parseTheme } from "@ax/helpers";
+import Browser, { IBrowserProps } from "@ax/components/Browser";
 import globalTheme from "@ax/themes/theme.json";
 
-let defaultProps: IBrowserProps;
-
-const renderBrowser = (props: IBrowserProps) =>
-	render(
-		<MemoryRouter>
-			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Browser {...props} />
-			</ThemeProvider>
-		</MemoryRouter>,
-	);
-
-beforeEach(() => {
-	global.ResizeObserver = jest.fn().mockImplementation(() => ({
-		observe: jest.fn(),
-		unobserve: jest.fn(),
-		disconnect: jest.fn(),
-	}));
-
-	defaultProps = mock<IBrowserProps>();
-	defaultProps.content = {};
-	defaultProps.browserRef = { current: null };
-	defaultProps.cloudinaryName = "thesaurus-cms";
-	defaultProps.disabled = false;
-	defaultProps.footer = {};
-	defaultProps.header = {};
-	defaultProps.isPage = true;
-	defaultProps.siteID = 108;
-	defaultProps.siteLangs = [{}];
-	defaultProps.socials = {
-		facebook: "https://www.facebook.com/SlothSanctuaryCostaRica",
-		instagram: "https://www.instagram.com/sloth.sanctuary.costa.rica/",
-	};
-	defaultProps.theme = "default-theme";
-	defaultProps.url = "/gallery-stuff";
-});
-
 afterEach(() => {
 	jest.resetAllMocks();
 	cleanup();
 });
 
+const defaultProps = mock<IBrowserProps>();
+
+defaultProps.content = {};
+defaultProps.browserRef = {
+	current: null,
+};
+defaultProps.cloudinaryName = "thesaurus-cms";
+defaultProps.disabled = false;
+defaultProps.footer = {};
+defaultProps.header = {};
+defaultProps.isPage = true;
+defaultProps.siteID = 108;
+defaultProps.siteLangs = [{}];
+defaultProps.socials = {
+	facebook: "https://www.facebook.com/SlothSanctuaryCostaRica",
+	instagram: "https://www.instagram.com/sloth.sanctuary.costa.rica/",
+};
+defaultProps.theme = "default-theme";
+defaultProps.url = "/gallery-stuff";
+
 describe("Browser component rendering", () => {
 	it("should render the component", () => {
 		defaultProps.isPreview = false;
 		defaultProps.showIframe = true;
 
-		renderBrowser(defaultProps);
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<Browser {...defaultProps} />
+			</ThemeProvider>,
+		);
 
-		expect(screen.getByTestId("nav-actions-wrapper")).toBeInTheDocument();
-		expect(screen.getByTestId("browser-wrapper")).toBeInTheDocument();
-		expect(screen.getByTestId("navbar-iframe-wrapper")).toBeInTheDocument();
-		expect(screen.queryByTestId("browser-content-wrapper")).not.toBeInTheDocument();
+		const navActionsWrapper = screen.queryByTestId("nav-actions-wrapper");
+		expect(navActionsWrapper).not.toBeTruthy();
+		const browserWrapper = screen.getByTestId("browser-wrapper");
+		expect(browserWrapper).toBeTruthy();
+		const showIframeWrapper = screen.queryByTestId("navbar-iframe-wrapper");
+		expect(showIframeWrapper).toBeTruthy();
+		const browserContentWrapper = screen.queryByTestId("browser-content-wrapper");
+		expect(browserContentWrapper).not.toBeTruthy();
 	});
 
-	it("should render the browserContent", () => {
+it("should render the browserContent", () => {
 		defaultProps.isPreview = false;
 		defaultProps.showIframe = false;
-
-		renderBrowser(defaultProps);
-
-		expect(screen.getByTestId("nav-actions-wrapper")).toBeInTheDocument();
-		expect(screen.queryByTestId("navbar-iframe-wrapper")).not.toBeInTheDocument();
-		expect(screen.getByTestId("browser-content-wrapper")).toBeInTheDocument();
+		const deleteModuleActionMock = defaultProps.actions?.deleteModuleAction as jest.MockedFunction<
+			(editorID: number[]) => void
+		>;
+		const duplicateModuleActionMock = defaultProps.actions?.duplicateModuleAction as jest.MockedFunction<
+			(editorID: number[]) => number
+		>;
+		const setSelectedContentActionMock = defaultProps.actions?.setSelectedContentAction as jest.MockedFunction<
+			() => void
+		>;
+
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<Browser {...defaultProps} />
+			</ThemeProvider>,
+		);
+		const navActionsWrapper = screen.queryByTestId("nav-actions-wrapper");
+		expect(navActionsWrapper).not.toBeTruthy();
+		const showIframeWrapper = screen.queryByTestId("navbar-iframe-wrapper");
+		expect(showIframeWrapper).not.toBeTruthy();
+		const browserContentWrapper = screen.queryByTestId("browser-content-wrapper");
+		expect(browserContentWrapper).toBeTruthy();
 	});
 
-	it("should change the iFrame width when changing the resolution", () => {
+	it("should change the iFrame width when changing the resulution", () => {
 		defaultProps.isPreview = true;
 		defaultProps.showIframe = true;
-
-		renderBrowser(defaultProps);
-
-		expect(screen.getByTestId("nav-actions-wrapper")).toBeInTheDocument();
-		expect(screen.getByTestId("navbar-iframe-wrapper")).toBeInTheDocument();
-		expect(screen.queryByTestId("browser-content-wrapper")).not.toBeInTheDocument();
+		const deleteModuleActionMock = defaultProps.actions?.deleteModuleAction as jest.MockedFunction<
+			(editorID: number[]) => void
+		>;
+		const duplicateModuleActionMock = defaultProps.actions?.duplicateModuleAction as jest.MockedFunction<
+			(editorID: number[]) => number
+		>;
+		const setSelectedContentActionMock = defaultProps.actions?.setSelectedContentAction as jest.MockedFunction<
+			() => void
+		>;
+
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<Browser {...defaultProps} />
+			</ThemeProvider>,
+		);
+		const navActionsWrapper = screen.queryByTestId("nav-actions-wrapper");
+		expect(navActionsWrapper).toBeTruthy();
+		const showIframeWrapper = screen.queryByTestId("navbar-iframe-wrapper");
+		expect(showIframeWrapper).toBeTruthy();
+		const browserContentWrapper = screen.queryByTestId("browser-content-wrapper");
+		expect(browserContentWrapper).not.toBeTruthy();
 
 		const iframe = document.querySelector("iframe");
-		expect(iframe).toBeInTheDocument();
+		expect(iframe).toBeTruthy();
 		expect(iframe?.width).toBe("100%");
 
-		fireEvent.click(screen.getByTestId("icon-res-tablet"));
+		const iconActionTablet = screen.getByTestId("icon-res-tablet");
+		fireEvent.click(iconActionTablet);
 		expect(iframe?.width).toBe("768px");
 
-		fireEvent.click(screen.getByTestId("icon-res-phone"));
+		const iconActionPhone = screen.getByTestId("icon-res-phone");
+		fireEvent.click(iconActionPhone);
 		expect(iframe?.width).toBe("425px");
 	});
-
-	it("should display the url in the navbar", () => {
-		renderBrowser(defaultProps);
-
-		expect(screen.getByText("/gallery-stuff")).toBeInTheDocument();
-	});
-
-	it("should reset localStorage selectedID to '0' on mount", () => {
-		localStorage.setItem("selectedID", "42");
-
-		renderBrowser(defaultProps);
-
-		expect(localStorage.getItem("selectedID")).toBe("0");
-	});
-
-	it("should set iframe width to the current resolution in non-preview mode", () => {
-		defaultProps.isPreview = false;
-		defaultProps.showIframe = true;
-
-		renderBrowser(defaultProps);
-
-		const iframe = document.querySelector("iframe");
-		expect(iframe?.width).toBe("1280px");
-	});
-});
-
-describe("Browser editorType variants", () => {
-	it("should not render the navbar when editorType is form", () => {
-		defaultProps.editorType = "form";
-		defaultProps.showIframe = true;
-
-		renderBrowser(defaultProps);
-
-		expect(screen.queryByTestId("nav-actions-wrapper")).not.toBeInTheDocument();
-		expect(screen.getByTestId("navbar-iframe-wrapper")).toBeInTheDocument();
-	});
-
-	it("should show the headings editor banner when editorType is headings", () => {
-		defaultProps.editorType = "headings";
-		defaultProps.showIframe = true;
-
-		renderBrowser(defaultProps);
-
-		expect(screen.getByTestId("floating-note-wrapper")).toBeInTheDocument();
-		expect(screen.getByTestId("floating-note-message")).toHaveTextContent(
-			"You are viewing the Headings editor of this page",
-		);
-	});
-
-	it("should call toggleHeadingsPreview when clicking Back to Page Editor in headings mode", () => {
-		defaultProps.editorType = "headings";
-		defaultProps.showIframe = true;
-		const toggleHeadingsPreviewMock = jest.fn();
-		defaultProps.toggleHeadingsPreview = toggleHeadingsPreviewMock;
-
-		renderBrowser(defaultProps);
-
-		fireEvent.click(screen.getByRole("button", { name: "Back to Page Editor" }));
-
-		expect(toggleHeadingsPreviewMock).toHaveBeenCalledTimes(1);
-	});
-
-	it("should show the keywords editor banner when editorType is keywords", () => {
-		defaultProps.editorType = "keywords";
-		defaultProps.showIframe = true;
-
-		renderBrowser(defaultProps);
-
-		expect(screen.getByTestId("floating-note-wrapper")).toBeInTheDocument();
-		expect(screen.getByTestId("floating-note-message")).toHaveTextContent(
-			"You are viewing the Keywords editor of this page",
-		);
-	});
-
-	it("should call toggleKeywordsPreview when clicking Back to Page Editor in keywords mode", () => {
-		defaultProps.editorType = "keywords";
-		defaultProps.showIframe = true;
-		const toggleKeywordsPreviewMock = jest.fn();
-		defaultProps.toggleKeywordsPreview = toggleKeywordsPreviewMock;
-
-		renderBrowser(defaultProps);
-
-		fireEvent.click(screen.getByRole("button", { name: "Back to Page Editor" }));
-
-		expect(toggleKeywordsPreviewMock).toHaveBeenCalledTimes(1);
-	});
-
-	it("should render nav-actions-wrapper for headings editor", () => {
-		defaultProps.editorType = "headings";
-		defaultProps.showIframe = true;
-
-		renderBrowser(defaultProps);
-
-		expect(screen.getByTestId("nav-actions-wrapper")).toBeInTheDocument();
-	});
-
-	it("should render nav-actions-wrapper for keywords editor", () => {
-		defaultProps.editorType = "keywords";
-		defaultProps.showIframe = true;
-
-		renderBrowser(defaultProps);
-
-		expect(screen.getByTestId("nav-actions-wrapper")).toBeInTheDocument();
-	});
-
-	it("should display the url in the headings editor navbar", () => {
-		defaultProps.editorType = "headings";
-
-		renderBrowser(defaultProps);
-
-		expect(screen.getByText("/gallery-stuff")).toBeInTheDocument();
-	});
-
-	it("should display the url in the keywords editor navbar", () => {
-		defaultProps.editorType = "keywords";
-
-		renderBrowser(defaultProps);
-
-		expect(screen.getByText("/gallery-stuff")).toBeInTheDocument();
-	});
-
-	it("should not show floating note for form editor", () => {
-		defaultProps.editorType = "form";
-		defaultProps.showIframe = true;
-
-		renderBrowser(defaultProps);
-
-		expect(screen.queryByTestId("floating-note-wrapper")).not.toBeInTheDocument();
-	});
-});
-
-describe("Browser iframe URL construction", () => {
-	it("should build the correct iframe src URL", () => {
-		defaultProps.isPreview = false;
-		defaultProps.showIframe = true;
-
-		renderBrowser(defaultProps);
-
-		const iframe = document.querySelector("iframe");
-		expect(iframe?.src).toBe("http://localhost/editor/page-preview?preview=false&disabled=false&type=page");
-	});
-
-	it("should include headingFilter param in the URL when a specific filter is set", () => {
-		defaultProps.editorType = "headings";
-		defaultProps.headingFilter = "h2";
-		defaultProps.showIframe = true;
-
-		renderBrowser(defaultProps);
-
-		const iframe = document.querySelector("iframe");
-		expect(iframe?.src).toContain("headingFilter=h2");
-	});
-
-	it("should not include headingFilter param in the URL when headingFilter is 'all'", () => {
-		defaultProps.editorType = "headings";
-		defaultProps.headingFilter = "all";
-		defaultProps.showIframe = true;
-
-		renderBrowser(defaultProps);
-
-		const iframe = document.querySelector("iframe");
-		expect(iframe?.src).not.toContain("headingFilter");
-	});
-
-	it("should include keywordFilter param in the URL when keywordsFilter has values", () => {
-		defaultProps.editorType = "keywords";
-		defaultProps.keywordsFilter = ["seo"];
-		defaultProps.showIframe = true;
-
-		renderBrowser(defaultProps);
-
-		const iframe = document.querySelector("iframe");
-		expect(iframe?.src).toContain("keywordFilter=seo");
-	});
-
-	it("should not include keywordFilter param in the URL when keywordsFilter is empty", () => {
-		defaultProps.editorType = "keywords";
-		defaultProps.keywordsFilter = [];
-		defaultProps.showIframe = true;
-
-		renderBrowser(defaultProps);
-
-		const iframe = document.querySelector("iframe");
-		expect(iframe?.src).not.toContain("keywordFilter");
-	});
-
-	it("should include all keywords in the URL when keywordsFilter has multiple values", () => {
-		defaultProps.editorType = "keywords";
-		defaultProps.keywordsFilter = ["seo", "cms"];
-		defaultProps.showIframe = true;
-
-		renderBrowser(defaultProps);
-
-		const iframe = document.querySelector("iframe");
-		expect(iframe?.src).toContain("keywordFilter=seo,cms");
-	});
-});
-
-describe("Browser ResizeObserver lifecycle", () => {
-	it("should update dimensions based on containerWidth when ResizeObserver fires", () => {
-		global.ResizeObserver = jest.fn().mockImplementation((callback: ResizeObserverCallback) => ({
-			observe: jest.fn(() =>
-				callback([{ contentRect: { width: 1024 } }] as ResizeObserverEntry[], {} as ResizeObserver),
-			),
-			unobserve: jest.fn(),
-			disconnect: jest.fn(),
-		}));
-
-		defaultProps.isPreview = false;
-		defaultProps.showIframe = true;
-
-		renderBrowser(defaultProps);
-
-		// calcDefaultResolution(1024, options) → "1024px"; calcAutoZoom(1024, "1024px") → "100"
-		expect(screen.getByText("1024px")).toBeInTheDocument();
-	});
-
-	it("should disconnect ResizeObserver on unmount", () => {
-		const disconnectMock = jest.fn();
-		global.ResizeObserver = jest.fn().mockImplementation(() => ({
-			observe: jest.fn(),
-			unobserve: jest.fn(),
-			disconnect: disconnectMock,
-		}));
-
-		defaultProps.showIframe = true;
-
-		const { unmount } = renderBrowser(defaultProps);
-		unmount();
-
-		expect(disconnectMock).toHaveBeenCalledTimes(1);
-	});
-
-	it("should not update dimensions when ResizeObserver fires with zero width", () => {
-		global.ResizeObserver = jest.fn().mockImplementation((callback: ResizeObserverCallback) => ({
-			observe: jest.fn(() => callback([{ contentRect: { width: 0 } }] as ResizeObserverEntry[], {} as ResizeObserver)),
-			unobserve: jest.fn(),
-			disconnect: jest.fn(),
-		}));
-
-		defaultProps.isPreview = false;
-		defaultProps.showIframe = true;
-
-		renderBrowser(defaultProps);
-
-		// default resolution remains "1280px" since width=0 is ignored
-		expect(screen.getByText("1280px")).toBeInTheDocument();
-	});
-});
-
-describe("Browser compact mode", () => {
-	beforeEach(() => {
-		global.ResizeObserver = jest.fn().mockImplementation((callback: ResizeObserverCallback) => ({
-			observe: jest.fn(() =>
-				callback([{ contentRect: { width: 300 } }] as ResizeObserverEntry[], {} as ResizeObserver),
-			),
-			unobserve: jest.fn(),
-			disconnect: jest.fn(),
-		}));
-	});
-
-	it("should show 'Back' button and omit 'of this page' in headings mode when compact", () => {
-		defaultProps.editorType = "headings";
-		defaultProps.showIframe = true;
-
-		renderBrowser(defaultProps);
-
-		expect(screen.getByRole("button", { name: "Back" })).toBeInTheDocument();
-		expect(screen.getByTestId("floating-note-message")).not.toHaveTextContent("of this page");
-	});
-
-	it("should show 'Back' button in keywords mode when compact", () => {
-		defaultProps.editorType = "keywords";
-		defaultProps.showIframe = true;
-
-		renderBrowser(defaultProps);
-
-		expect(screen.getByRole("button", { name: "Back" })).toBeInTheDocument();
-		expect(screen.getByTestId("floating-note-message")).not.toHaveTextContent("of this page");
-	});
-});
-
-describe("Browser resolution and zoom selectors", () => {
-	it("should render both resolution and zoom select components in non-preview mode", () => {
-		defaultProps.isPreview = false;
-		defaultProps.showIframe = true;
-
-		const { container } = renderBrowser(defaultProps);
-
-		expect(container.querySelectorAll('[data-testid="select-component"]')).toHaveLength(2);
-	});
-
-	it("should display the default resolution '1280px' in the resolution select", () => {
-		defaultProps.isPreview = false;
-		defaultProps.showIframe = true;
-
-		renderBrowser(defaultProps);
-
-		expect(screen.getByText("1280px")).toBeInTheDocument();
-	});
-
-	it("should display the default zoom '100%' in the zoom select", () => {
-		defaultProps.isPreview = false;
-		defaultProps.showIframe = true;
-
-		renderBrowser(defaultProps);
-
-		expect(screen.getByText("100%")).toBeInTheDocument();
-	});
-
-	it("should update the displayed resolution when a new option is selected", async () => {
-		defaultProps.isPreview = false;
-		defaultProps.showIframe = true;
-
-		renderBrowser(defaultProps);
-
-		await act(async () => userEvent.click(screen.getByLabelText("resolution")));
-		await act(async () => userEvent.click(screen.getByText("1024px")));
-
-		expect(screen.getByText("1024px")).toBeInTheDocument();
-	});
-
-	it("should update the displayed zoom when a new option is selected", async () => {
-		defaultProps.isPreview = false;
-		defaultProps.showIframe = true;
-
-		renderBrowser(defaultProps);
-
-		await act(async () => userEvent.click(screen.getByLabelText("zoom")));
-		await act(async () => userEvent.click(screen.getByText("75%")));
-
-		expect(screen.getByText("75%")).toBeInTheDocument();
-	});
-
-	it("should display a custom auto-zoom percentage when it is not a standard zoom option", () => {
-		global.ResizeObserver = jest.fn().mockImplementation((callback: ResizeObserverCallback) => ({
-			observe: jest.fn(() =>
-				callback([{ contentRect: { width: 300 } }] as ResizeObserverEntry[], {} as ResizeObserver),
-			),
-			unobserve: jest.fn(),
-			disconnect: jest.fn(),
-		}));
-
-		defaultProps.isPreview = false;
-		defaultProps.showIframe = true;
-
-		renderBrowser(defaultProps);
-
-		// calcDefaultResolution(300, options) → "360px"; calcAutoZoom(300, "360px") = floor(83.33) = "83"
-		expect(screen.getByText("83%")).toBeInTheDocument();
-	});
-
-	it("should restore auto-zoom when Reset is selected", async () => {
-		global.ResizeObserver = jest.fn().mockImplementation((callback: ResizeObserverCallback) => ({
-			observe: jest.fn(() =>
-				callback([{ contentRect: { width: 300 } }] as ResizeObserverEntry[], {} as ResizeObserver),
-			),
-			unobserve: jest.fn(),
-			disconnect: jest.fn(),
-		}));
-
-		defaultProps.isPreview = false;
-		defaultProps.showIframe = true;
-
-		renderBrowser(defaultProps);
-
-		expect(screen.getByText("83%")).toBeInTheDocument();
-
-		// Reset is enabled because "83" is not in the standard zoom options
-		await act(async () => userEvent.click(screen.getByLabelText("zoom")));
-		await act(async () => userEvent.click(screen.getByText("Reset")));
-
-		// After reset: calcAutoZoom(clientWidth=0, "360px") = "100" → zoom select shows "100%"
-		expect(screen.getByText("100%")).toBeInTheDocument();
-	});
 });

package/src/__tests__/components/ConfigPanel/ConfigPanel.test.tsx

@@ -137,7 +137,9 @@ defaultProps.schema = {
 		},
 	],
 };
-defaultProps.setSelectedTab.mockImplementation(jest.fn());
+defaultProps.setSelectedTab.mockImplementation((tab) => {
+	console.log("Tab seleccionada:", tab);
+});
 defaultProps.actions = { deleteModule: jest.fn() };
 defaultProps.breadcrumb = [
 	{