@griddo/ax 12.4.0 → 12.5.1

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

@@ -12,7 +12,8 @@ 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;
@@ -22,11 +23,10 @@ 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>,
 			);
 		});
@@ -36,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: [
 				{
@@ -83,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>,
 			);
 		});
@@ -92,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: [
 				{
@@ -139,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>,
 			);
 		});
@@ -148,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: [
 				{
@@ -194,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>,
 			);
 		});
@@ -203,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,
@@ -223,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>,
 			);
 		});
@@ -232,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: [
 				{
@@ -279,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/ColorPicker/ColorPicker.test.tsx

@@ -1,4 +1,3 @@
-import type { MockedFunction } from "vitest";
 import React from "react";
 import "@testing-library/jest-dom";
 import ColorPicker, { IProps } from "@ax/components/Fields/ColorPicker";
@@ -10,28 +9,26 @@ 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");
@@ -43,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 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");
@@ -65,15 +66,17 @@ describe("ColorPicker events", () => {
 	});
 
 	test("should trigger the onChange", () => {
-		defaultProps.value = "#000000";
-		defaultProps.theme = parseTheme(globalTheme);
-		const handleValidationMock = defaultProps.handleValidation as 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");
@@ -83,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 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>,
 		);
 
@@ -103,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 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>,
 		);
 
@@ -124,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>,
 		);
 
@@ -147,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>,
 		);
 
@@ -170,15 +180,13 @@ describe("ColorPicker events", () => {
 	});
 
 	test("should trigger the handleOnBlur", async () => {
-		defaultProps.value = "#000000";
-		defaultProps.theme = parseTheme(globalTheme);
-		const handleValidationMock = defaultProps.handleValidation as 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");