@griddo/ax 12.3.0 → 12.5.0

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

@@ -1,12 +1,13 @@
+import type { MockedFunction } from "vitest";
 import React from "react";
 import axios from "axios";
 import "@testing-library/jest-dom";
 import configureStore from "redux-mock-store";
 import { ThemeProvider } from "styled-components";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import thunk from "redux-thunk";
 
-import { render, screen, cleanup, fireEvent, act } from "../../../../../config/jest/test-utils";
+import { render, screen, cleanup, fireEvent, act } from "../../../../../config/tests/test-utils";
 
 import ImageField, { IImageFieldProps } from "@ax/components/Fields/ImageField";
 import { parseTheme } from "@ax/helpers";
@@ -17,8 +18,8 @@ afterEach(() => {
 	cleanup();
 });
 
-jest.mock("axios");
-const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+vi.mock("axios");
+const mockedAxios = axios as MockedFunction<typeof axios>;
 
 const data = {
 	data: [],
@@ -30,7 +31,11 @@ const data = {
 
 mockedAxios.mockResolvedValue(data);
 
-const defaultProps = mock<IImageFieldProps>();
+// Props por test. Antes era un `mock<IImageFieldProps>()` compartido sin nada
+// puesto: el primer test renderizaba con el proxy virgen (el spread de JSX no
+// pasa ninguna prop hasta que alguien las toca) y los demás se lo iban llenando.
+const makeProps = (overrides: Partial<IImageFieldProps> = {}): IImageFieldProps =>
+	Object.assign(mock<IImageFieldProps>(), overrides);
 
 const initialStore = {
 	...defaultStore,
@@ -66,7 +71,7 @@ describe("ImageField component rendering", () => {
 	it("should render the component", () => {
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ImageField {...defaultProps} />
+				<ImageField {...makeProps()} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -76,59 +81,59 @@ describe("ImageField component rendering", () => {
 	});
 
 	it("should render the component with linkableImage", () => {
-		defaultProps.value = {
-			id: 857,
-			name: ".png",
-			title: "",
-			description: "",
-			alt: "",
-			tags: [],
-			url: "kjkajsf",
-			thumb: "jasd",
-			publicId: "thesaurus",
-			damId: "screenshot",
-			published: new Date("2022-04-18T08:52:48.334Z"),
-			size: 1123589,
-			width: 1444,
-			height: 640,
-			orientation: "L",
-			site: null,
-			folderId: null,
-		};
-
-		defaultProps.selectedContent = {
-			component: "LinkableImage",
-			editorID: 7,
-			parentEditorID: 4,
-			title: "",
-			alt: "",
-			veil: 0,
-			file: {
-				id: 1001,
-				name: "Imagen_Interior_fullstack.png",
+		const props = makeProps({
+			value: {
+				id: 857,
+				name: ".png",
 				title: "",
 				description: "",
 				alt: "",
 				tags: [],
-				url: "https://images.dev.griddo.io/imagen-interior-fullstack",
-				thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
-				publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
-				damId: "imagen-interior-fullstack",
-				published: "2022-06-30T07:06:54.352Z",
-				size: 55286,
-				width: 680,
-				height: 353,
+				url: "kjkajsf",
+				thumb: "jasd",
+				publicId: "thesaurus",
+				damId: "screenshot",
+				published: new Date("2022-04-18T08:52:48.334Z"),
+				size: 1123589,
+				width: 1444,
+				height: 640,
 				orientation: "L",
-				site: 113,
+				site: null,
 				folderId: null,
 			},
-		};
-
-		defaultProps.cropPreview = true;
+			selectedContent: {
+				component: "LinkableImage",
+				editorID: 7,
+				parentEditorID: 4,
+				title: "",
+				alt: "",
+				veil: 0,
+				file: {
+					id: 1001,
+					name: "Imagen_Interior_fullstack.png",
+					title: "",
+					description: "",
+					alt: "",
+					tags: [],
+					url: "https://images.dev.griddo.io/imagen-interior-fullstack",
+					thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
+					publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
+					damId: "imagen-interior-fullstack",
+					published: "2022-06-30T07:06:54.352Z",
+					size: 55286,
+					width: 680,
+					height: 353,
+					orientation: "L",
+					site: 113,
+					folderId: null,
+				},
+			},
+			cropPreview: true,
+		});
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ImageField {...defaultProps} />
+				<ImageField {...props} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -139,40 +144,41 @@ describe("ImageField component rendering", () => {
 	});
 
 	it("should render the component with image with no url attr", async () => {
-		defaultProps.value = "image.png";
-
-		defaultProps.selectedContent = {
-			component: "LinkableImage",
-			editorID: 7,
-			parentEditorID: 4,
-			title: "",
-			alt: "",
-			veil: 0,
-			file: {
-				id: 1001,
-				name: "Imagen_Interior_fullstack.png",
+		const props = makeProps({
+			value: "image.png",
+			selectedContent: {
+				component: "LinkableImage",
+				editorID: 7,
+				parentEditorID: 4,
 				title: "",
-				description: "",
 				alt: "",
-				tags: [],
-				url: "https://images.dev.griddo.io/imagen-interior-fullstack",
-				thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
-				publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
-				damId: "imagen-interior-fullstack",
-				published: "2022-06-30T07:06:54.352Z",
-				size: 55286,
-				width: 680,
-				height: 353,
-				orientation: "L",
-				site: 113,
-				folderId: null,
+				veil: 0,
+				file: {
+					id: 1001,
+					name: "Imagen_Interior_fullstack.png",
+					title: "",
+					description: "",
+					alt: "",
+					tags: [],
+					url: "https://images.dev.griddo.io/imagen-interior-fullstack",
+					thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
+					publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
+					damId: "imagen-interior-fullstack",
+					published: "2022-06-30T07:06:54.352Z",
+					size: 55286,
+					width: 680,
+					height: 353,
+					orientation: "L",
+					site: 113,
+					folderId: null,
+				},
 			},
-		};
+		});
 
 		await act(async () =>
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<ImageField {...defaultProps} />
+					<ImageField {...props} />
 				</ThemeProvider>,
 				{ store },
 			),
@@ -184,40 +190,41 @@ describe("ImageField component rendering", () => {
 	});
 
 	it("should render the component with no image", async () => {
-		defaultProps.value = null;
-
-		defaultProps.selectedContent = {
-			component: "LinkableImage",
-			editorID: 7,
-			parentEditorID: 4,
-			title: "",
-			alt: "",
-			veil: 0,
-			file: {
-				id: 1001,
-				name: "Imagen_Interior_fullstack.png",
+		const props = makeProps({
+			value: null,
+			selectedContent: {
+				component: "LinkableImage",
+				editorID: 7,
+				parentEditorID: 4,
 				title: "",
-				description: "",
 				alt: "",
-				tags: [],
-				url: "https://images.dev.griddo.io/imagen-interior-fullstack",
-				thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
-				publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
-				damId: "imagen-interior-fullstack",
-				published: "2022-06-30T07:06:54.352Z",
-				size: 55286,
-				width: 680,
-				height: 353,
-				orientation: "L",
-				site: 113,
-				folderId: null,
+				veil: 0,
+				file: {
+					id: 1001,
+					name: "Imagen_Interior_fullstack.png",
+					title: "",
+					description: "",
+					alt: "",
+					tags: [],
+					url: "https://images.dev.griddo.io/imagen-interior-fullstack",
+					thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
+					publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
+					damId: "imagen-interior-fullstack",
+					published: "2022-06-30T07:06:54.352Z",
+					size: 55286,
+					width: 680,
+					height: 353,
+					orientation: "L",
+					site: 113,
+					folderId: null,
+				},
 			},
-		};
+		});
 
 		await act(async () =>
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<ImageField {...defaultProps} />
+					<ImageField {...props} />
 				</ThemeProvider>,
 				{ store },
 			),
@@ -229,42 +236,44 @@ describe("ImageField component rendering", () => {
 	});
 
 	it("should render the component with image with undefined", async () => {
-		// biome-ignore lint/suspicious/noTsIgnore: TODO: fix this
-		// @ts-ignore
-		defaultProps.value = undefined;
-
-		defaultProps.selectedContent = {
-			component: "LinkableImage",
-			editorID: 7,
-			parentEditorID: 4,
-			title: "",
-			alt: "",
-			veil: 0,
-			file: {
-				id: 1001,
-				name: "Imagen_Interior_fullstack.png",
+		const props = makeProps({
+			value: undefined,
+			selectedContent: {
+				component: "LinkableImage",
+				editorID: 7,
+				parentEditorID: 4,
 				title: "",
-				description: "",
 				alt: "",
-				tags: [],
-				url: "https://images.dev.griddo.io/imagen-interior-fullstack",
-				thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
-				publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
-				damId: "imagen-interior-fullstack",
-				published: "2022-06-30T07:06:54.352Z",
-				size: 55286,
-				width: 680,
-				height: 353,
-				orientation: "L",
-				site: 113,
-				folderId: null,
+				veil: 0,
+				file: {
+					id: 1001,
+					name: "Imagen_Interior_fullstack.png",
+					title: "",
+					description: "",
+					alt: "",
+					tags: [],
+					url: "https://images.dev.griddo.io/imagen-interior-fullstack",
+					thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
+					publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
+					damId: "imagen-interior-fullstack",
+					published: "2022-06-30T07:06:54.352Z",
+					size: 55286,
+					width: 680,
+					height: 353,
+					orientation: "L",
+					site: 113,
+					folderId: null,
+				},
 			},
-		};
+		});
+
+		// biome-ignore lint/suspicious/noTsIgnore: TODO: fix this
+		// @ts-ignore
 
 		await act(async () =>
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<ImageField {...defaultProps} />
+					<ImageField {...props} />
 				</ThemeProvider>,
 				{ store },
 			),
@@ -278,59 +287,61 @@ describe("ImageField component rendering", () => {
 
 describe("ImageField triggers", () => {
 	it("should handle the onClick", async () => {
-		defaultProps.value = {
-			id: 857,
-			name: ".png",
-			title: "",
-			description: "",
-			alt: "",
-			tags: [],
-			url: "https://images.dev.griddo.io/screenshot-2022-04-13-at-164915",
-			thumb: "https://images.dev.griddo.io/w/215/h/161/screenshot-2022-04-13-at-164915",
-			publicId: "thesaurus-dev/Screenshot_2022-04-13_at_16.49.15_927293bf-d163-402f-b216-4dc8656ea8c1",
-			damId: "screenshot-2022-04-13-at-164915",
-			published: new Date("2022-04-18T08:52:48.334Z"),
-			size: 1123589,
-			width: 1444,
-			height: 640,
-			orientation: "L",
-			site: null,
-			folderId: null,
-		};
-
-		defaultProps.selectedContent = {
-			component: "LinkableImage",
-			editorID: 7,
-			parentEditorID: 4,
-			title: "",
-			alt: "",
-			veil: 0,
-			file: {
-				id: 1001,
-				name: "Imagen_Interior_fullstack.png",
+		const setIsGalleryMock = vi.fn();
+		const props = makeProps({
+			setIsGalleryOpened: setIsGalleryMock,
+			value: {
+				id: 857,
+				name: ".png",
 				title: "",
 				description: "",
 				alt: "",
 				tags: [],
-				url: "https://images.dev.griddo.io/imagen-interior-fullstack",
-				thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
-				publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
-				damId: "imagen-interior-fullstack",
-				published: "2022-06-30T07:06:54.352Z",
-				size: 55286,
-				width: 680,
-				height: 353,
+				url: "https://images.dev.griddo.io/screenshot-2022-04-13-at-164915",
+				thumb: "https://images.dev.griddo.io/w/215/h/161/screenshot-2022-04-13-at-164915",
+				publicId: "thesaurus-dev/Screenshot_2022-04-13_at_16.49.15_927293bf-d163-402f-b216-4dc8656ea8c1",
+				damId: "screenshot-2022-04-13-at-164915",
+				published: new Date("2022-04-18T08:52:48.334Z"),
+				size: 1123589,
+				width: 1444,
+				height: 640,
 				orientation: "L",
-				site: 113,
+				site: null,
 				folderId: null,
 			},
-		};
-		const setIsGalleryMock = defaultProps.setIsGalleryOpened as jest.MockedFunction<() => void>;
-		defaultProps.disabled = false;
+			selectedContent: {
+				component: "LinkableImage",
+				editorID: 7,
+				parentEditorID: 4,
+				title: "",
+				alt: "",
+				veil: 0,
+				file: {
+					id: 1001,
+					name: "Imagen_Interior_fullstack.png",
+					title: "",
+					description: "",
+					alt: "",
+					tags: [],
+					url: "https://images.dev.griddo.io/imagen-interior-fullstack",
+					thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
+					publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
+					damId: "imagen-interior-fullstack",
+					published: "2022-06-30T07:06:54.352Z",
+					size: 55286,
+					width: 680,
+					height: 353,
+					orientation: "L",
+					site: 113,
+					folderId: null,
+				},
+			},
+			disabled: false,
+		});
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ImageField {...defaultProps} />
+				<ImageField {...props} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -344,58 +355,61 @@ describe("ImageField triggers", () => {
 	});
 
 	it("should handle the delete action", () => {
-		defaultProps.value = {
-			id: 857,
-			name: ".png",
-			title: "",
-			description: "",
-			alt: "",
-			tags: [],
-			url: "https://images.dev.griddo.io/screenshot-2022-04-13-at-164915",
-			thumb: "https://images.dev.griddo.io/w/215/h/161/screenshot-2022-04-13-at-164915",
-			publicId: "thesaurus-dev/Screenshot_2022-04-13_at_16.49.15_927293bf-d163-402f-b216-4dc8656ea8c1",
-			damId: "screenshot-2022-04-13-at-164915",
-			published: new Date("2022-04-18T08:52:48.334Z"),
-			size: 1123589,
-			width: 1444,
-			height: 640,
-			orientation: "L",
-			site: null,
-			folderId: null,
-		};
-
-		defaultProps.selectedContent = {
-			component: "LinkableImage",
-			editorID: 7,
-			parentEditorID: 4,
-			title: "",
-			alt: "",
-			veil: 0,
-			file: {
-				id: 1001,
-				name: "Imagen_Interior_fullstack.png",
+		const onChangeMock = vi.fn();
+		const props = makeProps({
+			onChange: onChangeMock,
+			value: {
+				id: 857,
+				name: ".png",
 				title: "",
 				description: "",
 				alt: "",
 				tags: [],
-				url: "https://images.dev.griddo.io/imagen-interior-fullstack",
-				thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
-				publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
-				damId: "imagen-interior-fullstack",
-				published: "2022-06-30T07:06:54.352Z",
-				size: 55286,
-				width: 680,
-				height: 353,
+				url: "https://images.dev.griddo.io/screenshot-2022-04-13-at-164915",
+				thumb: "https://images.dev.griddo.io/w/215/h/161/screenshot-2022-04-13-at-164915",
+				publicId: "thesaurus-dev/Screenshot_2022-04-13_at_16.49.15_927293bf-d163-402f-b216-4dc8656ea8c1",
+				damId: "screenshot-2022-04-13-at-164915",
+				published: new Date("2022-04-18T08:52:48.334Z"),
+				size: 1123589,
+				width: 1444,
+				height: 640,
 				orientation: "L",
-				site: 113,
+				site: null,
 				folderId: null,
 			},
-		};
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: any) => void>;
-		defaultProps.disabled = false;
+			selectedContent: {
+				component: "LinkableImage",
+				editorID: 7,
+				parentEditorID: 4,
+				title: "",
+				alt: "",
+				veil: 0,
+				file: {
+					id: 1001,
+					name: "Imagen_Interior_fullstack.png",
+					title: "",
+					description: "",
+					alt: "",
+					tags: [],
+					url: "https://images.dev.griddo.io/imagen-interior-fullstack",
+					thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
+					publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
+					damId: "imagen-interior-fullstack",
+					published: "2022-06-30T07:06:54.352Z",
+					size: 55286,
+					width: 680,
+					height: 353,
+					orientation: "L",
+					site: 113,
+					folderId: null,
+				},
+			},
+			disabled: false,
+		});
+
 		const { rerender } = render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ImageField {...defaultProps} />
+				<ImageField {...props} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -408,7 +422,7 @@ describe("ImageField triggers", () => {
 
 		rerender(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ImageField {...defaultProps} />
+				<ImageField {...props} />
 			</ThemeProvider>,
 		);
 		const fieldWrapperAction = screen.getByTestId("fieldWrapper");
@@ -418,58 +432,61 @@ describe("ImageField triggers", () => {
 	});
 
 	it("should handle the change action", async () => {
-		defaultProps.value = {
-			id: 857,
-			name: ".png",
-			title: "",
-			description: "",
-			alt: "",
-			tags: [],
-			url: "https://images.dev.griddo.io/screenshot-2022-04-13-at-164915",
-			thumb: "https://images.dev.griddo.io/w/215/h/161/screenshot-2022-04-13-at-164915",
-			publicId: "thesaurus-dev/Screenshot_2022-04-13_at_16.49.15_927293bf-d163-402f-b216-4dc8656ea8c1",
-			damId: "screenshot-2022-04-13-at-164915",
-			published: new Date("2022-04-18T08:52:48.334Z"),
-			size: 1123589,
-			width: 1444,
-			height: 640,
-			orientation: "L",
-			site: null,
-			folderId: null,
-		};
-
-		defaultProps.selectedContent = {
-			component: "LinkableImage",
-			editorID: 7,
-			parentEditorID: 4,
-			title: "",
-			alt: "",
-			veil: 0,
-			file: {
-				id: 1001,
-				name: "Imagen_Interior_fullstack.png",
+		const setIsGalleryMock = vi.fn();
+		const props = makeProps({
+			setIsGalleryOpened: setIsGalleryMock,
+			value: {
+				id: 857,
+				name: ".png",
 				title: "",
 				description: "",
 				alt: "",
 				tags: [],
-				url: "https://images.dev.griddo.io/imagen-interior-fullstack",
-				thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
-				publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
-				damId: "imagen-interior-fullstack",
-				published: "2022-06-30T07:06:54.352Z",
-				size: 55286,
-				width: 680,
-				height: 353,
+				url: "https://images.dev.griddo.io/screenshot-2022-04-13-at-164915",
+				thumb: "https://images.dev.griddo.io/w/215/h/161/screenshot-2022-04-13-at-164915",
+				publicId: "thesaurus-dev/Screenshot_2022-04-13_at_16.49.15_927293bf-d163-402f-b216-4dc8656ea8c1",
+				damId: "screenshot-2022-04-13-at-164915",
+				published: new Date("2022-04-18T08:52:48.334Z"),
+				size: 1123589,
+				width: 1444,
+				height: 640,
 				orientation: "L",
-				site: 113,
+				site: null,
 				folderId: null,
 			},
-		};
-		const setIsGalleryMock = defaultProps.setIsGalleryOpened as jest.MockedFunction<() => void>;
-		defaultProps.disabled = false;
+			selectedContent: {
+				component: "LinkableImage",
+				editorID: 7,
+				parentEditorID: 4,
+				title: "",
+				alt: "",
+				veil: 0,
+				file: {
+					id: 1001,
+					name: "Imagen_Interior_fullstack.png",
+					title: "",
+					description: "",
+					alt: "",
+					tags: [],
+					url: "https://images.dev.griddo.io/imagen-interior-fullstack",
+					thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
+					publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
+					damId: "imagen-interior-fullstack",
+					published: "2022-06-30T07:06:54.352Z",
+					size: 55286,
+					width: 680,
+					height: 353,
+					orientation: "L",
+					site: 113,
+					folderId: null,
+				},
+			},
+			disabled: false,
+		});
+
 		const { rerender } = render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ImageField {...defaultProps} />
+				<ImageField {...props} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -482,7 +499,7 @@ describe("ImageField triggers", () => {
 
 		rerender(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ImageField {...defaultProps} />
+				<ImageField {...props} />
 			</ThemeProvider>,
 		);