@griddo/ax 11.15.9 → 11.16.0-rc.1

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "11.15.9",
+	"version": "11.16.0-rc.1",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -219,5 +219,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "190d5b241da3aeb5585b3c39ff11221f4e8f7d3e"
+	"gitHead": "637014e49d261e8866cb4268059007e7e50b3e51"
 }

package/src/__tests__/components/RestrictionsModal/CurrentAccessList/CurrentAccessList.test.tsx

@@ -0,0 +1,173 @@
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent } from "@testing-library/react";
+import { parseTheme } from "@ax/helpers";
+import "@testing-library/jest-dom";
+
+import CurrentAccessList from "@ax/components/RestrictionsModal/CurrentAccessList";
+import type { IUser } from "@ax/types";
+import globalTheme from "@ax/themes/theme.json";
+
+jest.mock("react-redux", () => ({
+	...jest.requireActual("react-redux"),
+	useSelector: jest.fn((selector) => {
+		const mockState = {
+			users: {
+				roles: [
+					{ id: 1, name: "Admin" },
+					{ id: 2, name: "Editor" },
+				],
+			},
+		};
+		return selector(mockState);
+	}),
+}));
+
+afterEach(cleanup);
+
+const defaultProps: {
+	restrictionType: "users" | "roles";
+	currentAccessGrants: { users: number[]; roles: number[] };
+	onEdit: jest.Mock;
+	users: IUser[];
+	canSetPermissions: boolean;
+} = {
+	restrictionType: "users",
+	currentAccessGrants: {
+		users: [1, 2],
+		roles: [],
+	},
+	onEdit: jest.fn(),
+	users: [
+		{
+			id: 1,
+			username: "john",
+			name: "John Doe",
+			email: "john@example.com",
+			failed: 0,
+			roles: [],
+			isSuperAdmin: false,
+			pagePermissions: [],
+		},
+		{
+			id: 2,
+			username: "jane",
+			name: "Jane Smith",
+			email: "jane@example.com",
+			failed: 0,
+			roles: [],
+			isSuperAdmin: false,
+			pagePermissions: [],
+		},
+	],
+	canSetPermissions: true,
+};
+
+const renderComponent = (props = defaultProps) =>
+	render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<CurrentAccessList {...props} />
+		</ThemeProvider>,
+	);
+
+describe("CurrentAccessList component rendering", () => {
+	it("should render the component with users message by default", () => {
+		renderComponent();
+
+		expect(screen.getByText(/Only these users/)).toBeTruthy();
+		expect(screen.getByText("can edit")).toBeTruthy();
+	});
+
+	it("should show roles message when restrictionType is roles", () => {
+		renderComponent({
+			...defaultProps,
+			restrictionType: "roles",
+			currentAccessGrants: {
+				users: [],
+				roles: [1],
+			},
+		});
+
+		expect(screen.getByText(/Only these roles/)).toBeTruthy();
+	});
+
+	it("should render the Manage User Access button when canSetPermissions is true", () => {
+		renderComponent({ ...defaultProps, canSetPermissions: true });
+
+		expect(screen.getByText("MANAGE USER ACCESS")).toBeTruthy();
+	});
+
+	it("should not render the Manage User Access button when canSetPermissions is false", () => {
+		renderComponent({ ...defaultProps, canSetPermissions: false });
+
+		expect(screen.queryByText("MANAGE USER ACCESS")).toBeNull();
+	});
+
+	it("should filter to show only selected users when restrictionType is users", () => {
+		const allUsers = [
+			{ id: 1, username: "john", name: "John Doe", email: "john@example.com", failed: 0, roles: [], isSuperAdmin: false, pagePermissions: [] },
+			{ id: 2, username: "jane", name: "Jane Smith", email: "jane@example.com", failed: 0, roles: [], isSuperAdmin: false, pagePermissions: [] },
+			{ id: 3, username: "bob", name: "Bob Wilson", email: "bob@example.com", failed: 0, roles: [], isSuperAdmin: false, pagePermissions: [] },
+		];
+
+		renderComponent({
+			...defaultProps,
+			users: allUsers,
+			currentAccessGrants: {
+				users: [1, 2],
+				roles: [],
+			},
+		});
+
+		expect(screen.getByText(/Only these users/)).toBeTruthy();
+	});
+});
+
+describe("CurrentAccessList component events", () => {
+	it("should call onEdit when Manage User Access button is clicked", () => {
+		const onEditMock = jest.fn();
+
+		renderComponent({
+			...defaultProps,
+			canSetPermissions: true,
+			onEdit: onEditMock,
+		});
+
+		const manageButton = screen.getByText("MANAGE USER ACCESS");
+		fireEvent.click(manageButton);
+
+		expect(onEditMock).toBeCalled();
+	});
+
+	it("should handle empty users list", () => {
+		renderComponent({
+			...defaultProps,
+			users: [],
+			currentAccessGrants: {
+				users: [],
+				roles: [],
+			},
+		});
+
+		expect(screen.getByText(/Only these users/)).toBeTruthy();
+	});
+
+	it("should handle multiple users correctly", () => {
+		const allUsers = [
+			{ id: 1, username: "john", name: "John Doe", email: "john@example.com", failed: 0, roles: [], isSuperAdmin: false, pagePermissions: [] },
+			{ id: 2, username: "jane", name: "Jane Smith", email: "jane@example.com", failed: 0, roles: [], isSuperAdmin: false, pagePermissions: [] },
+			{ id: 3, username: "bob", name: "Bob Wilson", email: "bob@example.com", failed: 0, roles: [], isSuperAdmin: false, pagePermissions: [] },
+		];
+
+		renderComponent({
+			...defaultProps,
+			users: allUsers,
+			currentAccessGrants: {
+				users: [1, 2],
+				roles: [],
+			},
+		});
+
+		// Should render the component with the filtered users
+		expect(screen.getByText(/Only these users/)).toBeTruthy();
+	});
+});

package/src/__tests__/components/RestrictionsModal/OptionsStep/OptionsStep.test.tsx

@@ -0,0 +1,160 @@
+import React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent } from "@testing-library/react";
+import { parseTheme } from "@ax/helpers";
+import "@testing-library/jest-dom";
+
+import OptionsStep from "@ax/components/RestrictionsModal/OptionsStep";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const defaultProps: {
+	restrictionType: "users" | "roles";
+	onRestrictionTypeChange: jest.Mock;
+	onCancel: jest.Mock;
+	onNext: jest.Mock;
+} = {
+	restrictionType: "users",
+	onRestrictionTypeChange: jest.fn(),
+	onCancel: jest.fn(),
+	onNext: jest.fn(),
+};
+
+const renderComponent = (props = defaultProps) =>
+	render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<OptionsStep {...props} />
+		</ThemeProvider>,
+	);
+
+describe("OptionsStep component rendering", () => {
+	it("should render the component with description text", () => {
+		renderComponent();
+
+		expect(screen.getByText(/By default/)).toBeTruthy();
+	});
+
+	it("should render both selection options", () => {
+		renderComponent();
+
+		expect(screen.getByText("By users")).toBeTruthy();
+		expect(screen.getByText("By roles")).toBeTruthy();
+	});
+
+	it("should render the user option description", () => {
+		renderComponent();
+
+		expect(screen.getByText("Only the selected users can edit the page.")).toBeTruthy();
+	});
+
+	it("should render the roles option description", () => {
+		renderComponent();
+
+		expect(screen.getByText("Only users with a specific roles can edit the page.")).toBeTruthy();
+	});
+
+	it("should render Cancel and Next buttons", () => {
+		renderComponent();
+
+		expect(screen.getByText("Cancel")).toBeTruthy();
+		expect(screen.getByText("Manage users access")).toBeTruthy();
+	});
+
+	it("should highlight users option when restrictionType is users", () => {
+		renderComponent({ ...defaultProps, restrictionType: "users" });
+
+		const radioInputs = screen.getAllByTestId("radio-field-input");
+		const usersInput = radioInputs.find((input) => (input as HTMLInputElement).value === "users");
+		expect((usersInput as HTMLInputElement).checked).toBe(true);
+	});
+
+	it("should highlight roles option when restrictionType is roles", () => {
+		renderComponent({ ...defaultProps, restrictionType: "roles" });
+
+		const radioInputs = screen.getAllByTestId("radio-field-input");
+		const rolesInput = radioInputs.find((input) => (input as HTMLInputElement).value === "roles");
+		expect((rolesInput as HTMLInputElement).checked).toBe(true);
+	});
+});
+
+describe("OptionsStep component events", () => {
+	it("should call onRestrictionTypeChange when users option is clicked", () => {
+		const onRestrictionTypeChangeMock = jest.fn();
+
+		renderComponent({
+			...defaultProps,
+			restrictionType: "roles",
+			onRestrictionTypeChange: onRestrictionTypeChangeMock,
+		});
+
+		const radioInputs = screen.getAllByTestId("radio-field-input");
+		const usersInput = radioInputs.find((input) => (input as HTMLInputElement).value === "users");
+		fireEvent.click(usersInput!);
+
+		expect(onRestrictionTypeChangeMock).toBeCalledWith("users");
+	});
+
+	it("should call onRestrictionTypeChange when roles option is clicked", () => {
+		const onRestrictionTypeChangeMock = jest.fn();
+
+		renderComponent({
+			...defaultProps,
+			restrictionType: "users",
+			onRestrictionTypeChange: onRestrictionTypeChangeMock,
+		});
+
+		const radioInputs = screen.getAllByTestId("radio-field-input");
+		const rolesInput = radioInputs.find((input) => (input as HTMLInputElement).value === "roles");
+		fireEvent.click(rolesInput!);
+
+		expect(onRestrictionTypeChangeMock).toBeCalledWith("roles");
+	});
+
+	it("should call onCancel when Cancel button is clicked", () => {
+		const onCancelMock = jest.fn();
+
+		renderComponent({
+			...defaultProps,
+			onCancel: onCancelMock,
+		});
+
+		const cancelButton = screen.getByText("Cancel");
+		fireEvent.click(cancelButton);
+
+		expect(onCancelMock).toBeCalled();
+	});
+
+	it("should call onNext when Next button is clicked", () => {
+		const onNextMock = jest.fn();
+
+		renderComponent({
+			...defaultProps,
+			onNext: onNextMock,
+		});
+
+		const nextButton = screen.getByText("Manage users access");
+		fireEvent.click(nextButton);
+
+		expect(onNextMock).toBeCalled();
+	});
+
+	it("should toggle between users and roles selections", () => {
+		const onRestrictionTypeChangeMock = jest.fn();
+
+		renderComponent({
+			...defaultProps,
+			restrictionType: "users",
+			onRestrictionTypeChange: onRestrictionTypeChangeMock,
+		});
+
+		// Switch to roles
+		const radioInputs = screen.getAllByTestId("radio-field-input");
+		const rolesInput = radioInputs.find((input) => (input as HTMLInputElement).value === "roles");
+		fireEvent.click(rolesInput!);
+
+		expect(onRestrictionTypeChangeMock).toHaveBeenCalledWith("roles");
+		expect(onRestrictionTypeChangeMock).toHaveBeenCalledTimes(1);
+	});
+});

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

@@ -0,0 +1,134 @@
+import { act } from "@testing-library/react";
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import RestrictionsModal from "@ax/components/RestrictionsModal";
+import { parseTheme } from "@ax/helpers";
+import globalTheme from "@ax/themes/theme.json";
+
+jest.mock("@ax/components/RestrictionsModal/utils", () => ({
+	fetchUsers: jest.fn().mockResolvedValue([]),
+}));
+
+jest.mock("react-redux", () => ({
+	...jest.requireActual("react-redux"),
+	useSelector: jest.fn((selector) => {
+		const mockState = {
+			sites: {
+				currentSiteInfo: { id: 1 },
+			},
+			users: {
+				roles: [
+					{ id: 1, name: "Admin" },
+					{ id: 2, name: "Editor" },
+				],
+				currentUser: { id: 1 },
+			},
+		};
+		return selector(mockState);
+	}),
+}));
+
+afterEach(cleanup);
+
+const defaultProps = {
+	isOpen: false,
+	toggleModal: jest.fn(),
+	currentAccessGrants: undefined,
+	onUpdateAccessGrants: jest.fn().mockResolvedValue(undefined),
+	isSaving: false,
+	canSetPermissions: true,
+};
+
+const renderComponent = (props = defaultProps) =>
+	render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<RestrictionsModal {...props} />
+		</ThemeProvider>,
+	);
+
+describe("RestrictionsModal component rendering", () => {
+	it("should not render the modal content when closed", () => {
+		renderComponent();
+
+		expect(screen.queryByText("By default")).toBeNull();
+	});
+
+	it("should render the modal with OptionsStep when open", () => {
+		renderComponent({ ...defaultProps, isOpen: true });
+
+		expect(screen.getByText(/By default/)).toBeTruthy();
+	});
+
+	it("should render CurrentAccessList when modal opens with current access grants", () => {
+		const currentAccessGrants = {
+			users: [1],
+			roles: [],
+		};
+
+		renderComponent({
+			...defaultProps,
+			isOpen: true,
+			currentAccessGrants,
+		});
+
+		// Should show "current" step instead of "options"
+		expect(screen.queryByText(/By default/)).toBeNull();
+	});
+
+	it("should render the modal title", () => {
+		renderComponent({ ...defaultProps, isOpen: true });
+
+		const titles = screen.getAllByText("Page restrictions");
+		expect(titles.length).toBeGreaterThan(0);
+	});
+});
+
+describe("RestrictionsModal component navigation", () => {
+	it("should navigate to options step when OptionsStep Next button is clicked", () => {
+		renderComponent({ ...defaultProps, isOpen: true });
+
+		const nextButton = screen.getByText("Manage users access");
+		fireEvent.click(nextButton);
+
+		// Should navigate to list step
+		expect(screen.queryByText(/Select the/)).toBeTruthy();
+	});
+
+	it("should close modal when Cancel button is clicked", () => {
+		const toggleModalMock = jest.fn();
+
+		renderComponent({
+			...defaultProps,
+			isOpen: true,
+			toggleModal: toggleModalMock,
+		});
+
+		const cancelButton = screen.getByText("Cancel");
+		fireEvent.click(cancelButton);
+
+		expect(toggleModalMock).toBeCalled();
+	});
+});
+
+describe("RestrictionsModal restriction type selection", () => {
+	it("should toggle restriction type when selection changes", () => {
+		renderComponent({ ...defaultProps, isOpen: true });
+
+		const radioInputs = screen.getAllByTestId("radio-field-input");
+		const rolesInput = radioInputs.find((input) => (input as HTMLInputElement).value === "roles");
+		fireEvent.click(rolesInput!);
+
+		// Should show the roles description
+		expect(screen.getByText(/Only users with a specific roles/)).toBeTruthy();
+	});
+
+	it("should start with users restriction type by default", () => {
+		renderComponent({ ...defaultProps, isOpen: true });
+
+		const radioInputs = screen.getAllByTestId("radio-field-input");
+		const usersInput = radioInputs.find((input) => (input as HTMLInputElement).value === "users");
+		expect((usersInput as HTMLInputElement).checked).toBe(true);
+	});
+});