@griddo/ax 12.3.0 → 12.5.0

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

@@ -2,7 +2,7 @@ import { ThemeProvider } from "styled-components";
 import { render, screen, cleanup } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 
 import { parseTheme } from "@ax/helpers";
 
@@ -11,13 +11,14 @@ import globalTheme from "@ax/themes/theme.json";
 
 afterEach(cleanup);
 
-const defaultProps = mock<IElementsTooltipProps>();
+const makeProps = (overrides: Partial<IElementsTooltipProps> = {}): IElementsTooltipProps =>
+	Object.assign(mock<IElementsTooltipProps>(), overrides);
 
 describe("Tooltip component rendering", () => {
 	it("should not render the component", () => {
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ElementsTooltip {...defaultProps} />
+				<ElementsTooltip {...makeProps()} />
 			</ThemeProvider>,
 		);
 
@@ -27,13 +28,9 @@ describe("Tooltip component rendering", () => {
 	});
 
 	it("should render the component with one element visible", async () => {
-		defaultProps.elements = ["uno", "dos", "tres"];
-		defaultProps.colors = { uno: "#fff" };
-		defaultProps.rounded = true;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ElementsTooltip {...defaultProps} />
+				<ElementsTooltip {...makeProps({ elements: ["uno", "dos", "tres"], colors: { uno: "#fff" }, rounded: true })} />
 			</ThemeProvider>,
 		);
 
@@ -59,13 +56,9 @@ describe("Tooltip component rendering", () => {
 	});
 
 	it("should render the component with three elements visibles", () => {
-		defaultProps.elements = ["uno", "dos", "tres"];
-		defaultProps.defaultElements = 3;
-		defaultProps.maxChar = 1;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ElementsTooltip {...defaultProps} />
+				<ElementsTooltip {...makeProps({ elements: ["uno", "dos", "tres"], defaultElements: 3, maxChar: 1 })} />
 			</ThemeProvider>,
 		);
 
@@ -79,13 +72,9 @@ describe("Tooltip component rendering", () => {
 	});
 
 	it("should render the component with one row", async () => {
-		defaultProps.elements = ["uno", "dos", "tres"];
-		defaultProps.defaultElements = 1;
-		defaultProps.elementsPerRow = 3;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ElementsTooltip {...defaultProps} />
+				<ElementsTooltip {...makeProps({ elements: ["uno", "dos", "tres"], defaultElements: 1, elementsPerRow: 3 })} />
 			</ThemeProvider>,
 		);
 

package/src/__tests__/components/EmptyState/EmptyState.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";
 import "@testing-library/jest-dom";
@@ -12,13 +12,17 @@ import globalTheme from "@ax/themes/theme.json";
 
 afterEach(cleanup);
 
-const defaultProps = mock<IEmptyStateProps>();
+// Props nuevos en cada test: antes se compartía un solo objeto mutable y el
+// primer test, que comprueba el estado por defecto, fallaba en cuanto los
+// siguientes le habían puesto title, message o button.
+const makeProps = (overrides: Partial<IEmptyStateProps> = {}): IEmptyStateProps =>
+	Object.assign(mock<IEmptyStateProps>(), overrides);
 
 describe("EmptyState component rendering", () => {
 	it("should render the component", () => {
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<EmptyState {...defaultProps} />
+				<EmptyState {...makeProps()} />
 			</ThemeProvider>,
 		);
 
@@ -28,10 +32,9 @@ describe("EmptyState component rendering", () => {
 	});
 
 	it("should render the component with title", () => {
-		defaultProps.title = "The title";
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<EmptyState {...defaultProps} />
+				<EmptyState {...makeProps({ title: "The title" })} />
 			</ThemeProvider>,
 		);
 
@@ -41,10 +44,9 @@ describe("EmptyState component rendering", () => {
 	});
 
 	it("should render the component with message", () => {
-		defaultProps.message = "A message";
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<EmptyState {...defaultProps} />
+				<EmptyState {...makeProps({ message: "A message" })} />
 			</ThemeProvider>,
 		);
 
@@ -56,13 +58,11 @@ describe("EmptyState component rendering", () => {
 
 describe("EmptyState component events", () => {
 	it("should trigger the onClick", () => {
-		const actionFunc = jest.fn();
-		defaultProps.button = "A button";
-		defaultProps.action = actionFunc;
+		const actionFunc = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<EmptyState {...defaultProps} />
+				<EmptyState {...makeProps({ button: "A button", action: actionFunc })} />
 			</ThemeProvider>,
 		);
 

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

@@ -2,7 +2,7 @@ import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
 import { render, cleanup, screen, fireEvent } from "@testing-library/react";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import "@testing-library/jest-dom";
 
 import { parseTheme } from "@ax/helpers";
@@ -43,8 +43,8 @@ describe("ErrorCenter component rendering", () => {
 		errorItemProps.template = false;
 
 		const actionsMock = {
-			goToError: jest.fn(),
-			goToPackage: jest.fn(),
+			goToError: vi.fn(),
+			goToPackage: vi.fn(),
 		};
 
 		defaultProps.errors = [errorItemProps];
@@ -74,8 +74,8 @@ describe("ErrorCenter component rendering", () => {
 		errorItemProps.template = false;
 
 		const actionsMock = {
-			goToError: jest.fn(),
-			goToPackage: jest.fn(),
+			goToError: vi.fn(),
+			goToPackage: vi.fn(),
 		};
 
 		defaultProps.errors = [errorItemProps];
@@ -103,8 +103,8 @@ describe("ErrorCenter component rendering", () => {
 		errorItemProps.template = false;
 
 		const actionsMock = {
-			goToError: jest.fn(),
-			goToPackage: jest.fn(),
+			goToError: vi.fn(),
+			goToPackage: vi.fn(),
 		};
 
 		defaultProps.errors = [errorItemProps];
@@ -134,8 +134,8 @@ describe("ErrorCenter component trigger actions", () => {
 		errorItemProps.template = false;
 
 		const actionsMock = {
-			goToError: jest.fn(),
-			goToPackage: jest.fn(),
+			goToError: vi.fn(),
+			goToPackage: vi.fn(),
 		};
 
 		defaultProps.errors = [errorItemProps];
@@ -165,8 +165,8 @@ describe("ErrorCenter component trigger actions", () => {
 		errorItemProps.template = false;
 
 		const actionsMock = {
-			goToError: jest.fn(),
-			goToPackage: jest.fn(),
+			goToError: vi.fn(),
+			goToPackage: vi.fn(),
 		};
 
 		defaultProps.errors = [errorItemProps];

package/src/__tests__/components/FieldContainer/FieldContainer.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 } from "@testing-library/react";
 import { parseTheme } from "@ax/helpers";
 import "@testing-library/jest-dom";
@@ -22,7 +22,7 @@ describe("FieldContainer component rendering", () => {
 			hideable: true,
 			slugTo: "/",
 		};
-		defaultProps.updateValue = jest.fn();
+		defaultProps.updateValue = vi.fn();
 		defaultProps.selectedContent = { id: 1, component: "BasicCard" };
 		defaultProps.objKey = "id";
 
@@ -45,7 +45,7 @@ describe("FieldContainer component rendering", () => {
 			slugTo: "/",
 			whiteList: ["BasicCard", "CollectionCard"],
 		};
-		defaultProps.updateValue = jest.fn();
+		defaultProps.updateValue = vi.fn();
 		defaultProps.selectedContent = { id: 1 };
 
 		render(
@@ -66,7 +66,7 @@ describe("FieldContainer component rendering", () => {
 			hideable: true,
 			slugTo: "/",
 		};
-		defaultProps.updateValue = jest.fn();
+		defaultProps.updateValue = vi.fn();
 		defaultProps.selectedContent = { id: 1, value: null };
 		defaultProps.objKey = "value";
 

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

@@ -3,7 +3,7 @@ import "@testing-library/jest-dom";
 import configureStore from "redux-mock-store";
 import { ThemeProvider } from "styled-components";
 
-import { render, cleanup } from "../../../../../config/jest/test-utils";
+import { render, cleanup } from "../../../../../config/tests/test-utils";
 
 import AnalyticsField from "@ax/components/Fields/AnalyticsField";
 import { parseTheme } from "@ax/helpers";
@@ -33,7 +33,7 @@ describe("AnalyticsField component rendering", () => {
 		const initialState = {
 			value: valuesMock,
 			template: "BasicTemplate",
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			analytics: analyticsMock,
 		};
 		const initialStore = {
@@ -69,7 +69,7 @@ describe("AnalyticsField component rendering", () => {
 		const initialState = {
 			value: valuesMock,
 			template: "BasicTemplate",
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			analytics: analyticsMock,
 		};
 		const initialStore = {

package/src/__tests__/components/Fields/AnalyticsField/PageAnalytics/PageAnalytics.test.tsx

@@ -28,7 +28,7 @@ describe("PageAnalytics component rendering", () => {
 		const props = {
 			value: valuesMock,
 			template: "BasicTemplate",
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			analytics: analyticsMock,
 		};
 
@@ -79,7 +79,7 @@ describe("PageAnalytics component rendering", () => {
 		const props = {
 			value: valuesMock,
 			template: "BasicTemplate",
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			analytics: analyticsMockFilled,
 		};
 
@@ -126,7 +126,7 @@ describe("PageAnalytics component rendering", () => {
 		const props = {
 			value: valuesMock,
 			template: "BasicTemplate",
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			analytics: analyticsMockFilled,
 		};
 
@@ -176,7 +176,7 @@ describe("PageAnalytics component rendering", () => {
 		const props = {
 			value: valuesMock,
 			template: "BasicTemplate",
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			analytics: analyticsMockFilled,
 		};
 

package/src/__tests__/components/Fields/AnalyticsField/StructuredDataAnalytics/StructuredDataAnalytics.test.tsx

@@ -27,7 +27,7 @@ describe("StructuredDataAnalytics component rendering", () => {
 		const props = {
 			value: valuesMock,
 			template: "BasicTemplate",
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			analytics: analyticsMock,
 		};
 
@@ -70,7 +70,7 @@ describe("StructuredDataAnalytics component rendering", () => {
 		const props = {
 			value: valuesMock,
 			template: "BasicTemplate",
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			analytics: analyticsMockFilled,
 		};
 
@@ -117,7 +117,7 @@ describe("StructuredDataAnalytics component rendering", () => {
 		const props = {
 			value: valuesMock,
 			template: "BasicTemplate",
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			analytics: analyticsMockFilled,
 		};
 

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

@@ -1,13 +1,14 @@
+import type { MockedFunction } from "vitest";
 import ArrayFieldGroup, { type IProps } from "@ax/components/Fields/ArrayFieldGroup";
 import FieldsBehavior from "@ax/components/FieldsBehavior";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import configureStore from "redux-mock-store";
 import { ThemeProvider } from "styled-components";
 
-import { act, cleanup, fireEvent, render, screen } from "../../../../../config/jest/test-utils";
+import { act, cleanup, fireEvent, render, screen } from "../../../../../config/tests/test-utils";
 
 afterEach(cleanup);
 
@@ -107,7 +108,7 @@ describe("ArrayFieldGroup component rendering", () => {
 describe("ArrayFieldGroup component events", () => {
 	it("should call onChange when clicking the add button", async () => {
 		const props = makeProps();
-		const onChangeMock = props.onChange as jest.MockedFunction<IProps["onChange"]>;
+		const onChangeMock = props.onChange as MockedFunction<IProps["onChange"]>;
 
 		await renderGroup(props);
 
@@ -117,7 +118,7 @@ describe("ArrayFieldGroup component events", () => {
 
 	it("should call onChange when deleting an inline item", async () => {
 		const props = makeProps({ arrayType: "inline", innerFields: [makeField()] });
-		const onChangeMock = props.onChange as jest.MockedFunction<IProps["onChange"]>;
+		const onChangeMock = props.onChange as MockedFunction<IProps["onChange"]>;
 
 		await renderGroup(props);
 
@@ -154,7 +155,7 @@ describe("ArrayFieldGroup maxItems constraint", () => {
 
 	it("should not call onChange when the add button is clicked at maxItems", async () => {
 		const props = makeProps({ value: sampleValue, maxItems: 1 });
-		const onChangeMock = props.onChange as jest.MockedFunction<IProps["onChange"]>;
+		const onChangeMock = props.onChange as MockedFunction<IProps["onChange"]>;
 
 		await renderGroup(props);
 

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

@@ -1,3 +1,4 @@
+import type { MockedFunction } from "vitest";
 import type React from "react";
 
 import type { IAsyncCheckGroup } from "@ax/components/Fields/AsyncCheckGroup";
@@ -8,13 +9,13 @@ import type { ILanguage, ISite } from "@ax/types";
 
 import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
 import axios from "axios";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import { ThemeProvider } from "styled-components";
 
 afterEach(cleanup);
 
-jest.mock("axios");
-const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+vi.mock("axios");
+const mockedAxios = axios as MockedFunction<typeof axios>;
 
 const buildOkResponse = (data: any[]) => ({
 	data,
@@ -51,7 +52,7 @@ const flushPromises = () => new Promise((resolve) => setTimeout(resolve, 0));
 
 describe("AsyncCheckGroup component rendering", () => {
 	afterEach(() => {
-		jest.resetAllMocks();
+		vi.resetAllMocks();
 	});
 
 	it("should render the component with 6 options", async () => {
@@ -61,7 +62,7 @@ describe("AsyncCheckGroup component rendering", () => {
 		const defaultDataProps: IAsyncCheckGroup = {
 			site: defaultSite,
 			value: [{ value: 3622, name: "Home", title: "Home" }],
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			source: "NEWS",
 			contentType: "data",
 		};
@@ -78,7 +79,7 @@ describe("AsyncCheckGroup component rendering", () => {
 	it("should render the component with no options", async () => {
 		const defaultProps: IAsyncCheckGroup = {
 			value: [],
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			source: "NEWS",
 			contentType: "data",
 		};
@@ -101,7 +102,7 @@ describe("AsyncCheckGroup component rendering", () => {
 
 describe("AsyncCheckGroup - infinite render loop prevention", () => {
 	afterEach(() => {
-		jest.resetAllMocks();
+		vi.resetAllMocks();
 	});
 
 	it("should call the API only once across rerenders with unstable onChange and value references", async () => {
@@ -118,12 +119,12 @@ describe("AsyncCheckGroup - infinite render loop prevention", () => {
 
 		let rerender: (ui: React.ReactElement) => void = () => undefined;
 		await act(async () => {
-			({ rerender } = renderWithTheme({ ...baseProps, value: [], onChange: jest.fn() }));
+			({ rerender } = renderWithTheme({ ...baseProps, value: [], onChange: vi.fn() }));
 		});
 
 		for (let i = 0; i < 5; i++) {
 			await act(async () => {
-				rerenderWithTheme(rerender, { ...baseProps, value: [], onChange: jest.fn() });
+				rerenderWithTheme(rerender, { ...baseProps, value: [], onChange: vi.fn() });
 				await flushPromises();
 			});
 		}
@@ -134,7 +135,7 @@ describe("AsyncCheckGroup - infinite render loop prevention", () => {
 
 describe("AsyncCheckGroup - refetch behavior on API-relevant prop changes", () => {
 	afterEach(() => {
-		jest.resetAllMocks();
+		vi.resetAllMocks();
 	});
 
 	it("should refetch when source changes", async () => {
@@ -146,7 +147,7 @@ describe("AsyncCheckGroup - refetch behavior on API-relevant prop changes", () =
 		const baseProps = {
 			site,
 			value: [],
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			contentType: "data" as const,
 		};
 
@@ -175,7 +176,7 @@ describe("AsyncCheckGroup - refetch behavior on API-relevant prop changes", () =
 
 		const baseProps = {
 			value: [],
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			source: "NEWS",
 			contentType: "data" as const,
 		};
@@ -206,7 +207,7 @@ describe("AsyncCheckGroup - refetch behavior on API-relevant prop changes", () =
 		const baseProps = {
 			site,
 			value: [],
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			source: "NEWS",
 			contentType: "data" as const,
 			languages,
@@ -236,7 +237,7 @@ describe("AsyncCheckGroup - refetch behavior on API-relevant prop changes", () =
 		const baseProps = {
 			site,
 			value: [],
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			source: "NEWS",
 			contentType: "data" as const,
 		};
@@ -259,14 +260,14 @@ describe("AsyncCheckGroup - refetch behavior on API-relevant prop changes", () =
 
 describe("AsyncCheckGroup - user interaction", () => {
 	afterEach(() => {
-		jest.resetAllMocks();
+		vi.resetAllMocks();
 	});
 
 	it("should call onChange when a checkbox is toggled", async () => {
 		const site = mock<ISite>();
 		site.id = 1;
 
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 		const props: IAsyncCheckGroup = {
 			site,
 			value: [],
@@ -293,8 +294,8 @@ describe("AsyncCheckGroup - user interaction", () => {
 		const site = mock<ISite>();
 		site.id = 1;
 
-		const firstOnChange = jest.fn();
-		const secondOnChange = jest.fn();
+		const firstOnChange = vi.fn();
+		const secondOnChange = vi.fn();
 
 		const baseProps = {
 			site,