@griddo/ax 12.3.0 → 12.5.0

package/src/__tests__/components/Fields/ComponentContainer/ComponentContainer.test.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 import { parseTheme } from "@ax/helpers";
@@ -10,299 +10,250 @@ import globalTheme from "@ax/themes/theme.json";
 import ComponentContainer, { IComponentContainerProps } from "@ax/components/Fields/ComponentContainer";
 
 afterEach(cleanup);
-const defaultProps = mock<IComponentContainerProps>();
 
-describe("ComponentContainer component rendering", () => {
-	afterEach(() => {
-		jest.resetAllMocks();
+// Cada test construye sus propios props. Antes había un único `mock<...>()` a
+// nivel de módulo que los tests iban mutando, así que cada uno heredaba lo que
+// hubieran dejado los anteriores: reordenarlos o lanzar uno suelto los rompía.
+const makeProps = (overrides: Partial<IComponentContainerProps> = {}): IComponentContainerProps =>
+	Object.assign(mock<IComponentContainerProps>(), overrides);
+
+const makeActions = (): IComponentContainerProps["actions"] => ({
+	addComponentAction: vi.fn(),
+	deleteModuleAction: vi.fn(),
+	duplicateModuleAction: vi.fn(),
+	copyModuleAction: vi.fn(),
+	replaceModuleAction: vi.fn(),
+});
+
+const renderContainer = (props: IComponentContainerProps) =>
+	render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<ComponentContainer {...props} />
+		</ThemeProvider>,
+	);
+
+const linkValue = {
+	component: "Link",
+	text: "Link 1",
+	style: "primary",
+	url: {
+		url: "",
+		linkTo: null,
+		newTab: false,
+		noFollow: false,
+		size: null,
+		icon: null,
+		linkContainer: null,
+	},
+	editorID: 5,
+	parentEditorID: 4,
+};
+
+const basicContent = {
+	component: "BasicContent",
+	title: {
+		content: "Title",
+		tag: "h1",
+	},
+	anchorID: null,
+	verticalSpacing: "medium",
+	layout: "L001",
+	theme: "default",
+	moduleOrder: null,
+	subtitle:
+		"Lorem ipsum dolor sit amet, consectetur adipiscsdcdscing elit. Morbi dignissim ut nibh eget porttitor. Nunc eleifend mollis arcu.sdcsdc",
+	content:
+		"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dignissim ut nibh eget porttitor. Nunc eleifend mollis arcu. Lorem ipsum d</p>",
+	primaryLink: linkValue,
+	secondaryLink: {
+		component: "Link",
+		editorID: 6,
+		parentEditorID: 4,
+	},
+	additionalContent: {
+		image: {
+			component: "LinkableImage",
+			editorID: 7,
+			parentEditorID: 4,
+		},
+		video: {
+			component: "Video",
+			editorID: 8,
+			parentEditorID: 4,
+		},
+	},
+	editorID: 4,
+	parentEditorID: 3,
+};
+
+const sectionContent = {
+	component: "Section",
+	name: "Main Content",
+	modules: [basicContent],
+	sectionPosition: 2,
+	editorID: 3,
+	parentEditorID: 1,
+	key: "mainContent",
+};
+
+const imageVideoValue = {
+	image: { component: "LinkableImage", editorID: 2, parentEditorID: 1 },
+	video: { component: "Video", editorID: 3, parentEditorID: 1 },
+};
+
+const imageVideoWithThumbnail = {
+	image: { component: "LinkableImage", editorID: 2, parentEditorID: 1 },
+	video: {
+		component: "Video",
+		editorID: 3,
+		parentEditorID: 1,
+		thumbnail: { component: "Image", editorID: 4, parentEditorID: 3 },
+		url: "",
+	},
+};
+
+// Los cinco últimos tests comparten escenario y solo se diferencian en el
+// tamaño del array y en si el contenedor es un array.
+const floatingMenuProps = (overrides: Partial<IComponentContainerProps> = {}): IComponentContainerProps =>
+	makeProps({
+		title: "a title",
+		text: "texto a mostrar",
+		moduleTitle: "module title",
+		whiteList: ["LinkImage", "Video"],
+		isArray: false,
+		arrayLength: 2,
+		theme: "griddo-alt-theme",
+		editorID: 1,
+		disabled: false,
+		value: imageVideoWithThumbnail,
+		actionReplace: vi.fn(),
+		actions: makeActions(),
+		canDuplicate: true,
+		canReplace: true,
+		parentKey: "title",
+		objKey: "component",
+		selectedContent: basicContent,
+		...overrides,
 	});
+
+describe("ComponentContainer component rendering", () => {
 	test("should render the ComponentContainer", () => {
-		defaultProps.text = "texto";
-		defaultProps.editorID = 1;
-		defaultProps.whiteList = ["BasicContent", "CardCollection"];
-		defaultProps.arrayLength = 10;
-		defaultProps.theme = "default";
-		defaultProps.isArray = true;
-		defaultProps.disabled = false;
-		render(
-			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ComponentContainer {...defaultProps} />
-			</ThemeProvider>,
+		renderContainer(
+			makeProps({
+				text: "texto",
+				editorID: 1,
+				whiteList: ["BasicContent", "CardCollection"],
+				arrayLength: 10,
+				theme: "default",
+				isArray: true,
+				disabled: false,
+			}),
 		);
 
 		expect(screen.getAllByTestId("component-container")).toBeTruthy();
 	});
+
 	test("should render the EmptyContainer with whitelist value", () => {
-		// biome-ignore lint/suspicious/noTsIgnore: TODO: fix this
-		// @ts-ignore
-		defaultProps.text = undefined;
-		// biome-ignore lint/suspicious/noTsIgnore: TODO: fix this
-		// @ts-ignore
-		defaultProps.editorID = undefined;
-		defaultProps.whiteList = ["BasicContent", "CardCollection"];
-		defaultProps.isArray = false;
-		defaultProps.arrayLength = 10;
-		defaultProps.theme = "default";
-		defaultProps.value = {};
-		defaultProps.actionReplace = jest.fn();
-		defaultProps.actions = {
-			addComponentAction: jest.fn(),
-			deleteModuleAction: jest.fn(),
-			duplicateModuleAction: jest.fn(),
-			copyModuleAction: jest.fn(),
-			replaceModuleAction: jest.fn(),
-		};
-		defaultProps.canDuplicate = true;
-		defaultProps.canReplace = true;
-		defaultProps.objKey = "component";
-		defaultProps.selectedContent = {
-			component: "Section",
-			name: "Main Content",
-			modules: [
-				{
-					component: "BasicContent",
-					title: {
-						content: "Title",
-						tag: "h1",
-					},
-					anchorID: null,
-					verticalSpacing: "medium",
-					layout: "L001",
-					theme: "default",
-					moduleOrder: null,
-					subtitle:
-						"Lorem ipsum dolor sit amet, consectetur adipiscsdcdscing elit. Morbi dignissim ut nibh eget porttitor. Nunc eleifend mollis arcu.sdcsdc",
-					content:
-						"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dignissim ut nibh eget porttitor. Nunc eleifend mollis arcu. Lorem ipsum d</p>",
-					primaryLink: {
-						component: "Link",
-						text: "Link 1",
-						style: "primary",
-						url: {
-							url: "",
-							linkTo: null,
-							newTab: false,
-							noFollow: false,
-							size: null,
-							icon: null,
-							linkContainer: null,
-						},
-						editorID: 5,
-						parentEditorID: 4,
-					},
-					secondaryLink: {
-						component: "Link",
-						editorID: 6,
-						parentEditorID: 4,
-					},
-					additionalContent: {
-						image: {
-							component: "LinkableImage",
-							editorID: 7,
-							parentEditorID: 4,
-						},
-						video: {
-							component: "Video",
-							editorID: 8,
-							parentEditorID: 4,
-						},
-					},
-					editorID: 4,
-					parentEditorID: 3,
-				},
-			],
-			sectionPosition: 2,
-			editorID: 3,
-			parentEditorID: 1,
-			key: "mainContent",
-		};
-		render(
-			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ComponentContainer {...defaultProps} />
-			</ThemeProvider>,
+		renderContainer(
+			makeProps({
+				text: undefined,
+				editorID: undefined,
+				whiteList: ["BasicContent", "CardCollection"],
+				isArray: false,
+				arrayLength: 10,
+				theme: "default",
+				disabled: false,
+				value: {},
+				actionReplace: vi.fn(),
+				actions: makeActions(),
+				canDuplicate: true,
+				canReplace: true,
+				objKey: "component",
+				selectedContent: sectionContent,
+			}),
 		);
+
 		expect(screen.getAllByTestId("field-multiple-options")).toBeTruthy();
 	});
+
 	test("should render the EmptyContainer with title", () => {
-		defaultProps.title = "a title";
-		defaultProps.whiteList = ["BasicContent", "CardCollection"];
-		defaultProps.isArray = false;
-		defaultProps.arrayLength = 10;
-		defaultProps.theme = "default";
-		defaultProps.value = {};
-		defaultProps.actionReplace = jest.fn();
-		defaultProps.actions = {
-			addComponentAction: jest.fn(),
-			deleteModuleAction: jest.fn(),
-			duplicateModuleAction: jest.fn(),
-			copyModuleAction: jest.fn(),
-			replaceModuleAction: jest.fn(),
-		};
-		defaultProps.canDuplicate = true;
-		defaultProps.canReplace = true;
-		defaultProps.objKey = "component";
-		render(
-			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ComponentContainer {...defaultProps} />
-			</ThemeProvider>,
+		renderContainer(
+			makeProps({
+				title: "a title",
+				text: undefined,
+				editorID: undefined,
+				whiteList: ["BasicContent", "CardCollection"],
+				isArray: false,
+				arrayLength: 10,
+				theme: "default",
+				disabled: false,
+				value: {},
+				actionReplace: vi.fn(),
+				actions: makeActions(),
+				canDuplicate: true,
+				canReplace: true,
+				objKey: "component",
+				selectedContent: sectionContent,
+			}),
 		);
+
 		expect(screen.getAllByTestId("field-multiple-options")).toBeTruthy();
 	});
+
 	test("should render the icon with the container text", () => {
-		defaultProps.text = "texto a mostrar";
-		defaultProps.editorID = 1;
-		defaultProps.whiteList = ["BasicContent", "CardCollection"];
-		defaultProps.isArray = false;
-		defaultProps.disabled = false;
-		defaultProps.arrayLength = 10;
-		defaultProps.theme = "default";
-		defaultProps.value = {
-			component: "Link",
-			text: "Link 1",
-			style: "primary",
-			url: {
-				url: "",
-				linkTo: null,
-				newTab: false,
-				noFollow: false,
-				size: null,
-				icon: null,
-				linkContainer: null,
-			},
-			editorID: 5,
-			parentEditorID: 4,
-		};
-		defaultProps.actions = {
-			addComponentAction: jest.fn(),
-			deleteModuleAction: jest.fn(),
-			duplicateModuleAction: jest.fn(),
-			copyModuleAction: jest.fn(),
-			replaceModuleAction: jest.fn(),
-		};
-		defaultProps.parentKey = "title";
-		defaultProps.objKey = "content";
-		defaultProps.selectedContent = {
-			component: "BasicContent",
-			title: {
-				content: "Title",
-				tag: "h1",
-			},
-			anchorID: null,
-			verticalSpacing: "medium",
-			layout: "L001",
-			theme: "default",
-			moduleOrder: null,
-			subtitle:
-				"Lorem ipsum dolor sit amet, consectetur adipiscsdcdscing elit. Morbi dignissim ut nibh eget porttitor. Nunc eleifend mollis arcu.sdcsdc",
-			content:
-				"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dignissim ut nibh eget porttitor. Nunc eleifend mollis arcu. Lorem ipsum d</p>",
-			primaryLink: {
-				component: "Link",
-				text: "Link 1",
-				style: "primary",
-				url: {
-					url: "",
-					linkTo: null,
-					newTab: false,
-					noFollow: false,
-					size: null,
-					icon: null,
-					linkContainer: null,
-				},
-				editorID: 5,
-				parentEditorID: 4,
-			},
-			secondaryLink: {
-				component: "Link",
-				editorID: 6,
-				parentEditorID: 4,
-			},
-			additionalContent: {
-				image: {
-					component: "LinkableImage",
-					editorID: 7,
-					parentEditorID: 4,
-				},
-				video: {
-					component: "Video",
-					editorID: 8,
-					parentEditorID: 4,
-				},
-			},
-			editorID: 4,
-			parentEditorID: 3,
-		};
-		render(
-			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ComponentContainer {...defaultProps} />
-			</ThemeProvider>,
+		renderContainer(
+			makeProps({
+				title: "a title",
+				text: "texto a mostrar",
+				editorID: 1,
+				whiteList: ["BasicContent", "CardCollection"],
+				isArray: false,
+				disabled: false,
+				arrayLength: 10,
+				theme: "default",
+				value: linkValue,
+				actionReplace: vi.fn(),
+				actions: makeActions(),
+				canDuplicate: true,
+				canReplace: true,
+				parentKey: "title",
+				objKey: "content",
+				selectedContent: basicContent,
+			}),
 		);
+
 		expect(screen.getByTestId("icon-wrapper")).toBeTruthy();
 		expect(screen.findByText("texto a mostrar")).toBeTruthy();
 	});
 
 	test("should render the title", () => {
-		defaultProps.text = "texto a mostrar";
-		defaultProps.moduleTitle = "module title";
-		defaultProps.editorID = 1;
-		defaultProps.whiteList = [];
-		defaultProps.isArray = false;
-		defaultProps.disabled = false;
-		defaultProps.arrayLength = 10;
-		defaultProps.theme = "default";
-		defaultProps.value = {
-			component: "Link",
-			text: "Link 1",
-			style: "primary",
-			url: {
-				url: "",
-				linkTo: null,
-				newTab: false,
-				noFollow: false,
-				size: null,
-				icon: null,
-				linkContainer: null,
-			},
-			editorID: 5,
-			parentEditorID: 4,
-		};
-
-		render(
-			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ComponentContainer {...defaultProps} />
-			</ThemeProvider>,
+		renderContainer(
+			makeProps({
+				title: "a title",
+				text: "texto a mostrar",
+				moduleTitle: "module title",
+				editorID: 1,
+				whiteList: [],
+				isArray: false,
+				disabled: false,
+				arrayLength: 10,
+				theme: "default",
+				value: linkValue,
+				actionReplace: vi.fn(),
+				actions: makeActions(),
+				canDuplicate: true,
+				canReplace: true,
+				parentKey: "title",
+				objKey: "content",
+				selectedContent: basicContent,
+			}),
 		);
+
 		expect(screen.findByText("module title")).toBeTruthy();
 	});
 
 	test("should render the SideModal when click EmptyContainer", () => {
-		defaultProps.title = "a title";
-		defaultProps.whiteList = ["LinkImage", "Video"];
-		defaultProps.isArray = false;
-		defaultProps.arrayLength = 2;
-		defaultProps.theme = "griddo-alt-theme";
-		defaultProps.editorID = 1;
-		defaultProps.value = {
-			image: { component: "LinkableImage", editorID: 2, parentEditorID: 1 },
-			video: { component: "Video", editorID: 3, parentEditorID: 1 },
-		};
-		defaultProps.actionReplace = jest.fn();
-		defaultProps.actions = {
-			addComponentAction: jest.fn(),
-			deleteModuleAction: jest.fn(),
-			duplicateModuleAction: jest.fn(),
-			copyModuleAction: jest.fn(),
-			replaceModuleAction: jest.fn(),
-		};
-		defaultProps.canDuplicate = true;
-		defaultProps.canReplace = true;
-		defaultProps.objKey = "component";
-
-		render(
-			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ComponentContainer {...defaultProps} />
-			</ThemeProvider>,
-		);
+		renderContainer(floatingMenuProps({ value: imageVideoValue }));
 
 		const multipleOptionsField = screen.getByTestId("field-multiple-options");
 		expect(multipleOptionsField).toBeTruthy();
@@ -312,33 +263,7 @@ describe("ComponentContainer component rendering", () => {
 	});
 
 	test("should render component options on SideModal", () => {
-		defaultProps.title = "a title";
-		defaultProps.whiteList = ["LinkImage", "Video"];
-		defaultProps.isArray = false;
-		defaultProps.arrayLength = 2;
-		defaultProps.theme = "griddo-alt-theme";
-		defaultProps.editorID = 1;
-		defaultProps.value = {
-			image: { component: "LinkableImage", editorID: 2, parentEditorID: 1 },
-			video: { component: "Video", editorID: 3, parentEditorID: 1 },
-		};
-		defaultProps.actionReplace = jest.fn();
-		defaultProps.actions = {
-			addComponentAction: jest.fn(),
-			deleteModuleAction: jest.fn(),
-			duplicateModuleAction: jest.fn(),
-			copyModuleAction: jest.fn(),
-			replaceModuleAction: jest.fn(),
-		};
-		defaultProps.canDuplicate = true;
-		defaultProps.canReplace = true;
-		defaultProps.objKey = "component";
-
-		render(
-			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ComponentContainer {...defaultProps} />
-			</ThemeProvider>,
-		);
+		renderContainer(floatingMenuProps({ value: imageVideoValue }));
 
 		const multipleOptionsField = screen.getByTestId("field-multiple-options");
 		expect(multipleOptionsField).toBeTruthy();
@@ -351,39 +276,7 @@ describe("ComponentContainer component rendering", () => {
 });
 
 test("should render the FloatingMenu with options when click Component Container", async () => {
-	defaultProps.title = "a title";
-	defaultProps.whiteList = ["LinkImage", "Video"];
-	defaultProps.isArray = false;
-	defaultProps.arrayLength = 2;
-	defaultProps.theme = "griddo-alt-theme";
-	defaultProps.editorID = 1;
-	defaultProps.value = {
-		image: { component: "LinkableImage", editorID: 2, parentEditorID: 1 },
-		video: {
-			component: "Video",
-			editorID: 3,
-			parentEditorID: 1,
-			thumbnail: { component: "Image", editorID: 4, parentEditorID: 3 },
-			url: "",
-		},
-	};
-	defaultProps.actionReplace = jest.fn();
-	defaultProps.actions = {
-		addComponentAction: jest.fn(),
-		deleteModuleAction: jest.fn(),
-		duplicateModuleAction: jest.fn(),
-		copyModuleAction: jest.fn(),
-		replaceModuleAction: jest.fn(),
-	};
-	defaultProps.canDuplicate = true;
-	defaultProps.canReplace = true;
-	defaultProps.objKey = "component";
-
-	render(
-		<ThemeProvider theme={parseTheme(globalTheme)}>
-			<ComponentContainer {...defaultProps} />
-		</ThemeProvider>,
-	);
+	renderContainer(floatingMenuProps());
 
 	const component = screen.getByTestId("component-container");
 	fireEvent.mouseOver(component);
@@ -397,39 +290,7 @@ test("should render the FloatingMenu with options when click Component Container
 });
 
 test("should render the SideModal with options when click the replace action", async () => {
-	defaultProps.title = "a title";
-	defaultProps.whiteList = ["LinkImage", "Video"];
-	defaultProps.isArray = false;
-	defaultProps.arrayLength = 2;
-	defaultProps.theme = "griddo-alt-theme";
-	defaultProps.editorID = 1;
-	defaultProps.value = {
-		image: { component: "LinkableImage", editorID: 2, parentEditorID: 1 },
-		video: {
-			component: "Video",
-			editorID: 3,
-			parentEditorID: 1,
-			thumbnail: { component: "Image", editorID: 4, parentEditorID: 3 },
-			url: "",
-		},
-	};
-	defaultProps.actionReplace = jest.fn();
-	defaultProps.actions = {
-		addComponentAction: jest.fn(),
-		deleteModuleAction: jest.fn(),
-		duplicateModuleAction: jest.fn(),
-		copyModuleAction: jest.fn(),
-		replaceModuleAction: jest.fn(),
-	};
-	defaultProps.canDuplicate = true;
-	defaultProps.canReplace = true;
-	defaultProps.objKey = "component";
-
-	render(
-		<ThemeProvider theme={parseTheme(globalTheme)}>
-			<ComponentContainer {...defaultProps} />
-		</ThemeProvider>,
-	);
+	renderContainer(floatingMenuProps());
 
 	const component = screen.getByTestId("component-container");
 	fireEvent.mouseOver(component);
@@ -451,78 +312,14 @@ test("should render the SideModal with options when click the replace action", a
 });
 
 test("should not render the drag handle if arrays length is lower than two", async () => {
-	defaultProps.title = "a title";
-	defaultProps.whiteList = ["LinkImage", "Video"];
-	defaultProps.isArray = false;
-	defaultProps.arrayLength = 1;
-	defaultProps.theme = "griddo-alt-theme";
-	defaultProps.editorID = 1;
-	defaultProps.value = {
-		image: { component: "LinkableImage", editorID: 2, parentEditorID: 1 },
-		video: {
-			component: "Video",
-			editorID: 3,
-			parentEditorID: 1,
-			thumbnail: { component: "Image", editorID: 4, parentEditorID: 3 },
-			url: "",
-		},
-	};
-	defaultProps.actionReplace = jest.fn();
-	defaultProps.actions = {
-		addComponentAction: jest.fn(),
-		deleteModuleAction: jest.fn(),
-		duplicateModuleAction: jest.fn(),
-		copyModuleAction: jest.fn(),
-		replaceModuleAction: jest.fn(),
-	};
-	defaultProps.canDuplicate = true;
-	defaultProps.canReplace = true;
-	defaultProps.objKey = "component";
-
-	render(
-		<ThemeProvider theme={parseTheme(globalTheme)}>
-			<ComponentContainer {...defaultProps} />
-		</ThemeProvider>,
-	);
+	renderContainer(floatingMenuProps({ arrayLength: 1 }));
 
 	const handleWrapper = screen.queryByTestId("handle-wrapper");
 	expect(handleWrapper).toBeFalsy();
 });
 
 test("should render the drag handle if arrays length is greater than two", async () => {
-	defaultProps.title = "a title";
-	defaultProps.whiteList = ["LinkImage", "Video"];
-	defaultProps.isArray = true;
-	defaultProps.arrayLength = 3;
-	defaultProps.theme = "griddo-alt-theme";
-	defaultProps.editorID = 1;
-	defaultProps.value = {
-		image: { component: "LinkableImage", editorID: 2, parentEditorID: 1 },
-		video: {
-			component: "Video",
-			editorID: 3,
-			parentEditorID: 1,
-			thumbnail: { component: "Image", editorID: 4, parentEditorID: 3 },
-			url: "",
-		},
-	};
-	defaultProps.actionReplace = jest.fn();
-	defaultProps.actions = {
-		addComponentAction: jest.fn(),
-		deleteModuleAction: jest.fn(),
-		duplicateModuleAction: jest.fn(),
-		copyModuleAction: jest.fn(),
-		replaceModuleAction: jest.fn(),
-	};
-	defaultProps.canDuplicate = true;
-	defaultProps.canReplace = true;
-	defaultProps.objKey = "component";
-
-	render(
-		<ThemeProvider theme={parseTheme(globalTheme)}>
-			<ComponentContainer {...defaultProps} />
-		</ThemeProvider>,
-	);
+	renderContainer(floatingMenuProps({ isArray: true, arrayLength: 3 }));
 
 	const handleWrapper = screen.getByTestId("handle-wrapper");
 	expect(handleWrapper).toBeTruthy();