@griddo/ax 12.3.0 → 12.5.0

package/src/__tests__/components/MainWrapper/AppBar/AppBar.test.tsx

@@ -162,7 +162,7 @@ describe("AppBar component rendering", () => {
 				{ name: "tab2", text: "Tab 2" },
 			],
 			selectedTab: "tab1",
-			action: jest.fn(),
+			action: vi.fn(),
 		};
 
 		const defaultProps: IAppBarProps = {
@@ -185,7 +185,7 @@ describe("AppBar component rendering", () => {
 		const tabs = {
 			tabSet: ["Tab 1", "Tab 2"],
 			selectedTab: "Tab 1",
-			action: jest.fn(),
+			action: vi.fn(),
 		};
 
 		const defaultProps: IAppBarProps = {
@@ -207,7 +207,7 @@ describe("AppBar component rendering", () => {
 	it("should render the search field", () => {
 		const defaultProps: IAppBarProps = {
 			title: "the title",
-			searchAction: jest.fn(),
+			searchAction: vi.fn(),
 		};
 
 		render(
@@ -262,12 +262,12 @@ describe("AppBar component rendering", () => {
 				{
 					icon: "icon",
 					label: "Action 1",
-					action: jest.fn(),
+					action: vi.fn(),
 				},
 				{
 					icon: "icon2",
 					label: "Action 2",
-					action: jest.fn(),
+					action: vi.fn(),
 				},
 			],
 		};
@@ -330,7 +330,7 @@ describe("AppBar component rendering", () => {
 			title: "the title",
 			rightLineButton: {
 				label,
-				action: jest.fn(),
+				action: vi.fn(),
 			},
 		};
 
@@ -351,7 +351,7 @@ describe("AppBar component rendering", () => {
 			title: "the title",
 			rightButton: {
 				label,
-				action: jest.fn(),
+				action: vi.fn(),
 			},
 		};
 
@@ -375,15 +375,15 @@ describe("AppBar component rendering", () => {
 					{
 						icon: "icon",
 						label: "Action 1",
-						action: jest.fn(),
+						action: vi.fn(),
 					},
 					{
 						icon: "icon2",
 						label: "Action 2",
-						action: jest.fn(),
+						action: vi.fn(),
 					},
 				],
-				button: { label: "the menu button", action: jest.fn() },
+				button: { label: "the menu button", action: vi.fn() },
 			},
 		};
 
@@ -409,15 +409,15 @@ describe("AppBar component events", () => {
 					{
 						icon: "icon",
 						label: "Action 1",
-						action: jest.fn(),
+						action: vi.fn(),
 					},
 					{
 						icon: "icon2",
 						label: "Action 2",
-						action: jest.fn(),
+						action: vi.fn(),
 					},
 				],
-				button: { label: "the menu button", action: jest.fn() },
+				button: { label: "the menu button", action: vi.fn() },
 			},
 			language: { locale: "en_GB", id: 4 },
 			availableLanguages: [
@@ -443,9 +443,9 @@ describe("AppBar component events", () => {
 				},
 			],
 			languageActions: {
-				createNewTranslation: jest.fn(),
-				getSiteContent: jest.fn(),
-				setLanguage: jest.fn(),
+				createNewTranslation: vi.fn(),
+				getSiteContent: vi.fn(),
+				setLanguage: vi.fn(),
 			},
 		};
 
@@ -478,27 +478,27 @@ describe("AppBar component events", () => {
 					{
 						icon: "icon",
 						label: "Action 1",
-						action: jest.fn(),
+						action: vi.fn(),
 					},
 					{
 						icon: "icon2",
 						label: "Action 2",
-						action: jest.fn(),
+						action: vi.fn(),
 					},
 				],
-				button: { label: "the menu button", action: jest.fn() },
+				button: { label: "the menu button", action: vi.fn() },
 			},
 			pageStatus: "active",
 			pageStatusActions: [
 				{
 					icon: "icon",
 					label: "Action 1",
-					action: jest.fn(),
+					action: vi.fn(),
 				},
 				{
 					icon: "icon2",
 					label: "Action 2",
-					action: jest.fn(),
+					action: vi.fn(),
 				},
 			],
 		};

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

@@ -45,7 +45,7 @@ describe("MenuItem component rendering", () => {
 	it("should render with extendend action visible", () => {
 		const defaultProps: IMenuItemProps = {
 			children: <div>Item</div>,
-			extendedAction: { icon: "delete", action: jest.fn(), onlyOnHover: false },
+			extendedAction: { icon: "delete", action: vi.fn(), onlyOnHover: false },
 		};
 
 		render(
@@ -63,7 +63,7 @@ describe("MenuItem component rendering", () => {
 	it("should render with extendend action not visible", () => {
 		const defaultProps: IMenuItemProps = {
 			children: <div>Item</div>,
-			extendedAction: { icon: "delete", action: jest.fn(), onlyOnHover: true },
+			extendedAction: { icon: "delete", action: vi.fn(), onlyOnHover: true },
 		};
 
 		render(
@@ -81,7 +81,7 @@ describe("MenuItem component rendering", () => {
 	it("should render with extendend action not visible if onlyOnHover is undefined", () => {
 		const defaultProps: IMenuItemProps = {
 			children: <div>Item</div>,
-			extendedAction: { icon: "delete", action: jest.fn() },
+			extendedAction: { icon: "delete", action: vi.fn() },
 		};
 
 		render(
@@ -99,7 +99,7 @@ describe("MenuItem component rendering", () => {
 
 describe("component events", () => {
 	test("onClick is been called", () => {
-		const onClickMock = jest.fn();
+		const onClickMock = vi.fn();
 		const defaultProps: IMenuItemProps = {
 			children: <div>Item</div>,
 			onClick: onClickMock,
@@ -118,7 +118,7 @@ describe("component events", () => {
 	});
 
 	test("extended action is called", async () => {
-		const actionMock = jest.fn();
+		const actionMock = vi.fn();
 		const defaultProps: IMenuItemProps = {
 			children: <div>Item</div>,
 			extendedAction: { icon: "delete", action: actionMock, onlyOnHover: false },

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

@@ -14,7 +14,7 @@ describe("Modal component rendering", () => {
 		const defaultProps: IModalProps = {
 			children: <div>the children</div>,
 			isOpen: true,
-			hide: jest.fn(),
+			hide: vi.fn(),
 		};
 
 		render(
@@ -33,7 +33,7 @@ describe("Modal component rendering", () => {
 		const defaultProps: IModalProps = {
 			children: <div>the children</div>,
 			isOpen: false,
-			hide: jest.fn(),
+			hide: vi.fn(),
 		};
 
 		render(
@@ -51,7 +51,7 @@ describe("Modal component rendering", () => {
 		const defaultProps: IModalProps = {
 			children: <div>the children</div>,
 			isOpen: true,
-			hide: jest.fn(),
+			hide: vi.fn(),
 			title: titleText,
 		};
 
@@ -70,10 +70,10 @@ describe("Modal component rendering", () => {
 		const defaultProps: IModalProps = {
 			children: <div>the children</div>,
 			isOpen: true,
-			hide: jest.fn(),
+			hide: vi.fn(),
 			mainAction: {
 				title: buttonText,
-				onClick: jest.fn(),
+				onClick: vi.fn(),
 			},
 		};
 
@@ -92,10 +92,10 @@ describe("Modal component rendering", () => {
 		const defaultProps: IModalProps = {
 			children: <div>the children</div>,
 			isOpen: true,
-			hide: jest.fn(),
+			hide: vi.fn(),
 			mainAction: {
 				title: buttonText,
-				onClick: jest.fn(),
+				onClick: vi.fn(),
 				disabled: true,
 			},
 		};
@@ -116,10 +116,10 @@ describe("Modal component rendering", () => {
 		const defaultProps: IModalProps = {
 			children: <div>the children</div>,
 			isOpen: true,
-			hide: jest.fn(),
+			hide: vi.fn(),
 			secondaryAction: {
 				title: buttonText,
-				onClick: jest.fn(),
+				onClick: vi.fn(),
 			},
 		};
 
@@ -137,7 +137,7 @@ describe("Modal component rendering", () => {
 		const defaultProps: IModalProps = {
 			children: <div>the children</div>,
 			isOpen: true,
-			hide: jest.fn(),
+			hide: vi.fn(),
 			overflow: "hidden",
 		};
 
@@ -157,7 +157,7 @@ describe("Modal component rendering", () => {
 		const defaultProps: IModalProps = {
 			children: <div>the children</div>,
 			isOpen: true,
-			hide: jest.fn(),
+			hide: vi.fn(),
 			size: "M",
 		};
 
@@ -176,7 +176,7 @@ describe("Modal component rendering", () => {
 		const defaultProps: IModalProps = {
 			children: <div>the children</div>,
 			isOpen: true,
-			hide: jest.fn(),
+			hide: vi.fn(),
 			size: "L",
 		};
 
@@ -195,7 +195,7 @@ describe("Modal component rendering", () => {
 		const defaultProps: IModalProps = {
 			children: <div>the children</div>,
 			isOpen: true,
-			hide: jest.fn(),
+			hide: vi.fn(),
 			size: "XL",
 		};
 
@@ -213,7 +213,7 @@ describe("Modal component rendering", () => {
 
 describe("Modal events", () => {
 	it("should call hide on icon button click", () => {
-		const hideMock = jest.fn();
+		const hideMock = vi.fn();
 		const defaultProps: IModalProps = {
 			children: <div>the children</div>,
 			isOpen: true,
@@ -233,12 +233,12 @@ describe("Modal events", () => {
 	});
 
 	it("should call action on main action button click", () => {
-		const actionMock = jest.fn();
+		const actionMock = vi.fn();
 		const buttonText = "Main Action";
 		const defaultProps: IModalProps = {
 			children: <div>the children</div>,
 			isOpen: true,
-			hide: jest.fn(),
+			hide: vi.fn(),
 			mainAction: {
 				title: buttonText,
 				onClick: actionMock,
@@ -258,12 +258,12 @@ describe("Modal events", () => {
 	});
 
 	it("should not call action on main action button click if disabled", () => {
-		const actionMock = jest.fn();
+		const actionMock = vi.fn();
 		const buttonText = "Main Action";
 		const defaultProps: IModalProps = {
 			children: <div>the children</div>,
 			isOpen: true,
-			hide: jest.fn(),
+			hide: vi.fn(),
 			mainAction: {
 				title: buttonText,
 				onClick: actionMock,
@@ -284,12 +284,12 @@ describe("Modal events", () => {
 	});
 
 	it("should call action on secondary action button click", () => {
-		const actionMock = jest.fn();
+		const actionMock = vi.fn();
 		const buttonText = "Secondary Action";
 		const defaultProps: IModalProps = {
 			children: <div>the children</div>,
 			isOpen: true,
-			hide: jest.fn(),
+			hide: vi.fn(),
 			secondaryAction: {
 				title: buttonText,
 				onClick: actionMock,

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

@@ -22,7 +22,7 @@ describe("Nav component rendering", () => {
 		const defaultProps: INavProps = {
 			items,
 			current: items[0],
-			onClick: jest.fn(),
+			onClick: vi.fn(),
 		};
 
 		render(
@@ -40,7 +40,7 @@ describe("Nav component rendering", () => {
 		const defaultProps: INavProps = {
 			items: [],
 			current: undefined,
-			onClick: jest.fn(),
+			onClick: vi.fn(),
 		};
 
 		render(

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

@@ -162,7 +162,7 @@ describe("Notification component with subnotifications", () => {
 
 describe("Notification component events", () => {
 	it("should call onClick on action button click", () => {
-		const onClickMock = jest.fn();
+		const onClickMock = vi.fn();
 		const defaultProps: INotificationProps = {
 			text: "Notification text",
 			type: "success",
@@ -183,7 +183,7 @@ describe("Notification component events", () => {
 	});
 
 	it("should call resetError on close and hide notification", () => {
-		const resetErrorMock = jest.fn();
+		const resetErrorMock = vi.fn();
 		const defaultProps: INotificationProps = {
 			text: "Notification text",
 			type: "success",

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

@@ -1,11 +1,10 @@
-import "jest-styled-components";
 
 import Pagination, { type IPaginationProps } from "@ax/components/Pagination";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import { ThemeProvider } from "styled-components";
 
 afterEach(cleanup);
@@ -14,7 +13,7 @@ const defaultProps = mock<IPaginationProps>();
 
 describe("Pagination component rendering", () => {
 	it("should render pagination component", () => {
-		const setPageMock = jest.fn();
+		const setPageMock = vi.fn();
 		defaultProps.currPage = 1;
 		defaultProps.itemsPerPage = 10;
 		defaultProps.setPage = setPageMock;
@@ -31,7 +30,7 @@ describe("Pagination component rendering", () => {
 	});
 
 	it("should render pagination label when size equals 'S'", () => {
-		const setPageMock = jest.fn();
+		const setPageMock = vi.fn();
 		defaultProps.currPage = 1;
 		defaultProps.itemsPerPage = 10;
 		defaultProps.setPage = setPageMock;
@@ -49,7 +48,7 @@ describe("Pagination component rendering", () => {
 	});
 
 	it("should render pagination text input when size is undefined", () => {
-		const setPageMock = jest.fn();
+		const setPageMock = vi.fn();
 		defaultProps.currPage = 1;
 		defaultProps.itemsPerPage = 10;
 		defaultProps.setPage = setPageMock;
@@ -67,7 +66,7 @@ describe("Pagination component rendering", () => {
 	});
 
 	it("should render arrow left disabled when it's first page", () => {
-		const setPageMock = jest.fn();
+		const setPageMock = vi.fn();
 		defaultProps.currPage = 1;
 		defaultProps.itemsPerPage = 10;
 		defaultProps.setPage = setPageMock;
@@ -87,7 +86,7 @@ describe("Pagination component rendering", () => {
 	});
 
 	it("should render arrow right disabled when it's last page", () => {
-		const setPageMock = jest.fn();
+		const setPageMock = vi.fn();
 		defaultProps.currPage = 2;
 		defaultProps.itemsPerPage = 10;
 		defaultProps.setPage = setPageMock;
@@ -109,7 +108,7 @@ describe("Pagination component rendering", () => {
 
 describe("Pagination component events", () => {
 	it("should call setPage when click next page button", () => {
-		const setPageMock = jest.fn();
+		const setPageMock = vi.fn();
 		defaultProps.currPage = 1;
 		defaultProps.itemsPerPage = 10;
 		defaultProps.setPage = setPageMock;
@@ -128,7 +127,7 @@ describe("Pagination component events", () => {
 	});
 
 	it("should call setPage when click next page button", () => {
-		const setPageMock = jest.fn();
+		const setPageMock = vi.fn();
 		defaultProps.currPage = 1;
 		defaultProps.itemsPerPage = 10;
 		defaultProps.setPage = setPageMock;
@@ -147,7 +146,7 @@ describe("Pagination component events", () => {
 	});
 
 	it("should call setPage when click prev page button", () => {
-		const setPageMock = jest.fn();
+		const setPageMock = vi.fn();
 		defaultProps.currPage = 2;
 		defaultProps.itemsPerPage = 10;
 		defaultProps.setPage = setPageMock;
@@ -166,7 +165,7 @@ describe("Pagination component events", () => {
 	});
 
 	it("should call setPage when change input value and blur", () => {
-		const setPageMock = jest.fn();
+		const setPageMock = vi.fn();
 		defaultProps.currPage = 1;
 		defaultProps.itemsPerPage = 10;
 		defaultProps.setPage = setPageMock;
@@ -186,7 +185,7 @@ describe("Pagination component events", () => {
 	});
 
 	it("should call setPage with 1 when change input value is not a number", () => {
-		const setPageMock = jest.fn();
+		const setPageMock = vi.fn();
 		defaultProps.currPage = 1;
 		defaultProps.itemsPerPage = 10;
 		defaultProps.setPage = setPageMock;
@@ -206,7 +205,7 @@ describe("Pagination component events", () => {
 	});
 
 	it("shouldn't call setPage when current page is lower than or equal to 1", () => {
-		const setPageMock = jest.fn();
+		const setPageMock = vi.fn();
 		defaultProps.currPage = 1;
 		defaultProps.itemsPerPage = 10;
 		defaultProps.setPage = setPageMock;
@@ -224,7 +223,7 @@ describe("Pagination component events", () => {
 	});
 
 	it("shouldn't call setPage when current page is greater than or equal to last page", () => {
-		const setPageMock = jest.fn();
+		const setPageMock = vi.fn();
 		defaultProps.currPage = 2;
 		defaultProps.itemsPerPage = 10;
 		defaultProps.setPage = setPageMock;

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

@@ -7,9 +7,8 @@ import globalTheme from "@ax/themes/theme.json";
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { ThemeProvider } from "styled-components";
 
-jest.mock(
-	"@ax/components/ImageDragAndDrop",
-	() => (props: any) =>
+vi.mock("@ax/components/ImageDragAndDrop", () => ({
+	default: (props: any) =>
 		React.createElement(
 			"div",
 			{
@@ -18,14 +17,14 @@ jest.mock(
 			},
 			React.createElement("button", { type: "button" }, "Upload Mock"),
 		),
-);
+}));
 
 afterEach(cleanup);
 
 const renderProfileImage = (props = {}) =>
 	render(
 		<ThemeProvider theme={parseTheme(globalTheme)}>
-			<ProfileImage handleImage={jest.fn()} size={96} {...props} />
+			<ProfileImage handleImage={vi.fn()} size={96} {...props} />
 		</ThemeProvider>,
 	);
 
@@ -91,7 +90,7 @@ describe("ProfileImage modal", () => {
 
 describe("ProfileImage upload", () => {
 	it("should call handleImage when image is uploaded", () => {
-		const handleImage = jest.fn();
+		const handleImage = vi.fn();
 		renderProfileImage({ handleImage });
 
 		const wrapper = screen.getByTestId("profile-image-wrapper");
@@ -104,7 +103,7 @@ describe("ProfileImage upload", () => {
 	});
 
 	it("should close modal after successful upload", () => {
-		const handleImage = jest.fn();
+		const handleImage = vi.fn();
 		renderProfileImage({ handleImage });
 
 		const wrapper = screen.getByTestId("profile-image-wrapper");

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

@@ -1,7 +1,8 @@
+import type { MockedFunction } from "vitest";
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import { render, cleanup, screen, fireEvent } from "@testing-library/react";
 import { parseTheme } from "@ax/helpers";
 import "@testing-library/jest-dom";
@@ -58,7 +59,7 @@ describe("ReorderArrows component rendering", () => {
 
 describe("ReorderArrows component events trigger", () => {
 	it("should trigger the handleDownClick", () => {
-		const handleDownClickMock = defaultProps.handleDownClick as jest.MockedFunction<(value: any) => void>;
+		const handleDownClickMock = defaultProps.handleDownClick as MockedFunction<(value: any) => void>;
 		defaultProps.index = 0;
 		defaultProps.listLength = 10;
 
@@ -77,7 +78,7 @@ describe("ReorderArrows component events trigger", () => {
 	});
 
 	it("should trigger the handleUpClick", () => {
-		const handleUpClickMock = defaultProps.handleUpClick as jest.MockedFunction<(value: any) => void>;
+		const handleUpClickMock = defaultProps.handleUpClick as MockedFunction<(value: any) => void>;
 		defaultProps.index = 9;
 		defaultProps.listLength = 10;
 		render(

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

@@ -1,3 +1,4 @@
+import type { MockedFunction } from "vitest";
 import React, { useRef } from "react";
 
 import { ThemeProvider } from "styled-components";
@@ -11,23 +12,29 @@ import globalTheme from "@ax/themes/theme.json";
 afterEach(cleanup);
 
 beforeEach(() => {
-	global.ResizeObserver = jest.fn().mockImplementation(() => ({
-		observe: jest.fn(),
-		unobserve: jest.fn(),
-		disconnect: jest.fn(),
-	}));
+	global.ResizeObserver = vi.fn().mockImplementation(function () {
+		return { observe: vi.fn(), unobserve: vi.fn(), disconnect: vi.fn() };
+	});
 });
 
-jest.mock("react", () => {
-	const originReact = jest.requireActual("react");
-	const mUseRef = jest.fn();
+vi.mock("react", async () => {
+	const originReact = await vi.importActual("react");
+	const mUseRef = vi.fn();
 	return {
 		...originReact,
 		useRef: mUseRef,
 	};
 });
 
-const useMockRef = useRef as jest.MockedFunction<typeof useRef>;
+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", () => {
@@ -36,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} />
@@ -60,9 +64,6 @@ describe("ResizePanel component rendering", () => {
 			fixed: false,
 		};
 
-		const rightPanelRef = { current: {} };
-		useMockRef.mockReturnValueOnce(rightPanelRef);
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
 				<ResizePanel {...defaultProps} />
@@ -103,7 +104,7 @@ describe("ResizePanel mouse events", () => {
 		const rightPanel = screen.getByTestId("right-panel");
 		expect(rightPanel).toBeTruthy();
 
-		jest.spyOn(rightPanel, "offsetWidth", "get").mockReturnValue(344);
+		vi.spyOn(rightPanel, "offsetWidth", "get").mockReturnValue(344);
 
 		// Forzar un re-render para que ResizePanel use el ancho mockeado
 		// (React mide en requestAnimationFrame, así que usamos act)
@@ -145,7 +146,7 @@ describe("ResizePanel mouse events", () => {
 		const rightPanel = screen.getByTestId("right-panel");
 		expect(rightPanel).toBeTruthy();
 
-		jest.spyOn(rightPanel, "offsetWidth", "get").mockReturnValue(344);
+		vi.spyOn(rightPanel, "offsetWidth", "get").mockReturnValue(344);
 
 		// Forzar un re-render para que ResizePanel use el ancho mockeado
 		// (React mide en requestAnimationFrame, así que usamos act)