@griddo/ax 12.3.0 → 12.5.0

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

@@ -1,3 +1,4 @@
+import type { MockedFunction } from "vitest";
 import React from "react";
 import axios from "axios";
 import "@testing-library/jest-dom";
@@ -7,25 +8,25 @@ import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import { render, screen, cleanup, act } from "@testing-library/react";
 import { ISite } from "@ax/types";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 
 afterEach(cleanup);
 
-const defaultProps = mock<IAsyncSelectProps>();
+const makeProps = (overrides: Partial<IAsyncSelectProps> = {}): IAsyncSelectProps =>
+	Object.assign(mock<IAsyncSelectProps>(), overrides);
 
 const defaultSite = mock<ISite>();
 defaultSite.id = 113;
 
-jest.mock("axios");
-const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+vi.mock("axios");
+const mockedAxios = axios as MockedFunction<typeof axios>;
 
 describe("AsyncSelect component rendering", () => {
 	test("should render the component AsyncSelect", async () => {
-		defaultProps.name = "texto de prueba";
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<AsyncSelect {...defaultProps} />
+					<AsyncSelect {...makeProps({ name: "texto de prueba" })} />
 				</ThemeProvider>,
 			);
 		});
@@ -35,15 +36,6 @@ describe("AsyncSelect component rendering", () => {
 
 describe("AsyncSelect component events", () => {
 	test("should call the api and receive data in pages", async () => {
-		defaultProps.site = defaultSite;
-		defaultProps.entity = "pages";
-		defaultProps.options = {
-			excludeDetailPages: true,
-		};
-		defaultProps.lang = "en_GB";
-		defaultProps.selectedContent = { id: 1 };
-		defaultProps.value = [3622, 3621];
-
 		const data = {
 			data: [
 				{
@@ -82,7 +74,18 @@ describe("AsyncSelect component events", () => {
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<AsyncSelect {...defaultProps} />
+					<AsyncSelect
+						{...makeProps({
+							site: defaultSite,
+							entity: "pages",
+							options: {
+								excludeDetailPages: true,
+							},
+							lang: "en_GB",
+							selectedContent: { id: 1 },
+							value: [3622, 3621],
+						})}
+					/>
 				</ThemeProvider>,
 			);
 		});
@@ -91,15 +94,6 @@ describe("AsyncSelect component events", () => {
 	});
 
 	test("should call the api and receive data in pages with no selectedContent", async () => {
-		defaultProps.site = defaultSite;
-		defaultProps.entity = "pages";
-		defaultProps.options = {
-			excludeDetailPages: true,
-		};
-		defaultProps.lang = "en_GB";
-		defaultProps.selectedContent = null;
-		defaultProps.value = 3622;
-
 		const data = {
 			data: [
 				{
@@ -138,7 +132,18 @@ describe("AsyncSelect component events", () => {
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<AsyncSelect {...defaultProps} />
+					<AsyncSelect
+						{...makeProps({
+							site: defaultSite,
+							entity: "pages",
+							options: {
+								excludeDetailPages: true,
+							},
+							lang: "en_GB",
+							selectedContent: null,
+							value: 3622,
+						})}
+					/>
 				</ThemeProvider>,
 			);
 		});
@@ -147,14 +152,6 @@ describe("AsyncSelect component events", () => {
 	});
 
 	test("should call the api and receive data in categories", async () => {
-		defaultProps.site = defaultSite;
-		defaultProps.entity = "categories";
-		defaultProps.options = {
-			excludeDetailPages: true,
-		};
-		defaultProps.lang = "en_GB";
-		defaultProps.value = 3622;
-
 		const data = {
 			data: [
 				{
@@ -193,7 +190,17 @@ describe("AsyncSelect component events", () => {
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<AsyncSelect {...defaultProps} />
+					<AsyncSelect
+						{...makeProps({
+							site: defaultSite,
+							entity: "categories",
+							options: {
+								excludeDetailPages: true,
+							},
+							lang: "en_GB",
+							value: 3622,
+						})}
+					/>
 				</ThemeProvider>,
 			);
 		});
@@ -202,13 +209,6 @@ describe("AsyncSelect component events", () => {
 	});
 
 	test("should call the api and not receiving data", async () => {
-		defaultProps.site = defaultSite;
-		defaultProps.entity = "categories";
-		defaultProps.options = {
-			excludeDetailPages: true,
-		};
-		defaultProps.lang = "en_GB";
-
 		const data = {
 			data: [],
 			status: 500,
@@ -222,7 +222,16 @@ describe("AsyncSelect component events", () => {
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<AsyncSelect {...defaultProps} />
+					<AsyncSelect
+						{...makeProps({
+							site: defaultSite,
+							entity: "categories",
+							options: {
+								excludeDetailPages: true,
+							},
+							lang: "en_GB",
+						})}
+					/>
 				</ThemeProvider>,
 			);
 		});
@@ -231,15 +240,6 @@ describe("AsyncSelect component events", () => {
 	});
 
 	test("should call the api with source", async () => {
-		defaultProps.site = defaultSite;
-		defaultProps.entity = "categories";
-		defaultProps.source = "source";
-		defaultProps.options = {
-			excludeDetailPages: true,
-		};
-		defaultProps.lang = "en_GB";
-		defaultProps.value = 3787;
-
 		const data = {
 			data: [
 				{
@@ -278,7 +278,18 @@ describe("AsyncSelect component events", () => {
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<AsyncSelect {...defaultProps} />
+					<AsyncSelect
+						{...makeProps({
+							site: defaultSite,
+							entity: "categories",
+							source: "source",
+							options: {
+								excludeDetailPages: true,
+							},
+							lang: "en_GB",
+							value: 3787,
+						})}
+					/>
 				</ThemeProvider>,
 			);
 		});

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

@@ -1,5 +1,6 @@
+import type { MockedFunction } from "vitest";
 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";
 import "@testing-library/jest-dom";
 
@@ -86,7 +87,7 @@ describe("Button component rendering", () => {
 	it("should trigger the onClick action", () => {
 		const props = createDefaultProps();
 		props.buttonStyle = "lineInverse";
-		const handleOnClickMock = props.onClick as jest.MockedFunction<(e: React.MouseEvent<HTMLButtonElement>) => void>;
+		const handleOnClickMock = props.onClick as MockedFunction<(e: React.MouseEvent<HTMLButtonElement>) => void>;
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
 				<Button {...props} />
@@ -103,7 +104,7 @@ describe("Button component rendering", () => {
 		const props = createDefaultProps();
 		props.buttonStyle = "lineInverse";
 		props.disabled = true;
-		const handleOnClickMock = props.onClick as jest.MockedFunction<(e: React.MouseEvent<HTMLButtonElement>) => void>;
+		const handleOnClickMock = props.onClick as MockedFunction<(e: React.MouseEvent<HTMLButtonElement>) => void>;
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
 				<Button {...props} />

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

@@ -18,7 +18,7 @@ const defaultProps = {
 	error: false,
 	disabled: false,
 	indeterminate: false,
-	onChange: jest.fn(),
+	onChange: vi.fn(),
 	icon: "",
 };
 
@@ -48,7 +48,7 @@ describe("CheckField component rendering", () => {
 			error: false,
 			disabled: false,
 			indeterminate: false,
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			icon: "",
 		};
 
@@ -77,7 +77,7 @@ describe("CheckField component rendering", () => {
 			error: false,
 			disabled: false,
 			indeterminate: true,
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			icon: "",
 		};
 
@@ -108,7 +108,7 @@ describe("CheckField component rendering", () => {
 			error: false,
 			disabled: false,
 			indeterminate: false,
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			icon: "icon",
 		};
 
@@ -126,7 +126,7 @@ describe("CheckField component rendering", () => {
 
 describe("CheckField events", () => {
 	it("should call the onchange", () => {
-		const onChangeMock = jest.fn();
+		const onChangeMock = vi.fn();
 
 		const props = {
 			name: "name",

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

@@ -15,7 +15,7 @@ afterEach(cleanup);
 const defaultProps = {
 	value: "",
 	options: [],
-	onChange: jest.fn(),
+	onChange: vi.fn(),
 };
 
 const user = userEvent.setup();
@@ -45,7 +45,7 @@ describe("CheckField component rendering", () => {
 		const props = {
 			value: "",
 			options: checkFieldOptions,
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 		};
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -71,7 +71,7 @@ describe("CheckField component rendering", () => {
 		const props = {
 			value: undefined,
 			options: checkFieldOptions,
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 		};
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -97,7 +97,7 @@ describe("CheckField component rendering", () => {
 		const props = {
 			value: null,
 			options: checkFieldOptions,
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 		};
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -122,7 +122,7 @@ describe("CheckField events", () => {
 				value: 2,
 			},
 		];
-		const onChangeMock = jest.fn();
+		const onChangeMock = vi.fn();
 
 		const props = {
 			value: "",
@@ -157,7 +157,7 @@ describe("CheckField events", () => {
 				value: 2,
 			},
 		];
-		const onChangeMock = jest.fn();
+		const onChangeMock = vi.fn();
 
 		const props = {
 			value: "",
@@ -194,7 +194,7 @@ describe("CheckField events", () => {
 				value: 3,
 			},
 		];
-		const onChangeMock = jest.fn();
+		const onChangeMock = vi.fn();
 
 		const props = {
 			value: [],
@@ -237,7 +237,7 @@ describe("CheckField events", () => {
 				value: 4,
 			},
 		];
-		const onChangeMock = jest.fn();
+		const onChangeMock = vi.fn();
 
 		const props = {
 			value: [],
@@ -284,7 +284,7 @@ describe("CheckField events", () => {
 				value: 4,
 			},
 		];
-		const onChangeMock = jest.fn();
+		const onChangeMock = vi.fn();
 
 		const props = {
 			value: [],
@@ -331,7 +331,7 @@ describe("CheckField events", () => {
 				value: 4,
 			},
 		];
-		const onChangeMock = jest.fn();
+		const onChangeMock = vi.fn();
 
 		const props = {
 			value: ["novalid"],

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

@@ -5,32 +5,30 @@ import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 
 afterEach(cleanup);
 
-const defaultProps = mock<IProps>();
+// `onChange` es obligatoria y el componente la invoca. El proxy de `mock<T>()`
+// solo materializa una prop al accederla y el spread de JSX copia solo las
+// propias, así que sin ponerla aquí no llegaría al componente.
+const makeProps = (overrides: Partial<IProps> = {}): IProps =>
+	Object.assign(mock<IProps>(), { onChange: vi.fn() }, overrides);
 
 describe("ColorPicker component rendering", () => {
 	test("should render the component ColorPicker", () => {
-		defaultProps.value = "#000000";
-		defaultProps.theme = parseTheme(globalTheme);
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ColorPicker {...defaultProps} />
+				<ColorPicker {...makeProps({ value: "#000000", theme: parseTheme(globalTheme) })} />
 			</ThemeProvider>,
 		);
 		expect(screen.getByTestId("color-picker-wrapper")).toBeTruthy();
 	});
 
 	test("should render the Picker", () => {
-		defaultProps.value = "#000000";
-		defaultProps.theme = parseTheme(globalTheme);
-		defaultProps.error = true;
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ColorPicker {...defaultProps} />
+				<ColorPicker {...makeProps({ value: "#000000", theme: parseTheme(globalTheme), error: true })} />
 			</ThemeProvider>,
 		);
 		const inputActionComponent = screen.getByTestId("icon-action-component");
@@ -42,15 +40,19 @@ describe("ColorPicker component rendering", () => {
 
 describe("ColorPicker events", () => {
 	test("should trigger the onChange", () => {
-		defaultProps.value = "#000000";
-		defaultProps.theme = parseTheme(globalTheme);
-		defaultProps.colors = ["#000000", "#d9e3f0", "#f47373", "#697689"];
-		defaultProps.isThemePalette = false;
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(newColor: string) => void>;
+		const onChangeMock = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ColorPicker {...defaultProps} />
+				<ColorPicker
+					{...makeProps({
+						onChange: onChangeMock,
+						value: "#000000",
+						theme: parseTheme(globalTheme),
+						colors: ["#000000", "#d9e3f0", "#f47373", "#697689"],
+						isThemePalette: false,
+					})}
+				/>
 			</ThemeProvider>,
 		);
 		const inputComponent = screen.getByTestId("input-picker-wrapper");
@@ -64,15 +66,17 @@ describe("ColorPicker events", () => {
 	});
 
 	test("should trigger the onChange", () => {
-		defaultProps.value = "#000000";
-		defaultProps.theme = parseTheme(globalTheme);
-		const handleValidationMock = defaultProps.handleValidation as jest.MockedFunction<
-			(value: string, validators: Record<string, unknown>) => void
-		>;
-		defaultProps.error = true;
+		const handleValidationMock = vi.fn();
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ColorPicker {...defaultProps} />
+				<ColorPicker
+					{...makeProps({
+						handleValidation: handleValidationMock,
+						value: "#000000",
+						theme: parseTheme(globalTheme),
+						error: true,
+					})}
+				/>
 			</ThemeProvider>,
 		);
 		const inputComponent = screen.getByTestId("input-picker-wrapper");
@@ -82,13 +86,12 @@ describe("ColorPicker events", () => {
 	});
 
 	test("should trigger the onChange of the Picker", async () => {
-		defaultProps.value = "#000000";
-		defaultProps.theme = parseTheme(globalTheme);
-		defaultProps.error = true;
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(newColor: string) => void>;
+		const onChangeMock = vi.fn();
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ColorPicker {...defaultProps} />
+				<ColorPicker
+					{...makeProps({ onChange: onChangeMock, value: "#000000", theme: parseTheme(globalTheme), error: true })}
+				/>
 			</ThemeProvider>,
 		);
 
@@ -102,14 +105,18 @@ describe("ColorPicker events", () => {
 	});
 
 	test("should trigger the onChange of the Picker with color", async () => {
-		defaultProps.value = "#000000";
-		defaultProps.theme = parseTheme(globalTheme);
-		defaultProps.error = true;
-		defaultProps.colors = ["#fff", "#000"];
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(newColor: string) => void>;
+		const onChangeMock = vi.fn();
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ColorPicker {...defaultProps} />
+				<ColorPicker
+					{...makeProps({
+						onChange: onChangeMock,
+						value: "#000000",
+						theme: parseTheme(globalTheme),
+						error: true,
+						colors: ["#fff", "#000"],
+					})}
+				/>
 			</ThemeProvider>,
 		);
 
@@ -123,17 +130,19 @@ describe("ColorPicker events", () => {
 	});
 
 	test("should not pass colors to picker", async () => {
-		defaultProps.value = "#000000";
-		defaultProps.theme = "default";
-		defaultProps.error = true;
-		defaultProps.colors = [
-			{ color: "#f0f0f0", theme: "default" },
-			{ color: "#fff", theme: "cms-default" },
-		];
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ColorPicker {...defaultProps} />
+				<ColorPicker
+					{...makeProps({
+						value: "#000000",
+						theme: "default",
+						error: true,
+						colors: [
+							{ color: "#f0f0f0", theme: "default" },
+							{ color: "#fff", theme: "cms-default" },
+						],
+					})}
+				/>
 			</ThemeProvider>,
 		);
 
@@ -146,17 +155,19 @@ describe("ColorPicker events", () => {
 	});
 
 	test("should pass colors to picker", async () => {
-		defaultProps.value = "#000000";
-		defaultProps.theme = "default";
-		defaultProps.error = true;
-		defaultProps.colors = [
-			{ options: ["#f0f0f0"], theme: "default" },
-			{ color: "#fff", theme: "cms-default" },
-		];
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ColorPicker {...defaultProps} />
+				<ColorPicker
+					{...makeProps({
+						value: "#000000",
+						theme: "default",
+						error: true,
+						colors: [
+							{ options: ["#f0f0f0"], theme: "default" },
+							{ color: "#fff", theme: "cms-default" },
+						],
+					})}
+				/>
 			</ThemeProvider>,
 		);
 
@@ -169,15 +180,13 @@ describe("ColorPicker events", () => {
 	});
 
 	test("should trigger the handleOnBlur", async () => {
-		defaultProps.value = "#000000";
-		defaultProps.theme = parseTheme(globalTheme);
-		const handleValidationMock = defaultProps.handleValidation as jest.MockedFunction<
-			(value: string, validators: Record<string, unknown>) => void
-		>;
+		const handleValidationMock = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ColorPicker {...defaultProps} />
+				<ColorPicker
+					{...makeProps({ handleValidation: handleValidationMock, value: "#000000", theme: parseTheme(globalTheme) })}
+				/>
 			</ThemeProvider>,
 		);
 		const inputComponent = screen.getByTestId("input-picker-wrapper");

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

@@ -7,7 +7,7 @@ import { IModule } from "@ax/types";
 import { ISameComponentArrayProps } from "@ax/components/Fields/ComponentArray/SameComponentArray";
 import { IMixableComponentArrayProps } from "@ax/components/Fields/ComponentArray/MixableComponentArray";
 import { render, screen, cleanup } from "@testing-library/react";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 
 afterEach(cleanup);
 
@@ -148,8 +148,8 @@ describe("ComponentArraySelector component rendering", () => {
 		sameProps.disabled = false;
 		sameProps.maxItems = 10;
 		sameProps.actions = {
-			addModuleAction: jest.fn(),
-			addComponentAction: jest.fn(),
+			addModuleAction: vi.fn(),
+			addComponentAction: vi.fn(),
 		};
 
 		render(