@griddo/ax 12.3.0 → 12.5.0

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

@@ -3,7 +3,7 @@ import ConditionalField from "@ax/components/Fields/ConditionalField";
 import { ThemeProvider } from "styled-components";
 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 { render, screen, cleanup } from "@testing-library/react";
 import FieldsBehavior from "@ax/components/FieldsBehavior";
 

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

@@ -1,7 +1,8 @@
+import type { MockedFunction } from "vitest";
 import React from "react";
 import "@testing-library/jest-dom";
 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 DateField, { IDateFieldProps } from "@ax/components/Fields/DateField";
@@ -16,7 +17,7 @@ describe("DateField component rendering", () => {
 	it("should render the component", () => {
 		defaultProps.value = "values";
 		defaultProps.mandatory = true;
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: any) => void>;
+		const onChangeMock = defaultProps.onChange as MockedFunction<(value: any) => void>;
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -32,7 +33,7 @@ describe("DateField component rendering", () => {
 		defaultProps.mandatory = false;
 		defaultProps.futureDate = false;
 		defaultProps.pastDate = true;
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: any) => void>;
+		const onChangeMock = defaultProps.onChange as MockedFunction<(value: any) => void>;
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -48,7 +49,7 @@ describe("DateField component rendering", () => {
 		defaultProps.futureDate = true;
 		defaultProps.pastDate = false;
 		defaultProps.mandatory = false;
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: any) => void>;
+		const onChangeMock = defaultProps.onChange as MockedFunction<(value: any) => void>;
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -62,7 +63,7 @@ describe("DateField component rendering", () => {
 	it("should render the component receiving a range date", () => {
 		defaultProps.value = "01/01/2022 - 10/01/2022";
 		defaultProps.mandatory = false;
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: any) => void>;
+		const onChangeMock = defaultProps.onChange as MockedFunction<(value: any) => void>;
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>

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

@@ -42,9 +42,9 @@ describe("FieldGroup component rendering", () => {
 			collapsed: false,
 		};
 
-		const setStateMock = jest.fn();
+		const setStateMock = vi.fn();
 		const useStateMock: any = (useState: string) => [useState, setStateMock];
-		jest.spyOn(React, "useState").mockImplementation(useStateMock);
+		vi.spyOn(React, "useState").mockImplementation(useStateMock);
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>

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

@@ -2,8 +2,8 @@ import React from "react";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
-import { mock } from "jest-mock-extended";
-import { render, screen, cleanup } from "../../../../../config/jest/test-utils";
+import { mock } from "vitest-mock-extended";
+import { render, screen, cleanup } from "../../../../../config/tests/test-utils";
 import FileField, { IFileFieldProps } from "@ax/components/Fields/FileField";
 import { act } from "react-dom/test-utils";
 import thunk from "redux-thunk";
@@ -13,7 +13,13 @@ import { defaultStore } from "./../../../../__mocks__/store/GenericStore";
 
 afterEach(cleanup);
 
-const defaultProps = mock<IFileFieldProps>();
+// Props por test. Antes se compartía un objeto mutable: el segundo test dejaba
+// `value` en undefined y los dos de "onClick events" contaban con eso sin
+// decirlo, así que al reordenarlos se caían.
+const makeProps = (overrides: Partial<IFileFieldProps> = {}): IFileFieldProps =>
+	Object.assign(mock<IFileFieldProps>(), overrides);
+
+const fileValue = { url: "google.es", uploadDate: "1/1/2022", sizeBytes: "123" };
 
 const initialStore = {
 	...defaultStore,
@@ -37,11 +43,9 @@ const store = mockStore(initialStore);
 
 describe("FileField component rendering", () => {
 	it("should render the component", () => {
-		defaultProps.value.url = "google.es";
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<FileField {...defaultProps} />
+				<FileField {...makeProps({ value: { url: "google.es" } })} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -52,11 +56,9 @@ describe("FileField component rendering", () => {
 	});
 
 	it("should render the component when there is not value", () => {
-		defaultProps.value = undefined;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<FileField {...defaultProps} />
+				<FileField {...makeProps({ value: undefined })} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -71,7 +73,7 @@ describe("onClick events", () => {
 	it("should open FileDragAndDrop when clicking the file button", () => {
 		const Component = (
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<FileField {...defaultProps} />
+				<FileField {...makeProps({ value: undefined })} />
 			</ThemeProvider>
 		);
 
@@ -89,7 +91,7 @@ describe("onClick events", () => {
 	it("should not open FileDragAndDrop when clicking the file button", () => {
 		const Component = (
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<FileField {...defaultProps} disabled />
+				<FileField {...makeProps({ value: undefined })} disabled />
 			</ThemeProvider>
 		);
 
@@ -105,11 +107,9 @@ describe("onClick events", () => {
 	});
 
 	it("should call handleOnClickUrl when clicking the url button", () => {
-		defaultProps.value = { url: "google.es", uploadDate: "1/1/2022", sizeBytes: "123" };
-
 		const Component = (
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<FileField {...defaultProps} />
+				<FileField {...makeProps({ value: fileValue })} />
 			</ThemeProvider>
 		);
 
@@ -118,7 +118,7 @@ describe("onClick events", () => {
 
 		const { rerender } = render(Component, { store });
 
-		const spyWindowOpen = jest.spyOn(window, "open");
+		const spyWindowOpen = vi.spyOn(window, "open");
 
 		const urlButton = screen.getAllByTestId("icon-action-component");
 		act(() => urlButton[0].click());
@@ -136,12 +136,11 @@ describe("onClick events", () => {
 	});
 
 	it("should call onChange when clicking the delete action", () => {
-		defaultProps.value = { url: "google.es", uploadDate: "1/1/2022", sizeBytes: "123" };
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		const Component = (
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<FileField {...defaultProps} onChange={onChange} />
+				<FileField {...makeProps({ value: fileValue })} onChange={onChange} />
 			</ThemeProvider>
 		);
 

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

@@ -13,7 +13,7 @@ const defaultProps = {
 		tag: "",
 	},
 	title: "",
-	onChange: jest.fn(),
+	onChange: vi.fn(),
 	options: [
 		{
 			value: "",
@@ -43,7 +43,7 @@ describe("HeadingField component rendering", () => {
 				tag: "tagValue",
 			},
 			title: "Title",
-			onChange: jest.fn(),
+			onChange: vi.fn(),
 			options: [
 				{
 					value: "value1",

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

@@ -3,7 +3,7 @@ import HiddenField, { IHiddenFieldProps } from "@ax/components/Fields/HiddenFiel
 import { ThemeProvider } from "styled-components";
 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 { render, screen, cleanup, fireEvent } from "@testing-library/react";
 
 afterEach(cleanup);
@@ -40,7 +40,7 @@ describe("Component rendering", () => {
 describe("onClick events", () => {
 	it("should call showField with multiple options when clicking the component", () => {
 		defaultProps.hasMultipleOptions = true;
-		const showField = jest.fn();
+		const showField = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -55,7 +55,7 @@ describe("onClick events", () => {
 
 	it("should call showField with single option when clicking the component", () => {
 		defaultProps.hasMultipleOptions = false;
-		const showField = jest.fn();
+		const showField = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>