@griddo/ax 12.4.0 → 12.5.0

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

@@ -23,28 +23,36 @@ const mockStore = configureStore(middlewares);
 vi.mock("axios");
 const mockedAxios = axios as MockedFunction<typeof axios>;
 
-const defaultProps = mock<IIntegrationsFieldProps>();
-defaultProps.site = {
-	id: 86,
-	name: "Site 1",
-	theme: "default-theme",
-	author: "",
-	pages: [],
-	updated: true,
-	home: "//cx.dev.griddo.io/pre-griddo/componentfolder",
-	isPublished: false,
-	bigAvatar: "http://images.dev.griddo.io/griddo-site-thumbnail-ec2ab0ba-9424-4424-8f60-222ec746902d_10",
-	favicon: "https://images.dev.griddo.io/by-themascot-1920_2",
-	published: "2021-11-03T10:42:32.000Z",
-	smallAvatar: "http://images.dev.griddo.io/griddo-site-thumbnail-ec2ab0ba-9424-4424-8f60-222ec746902d_9",
-	thumbnail: "http://images.dev.griddo.io/griddo-site-thumbnail-ec2ab0ba-9424-4424-8f60-222ec746902d_7",
-	timezone: "Pacific/Pago_Pago",
-	lastAccess: "2022-09-05T07:34:19.000Z",
-	navigationModules: null,
-	defaultLanguage: 1,
-	path: "",
-	domain: 1,
-};
+// Antes había un `mock<IIntegrationsFieldProps>()` de módulo con el `site` puesto que todos los
+// tests mutaban para fijar su `value`. Ahora cada uno construye los suyos.
+const makeProps = (overrides: Partial<IIntegrationsFieldProps> = {}): IIntegrationsFieldProps =>
+	Object.assign(
+		mock<IIntegrationsFieldProps>(),
+		{
+			site: {
+				id: 86,
+				name: "Site 1",
+				theme: "default-theme",
+				author: "",
+				pages: [],
+				updated: true,
+				home: "//cx.dev.griddo.io/pre-griddo/componentfolder",
+				isPublished: false,
+				bigAvatar: "http://images.dev.griddo.io/griddo-site-thumbnail-ec2ab0ba-9424-4424-8f60-222ec746902d_10",
+				favicon: "https://images.dev.griddo.io/by-themascot-1920_2",
+				published: "2021-11-03T10:42:32.000Z",
+				smallAvatar: "http://images.dev.griddo.io/griddo-site-thumbnail-ec2ab0ba-9424-4424-8f60-222ec746902d_9",
+				thumbnail: "http://images.dev.griddo.io/griddo-site-thumbnail-ec2ab0ba-9424-4424-8f60-222ec746902d_7",
+				timezone: "Pacific/Pago_Pago",
+				lastAccess: "2022-09-05T07:34:19.000Z",
+				navigationModules: null,
+				defaultLanguage: 1,
+				path: "",
+				domain: 1,
+			},
+		},
+		overrides,
+	);
 
 const initialStore = {
 	dataPacks: { activated: [] },
@@ -193,8 +201,6 @@ const initialStore = {
 
 describe("IntegrationsField component rendering", () => {
 	test("should render the component IntegrationsField", async () => {
-		const initialState = { ...defaultProps };
-		defaultProps.value = [];
 		const store = mockStore(initialStore);
 
 		const data = {
@@ -209,7 +215,7 @@ describe("IntegrationsField component rendering", () => {
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<IntegrationsField {...{ ...initialState, ...defaultProps }} />
+					<IntegrationsField {...makeProps({ value: [] })} />
 				</ThemeProvider>,
 				{ store },
 			);
@@ -219,8 +225,6 @@ describe("IntegrationsField component rendering", () => {
 	});
 
 	test("should render the component IntegrationsField with integrations", async () => {
-		const initialState = { ...defaultProps };
-		defaultProps.value = [...initialStore.integrations.integrations];
 		const store = mockStore(initialStore);
 
 		const data = {
@@ -235,7 +239,7 @@ describe("IntegrationsField component rendering", () => {
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<IntegrationsField {...{ ...initialState, ...defaultProps }} />
+					<IntegrationsField {...makeProps({ value: [...initialStore.integrations.integrations] })} />
 				</ThemeProvider>,
 				{ store },
 			);
@@ -245,8 +249,6 @@ describe("IntegrationsField component rendering", () => {
 	});
 
 	test("should render the component IntegrationsField with custom code integration", async () => {
-		const initialState = { ...defaultProps };
-
 		const customOption = {
 			name: "",
 			contentHead: "",
@@ -255,7 +257,6 @@ describe("IntegrationsField component rendering", () => {
 			contentPresence: { presenceType: "page-manual", relatedPages: null },
 		};
 
-		defaultProps.value = [...initialStore.integrations.integrations, customOption];
 		const store = mockStore(initialStore);
 
 		const data = {
@@ -270,7 +271,7 @@ describe("IntegrationsField component rendering", () => {
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<IntegrationsField {...{ ...initialState, ...defaultProps }} />
+					<IntegrationsField {...makeProps({ value: [...initialStore.integrations.integrations, customOption] })} />
 				</ThemeProvider>,
 				{ store },
 			);
@@ -282,8 +283,6 @@ describe("IntegrationsField component rendering", () => {
 
 describe("Events", () => {
 	test("should delete a integration", async () => {
-		const initialState = { ...defaultProps };
-		defaultProps.value = [...initialStore.integrations.integrations];
 		const store = mockStore(initialStore);
 		const onChange = vi.fn();
 
@@ -299,7 +298,10 @@ describe("Events", () => {
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<IntegrationsField {...{ ...initialState, ...defaultProps }} onChange={onChange} />
+					<IntegrationsField
+						{...makeProps({ value: [...initialStore.integrations.integrations] })}
+						onChange={onChange}
+					/>
 				</ThemeProvider>,
 				{ store },
 			);
@@ -321,8 +323,6 @@ describe("Events", () => {
 	});
 
 	test("should add an integration", async () => {
-		const initialState = { ...defaultProps };
-		defaultProps.value = [];
 		const store = mockStore(initialStore);
 		const onChange = vi.fn();
 
@@ -338,7 +338,7 @@ describe("Events", () => {
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<IntegrationsField {...{ ...initialState, ...defaultProps }} onChange={onChange} />
+					<IntegrationsField {...makeProps({ value: [] })} onChange={onChange} />
 				</ThemeProvider>,
 				{ store },
 			);
@@ -356,8 +356,6 @@ describe("Events", () => {
 	});
 
 	test("should add an custom code integration", async () => {
-		const initialState = { ...defaultProps };
-		defaultProps.value = [];
 		const store = mockStore(initialStore);
 		const onChange = vi.fn();
 
@@ -373,7 +371,7 @@ describe("Events", () => {
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<IntegrationsField {...{ ...initialState, ...defaultProps }} onChange={onChange} />
+					<IntegrationsField {...makeProps({ value: [] })} onChange={onChange} />
 				</ThemeProvider>,
 				{ store },
 			);
@@ -398,10 +396,11 @@ describe("Events", () => {
 	});
 
 	test("should paste a custom code integration", async () => {
-		const initialState = { ...defaultProps };
-		defaultProps.value = [];
-		const _initialStore: any = { ...initialStore };
-		_initialStore.integrations.integrationCopy = {
+		// `{ ...initialStore }` es una copia superficial: `integrations` seguía
+		// siendo el mismo objeto, así que escribir `integrationCopy` dentro dejaba
+		// el botón de pegar visible en todos los tests posteriores y su
+		// `getByTestId("icon-action-component")` encontraba dos botones.
+		const integrationCopy = {
 			date: new Date(),
 			integration: {
 				id: 29,
@@ -418,7 +417,10 @@ describe("Events", () => {
 				active: true,
 			},
 		};
-		const store = mockStore(initialStore);
+		const store = mockStore({
+			...initialStore,
+			integrations: { ...initialStore.integrations, integrationCopy },
+		});
 		const onChange = vi.fn();
 
 		const data = {
@@ -434,7 +436,7 @@ describe("Events", () => {
 			render(
 				<Router history={history}>
 					<ThemeProvider theme={parseTheme(globalTheme)}>
-						<IntegrationsField {...{ ...initialState, ...defaultProps }} onChange={onChange} />
+						<IntegrationsField {...makeProps({ value: [] })} onChange={onChange} />
 					</ThemeProvider>
 				</Router>,
 				{ store },
@@ -444,6 +446,6 @@ describe("Events", () => {
 		const iconActionComponents = screen.getAllByTestId("icon-action-component");
 		fireEvent.click(iconActionComponents[0]);
 
-		expect(onChange).toHaveBeenLastCalledWith([_initialStore.integrations.integrationCopy.integration]);
+		expect(onChange).toHaveBeenLastCalledWith([integrationCopy.integration]);
 	});
 });

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

@@ -8,14 +8,17 @@ import { mock } from "vitest-mock-extended";
 
 afterEach(cleanup);
 
-const defaultProps = mock<INoteFieldProps>();
-defaultProps.value = { text: "This is the text" };
+// `value` se construye por test: el último escribía `value.title` sobre el
+// objeto compartido, así que "should not render title" fallaba en cuanto se
+// ejecutaba después de él.
+const makeProps = (value: INoteFieldProps["value"] = { text: "This is the text" }): INoteFieldProps =>
+	Object.assign(mock<INoteFieldProps>(), { value });
 
 describe("NoteField component rendering", () => {
 	it("should render the component", () => {
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<NoteField {...defaultProps} />
+				<NoteField {...makeProps()} />
 			</ThemeProvider>,
 		);
 
@@ -27,7 +30,7 @@ describe("NoteField component rendering", () => {
 	it("should render text value", () => {
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<NoteField {...defaultProps} />
+				<NoteField {...makeProps()} />
 			</ThemeProvider>,
 		);
 
@@ -37,7 +40,7 @@ describe("NoteField component rendering", () => {
 	it("should not render title", () => {
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<NoteField {...defaultProps} />
+				<NoteField {...makeProps()} />
 			</ThemeProvider>,
 		);
 
@@ -47,11 +50,9 @@ describe("NoteField component rendering", () => {
 	});
 
 	it("should render title", () => {
-		defaultProps.value.title = "Super title";
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<NoteField {...defaultProps} />
+				<NoteField {...makeProps({ text: "This is the text", title: "Super title" })} />
 			</ThemeProvider>,
 		);
 

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

@@ -9,14 +9,15 @@ import userEvent from "@testing-library/user-event";
 
 afterEach(cleanup);
 
-const defaultProps = mock<INumberFieldProps>();
+const makeProps = (overrides: Partial<INumberFieldProps> = {}): INumberFieldProps =>
+	Object.assign(mock<INumberFieldProps>(), overrides);
 const user = userEvent.setup();
 
 describe("NumberField component rendering", () => {
 	it("should render the component", () => {
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<NumberField {...defaultProps} />
+				<NumberField {...makeProps()} />
 			</ThemeProvider>,
 		);
 
@@ -32,7 +33,7 @@ describe("onClick events", () => {
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<NumberField {...defaultProps} onChange={onChange} />
+				<NumberField {...makeProps()} onChange={onChange} />
 			</ThemeProvider>,
 		);
 
@@ -42,13 +43,11 @@ describe("onClick events", () => {
 	});
 
 	it("should call onChange when clicking arrow down", () => {
-		defaultProps.value = 2;
-		defaultProps.min = 1;
 		const onChange = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<NumberField {...defaultProps} onChange={onChange} />
+				<NumberField {...makeProps({ value: 2, min: 1 })} onChange={onChange} />
 			</ThemeProvider>,
 		);
 
@@ -67,7 +66,7 @@ describe("onBlur events", () => {
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<NumberField {...defaultProps} handleValidation={handleValidation} onBlur={onBlur} />
+				<NumberField {...makeProps()} handleValidation={handleValidation} onBlur={onBlur} />
 			</ThemeProvider>,
 		);
 
@@ -79,14 +78,12 @@ describe("onBlur events", () => {
 
 describe("onChange events", () => {
 	it("should call onChange on change", () => {
-		defaultProps.max = 7;
-		defaultProps.error = true;
 		const onChange = vi.fn();
 		const handleValidation = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<NumberField {...defaultProps} onChange={onChange} handleValidation={handleValidation} />
+				<NumberField {...makeProps({ max: 7, error: true })} onChange={onChange} handleValidation={handleValidation} />
 			</ThemeProvider>,
 		);
 
@@ -97,12 +94,11 @@ describe("onChange events", () => {
 	});
 
 	it("should call onChange with undefined", async () => {
-		defaultProps.value = undefined;
 		const onChange = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<NumberField {...defaultProps} onChange={onChange} />
+				<NumberField {...makeProps({ value: undefined })} onChange={onChange} />
 			</ThemeProvider>,
 		);
 

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

@@ -26,6 +26,12 @@ describe("TextArea component rendering", () => {
 });
 
 describe("TextArea events", () => {
+	// Solo un test falsea los timers, pero restaurarlos en un hook evita que se
+	// queden falsos para el resto del describe si una aserción falla antes.
+	afterEach(() => {
+		vi.useRealTimers();
+	});
+
 	// Asserts the observable contract instead of spying on React.useState: an ESM
 	// namespace is immutable, so `vi.spyOn(React, ...)` no longer intercepts the
 	// hook the component imported. onChange is debounced by 300ms.
@@ -44,8 +50,6 @@ describe("TextArea events", () => {
 		fireEvent.change(textAreaComponent, { target: { value: "test" } });
 		vi.advanceTimersByTime(300);
 		expect(onChange).toHaveBeenCalledWith("test");
-
-		vi.useRealTimers();
 	});
 
 	test("should call the onBlur", () => {

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

@@ -10,13 +10,14 @@ import globalTheme from "@ax/themes/theme.json";
 
 afterEach(cleanup);
 
-const defaultProps = mock<IToggleFieldProps>();
+const makeProps = (overrides: Partial<IToggleFieldProps> = {}): IToggleFieldProps =>
+	Object.assign(mock<IToggleFieldProps>(), overrides);
 
 describe("ToggleField component rendering", () => {
 	it("should render the component", () => {
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ToggleField {...defaultProps} />
+				<ToggleField {...makeProps()} />
 			</ThemeProvider>,
 		);
 
@@ -29,11 +30,9 @@ describe("ToggleField component rendering", () => {
 	});
 
 	it("should render input as checked", () => {
-		defaultProps.value = true;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ToggleField {...defaultProps} />
+				<ToggleField {...makeProps({ value: true })} />
 			</ThemeProvider>,
 		);
 
@@ -42,11 +41,9 @@ describe("ToggleField component rendering", () => {
 	});
 
 	it("should render input as disabled", () => {
-		defaultProps.disabled = true;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ToggleField {...defaultProps} />
+				<ToggleField {...makeProps({ disabled: true })} />
 			</ThemeProvider>,
 		);
 
@@ -55,11 +52,9 @@ describe("ToggleField component rendering", () => {
 	});
 
 	it("should render input with name", () => {
-		defaultProps.name = "This is the name";
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ToggleField {...defaultProps} />
+				<ToggleField {...makeProps({ name: "This is the name" })} />
 			</ThemeProvider>,
 		);
 
@@ -68,11 +63,9 @@ describe("ToggleField component rendering", () => {
 	});
 
 	it("should render the auxText", () => {
-		defaultProps.auxText = "This is the new text";
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ToggleField {...defaultProps} />
+				<ToggleField {...makeProps({ auxText: "This is the new text" })} />
 			</ThemeProvider>,
 		);
 
@@ -81,11 +74,9 @@ describe("ToggleField component rendering", () => {
 	});
 
 	it("should render with the background", () => {
-		defaultProps.background = true;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ToggleField {...defaultProps} />
+				<ToggleField {...makeProps({ background: true })} />
 			</ThemeProvider>,
 		);
 
@@ -98,29 +89,30 @@ describe("ToggleField component rendering", () => {
 
 describe("onClick events", () => {
 	it("should call onChange function with value true", () => {
-		defaultProps.value = false;
-		defaultProps.onChange = vi.fn();
+		const onChange = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ToggleField {...defaultProps} />
+				<ToggleField {...makeProps({ value: false, onChange })} />
 			</ThemeProvider>,
 		);
 
 		const toggleFieldInput = screen.getByTestId("toggle-field-input");
 		fireEvent.click(toggleFieldInput);
-		expect(defaultProps.onChange).toHaveBeenCalledWith(true);
+		expect(onChange).toHaveBeenCalledWith(true);
 	});
 
 	it("should not call onChange function", () => {
+		const onChange = vi.fn();
+
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ToggleField {...defaultProps} onChange={undefined} />
+				<ToggleField {...makeProps({ onChange })} onChange={undefined} />
 			</ThemeProvider>,
 		);
 
 		const toggleFieldInput = screen.getByTestId("toggle-field-input");
 		fireEvent.click(toggleFieldInput);
-		expect(defaultProps.onChange).not.toHaveBeenCalled();
+		expect(onChange).not.toHaveBeenCalled();
 	});
 });

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

@@ -45,8 +45,15 @@ describe("Tooltip component rendering", () => {
 });
 
 describe("Tooltip events triggering", () => {
-	it("should render the component and Tip Component is still visible when doing click", () => {
+	beforeEach(() => {
 		vi.useFakeTimers();
+	});
+
+	afterEach(() => {
+		vi.useRealTimers();
+	});
+
+	it("should render the component and Tip Component is still visible when doing click", () => {
 		defaultProps.content = "content";
 		defaultProps.children = <Icon name="modified" size="16px" />;
 
@@ -97,7 +104,6 @@ describe("Tooltip events triggering", () => {
 	});
 
 	it("should render the component and change visibility of Tip Component when click", () => {
-		vi.useFakeTimers();
 		defaultProps.content = "content";
 		defaultProps.children = <Icon name="modified" size="16px" />;
 

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

@@ -10,40 +10,48 @@ import { mock } from "vitest-mock-extended";
 
 afterEach(cleanup);
 
-const defaultProps = mock<IImageSelectionProps & IScrollableSelectionProps>();
-defaultProps.theme = "default-theme";
-defaultProps.options = [
-	{
-		value: "primary",
-		img: "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/themes/primaryStyle",
-	},
-	{
-		value: "secondary",
-		img: "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/themes/secondaryStyle",
-	},
-	{
-		value: "link",
-		img: "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/themes/linkStyle",
-	},
-];
+type Props = IImageSelectionProps & IScrollableSelectionProps;
+
+// Props por test: el segundo dejaba `elementUniqueSelection` puesto en el objeto
+// compartido, así que el primero rendrizaba el componente equivocado cuando se
+// ejecutaba después.
+const makeProps = (overrides: Partial<Props> = {}): Props =>
+	Object.assign(
+		mock<Props>(),
+		{
+			theme: "default-theme",
+			options: [
+				{
+					value: "primary",
+					img: "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/themes/primaryStyle",
+				},
+				{
+					value: "secondary",
+					img: "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/themes/secondaryStyle",
+				},
+				{
+					value: "link",
+					img: "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/themes/linkStyle",
+				},
+			],
+		},
+		overrides,
+	);
 
 describe("VisualUniqueSelection component rendering", () => {
 	test("should render the component with ImageSelection", () => {
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<VisualUniqueSelection {...defaultProps} />
+				<VisualUniqueSelection {...makeProps()} />
 			</ThemeProvider>,
 		);
 		expect(screen.getByTestId("imageSelectionComponent")).toBeTruthy();
 	});
 
 	test("should render the component with ScrollableSelection", () => {
-		defaultProps.elementUniqueSelection = true;
-		defaultProps.columns = 2;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<VisualUniqueSelection {...defaultProps} />
+				<VisualUniqueSelection {...makeProps({ elementUniqueSelection: true, columns: 2 })} />
 			</ThemeProvider>,
 		);