@griddo/ax 12.4.0 → 12.5.0

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");