@griddo/ax 12.3.0 → 12.4.0

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

@@ -1,11 +1,12 @@
+import type { MockedFunction } from "vitest";
 import React from "react";
 import axios from "axios";
 import "@testing-library/jest-dom";
 import configureStore from "redux-mock-store";
 import { ThemeProvider } from "styled-components";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 
-import { render, cleanup, screen, act, fireEvent } from "../../../../../config/jest/test-utils";
+import { render, cleanup, screen, act, fireEvent } from "../../../../../config/tests/test-utils";
 import {
 	pageResponse,
 	pageResponseWithTabs,
@@ -19,7 +20,7 @@ import globalTheme from "@ax/themes/theme.json";
 
 afterEach(() => {
 	cleanup();
-	jest.resetAllMocks();
+	vi.resetAllMocks();
 });
 
 const defaultProps = mock<IUrlFieldProps>();
@@ -110,8 +111,8 @@ const mockStore = configureStore(middlewares);
 
 const store = mockStore(initialStore);
 
-jest.mock("axios");
-const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+vi.mock("axios");
+const mockedAxios = axios as MockedFunction<typeof axios>;
 const mockApiCalls = () =>
 	mockedAxios.mockImplementation((request: any) => {
 		switch (request.url) {
@@ -196,11 +197,11 @@ describe("UrlField component rendering", () => {
 			linkToURL: "//cx.dev.griddo.io/pre-griddo/gonzalo-h/new-page/",
 			anchor: "mega-anchor",
 		};
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		const initialState = { ...initialStore, ...defaultProps };
 
-		const handlePanel = jest.fn();
+		const handlePanel = vi.fn();
 
 		mockApiCalls();
 
@@ -223,8 +224,8 @@ describe("UrlField component rendering", () => {
 			linkTo: 4111,
 			linkToURL: "//cx.dev.griddo.io/pre-griddo/gonzalo-h/new-page/",
 		};
-		const onChange = jest.fn();
-		const handlePanel = jest.fn();
+		const onChange = vi.fn();
+		const handlePanel = vi.fn();
 
 		const initialState = { ...initialStore, ...defaultProps };
 
@@ -262,8 +263,8 @@ describe("UrlField component rendering", () => {
 			subSlug: "sub-slug",
 			anchor: "anchor",
 		};
-		const onChange = jest.fn();
-		const handlePanel = jest.fn();
+		const onChange = vi.fn();
+		const handlePanel = vi.fn();
 
 		const initialState = { ...initialStore, ...defaultProps };
 
@@ -311,7 +312,7 @@ describe("onChange events", () => {
 		defaultProps.value = null;
 		const initialState = { ...initialStore, ...defaultProps };
 
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		const responseFail = {
 			data: null,
@@ -365,12 +366,12 @@ describe("onClick events", () => {
 			anchor: "mega-anchor",
 		};
 
-		const onChange = jest.fn();
-		const handleValidation = jest.fn();
+		const onChange = vi.fn();
+		const handleValidation = vi.fn();
 
 		const initialState = { ...initialStore, ...defaultProps };
 
-		const handlePanel = jest.fn();
+		const handlePanel = vi.fn();
 
 		mockApiCalls();
 
@@ -416,10 +417,10 @@ describe("onClick events", () => {
 			anchor: "mega-anchor",
 		};
 
-		const onChange = jest.fn();
-		const handleValidation = jest.fn();
-		const handlePanel = jest.fn();
-		const resetValidation = jest.fn();
+		const onChange = vi.fn();
+		const handleValidation = vi.fn();
+		const handlePanel = vi.fn();
+		const resetValidation = vi.fn();
 
 		const initialState = { ...initialStore, ...defaultProps };
 

package/src/__tests__/components/Fields/VisualUniqueSelection/ImageSelection/ImageSelection.test.tsx

@@ -1,3 +1,4 @@
+import type { MockedFunction } from "vitest";
 import * as React from "react";
 import ImageSelection, { IImageSelectionProps } from "@ax/components/Fields/VisualUniqueSelection/ImageSelection";
 import { ThemeProvider } from "styled-components";
@@ -5,7 +6,7 @@ import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import "@testing-library/jest-dom";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 
 afterEach(cleanup);
 
@@ -14,7 +15,7 @@ defaultProps.theme = "default-theme";
 defaultProps.columns = 2;
 defaultProps.value = "value";
 defaultProps.title = "title";
-const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: string) => void>;
+const onChangeMock = defaultProps.onChange as MockedFunction<(value: string) => void>;
 defaultProps.name = "name";
 defaultProps.objKey = "element";
 

package/src/__tests__/components/Fields/VisualUniqueSelection/ScrollableSelection/ScrollableSelection.test.tsx

@@ -1,3 +1,4 @@
+import type { MockedFunction } from "vitest";
 import * as React from "react";
 import ScrollableSelection, {
 	IScrollableSelectionProps,
@@ -7,7 +8,7 @@ import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import "@testing-library/jest-dom";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 
 afterEach(cleanup);
 
@@ -31,11 +32,11 @@ defaultProps.elementUniqueSelection = true;
 defaultProps.columns = 2;
 defaultProps.value = "value";
 defaultProps.title = "title";
-const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: string) => void>;
+const onChangeMock = defaultProps.onChange as MockedFunction<(value: string) => void>;
 defaultProps.name = "name";
 defaultProps.objKey = "element";
 defaultProps.actions = {
-	replaceElementsInCollectionAction: jest.fn(),
+	replaceElementsInCollectionAction: vi.fn(),
 };
 defaultProps.selectedContent = {
 	component: "BasicContent",

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

@@ -6,7 +6,7 @@ import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import { render, screen, cleanup } from "@testing-library/react";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 
 afterEach(cleanup);
 

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

@@ -7,8 +7,8 @@ import globalTheme from "@ax/themes/theme.json";
 import { LinkPopover } from "@ax/components/Fields/Wysiwyg/atoms";
 
 // Mock createPortal to render content directly in the test DOM
-jest.mock("react-dom", () => {
-	const actual = jest.requireActual("react-dom");
+vi.mock("react-dom", async () => {
+	const actual = await vi.importActual("react-dom");
 	return {
 		...actual,
 		createPortal: (element: React.ReactNode) => element,
@@ -16,7 +16,7 @@ jest.mock("react-dom", () => {
 });
 
 // Mock FieldsBehavior and Button components
-jest.mock("@ax/components", () => ({
+vi.mock("@ax/components", async () => ({
 	Button: ({ onClick, disabled, children }: any) => (
 		<button type="button" onClick={onClick} disabled={disabled} data-testid="insert-button">
 			{children}
@@ -89,13 +89,13 @@ describe("LinkPopover", () => {
 		x: 100,
 		y: 100,
 		selectedText: "Click here",
-		onInsert: jest.fn(),
-		onClose: jest.fn(),
+		onInsert: vi.fn(),
+		onClose: vi.fn(),
 		linkData: null,
 	};
 
 	beforeEach(() => {
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 	});
 
 	describe("Rendering", () => {
@@ -168,7 +168,7 @@ describe("LinkPopover", () => {
 		});
 
 		it("should call onInsert with URL and text when INSERT is clicked", async () => {
-			const mockOnInsert = jest.fn();
+			const mockOnInsert = vi.fn();
 			const props = {
 				...defaultProps,
 				onInsert: mockOnInsert,
@@ -195,7 +195,7 @@ describe("LinkPopover", () => {
 		});
 
 		it("should use URL as text if link text is empty", async () => {
-			const mockOnInsert = jest.fn();
+			const mockOnInsert = vi.fn();
 			const props = {
 				...defaultProps,
 				selectedText: "",
@@ -220,7 +220,7 @@ describe("LinkPopover", () => {
 
 	describe("Link options", () => {
 		it("should include newTab option when checkbox is checked", async () => {
-			const mockOnInsert = jest.fn();
+			const mockOnInsert = vi.fn();
 			const props = {
 				...defaultProps,
 				onInsert: mockOnInsert,
@@ -247,7 +247,7 @@ describe("LinkPopover", () => {
 		});
 
 		it("should include noFollow option when checkbox is checked", async () => {
-			const mockOnInsert = jest.fn();
+			const mockOnInsert = vi.fn();
 			const props = {
 				...defaultProps,
 				onInsert: mockOnInsert,
@@ -342,7 +342,7 @@ describe("LinkPopover", () => {
 
 	describe("Text field handling", () => {
 		it("should update link text when text field changes", async () => {
-			const mockOnInsert = jest.fn();
+			const mockOnInsert = vi.fn();
 			const props = {
 				...defaultProps,
 				onInsert: mockOnInsert,

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

@@ -8,7 +8,7 @@ import {
 } from "@ax/components/Fields/Wysiwyg/helpers";
 
 // Mock the config module
-jest.mock("components", () => ({
+vi.mock("components", () => ({
 	config: {
 		schemas: {
 			config: {
@@ -239,7 +239,7 @@ describe("Wysiwyg helpers", () => {
 
 		it("should calculate position based on editor element bounds", () => {
 			// Mock getBoundingClientRect
-			editorEl.getBoundingClientRect = jest.fn(() => ({
+			editorEl.getBoundingClientRect = vi.fn(() => ({
 				left: 100,
 				top: 200,
 				width: 400,
@@ -267,7 +267,7 @@ describe("Wysiwyg helpers", () => {
 		});
 
 		it("should center popup horizontally in editor", () => {
-			editorEl.getBoundingClientRect = jest.fn(() => ({
+			editorEl.getBoundingClientRect = vi.fn(() => ({
 				left: 0,
 				top: 0,
 				width: 1000,
@@ -285,7 +285,7 @@ describe("Wysiwyg helpers", () => {
 		});
 
 		it("should position popup 50px below editor top", () => {
-			editorEl.getBoundingClientRect = jest.fn(() => ({
+			editorEl.getBoundingClientRect = vi.fn(() => ({
 				left: 0,
 				top: 100,
 				width: 500,
@@ -309,7 +309,7 @@ describe("Wysiwyg helpers", () => {
 
 		beforeEach(() => {
 			editorEl = document.createElement("div");
-			editorEl.getBoundingClientRect = jest.fn(() => ({
+			editorEl.getBoundingClientRect = vi.fn(() => ({
 				left: 0,
 				top: 0,
 				width: 400,
@@ -323,10 +323,10 @@ describe("Wysiwyg helpers", () => {
 
 			mockEditor = {
 				popups: {
-					create: jest.fn(),
-					onHide: jest.fn(),
-					show: jest.fn(),
-					hide: jest.fn(),
+					create: vi.fn(),
+					onHide: vi.fn(),
+					show: vi.fn(),
+					hide: vi.fn(),
 				},
 			};
 		});
@@ -377,18 +377,17 @@ describe("Wysiwyg helpers", () => {
 			);
 		});
 
-		it("showErrorPopup should hide error popup after 3 seconds", (done) => {
-			jest.useFakeTimers();
+		it("showErrorPopup should hide error popup after 3 seconds", () => {
+			vi.useFakeTimers();
 			const { showErrorPopup } = createPopupFunctions(mockEditor, editorEl);
 
 			showErrorPopup();
 
-			jest.advanceTimersByTime(3000);
+			vi.advanceTimersByTime(3000);
 
 			expect(mockEditor.popups.hide).toHaveBeenCalledWith("image.uploadError");
 
-			jest.useRealTimers();
-			done();
+			vi.useRealTimers();
 		});
 
 		it("showPopup should pass correct position arguments to show method", () => {

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

@@ -7,27 +7,27 @@ import globalTheme from "@ax/themes/theme.json";
 import configureStore from "redux-mock-store";
 import { ThemeProvider } from "styled-components";
 
-import { cleanup, render, screen } from "../../../../../config/jest/test-utils";
+import { cleanup, render, screen } from "../../../../../config/tests/test-utils";
 
-jest.mock("react-froala-wysiwyg", () => {
-	return function MockFroalaEditor(props: any) {
+vi.mock("react-froala-wysiwyg", () => ({
+	default: function MockFroalaEditor(props: any) {
 		const editorElRef = React.useRef<HTMLDivElement>(null);
 
 		React.useEffect(() => {
 			if (props.config?.events?.initialized && editorElRef.current) {
 				const mockEditor = {
-					$el: { get: jest.fn(() => editorElRef.current!) },
+					$el: { get: vi.fn(() => editorElRef.current!) },
 					el: editorElRef.current,
-					edit: { on: jest.fn(), off: jest.fn() },
-					link: { insert: jest.fn() },
-					image: { insert: jest.fn(), get: jest.fn(() => null) },
-					html: { get: jest.fn(() => props.model) },
-					selection: { save: jest.fn(), restore: jest.fn() },
+					edit: { on: vi.fn(), off: vi.fn() },
+					link: { insert: vi.fn() },
+					image: { insert: vi.fn(), get: vi.fn(() => null) },
+					html: { get: vi.fn(() => props.model) },
+					selection: { save: vi.fn(), restore: vi.fn() },
 					popups: {
-						create: jest.fn(),
-						onHide: jest.fn(),
-						show: jest.fn(),
-						hide: jest.fn(),
+						create: vi.fn(),
+						onHide: vi.fn(),
+						show: vi.fn(),
+						hide: vi.fn(),
 					},
 				};
 				props.config.events.initialized.call(mockEditor);
@@ -44,12 +44,12 @@ jest.mock("react-froala-wysiwyg", () => {
 				/>
 			</div>
 		);
-	};
-});
+	},
+}));
 
 afterEach(() => {
 	cleanup();
-	jest.resetAllMocks();
+	vi.resetAllMocks();
 	delete (window as any).__froalaEditorInstance;
 });
 
@@ -65,9 +65,9 @@ const mockStore = configureStore();
 const store = mockStore(initialStore);
 
 const createMockProps = (overrides?: Partial<IWysiwygProps>): IWysiwygProps => {
-	const mockUploadImage = jest.fn().mockResolvedValue(null);
-	const mockOnChange = jest.fn();
-	const mockHandleValidation = jest.fn();
+	const mockUploadImage = vi.fn().mockResolvedValue(null);
+	const mockOnChange = vi.fn();
+	const mockHandleValidation = vi.fn();
 
 	return {
 		value: "",
@@ -172,7 +172,7 @@ describe("Wysiwyg component rendering", () => {
 
 describe("Wysiwyg file handling", () => {
 	it("should call onChange when content changes", async () => {
-		const mockOnChange = jest.fn();
+		const mockOnChange = vi.fn();
 		const props = createMockProps({ value: "Initial text", onChange: mockOnChange });
 
 		render(
@@ -187,7 +187,7 @@ describe("Wysiwyg file handling", () => {
 	});
 
 	it("should insert file with correct URL and fileName", async () => {
-		const mockOnChange = jest.fn();
+		const mockOnChange = vi.fn();
 		const props = createMockProps({ value: "", onChange: mockOnChange });
 
 		render(
@@ -279,7 +279,7 @@ describe("Wysiwyg editor interactions", () => {
 
 describe("Wysiwyg file and image handling", () => {
 	it("should insert file link with correct URL and fileName", () => {
-		const mockOnChange = jest.fn();
+		const mockOnChange = vi.fn();
 		const props = createMockProps({ value: "", onChange: mockOnChange });
 
 		render(
@@ -389,7 +389,7 @@ describe("Wysiwyg file and image handling", () => {
 
 describe("Wysiwyg handlers", () => {
 	it("handleChange: onChange should be called when editor content changes", () => {
-		const mockOnChange = jest.fn();
+		const mockOnChange = vi.fn();
 		const newContent = "<p>Updated content</p>";
 		const props = createMockProps({
 			value: "Initial",
@@ -412,7 +412,7 @@ describe("Wysiwyg handlers", () => {
 	});
 
 	it("handleChange: handleValidation should be called on change", () => {
-		const mockHandleValidation = jest.fn();
+		const mockHandleValidation = vi.fn();
 		const props = createMockProps({
 			value: "initial",
 			handleValidation: mockHandleValidation,
@@ -590,7 +590,7 @@ describe("Wysiwyg handlers", () => {
 	});
 
 	it("should handle drop event preparation", () => {
-		const mockUploadImage = jest.fn().mockResolvedValue({
+		const mockUploadImage = vi.fn().mockResolvedValue({
 			url: "http://example.com/uploaded.jpg",
 			alt: "",
 		});
@@ -707,7 +707,7 @@ describe("Wysiwyg handlers", () => {
 
 describe("Wysiwyg handleChange - empty paragraph filtering", () => {
 	it("should track last value in lastValueRef to detect real changes", () => {
-		const mockOnChange = jest.fn();
+		const mockOnChange = vi.fn();
 		const initialValue = "<p>Content</p>";
 		const props = createMockProps({
 			value: initialValue,
@@ -728,7 +728,7 @@ describe("Wysiwyg handleChange - empty paragraph filtering", () => {
 	});
 
 	it("should include validation callback in handleChange logic", () => {
-		const mockHandleValidation = jest.fn();
+		const mockHandleValidation = vi.fn();
 		const props = createMockProps({
 			value: "initial",
 			handleValidation: mockHandleValidation,
@@ -749,7 +749,7 @@ describe("Wysiwyg handleChange - empty paragraph filtering", () => {
 
 describe("Wysiwyg handleInsertLink - image link support", () => {
 	it("should support isImageLink flag in linkData", () => {
-		const mockOnChange = jest.fn();
+		const mockOnChange = vi.fn();
 		const props = createMockProps({
 			value: "",
 			onChange: mockOnChange,

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

@@ -1,3 +1,4 @@
+import type { MockedFunction } from "vitest";
 import "@testing-library/jest-dom";
 
 import FieldsBehavior from "@ax/components/FieldsBehavior";
@@ -9,24 +10,24 @@ import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/re
 import { ThemeProvider } from "styled-components";
 
 // Mock dependencies
-jest.mock("@ax/forms", () => ({
-	getValidity: jest.fn(),
+vi.mock("@ax/forms", async () => ({
+	getValidity: vi.fn(),
 }));
-jest.mock("@ax/helpers", () => ({
-	...jest.requireActual("@ax/helpers"),
-	getFieldByPath: jest.fn(() => () => <div data-testid="mock-field" />),
-	isEmptyContainer: jest.fn(() => ({ isEmpty: false })),
-	slugify: jest.fn((text: string) => (text || "").toLowerCase().replace(/\s+/g, "-")),
+vi.mock("@ax/helpers", async () => ({
+	...(await vi.importActual("@ax/helpers")),
+	getFieldByPath: vi.fn(() => () => <div data-testid="mock-field" />),
+	isEmptyContainer: vi.fn(() => ({ isEmpty: false })),
+	slugify: vi.fn((text: string) => (text || "").toLowerCase().replace(/\s+/g, "-")),
 }));
 
-const mockGetValidity = getValidity as jest.MockedFunction<typeof getValidity>;
-const _mockGetFieldByPath = getFieldByPath as jest.MockedFunction<typeof getFieldByPath>;
-const mockIsEmptyContainer = isEmptyContainer as jest.MockedFunction<typeof isEmptyContainer>;
-const mockSlugify = slugify as jest.MockedFunction<typeof slugify>;
+const mockGetValidity = getValidity as MockedFunction<typeof getValidity>;
+const _mockGetFieldByPath = getFieldByPath as MockedFunction<typeof getFieldByPath>;
+const mockIsEmptyContainer = isEmptyContainer as MockedFunction<typeof isEmptyContainer>;
+const mockSlugify = slugify as MockedFunction<typeof slugify>;
 
 afterEach(() => {
 	cleanup();
-	jest.clearAllMocks();
+	vi.clearAllMocks();
 });
 
 // Default mock setup for getValidity
@@ -209,7 +210,7 @@ describe("FieldsBehavior validation", () => {
 	});
 
 	it("should validate on error prop change", () => {
-		const deleteError = jest.fn();
+		const deleteError = vi.fn();
 		const error = {
 			type: "validation",
 			message: "Required",
@@ -326,7 +327,7 @@ describe("FieldsBehavior slug synchronization", () => {
 	});
 
 	it("should have correct sync behavior for page slug", () => {
-		const updateValue = jest.fn();
+		const updateValue = vi.fn();
 		mockSlugify.mockReturnValue("new-title");
 
 		const props = {