@griddo/ax 12.4.0 → 12.5.0

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

@@ -0,0 +1,103 @@
+import { wysiwygConfig } from "@ax/components/Fields/Wysiwyg/config";
+
+import { config } from "components";
+
+const schemasConfig = config.schemas.config;
+
+// the module reads the instance config lazily, on every call, so setting it
+// on the mocked schemas is enough: no need to reload the module
+const loadConfigWith = (richTextConfig: unknown) => {
+	schemasConfig.richTextConfig = richTextConfig;
+	return { wysiwygConfig };
+};
+
+describe("Wysiwyg config", () => {
+	afterEach(() => {
+		delete schemasConfig.richTextConfig;
+	});
+
+	describe("imageStyles", () => {
+		const imageStyles = [
+			{ label: "Rounded", className: "img-rounded" },
+			{ label: "Bordered", className: "img-bordered" },
+		];
+
+		it("should pass the configured image classes to Froala as a className map", () => {
+			const { wysiwygConfig } = loadConfigWith({ imageStyles });
+
+			expect(wysiwygConfig().imageStyles).toEqual({
+				"img-rounded": "Rounded",
+				"img-bordered": "Bordered",
+			});
+		});
+
+		it("should add the imageStyle button when image classes are configured", () => {
+			const { wysiwygConfig } = loadConfigWith({ imageStyles });
+
+			expect(wysiwygConfig().imageEditButtons).toContain("imageStyle");
+		});
+
+		it("should not add the imageStyle button when no image classes are configured", () => {
+			const { wysiwygConfig } = loadConfigWith({ paragraphStyles: [] });
+
+			expect(wysiwygConfig().imageStyles).toBeUndefined();
+			expect(wysiwygConfig().imageEditButtons).not.toContain("imageStyle");
+		});
+
+		it("should keep the rest of the image edit buttons untouched", () => {
+			const { wysiwygConfig } = loadConfigWith({ imageStyles, imageResize: true });
+
+			expect(wysiwygConfig().imageEditButtons).toEqual([
+				"imageReplaceGriddo",
+				"imageAlign",
+				"imageCaption",
+				"imageRemove",
+				"|",
+				"imageLinkGriddo",
+				"linkOpen",
+				"linkRemove",
+				"-",
+				"imageDisplay",
+				"imageStyle",
+				"imageAlt",
+				"imageSize",
+			]);
+		});
+	});
+
+	describe("imageResize", () => {
+		it("should enable resizing in percentages when the instance opts in", () => {
+			const { wysiwygConfig } = loadConfigWith({ imageResize: true });
+
+			expect(wysiwygConfig()).toMatchObject({
+				imageResize: true,
+				imageResizeWithPercent: true,
+				imageRoundPercent: true,
+			});
+		});
+
+		it("should add the imageSize button when the instance opts in", () => {
+			const { wysiwygConfig } = loadConfigWith({ imageResize: true });
+
+			expect(wysiwygConfig().imageEditButtons).toContain("imageSize");
+		});
+
+		it("should not resize nor show the imageSize button when the flag is missing", () => {
+			const { wysiwygConfig } = loadConfigWith({ imageStyles: [] });
+
+			expect(wysiwygConfig()).toMatchObject({
+				imageResize: false,
+				imageResizeWithPercent: false,
+				imageRoundPercent: false,
+			});
+			expect(wysiwygConfig().imageEditButtons).not.toContain("imageSize");
+		});
+
+		it("should treat an explicit false like a missing flag", () => {
+			const { wysiwygConfig } = loadConfigWith({ imageResize: false });
+
+			expect(wysiwygConfig().imageResize).toBe(false);
+			expect(wysiwygConfig().imageEditButtons).not.toContain("imageSize");
+		});
+	});
+});

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

@@ -30,8 +30,13 @@ afterEach(() => {
 	vi.clearAllMocks();
 });
 
-// Default mock setup for getValidity
-mockGetValidity.mockReturnValue({ isValid: true, errorText: "" });
+// Default mock setup for getValidity. Va en un beforeEach y no a nivel de
+// módulo porque `clearAllMocks` limpia el historial de llamadas pero no el valor
+// de retorno: los tests que lo ponen en `isValid: false` se lo dejaban puesto al
+// siguiente.
+beforeEach(() => {
+	mockGetValidity.mockReturnValue({ isValid: true, errorText: "" });
+});
 
 describe("FieldsBehavior component rendering", () => {
 	it("should render the component", () => {

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

@@ -28,6 +28,14 @@ vi.mock("react", async () => {
 
 const useMockRef = useRef as MockedFunction<typeof useRef>;
 
+// `useRef` está mockeado a nivel de módulo y sin implementación devuelve
+// undefined. El primer test dejaba puesto un `mockReturnValue` que `clearMocks`
+// no borra —solo limpia el historial de llamadas— y los dos últimos dependían
+// de él: al reordenarlos petaban con `... reading 'current'`.
+beforeEach(() => {
+	useMockRef.mockReturnValue({ current: {} });
+});
+
 describe("ResizePanel component rendering", () => {
 	it("should render the component with fixed panel", () => {
 		const defaultProps: IResizePanelProps = {
@@ -35,9 +43,6 @@ describe("ResizePanel component rendering", () => {
 			rightPanel: <div>Right Panel</div>,
 		};
 
-		const rightPanelRef = { current: {} };
-		useMockRef.mockReturnValue(rightPanelRef);
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
 				<ResizePanel {...defaultProps} />
@@ -59,9 +64,6 @@ describe("ResizePanel component rendering", () => {
 			fixed: false,
 		};
 
-		const rightPanelRef = { current: {} };
-		useMockRef.mockReturnValueOnce(rightPanelRef);
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
 				<ResizePanel {...defaultProps} />

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

@@ -16,26 +16,48 @@ vi.mock("@ax/schemas", () => ({
 
 afterEach(cleanup);
 
-const defaultProps = mock<ISideModalProps>();
+// El escenario base es el que el primer test dejaba puesto en el objeto
+// compartido y del que dependían los siguientes: dos categorías, dos entradas
+// en la whiteList y el modal abierto.
+const makeProps = (overrides: Partial<ISideModalProps> = {}): ISideModalProps =>
+	Object.assign(
+		mock<ISideModalProps>(),
+		{
+			categories: [
+				{ featured: true, label: "All", value: "all" },
+				{ label: "Articles And Events", value: "articlesAndEvents" },
+			],
+			isOpen: true,
+			theme: "default-theme",
+			whiteList: ["EventsDistributor", "ArticlesDistributor"],
+			onClick: vi.fn(),
+			toggleModal: vi.fn(),
+			optionsType: "modules",
+		},
+		overrides,
+	);
 
 describe("SideModal component rendering", () => {
 	it("should render the component visible if isOpen is true", () => {
 		const handleClickMock = vi.fn();
 		const toggleModalMock = vi.fn() as CalledWithMock<void, []> & (() => void);
-		defaultProps.categories = [
-			{ featured: true, label: "All", value: "all" },
-			{ label: "Articles And Events", value: "articlesAndEvents" },
-		];
-		defaultProps.isOpen = true;
-		defaultProps.theme = "default-theme";
-		defaultProps.whiteList = ["EventsDistributor", "ArticlesDistributor"];
-		defaultProps.onClick = handleClickMock;
-		defaultProps.toggleModal = toggleModalMock;
-		defaultProps.optionsType = "modules";
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<SideModal {...defaultProps} />
+				<SideModal
+					{...makeProps({
+						categories: [
+							{ featured: true, label: "All", value: "all" },
+							{ label: "Articles And Events", value: "articlesAndEvents" },
+						],
+						isOpen: true,
+						theme: "default-theme",
+						whiteList: ["EventsDistributor", "ArticlesDistributor"],
+						onClick: handleClickMock,
+						toggleModal: toggleModalMock,
+						optionsType: "modules",
+					})}
+				/>
 			</ThemeProvider>,
 		);
 
@@ -48,20 +70,23 @@ describe("SideModal component rendering", () => {
 	it("should render the component hidden if isOpen is false", () => {
 		const handleClickMock = vi.fn();
 		const toggleModalMock = vi.fn() as CalledWithMock<void, []> & (() => void);
-		defaultProps.categories = [
-			{ featured: true, label: "All", value: "all" },
-			{ label: "Articles And Events", value: "articlesAndEvents" },
-		];
-		defaultProps.isOpen = false;
-		defaultProps.theme = "default-theme";
-		defaultProps.whiteList = ["EventsDistributor", "ArticlesDistributor"];
-		defaultProps.onClick = handleClickMock;
-		defaultProps.toggleModal = toggleModalMock;
-		defaultProps.optionsType = "modules";
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<SideModal {...defaultProps} />
+				<SideModal
+					{...makeProps({
+						categories: [
+							{ featured: true, label: "All", value: "all" },
+							{ label: "Articles And Events", value: "articlesAndEvents" },
+						],
+						isOpen: false,
+						theme: "default-theme",
+						whiteList: ["EventsDistributor", "ArticlesDistributor"],
+						onClick: handleClickMock,
+						toggleModal: toggleModalMock,
+						optionsType: "modules",
+					})}
+				/>
 			</ThemeProvider>,
 		);
 
@@ -72,10 +97,9 @@ describe("SideModal component rendering", () => {
 	});
 
 	it("should render optiontype as title", () => {
-		defaultProps.isOpen = true;
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<SideModal {...defaultProps} />
+				<SideModal {...makeProps({ isOpen: true })} />
 			</ThemeProvider>,
 		);
 
@@ -87,7 +111,7 @@ describe("SideModal component rendering", () => {
 	it("should render close button", () => {
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<SideModal {...defaultProps} />
+				<SideModal {...makeProps()} />
 			</ThemeProvider>,
 		);
 
@@ -98,7 +122,7 @@ describe("SideModal component rendering", () => {
 	it("should render options", () => {
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<SideModal {...defaultProps} />
+				<SideModal {...makeProps()} />
 			</ThemeProvider>,
 		);
 
@@ -110,7 +134,7 @@ describe("SideModal component rendering", () => {
 	it("should render option thumbnails", () => {
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<SideModal {...defaultProps} />
+				<SideModal {...makeProps()} />
 			</ThemeProvider>,
 		);
 
@@ -122,21 +146,24 @@ describe("SideModal component rendering", () => {
 	it("should render all options when All filter is selected", () => {
 		const handleClickMock = vi.fn();
 		const toggleModalMock = vi.fn() as CalledWithMock<void, []> & (() => void);
-		defaultProps.categories = [
-			{ featured: true, label: "All", value: "all" },
-			{ label: "Content", value: "content" },
-			{ label: "Collections", value: "collections" },
-		];
-		defaultProps.isOpen = true;
-		defaultProps.theme = "default-theme";
-		defaultProps.whiteList = ["BasicContent", "CardCollection"];
-		defaultProps.onClick = handleClickMock;
-		defaultProps.toggleModal = toggleModalMock;
-		defaultProps.optionsType = "modules";
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<SideModal {...defaultProps} />
+				<SideModal
+					{...makeProps({
+						categories: [
+							{ featured: true, label: "All", value: "all" },
+							{ label: "Content", value: "content" },
+							{ label: "Collections", value: "collections" },
+						],
+						isOpen: true,
+						theme: "default-theme",
+						whiteList: ["BasicContent", "CardCollection"],
+						onClick: handleClickMock,
+						toggleModal: toggleModalMock,
+						optionsType: "modules",
+					})}
+				/>
 			</ThemeProvider>,
 		);
 		const filters = screen.getAllByTestId("side-modal-nav-link");
@@ -158,20 +185,23 @@ describe("SideModal component rendering", () => {
 	it("should render components modal if option type is components", () => {
 		const handleClickMock = vi.fn();
 		const toggleModalMock = vi.fn() as CalledWithMock<void, []> & (() => void);
-		defaultProps.componentOptions = {
-			image: { component: "LinkableImage", editorID: 11, parentEditorID: 6 },
-			video: { component: "Video", editorID: 12, parentEditorID: 6 },
-		};
-		defaultProps.isOpen = true;
-		defaultProps.theme = "default-theme";
-		defaultProps.whiteList = ["LinkableImage", "Video"];
-		defaultProps.onClick = handleClickMock;
-		defaultProps.toggleModal = toggleModalMock;
-		defaultProps.optionsType = "components";
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<SideModal {...defaultProps} />
+				<SideModal
+					{...makeProps({
+						componentOptions: {
+							image: { component: "LinkableImage", editorID: 11, parentEditorID: 6 },
+							video: { component: "Video", editorID: 12, parentEditorID: 6 },
+						},
+						isOpen: true,
+						theme: "default-theme",
+						whiteList: ["LinkableImage", "Video"],
+						onClick: handleClickMock,
+						toggleModal: toggleModalMock,
+						optionsType: "components",
+					})}
+				/>
 			</ThemeProvider>,
 		);
 		const options = screen.getAllByTestId("side-modal-option");
@@ -184,21 +214,24 @@ describe("SideModal component events", () => {
 	it("should call handle click and toggle modal on click option", () => {
 		const handleClickMock = vi.fn();
 		const toggleModalMock = vi.fn() as CalledWithMock<void, []> & (() => void);
-		defaultProps.categories = [
-			{ featured: true, label: "All", value: "all" },
-			{ label: "Articles And Events", value: "articlesAndEvents" },
-		];
-		defaultProps.componentOptions = undefined;
-		defaultProps.isOpen = true;
-		defaultProps.theme = "default-theme";
-		defaultProps.whiteList = ["Accordion", "AddressCollection"];
-		defaultProps.onClick = handleClickMock;
-		defaultProps.toggleModal = toggleModalMock;
-		defaultProps.optionsType = "modules";
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<SideModal {...defaultProps} />
+				<SideModal
+					{...makeProps({
+						categories: [
+							{ featured: true, label: "All", value: "all" },
+							{ label: "Articles And Events", value: "articlesAndEvents" },
+						],
+						componentOptions: undefined,
+						isOpen: true,
+						theme: "default-theme",
+						whiteList: ["Accordion", "AddressCollection"],
+						onClick: handleClickMock,
+						toggleModal: toggleModalMock,
+						optionsType: "modules",
+					})}
+				/>
 			</ThemeProvider>,
 		);
 
@@ -214,21 +247,24 @@ describe("SideModal component events", () => {
 	it("should select filter on click", () => {
 		const handleClickMock = vi.fn();
 		const toggleModalMock = vi.fn() as CalledWithMock<void, []> & (() => void);
-		defaultProps.categories = [
-			{ featured: true, label: "All", value: "all" },
-			{ label: "Content", value: "content" },
-			{ label: "Collections", value: "collections" },
-		];
-		defaultProps.isOpen = true;
-		defaultProps.theme = "default-theme";
-		defaultProps.whiteList = ["BasicContent", "CardCollection"];
-		defaultProps.onClick = handleClickMock;
-		defaultProps.toggleModal = toggleModalMock;
-		defaultProps.optionsType = "modules";
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<SideModal {...defaultProps} />
+				<SideModal
+					{...makeProps({
+						categories: [
+							{ featured: true, label: "All", value: "all" },
+							{ label: "Content", value: "content" },
+							{ label: "Collections", value: "collections" },
+						],
+						isOpen: true,
+						theme: "default-theme",
+						whiteList: ["BasicContent", "CardCollection"],
+						onClick: handleClickMock,
+						toggleModal: toggleModalMock,
+						optionsType: "modules",
+					})}
+				/>
 			</ThemeProvider>,
 		);
 
@@ -253,21 +289,24 @@ describe("SideModal component events", () => {
 	it("should filter by category on click", () => {
 		const handleClickMock = vi.fn();
 		const toggleModalMock = vi.fn() as CalledWithMock<void, []> & (() => void);
-		defaultProps.categories = [
-			{ featured: true, label: "All", value: "all" },
-			{ label: "Content", value: "content" },
-			{ label: "Collections", value: "collections" },
-		];
-		defaultProps.isOpen = true;
-		defaultProps.theme = "default-theme";
-		defaultProps.whiteList = ["BasicContent", "CardCollection"];
-		defaultProps.onClick = handleClickMock;
-		defaultProps.toggleModal = toggleModalMock;
-		defaultProps.optionsType = "modules";
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<SideModal {...defaultProps} />
+				<SideModal
+					{...makeProps({
+						categories: [
+							{ featured: true, label: "All", value: "all" },
+							{ label: "Content", value: "content" },
+							{ label: "Collections", value: "collections" },
+						],
+						isOpen: true,
+						theme: "default-theme",
+						whiteList: ["BasicContent", "CardCollection"],
+						onClick: handleClickMock,
+						toggleModal: toggleModalMock,
+						optionsType: "modules",
+					})}
+				/>
 			</ThemeProvider>,
 		);
 
@@ -285,22 +324,25 @@ describe("SideModal component events", () => {
 	it("should filter by query", () => {
 		const handleClickMock = vi.fn();
 		const toggleModalMock = vi.fn() as CalledWithMock<void, []> & (() => void);
-		defaultProps.categories = [
-			{ featured: true, label: "All", value: "all" },
-			{ label: "Content", value: "content" },
-			{ label: "Collections", value: "collections" },
-		];
-		defaultProps.isOpen = true;
-		defaultProps.theme = "default-theme";
-		defaultProps.whiteList = ["BasicContent", "CardCollection"];
-		defaultProps.onClick = handleClickMock;
-		defaultProps.toggleModal = toggleModalMock;
-		defaultProps.optionsType = "modules";
-		defaultProps.showSearch = true;
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<SideModal {...defaultProps} />
+				<SideModal
+					{...makeProps({
+						categories: [
+							{ featured: true, label: "All", value: "all" },
+							{ label: "Content", value: "content" },
+							{ label: "Collections", value: "collections" },
+						],
+						isOpen: true,
+						theme: "default-theme",
+						whiteList: ["BasicContent", "CardCollection"],
+						onClick: handleClickMock,
+						toggleModal: toggleModalMock,
+						optionsType: "modules",
+						showSearch: true,
+					})}
+				/>
 			</ThemeProvider>,
 		);
 
@@ -322,9 +364,11 @@ describe("SideModal component events", () => {
 			map[event] = callback;
 		});
 
+		const toggleModal = vi.fn();
+
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<SideModal {...defaultProps} />
+				<SideModal {...makeProps({ toggleModal })} />
 			</ThemeProvider>,
 		);
 
@@ -332,7 +376,7 @@ describe("SideModal component events", () => {
 			target: document.body,
 		});
 
-		expect(defaultProps.toggleModal).toHaveBeenCalled();
+		expect(toggleModal).toHaveBeenCalled();
 	});
 
 	it("should not call toggle modal on click inside the modal", () => {
@@ -342,9 +386,11 @@ describe("SideModal component events", () => {
 			map[event] = callback;
 		});
 
+		const toggleModal = vi.fn();
+
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<SideModal {...defaultProps} />
+				<SideModal {...makeProps({ toggleModal })} />
 			</ThemeProvider>,
 		);
 
@@ -354,6 +400,6 @@ describe("SideModal component events", () => {
 			target: title,
 		});
 
-		expect(defaultProps.toggleModal).not.toHaveBeenCalled();
+		expect(toggleModal).not.toHaveBeenCalled();
 	});
 });