@griddo/ax 12.3.0-beta.0 → 12.4.0

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

@@ -2,7 +2,7 @@ import { MemoryRouter } 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 { mock } from "vitest-mock-extended";
 import { ThemeProvider } from "styled-components";
 import "@testing-library/jest-dom";
 
@@ -22,11 +22,9 @@ const renderBrowser = (props: IBrowserProps) =>
 	);
 
 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() };
+	});
 
 	defaultProps = mock<IBrowserProps>();
 	defaultProps.content = {};
@@ -47,7 +45,7 @@ beforeEach(() => {
 });
 
 afterEach(() => {
-	jest.resetAllMocks();
+	vi.resetAllMocks();
 	cleanup();
 });
 
@@ -147,7 +145,7 @@ describe("Browser editorType variants", () => {
 	it("should call toggleHeadingsPreview when clicking Back to Page Editor in headings mode", () => {
 		defaultProps.editorType = "headings";
 		defaultProps.showIframe = true;
-		const toggleHeadingsPreviewMock = jest.fn();
+		const toggleHeadingsPreviewMock = vi.fn();
 		defaultProps.toggleHeadingsPreview = toggleHeadingsPreviewMock;
 
 		renderBrowser(defaultProps);
@@ -172,7 +170,7 @@ describe("Browser editorType variants", () => {
 	it("should call toggleKeywordsPreview when clicking Back to Page Editor in keywords mode", () => {
 		defaultProps.editorType = "keywords";
 		defaultProps.showIframe = true;
-		const toggleKeywordsPreviewMock = jest.fn();
+		const toggleKeywordsPreviewMock = vi.fn();
 		defaultProps.toggleKeywordsPreview = toggleKeywordsPreviewMock;
 
 		renderBrowser(defaultProps);
@@ -296,11 +294,9 @@ describe("Browser iframe URL construction", () => {
 describe("Browser ResizeObserver lifecycle", () => {
 	it("should update dimensions based on containerWidth when ResizeObserver fires", () => {
 		// Verify ResizeObserver is created and observe is called
-		const ResizeObserverConstructor = jest.fn().mockImplementation(() => ({
-			observe: jest.fn(),
-			unobserve: jest.fn(),
-			disconnect: jest.fn(),
-		}));
+		const ResizeObserverConstructor = vi.fn().mockImplementation(function () {
+			return { observe: vi.fn(), unobserve: vi.fn(), disconnect: vi.fn() };
+		});
 		global.ResizeObserver = ResizeObserverConstructor as any;
 
 		defaultProps.isPreview = false;
@@ -314,12 +310,10 @@ describe("Browser ResizeObserver lifecycle", () => {
 	});
 
 	it("should disconnect ResizeObserver on unmount", () => {
-		const disconnectMock = jest.fn();
-		global.ResizeObserver = jest.fn().mockImplementation(() => ({
-			observe: jest.fn(),
-			unobserve: jest.fn(),
-			disconnect: disconnectMock,
-		}));
+		const disconnectMock = vi.fn();
+		global.ResizeObserver = vi.fn().mockImplementation(function () {
+			return { observe: vi.fn(), unobserve: vi.fn(), disconnect: disconnectMock };
+		});
 
 		defaultProps.showIframe = true;
 
@@ -331,11 +325,9 @@ describe("Browser ResizeObserver lifecycle", () => {
 
 	it("should not update dimensions when ResizeObserver fires with zero width", () => {
 		// Verify ResizeObserver is created
-		const ResizeObserverConstructor = jest.fn().mockImplementation(() => ({
-			observe: jest.fn(),
-			unobserve: jest.fn(),
-			disconnect: jest.fn(),
-		}));
+		const ResizeObserverConstructor = vi.fn().mockImplementation(function () {
+			return { observe: vi.fn(), unobserve: vi.fn(), disconnect: vi.fn() };
+		});
 		global.ResizeObserver = ResizeObserverConstructor as any;
 
 		defaultProps.isPreview = false;

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

@@ -9,11 +9,11 @@ import globalTheme from "@ax/themes/theme.json";
 import userEvent from "@testing-library/user-event";
 
 afterEach(() => {
-	jest.resetAllMocks();
+	vi.resetAllMocks();
 	cleanup();
 });
-const propActionMock = jest.fn();
-const selectItemsMock = jest.fn();
+const propActionMock = vi.fn();
+const selectItemsMock = vi.fn();
 const defaultProps = {
 	isScrolling: false,
 	checkState: { isAllSelected: false, indeterminate: false },

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

@@ -1,7 +1,8 @@
+import type { MockedFunction } from "vitest";
 import { ThemeProvider } from "styled-components";
 import { render, cleanup, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import "@testing-library/jest-dom";
 
 import { parseTheme } from "@ax/helpers";
@@ -11,7 +12,7 @@ import globalTheme from "@ax/themes/theme.json";
 afterEach(cleanup);
 
 const defaultProps = mock<ICategoryCellProps>();
-const addCategoryColorsMock = defaultProps.addCategoryColors as jest.MockedFunction<(cats: string[]) => void>;
+const addCategoryColorsMock = defaultProps.addCategoryColors as MockedFunction<(cats: string[]) => void>;
 
 describe("CategoryCell component rendering", () => {
 	it("should render the component with no elements", () => {

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

@@ -1,4 +1,4 @@
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
 import { ThemeProvider } from "styled-components";
@@ -9,7 +9,7 @@ import ConfigPanel, { type IStateProps } from "@ax/components/ConfigPanel";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 
-import { cleanup, render, screen } from "../../../../config/jest/test-utils";
+import { cleanup, render, screen } from "../../../../config/tests/test-utils";
 import { defaultStore } from "./../../../__mocks__/store/GenericStore";
 
 afterEach(cleanup);
@@ -137,8 +137,8 @@ defaultProps.schema = {
 		},
 	],
 };
-defaultProps.setSelectedTab.mockImplementation(jest.fn());
-defaultProps.actions = { deleteModule: jest.fn() };
+defaultProps.setSelectedTab.mockImplementation(vi.fn());
+defaultProps.actions = { deleteModule: vi.fn() };
 defaultProps.breadcrumb = [
 	{
 		editorID: 0,

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
-import { render, cleanup, screen } from "../../../../../../config/jest/test-utils";
+import { render, cleanup, screen } from "../../../../../../config/tests/test-utils";
 import configureStore from "redux-mock-store";
 import "@testing-library/jest-dom";
 import thunk from "redux-thunk";
@@ -110,7 +110,7 @@ const initialStore = {
 };
 const store = mockStore(initialStore);
 
-const restorePageNavigationActionMock = jest.fn();
+const restorePageNavigationActionMock = vi.fn();
 
 const defaultProps = {
 	field: {

package/src/__tests__/components/ConfigPanel/Form/ConnectedField/NavConnectedField/NavConnectedField.test.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
-import { render, cleanup, screen } from "../../../../../../../config/jest/test-utils";
+import { render, cleanup, screen } from "../../../../../../../config/tests/test-utils";
 import configureStore from "redux-mock-store";
 import "@testing-library/jest-dom";
 import thunk from "redux-thunk";
@@ -16,7 +16,7 @@ beforeEach(() => {
 
 const middlewares: any = [thunk];
 const mockStore = configureStore(middlewares);
-const updateEditorContentMock = jest.fn();
+const updateEditorContentMock = vi.fn();
 const initialStore = {
 	navigation: {
 		selectedContent: { template: "default" },

package/src/__tests__/components/ConfigPanel/Form/ConnectedField/PageConnectedField/Field/Field.test.tsx

@@ -13,9 +13,9 @@ beforeEach(() => {
 });
 
 const defaultProps = {
-	goTo: jest.fn(),
-	updateValue: jest.fn(),
-	deleteError: jest.fn(),
+	goTo: vi.fn(),
+	updateValue: vi.fn(),
+	deleteError: vi.fn(),
 	whiteList: undefined,
 	objKey: "title",
 	field: {},

package/src/__tests__/components/ConfigPanel/Form/ConnectedField/PageConnectedField/PageConnectedField.test.tsx

@@ -1,3 +1,4 @@
+import type { MockedFunction } from "vitest";
 import axios from "axios";
 import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
@@ -9,7 +10,7 @@ import PageConnectedField from "@ax/components/ConfigPanel/Form/ConnectedField/P
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 
-import { cleanup, fireEvent, render, screen } from "../../../../../../../config/jest/test-utils";
+import { cleanup, fireEvent, render, screen } from "../../../../../../../config/tests/test-utils";
 
 // Mocks configuration
 
@@ -17,19 +18,21 @@ beforeEach(() => {
 	cleanup();
 });
 
-jest.mock("axios");
-const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+vi.mock("axios");
+const mockedAxios = axios as MockedFunction<typeof axios>;
 
 // Mock @ax/schemas
-jest.mock("@ax/schemas", () => ({
-	getPageSchemas: jest.fn(() => ({})),
-	getFixedSchemas: jest.fn(() => ({})),
+// These are the module's only exports; under ESM the mock has to declare them
+// or the consumer's `...pageSchemas` blows up.
+vi.mock("@ax/schemas", () => ({
+	pageSchemas: {},
+	fixedSchemas: {},
 }));
 
 // Mock @ax/containers/PageEditor
-jest.mock("@ax/containers/PageEditor", () => ({
+vi.mock("@ax/containers/PageEditor", () => ({
 	pageEditorActions: {
-		updateEditorContent: jest.fn((_editorID: number, _key: string | string[], _value: any) => {
+		updateEditorContent: vi.fn((_editorID: number, _key: string | string[], _value: any) => {
 			return (dispatch: any, getState: any) => {
 				const state = getState();
 				dispatch({
@@ -42,21 +45,21 @@ jest.mock("@ax/containers/PageEditor", () => ({
 				});
 			};
 		}),
-		overwriteHeaderConfig: jest.fn(() => ({
+		overwriteHeaderConfig: vi.fn(() => ({
 			type: "pageEditor/OVERWRITE_HEADER_CONFIG",
 			payload: {},
 		})),
-		setCurrentPageName: jest.fn(() => ({
+		setCurrentPageName: vi.fn(() => ({
 			type: "pageEditor/SET_CURRENT_PAGE_NAME",
 			payload: {},
 		})),
-		getPageBreadcrumb: jest.fn(() => (dispatch: any) => {
+		getPageBreadcrumb: vi.fn(() => (dispatch: any) => {
 			dispatch({
 				type: "pageEditor/SET_BREADCRUMB",
 				payload: {},
 			});
 		}),
-		deleteError: jest.fn(() => ({
+		deleteError: vi.fn(() => ({
 			type: "pageEditor/DELETE_ERROR",
 			payload: {},
 		})),
@@ -112,9 +115,9 @@ const initialStore = {
 		savedMenus: null,
 	},
 	navigationActions: {
-		// Aquí usamos un jest.fn() simple placeholder si es necesario,
+		// Aquí usamos un vi.fn() simple placeholder si es necesario,
 		// o podemos omitirlo si el componente no lo llama directamente desde el state
-		updateEditorContent: jest.fn(),
+		updateEditorContent: vi.fn(),
 	},
 };
 

package/src/__tests__/components/ConfigPanel/Form/ConnectedField/PageConnectedField/TemplateManager/TemplateManager.test.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
-import { render, cleanup, screen, fireEvent } from "../../../../../../../../config/jest/test-utils";
+import { render, cleanup, screen, fireEvent } from "../../../../../../../../config/tests/test-utils";
 import configureStore from "redux-mock-store";
 import "@testing-library/jest-dom";
 
@@ -15,7 +15,7 @@ beforeEach(() => {
 
 const middlewares: any = [];
 const mockStore = configureStore(middlewares);
-const updateValueMock = jest.fn();
+const updateValueMock = vi.fn();
 
 const defaultProps = {
 	template: {
@@ -39,7 +39,7 @@ const defaultProps = {
 		],
 	},
 	updateValue: updateValueMock,
-	goTo: jest.fn(),
+	goTo: vi.fn(),
 	objKey: "template",
 	pages: [],
 	selectedTab: "config",
@@ -67,7 +67,7 @@ const defaultProps = {
 	actions: {},
 	activatedPacks: [],
 	isTemplateActivated: true,
-	deleteError: jest.fn(),
+	deleteError: vi.fn(),
 	errors: [],
 	theme: "griddo-alt-theme",
 	moduleCopy: null,

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

@@ -1,8 +1,9 @@
+import type { MockedFunction } from "vitest";
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
-import { render, cleanup, screen, fireEvent } from "../../../../../config/jest/test-utils";
-import { mock } from "jest-mock-extended";
+import { render, cleanup, screen, fireEvent } from "../../../../../config/tests/test-utils";
+import { mock } from "vitest-mock-extended";
 import configureStore from "redux-mock-store";
 import "@testing-library/jest-dom";
 
@@ -133,13 +134,13 @@ defaultProps.schema = {
 	],
 	schemaType: "module",
 };
-const restorePageNavigationActionMock = jest.fn();
+const restorePageNavigationActionMock = vi.fn();
 defaultProps.actions = {
 	restorePageNavigationAction: restorePageNavigationActionMock,
 };
-const setSelectedContentMock = defaultProps.setSelectedContent as jest.MockedFunction<(editorID: number) => void>;
-const setSelectedTabMocked = defaultProps.setSelectedTab as jest.MockedFunction<(tab: string) => void>;
-const setHistoryPushMocked = defaultProps.setHistoryPush as jest.MockedFunction<
+const setSelectedContentMock = defaultProps.setSelectedContent as MockedFunction<(editorID: number) => void>;
+const setSelectedTabMocked = defaultProps.setSelectedTab as MockedFunction<(tab: string) => void>;
+const setHistoryPushMocked = defaultProps.setHistoryPush as MockedFunction<
 	(path: string, isEditor: boolean) => void
 >;
 defaultProps.selectedTab = "content";

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

@@ -1,8 +1,8 @@
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import configureStore from "redux-mock-store";
 import { ThemeProvider } from "styled-components";
 
-import { cleanup, fireEvent, render, screen, waitFor } from "../../../../../config/jest/test-utils";
+import { cleanup, fireEvent, render, screen, waitFor } from "../../../../../config/tests/test-utils";
 import "@testing-library/jest-dom";
 
 import GlobalPageForm, { type IGlobalPageFormProps } from "@ax/components/ConfigPanel/GlobalPageForm";
@@ -11,9 +11,9 @@ import globalTheme from "@ax/themes/theme.json";
 
 import thunk from "redux-thunk";
 
-jest.mock("@ax/hooks", () => ({
-	...jest.requireActual("@ax/hooks"),
-	useGlobalPermission: jest.fn(() => true),
+vi.mock("@ax/hooks", async () => ({
+	...(await vi.importActual("@ax/hooks")),
+	useGlobalPermission: vi.fn(() => true),
 }));
 
 beforeEach(() => {
@@ -22,7 +22,7 @@ beforeEach(() => {
 
 const middlewares: any = [thunk];
 const mockStore = configureStore(middlewares);
-const updateEditorContentMock = jest.fn();
+const updateEditorContentMock = vi.fn();
 const initialStore = {
 	pageEditor: {
 		selectedContent: {
@@ -105,7 +105,7 @@ const initialStore = {
 const store = mockStore(initialStore);
 
 const defaultProps = mock<IGlobalPageFormProps>();
-const setNotificationActionMock = jest.fn();
+const setNotificationActionMock = vi.fn();
 defaultProps.actions.setNotificationAction = setNotificationActionMock;
 
 describe("GlobalPageForm component rendering", () => {
@@ -173,8 +173,8 @@ describe("GlobalPageForm component rendering", () => {
 describe("GlobalPageForm component rendering", () => {
 	it("should trigger handleClick", async () => {
 		defaultProps.selectedTab = "content";
-		const getGlobalFromLocalPageActionMock = jest.fn(() => Promise.resolve());
-		const saveCurrentSiteInfoActionMock = jest.fn();
+		const getGlobalFromLocalPageActionMock = vi.fn(() => Promise.resolve());
+		const saveCurrentSiteInfoActionMock = vi.fn();
 		defaultProps.actions.saveCurrentSiteInfoAction = saveCurrentSiteInfoActionMock;
 		defaultProps.actions.getGlobalFromLocalPageAction = getGlobalFromLocalPageActionMock;
 
@@ -199,7 +199,7 @@ describe("GlobalPageForm component rendering", () => {
 	it("should trigger handleRestoreHeader", () => {
 		defaultProps.selectedTab = "content";
 		defaultProps.header = 0;
-		const restorePageNavigationActionMock = jest.fn();
+		const restorePageNavigationActionMock = vi.fn();
 		defaultProps.actions.restorePageNavigationAction = restorePageNavigationActionMock;
 
 		render(
@@ -219,7 +219,7 @@ describe("GlobalPageForm component rendering", () => {
 	it("should trigger handleRestoreFooter", () => {
 		defaultProps.selectedTab = "content";
 		defaultProps.footer = 0;
-		const restorePageNavigationActionMock = jest.fn();
+		const restorePageNavigationActionMock = vi.fn();
 		defaultProps.actions.restorePageNavigationAction = restorePageNavigationActionMock;
 
 		render(

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

@@ -1,8 +1,9 @@
+import type { MockedFunction } from "vitest";
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
-import { render, cleanup, screen, fireEvent } from "../../../../../config/jest/test-utils";
-import { mock } from "jest-mock-extended";
+import { render, cleanup, screen, fireEvent } from "../../../../../config/tests/test-utils";
+import { mock } from "vitest-mock-extended";
 import configureStore from "redux-mock-store";
 import "@testing-library/jest-dom";
 
@@ -10,19 +11,19 @@ import { parseTheme } from "@ax/helpers";
 import Header, { IHeaderProps } from "@ax/components/ConfigPanel/Header";
 import globalTheme from "@ax/themes/theme.json";
 
-window.scrollTo = jest.fn();
+window.scrollTo = vi.fn();
 
 beforeEach(() => {
 	cleanup();
 });
 
 afterAll(() => {
-	jest.clearAllMocks();
+	vi.clearAllMocks();
 });
 
 const middlewares: any = [];
 const mockStore = configureStore(middlewares);
-const updateEditorContentMock = jest.fn();
+const updateEditorContentMock = vi.fn();
 const initialStore = {
 	pageEditor: {
 		selectedContent: {
@@ -74,11 +75,11 @@ const store = mockStore(initialStore);
 
 const defaultProps = mock<IHeaderProps>();
 defaultProps.actions = {
-	duplicateModuleAction: jest.fn(),
-	deleteModuleAction: jest.fn(),
-	copyModuleAction: jest.fn(),
+	duplicateModuleAction: vi.fn(),
+	deleteModuleAction: vi.fn(),
+	copyModuleAction: vi.fn(),
 };
-const setSelectedContentMock = defaultProps.setSelectedContent as jest.MockedFunction<(editorID: number) => void>;
+const setSelectedContentMock = defaultProps.setSelectedContent as MockedFunction<(editorID: number) => void>;
 
 defaultProps.schema = {
 	title: "Header",
@@ -111,7 +112,7 @@ defaultProps.breadcrumb = [
 defaultProps.activatedModules = ["TextField"];
 
 defaultProps.headerRef = { current: { offsetHeight: 63, offsetTop: 24 } } as React.RefObject<HTMLDivElement>;
-const setHeaderHeightMock = defaultProps.setHeaderHeight as jest.MockedFunction<(height: number) => void>;
+const setHeaderHeightMock = defaultProps.setHeaderHeight as MockedFunction<(height: number) => void>;
 
 describe("Header component rendering", () => {
 	it("should render component", () => {

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

@@ -1,8 +1,8 @@
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
-import { render, cleanup, screen, fireEvent } from "../../../../../../config/jest/test-utils";
-import { mock } from "jest-mock-extended";
+import { render, cleanup, screen, fireEvent } from "../../../../../../config/tests/test-utils";
+import { mock } from "vitest-mock-extended";
 import configureStore from "redux-mock-store";
 import "@testing-library/jest-dom";
 import thunk from "redux-thunk";

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

@@ -1,8 +1,8 @@
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
-import { render, cleanup, screen } from "../../../../../config/jest/test-utils";
-import { mock } from "jest-mock-extended";
+import { render, cleanup, screen } from "../../../../../config/tests/test-utils";
+import { mock } from "vitest-mock-extended";
 import configureStore from "redux-mock-store";
 import "@testing-library/jest-dom";
 import thunk from "redux-thunk";

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

@@ -1,8 +1,9 @@
+import type { MockedFunction } from "vitest";
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
-import { render, cleanup, screen, fireEvent } from "../../../../../config/jest/test-utils";
-import { mock } from "jest-mock-extended";
+import { render, cleanup, screen, fireEvent } from "../../../../../config/tests/test-utils";
+import { mock } from "vitest-mock-extended";
 import configureStore from "redux-mock-store";
 import "@testing-library/jest-dom";
 import thunk from "redux-thunk";
@@ -50,7 +51,7 @@ const store = mockStore(initialStore);
 const defaultProps = mock<IPreviewFormProps>();
 
 defaultProps.selectedTab = "content";
-const setSelectedTabMock = defaultProps.setSelectedTab as jest.MockedFunction<(tab: string) => void>;
+const setSelectedTabMock = defaultProps.setSelectedTab as MockedFunction<(tab: string) => void>;
 
 describe("PreviewForm component rendering", () => {
 	it("should render component", () => {