@griddo/ax 12.4.0 → 12.5.0

package/config/webpack.config.js

@@ -466,6 +466,9 @@ module.exports = function (webpackEnv) {
 								importLoaders: 1,
 								sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
 								modules: {
+									// Both keys below are a contract with client projects, not an
+									// internal build detail: packages/griddo-ax/docs/adr/0001-contrato-de-css-modules-con-los-clientes.md
+									//
 									// css-loader v6 defaults `esModule: true`, so `import * as styles`
 									// only sees locals as named exports when `namedExport` is on.
 									// griddo-components relies on `import * as styles` heavily.
@@ -509,6 +512,8 @@ module.exports = function (webpackEnv) {
 									importLoaders: 3,
 									sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
 									modules: {
+										// Same client-facing contract as the CSS modules block above
+										// (ADR 0001): keep both keys in sync with it.
 										namedExport: true,
 										exportLocalsConvention: "asIs",
 										getLocalIdent: getCSSModuleLocalIdent,

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "12.4.0",
+	"version": "12.5.0",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -199,5 +199,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e78fd612e55753bf9a04aa1e4020b582be9026af"
+	"gitHead": "02d4a5b3c3d3f4a4339db6746b6d6572139e51e5"
 }

package/src/__tests__/components/ConfigPanel/Form/Form.test.tsx

@@ -1,4 +1,3 @@
-import type { MockedFunction } from "vitest";
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
@@ -113,49 +112,49 @@ const initialStore = {
 };
 const store = mockStore(initialStore);
 
-const defaultProps = mock<IFormProps>();
-
-defaultProps.schema = {
-	title: "Header",
-	component: "Header",
-	type: "header",
-	configTabs: [
+// Props por test. Los tres `const ...Mock = defaultProps.x as MockedFunction<>`
+// que había aquí no se usaban en ningún assert: solo servían, sin querer, para
+// materializar esas props en el proxy de `mock<T>()` y que el spread de JSX las
+// llevara al componente. Ahora van declaradas en la factoría.
+const makeProps = (overrides: Partial<IFormProps> = {}): IFormProps =>
+	Object.assign(
+		mock<IFormProps>(),
 		{
-			title: "content",
-			fields: [
-				{
-					title: "Name",
-					key: "title",
-					type: "TextField",
-					mandatory: true,
-				},
-			],
+			schema: {
+				title: "Header",
+				component: "Header",
+				type: "header",
+				configTabs: [
+					{
+						title: "content",
+						fields: [
+							{
+								title: "Name",
+								key: "title",
+								type: "TextField",
+								mandatory: true,
+							},
+						],
+					},
+				],
+				schemaType: "module",
+			},
+			selectedTab: "content",
+			isPage: false,
+			isGlobal: false,
+			theme: "default-theme",
+			setSelectedContent: vi.fn(),
+			setSelectedTab: vi.fn(),
+			setHistoryPush: vi.fn(),
 		},
-	],
-	schemaType: "module",
-};
-const restorePageNavigationActionMock = vi.fn();
-defaultProps.actions = {
-	restorePageNavigationAction: restorePageNavigationActionMock,
-};
-const setSelectedContentMock = defaultProps.setSelectedContent as MockedFunction<(editorID: number) => void>;
-const setSelectedTabMocked = defaultProps.setSelectedTab as MockedFunction<(tab: string) => void>;
-const setHistoryPushMocked = defaultProps.setHistoryPush as MockedFunction<
-	(path: string, isEditor: boolean) => void
->;
-defaultProps.selectedTab = "content";
-defaultProps.isPage = false;
-defaultProps.isGlobal = false;
-defaultProps.theme = "default-theme";
+		overrides,
+	);
 
 describe("Form component rendering", () => {
 	it("should render the component", () => {
-		defaultProps.isPage = true;
-		defaultProps.isGlobal = true;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Form {...defaultProps} />
+				<Form {...makeProps({ isPage: true, isGlobal: true })} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -163,13 +162,9 @@ describe("Form component rendering", () => {
 	});
 
 	it("should render the component with no header warning text", () => {
-		defaultProps.isPage = false;
-		defaultProps.isGlobal = false;
-		defaultProps.header = 0;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Form {...defaultProps} />
+				<Form {...makeProps({ header: 0 })} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -178,11 +173,11 @@ describe("Form component rendering", () => {
 	});
 
 	it("should call the function to restore the header", () => {
-		defaultProps.header = 0;
+		const restorePageNavigationAction = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Form {...defaultProps} />
+				<Form {...makeProps({ header: 0, actions: { restorePageNavigationAction } })} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -190,16 +185,14 @@ describe("Form component rendering", () => {
 		expect(screen.getByText(/This page doesn\'t have a header. Click/i)).toBeInTheDocument();
 		const headerLink = screen.getByTestId("header-link");
 		fireEvent.click(headerLink);
-		expect(restorePageNavigationActionMock).toBeCalled();
-		expect(restorePageNavigationActionMock).toBeCalledWith("header");
+		expect(restorePageNavigationAction).toBeCalled();
+		expect(restorePageNavigationAction).toBeCalledWith("header");
 	});
 
 	it("should render the component with no footer warning text", () => {
-		defaultProps.footer = 0;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Form {...defaultProps} />
+				<Form {...makeProps({ header: 0, footer: 0 })} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -208,11 +201,11 @@ describe("Form component rendering", () => {
 	});
 
 	it("should call the function to restore the header", () => {
-		defaultProps.header = 0;
+		const restorePageNavigationAction = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Form {...defaultProps} />
+				<Form {...makeProps({ header: 0, footer: 0, actions: { restorePageNavigationAction } })} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -220,17 +213,14 @@ describe("Form component rendering", () => {
 		expect(screen.getByText(/This page doesn\'t have a header. Click/i)).toBeInTheDocument();
 		const footerLink = screen.getByTestId("footer-link");
 		fireEvent.click(footerLink);
-		expect(restorePageNavigationActionMock).toBeCalled();
-		expect(restorePageNavigationActionMock).toBeCalledWith("footer");
+		expect(restorePageNavigationAction).toBeCalled();
+		expect(restorePageNavigationAction).toBeCalledWith("footer");
 	});
 
 	it("should render the tabs", () => {
-		defaultProps.isPage = true;
-		defaultProps.isGlobal = true;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Form {...defaultProps} />
+				<Form {...makeProps({ isPage: true, isGlobal: true, header: 0, footer: 0 })} />
 			</ThemeProvider>,
 			{ store },
 		);

package/src/__tests__/components/ConfigPanel/Header/Header.test.tsx

@@ -1,4 +1,3 @@
-import type { MockedFunction } from "vitest";
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
@@ -73,52 +72,57 @@ const initialStore = {
 
 const store = mockStore(initialStore);
 
-const defaultProps = mock<IHeaderProps>();
-defaultProps.actions = {
-	duplicateModuleAction: vi.fn(),
-	deleteModuleAction: vi.fn(),
-	copyModuleAction: vi.fn(),
-};
-const setSelectedContentMock = defaultProps.setSelectedContent as MockedFunction<(editorID: number) => void>;
-
-defaultProps.schema = {
-	title: "Header",
-	component: "Header",
-	type: "header",
-	configTabs: [
+const makeProps = (overrides: Partial<IHeaderProps> = {}): IHeaderProps =>
+	Object.assign(
+		mock<IHeaderProps>(),
 		{
-			title: "content",
-			fields: [
+			actions: {
+				duplicateModuleAction: vi.fn(),
+				deleteModuleAction: vi.fn(),
+				copyModuleAction: vi.fn(),
+			},
+			schema: {
+				title: "Header",
+				component: "Header",
+				type: "header",
+				configTabs: [
+					{
+						title: "content",
+						fields: [
+							{
+								title: "Name",
+								key: "title",
+								type: "TextField",
+								mandatory: true,
+							},
+						],
+					},
+				],
+				schemaType: "module",
+			},
+			breadcrumb: [
 				{
-					title: "Name",
-					key: "title",
-					type: "TextField",
-					mandatory: true,
+					editorID: 0,
+					component: "TextField",
+					displayName: "Texto",
 				},
 			],
+			activatedModules: ["TextField"],
+			headerRef: { current: { offsetHeight: 63, offsetTop: 24 } } as React.RefObject<HTMLDivElement>,
+			// El proxy de `mock<T>()` solo materializa una prop cuando se accede a
+			// ella, y el spread de JSX únicamente copia las propias: los callbacks
+			// que el componente invoca tienen que estar puestos aquí.
+			setSelectedContent: vi.fn(),
+			setHeaderHeight: vi.fn(),
 		},
-	],
-	schemaType: "module",
-};
-
-defaultProps.breadcrumb = [
-	{
-		editorID: 0,
-		component: "TextField",
-		displayName: "Texto",
-	},
-];
-
-defaultProps.activatedModules = ["TextField"];
-
-defaultProps.headerRef = { current: { offsetHeight: 63, offsetTop: 24 } } as React.RefObject<HTMLDivElement>;
-const setHeaderHeightMock = defaultProps.setHeaderHeight as MockedFunction<(height: number) => void>;
+		overrides,
+	);
 
 describe("Header component rendering", () => {
 	it("should render component", () => {
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Header {...defaultProps} />
+				<Header {...makeProps()} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -129,11 +133,9 @@ describe("Header component rendering", () => {
 	});
 
 	it("should render the actions menu when clicking the more info button", () => {
-		defaultProps.selectedParent = [];
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Header {...defaultProps} />
+				<Header {...makeProps({ selectedParent: [] })} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -145,9 +147,11 @@ describe("Header component rendering", () => {
 	});
 
 	it("should trigger the duplicate action", () => {
+		const setSelectedContent = vi.fn();
+
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Header {...defaultProps} />
+				<Header {...makeProps({ selectedParent: [], setSelectedContent })} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -157,6 +161,6 @@ describe("Header component rendering", () => {
 		const listItem = screen.getAllByTestId("action-menu-item");
 		expect(listItem).toHaveLength(3);
 		fireEvent.click(listItem[0]);
-		expect(setSelectedContentMock).toBeCalled();
+		expect(setSelectedContent).toBeCalled();
 	});
 });

package/src/__tests__/components/ElementsTooltip/ElementsTooltip.test.tsx

@@ -11,13 +11,14 @@ import globalTheme from "@ax/themes/theme.json";
 
 afterEach(cleanup);
 
-const defaultProps = mock<IElementsTooltipProps>();
+const makeProps = (overrides: Partial<IElementsTooltipProps> = {}): IElementsTooltipProps =>
+	Object.assign(mock<IElementsTooltipProps>(), overrides);
 
 describe("Tooltip component rendering", () => {
 	it("should not render the component", () => {
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ElementsTooltip {...defaultProps} />
+				<ElementsTooltip {...makeProps()} />
 			</ThemeProvider>,
 		);
 
@@ -27,13 +28,9 @@ describe("Tooltip component rendering", () => {
 	});
 
 	it("should render the component with one element visible", async () => {
-		defaultProps.elements = ["uno", "dos", "tres"];
-		defaultProps.colors = { uno: "#fff" };
-		defaultProps.rounded = true;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ElementsTooltip {...defaultProps} />
+				<ElementsTooltip {...makeProps({ elements: ["uno", "dos", "tres"], colors: { uno: "#fff" }, rounded: true })} />
 			</ThemeProvider>,
 		);
 
@@ -59,13 +56,9 @@ describe("Tooltip component rendering", () => {
 	});
 
 	it("should render the component with three elements visibles", () => {
-		defaultProps.elements = ["uno", "dos", "tres"];
-		defaultProps.defaultElements = 3;
-		defaultProps.maxChar = 1;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ElementsTooltip {...defaultProps} />
+				<ElementsTooltip {...makeProps({ elements: ["uno", "dos", "tres"], defaultElements: 3, maxChar: 1 })} />
 			</ThemeProvider>,
 		);
 
@@ -79,13 +72,9 @@ describe("Tooltip component rendering", () => {
 	});
 
 	it("should render the component with one row", async () => {
-		defaultProps.elements = ["uno", "dos", "tres"];
-		defaultProps.defaultElements = 1;
-		defaultProps.elementsPerRow = 3;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ElementsTooltip {...defaultProps} />
+				<ElementsTooltip {...makeProps({ elements: ["uno", "dos", "tres"], defaultElements: 1, elementsPerRow: 3 })} />
 			</ThemeProvider>,
 		);
 

package/src/__tests__/components/EmptyState/EmptyState.test.tsx

@@ -12,13 +12,17 @@ import globalTheme from "@ax/themes/theme.json";
 
 afterEach(cleanup);
 
-const defaultProps = mock<IEmptyStateProps>();
+// Props nuevos en cada test: antes se compartía un solo objeto mutable y el
+// primer test, que comprueba el estado por defecto, fallaba en cuanto los
+// siguientes le habían puesto title, message o button.
+const makeProps = (overrides: Partial<IEmptyStateProps> = {}): IEmptyStateProps =>
+	Object.assign(mock<IEmptyStateProps>(), overrides);
 
 describe("EmptyState component rendering", () => {
 	it("should render the component", () => {
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<EmptyState {...defaultProps} />
+				<EmptyState {...makeProps()} />
 			</ThemeProvider>,
 		);
 
@@ -28,10 +32,9 @@ describe("EmptyState component rendering", () => {
 	});
 
 	it("should render the component with title", () => {
-		defaultProps.title = "The title";
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<EmptyState {...defaultProps} />
+				<EmptyState {...makeProps({ title: "The title" })} />
 			</ThemeProvider>,
 		);
 
@@ -41,10 +44,9 @@ describe("EmptyState component rendering", () => {
 	});
 
 	it("should render the component with message", () => {
-		defaultProps.message = "A message";
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<EmptyState {...defaultProps} />
+				<EmptyState {...makeProps({ message: "A message" })} />
 			</ThemeProvider>,
 		);
 
@@ -57,12 +59,10 @@ describe("EmptyState component rendering", () => {
 describe("EmptyState component events", () => {
 	it("should trigger the onClick", () => {
 		const actionFunc = vi.fn();
-		defaultProps.button = "A button";
-		defaultProps.action = actionFunc;
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<EmptyState {...defaultProps} />
+				<EmptyState {...makeProps({ button: "A button", action: actionFunc })} />
 			</ThemeProvider>,
 		);
 

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>,
 			);
 		});