@griddo/ax 11.15.9 → 11.16.0-rc.1

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

@@ -0,0 +1,234 @@
+import { ThemeProvider } from "styled-components";
+import configureStore from "redux-mock-store";
+import { parseTheme } from "@ax/helpers";
+import "@testing-library/jest-dom";
+
+import globalTheme from "@ax/themes/theme.json";
+import RolesList from "@ax/components/RestrictionsModal/RolesList";
+import { render, cleanup, screen, fireEvent } from "../../../../../config/jest/test-utils";
+
+afterEach(() => {
+	cleanup();
+	jest.resetAllMocks();
+});
+
+const mockStore = configureStore();
+
+const initialState = {
+	users: {
+		roles: [
+			{ id: 1, name: "Admin" },
+			{ id: 2, name: "Editor" },
+			{ id: 3, name: "Viewer" },
+		],
+	},
+};
+
+const defaultProps = {
+	onCancel: jest.fn(),
+	onApply: jest.fn(),
+	selectedRoleIds: [],
+	isSaving: false,
+	onResetAccess: jest.fn(),
+};
+
+const renderComponent = (props = defaultProps, storeState = initialState) => {
+	const store = mockStore(storeState);
+
+	return render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<RolesList {...props} />
+		</ThemeProvider>,
+		{ store },
+	);
+};
+
+describe("RolesList component rendering", () => {
+	it("should render the component", () => {
+		renderComponent();
+
+		expect(screen.getByText(/Select the roles/)).toBeTruthy();
+	});
+
+	it("should render all available roles", () => {
+		renderComponent();
+
+		expect(screen.getByText("Admin")).toBeTruthy();
+		expect(screen.getByText("Editor")).toBeTruthy();
+		expect(screen.getByText("Viewer")).toBeTruthy();
+	});
+
+	it("should render the search field", () => {
+		renderComponent();
+
+		expect(screen.getByPlaceholderText("Search")).toBeTruthy();
+	});
+
+	it("should render the Apply button", () => {
+		renderComponent();
+
+		expect(screen.getByText("Apply")).toBeTruthy();
+	});
+
+	it("should render Cancel button when no roles are selected", () => {
+		renderComponent({ ...defaultProps, selectedRoleIds: [] });
+
+		expect(screen.getByText("Cancel")).toBeTruthy();
+	});
+
+	it("should render Reset Page Access button when roles are already selected", () => {
+		renderComponent({ ...defaultProps, selectedRoleIds: [1] });
+
+		expect(screen.getByText("Reset Page Access")).toBeTruthy();
+	});
+
+	it("should show Saving text and disable Apply button when isSaving is true", () => {
+		renderComponent({ ...defaultProps, isSaving: true });
+
+		const savingButton = screen.getByRole("button", { name: /Saving/ });
+		expect(savingButton).toBeTruthy();
+		expect((savingButton as HTMLButtonElement).disabled).toBe(true);
+		expect(screen.queryByText("Apply")).toBeNull();
+	});
+});
+
+describe("RolesList component search functionality", () => {
+	it("should filter roles based on search term", () => {
+		renderComponent();
+
+		const searchField = screen.getByPlaceholderText("Search") as HTMLInputElement;
+		fireEvent.change(searchField, { target: { value: "admin" } });
+
+		expect(screen.getByText("Admin")).toBeTruthy();
+		expect(screen.queryByText("Editor")).toBeNull();
+	});
+
+	it("should show Select Roles button when search is active", () => {
+		renderComponent();
+
+		const searchField = screen.getByPlaceholderText("Search") as HTMLInputElement;
+		fireEvent.change(searchField, { target: { value: "admin" } });
+
+		expect(screen.getByText("Select Roles")).toBeTruthy();
+		expect(screen.queryByText("Apply")).toBeNull();
+	});
+
+	it("should clear search and show apply buttons when Select Roles button is clicked", () => {
+		renderComponent();
+
+		const searchField = screen.getByPlaceholderText("Search") as HTMLInputElement;
+		fireEvent.change(searchField, { target: { value: "admin" } });
+
+		const selectButton = screen.getByText("Select Roles");
+		fireEvent.click(selectButton);
+
+		expect((searchField as HTMLInputElement).value).toBe("");
+		expect(screen.getByText("Apply")).toBeTruthy();
+	});
+});
+
+describe("RolesList component role selection", () => {
+	it("should toggle role selection when clicked", () => {
+		renderComponent();
+
+		const roleCheckboxes = screen.getAllByRole("checkbox") as HTMLInputElement[];
+		fireEvent.click(roleCheckboxes[0]);
+
+		expect(roleCheckboxes[0].checked).toBe(true);
+	});
+
+	it("should allow selecting multiple roles", () => {
+		renderComponent();
+
+		const roleCheckboxes = screen.getAllByRole("checkbox") as HTMLInputElement[];
+		fireEvent.click(roleCheckboxes[0]);
+		fireEvent.click(roleCheckboxes[1]);
+
+		expect(roleCheckboxes[0].checked).toBe(true);
+		expect(roleCheckboxes[1].checked).toBe(true);
+	});
+
+	it("should deselect role when clicked again", () => {
+		renderComponent();
+
+		const roleCheckboxes = screen.getAllByRole("checkbox") as HTMLInputElement[];
+		fireEvent.click(roleCheckboxes[0]);
+		expect(roleCheckboxes[0].checked).toBe(true);
+
+		fireEvent.click(roleCheckboxes[0]);
+		expect(roleCheckboxes[0].checked).toBe(false);
+	});
+
+	it("should preserve selected roles during search", () => {
+		renderComponent();
+
+		const roleCheckboxes = screen.getAllByRole("checkbox") as HTMLInputElement[];
+		fireEvent.click(roleCheckboxes[0]);
+
+		const searchField = screen.getByPlaceholderText("Search") as HTMLInputElement;
+		fireEvent.change(searchField, { target: { value: "editor" } });
+
+		// Clear search to see all roles again
+		fireEvent.change(searchField, { target: { value: "" } });
+
+		const allCheckboxes = screen.getAllByRole("checkbox") as HTMLInputElement[];
+		expect(allCheckboxes[0].checked).toBe(true);
+	});
+});
+
+describe("RolesList component actions", () => {
+	it("should call onApply with selected role IDs when Apply button is clicked", () => {
+		const onApplyMock = jest.fn();
+
+		renderComponent({ ...defaultProps, onApply: onApplyMock });
+
+		const roleCheckboxes = screen.getAllByRole("checkbox");
+		fireEvent.click(roleCheckboxes[0]);
+
+		const applyButton = screen.getByText("Apply");
+		fireEvent.click(applyButton);
+
+		expect(onApplyMock).toBeCalledWith([1]);
+	});
+
+	it("should call onCancel when Cancel button is clicked", () => {
+		const onCancelMock = jest.fn();
+
+		renderComponent({
+			...defaultProps,
+			selectedRoleIds: [],
+			onCancel: onCancelMock,
+		});
+
+		const cancelButton = screen.getByText("Cancel");
+		fireEvent.click(cancelButton);
+
+		expect(onCancelMock).toBeCalled();
+	});
+
+	it("should call onResetAccess when Reset Page Access button is clicked", () => {
+		const onResetAccessMock = jest.fn();
+
+		renderComponent({
+			...defaultProps,
+			selectedRoleIds: [1],
+			onResetAccess: onResetAccessMock,
+		});
+
+		const resetButton = screen.getByText("Reset Page Access");
+		fireEvent.click(resetButton);
+
+		expect(onResetAccessMock).toBeCalled();
+	});
+
+	it("should disable Reset Page Access button when isSaving is true", () => {
+		renderComponent({
+			...defaultProps,
+			selectedRoleIds: [1],
+			isSaving: true,
+		});
+
+		const resetButton = screen.getByRole("button", { name: /Reset Page Access/ });
+		expect((resetButton as HTMLButtonElement).disabled).toBe(true);
+	});
+});

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

@@ -0,0 +1,288 @@
+import { act } from "@testing-library/react";
+import { ThemeProvider } from "styled-components";
+import configureStore from "redux-mock-store";
+import { parseTheme } from "@ax/helpers";
+import "@testing-library/jest-dom";
+
+import globalTheme from "@ax/themes/theme.json";
+import UsersList from "@ax/components/RestrictionsModal/UsersList";
+import type { IUser } from "@ax/types";
+import { render, cleanup, screen, fireEvent } from "../../../../../config/jest/test-utils";
+
+jest.mock("@ax/components/RestrictionsModal/utils", () => ({
+	fetchUsers: jest.fn().mockResolvedValue([
+		{ 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: [] },
+	]),
+}));
+
+afterEach(() => {
+	cleanup();
+	jest.resetAllMocks();
+});
+
+const mockStore = configureStore();
+
+const initialState = {
+	users: {
+		currentUser: { id: 1, username: "john", name: "John Doe", email: "john@example.com", failed: 0, roles: [], isSuperAdmin: false, pagePermissions: [] },
+	},
+	sites: {
+		currentSiteInfo: { id: 1 },
+	},
+};
+
+const defaultProps: {
+	onCancel: jest.Mock;
+	onApply: jest.Mock;
+	selectedUserIds: number[];
+	isSaving: boolean;
+	onResetAccess: jest.Mock;
+	users: IUser[];
+} = {
+	onCancel: jest.fn(),
+	onApply: jest.fn(),
+	selectedUserIds: [],
+	isSaving: false,
+	onResetAccess: 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: [] },
+	],
+};
+
+const renderComponent = (props = defaultProps, storeState = initialState) => {
+	const store = mockStore(storeState);
+
+	return render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<UsersList {...props} />
+		</ThemeProvider>,
+		{ store },
+	);
+};
+
+describe("UsersList component rendering", () => {
+	it("should render the component", async () => {
+		await act(async () => {
+			renderComponent();
+		});
+
+		expect(screen.getByText(/Select the users/)).toBeTruthy();
+	});
+
+	it("should render the search field", async () => {
+		await act(async () => {
+			renderComponent();
+		});
+
+		expect(screen.getByPlaceholderText("Search")).toBeTruthy();
+	});
+
+	it("should render the Apply button", async () => {
+		await act(async () => {
+			renderComponent();
+		});
+
+		expect(screen.getByText("Apply")).toBeTruthy();
+	});
+
+	it("should render Cancel button when no users are selected", async () => {
+		await act(async () => {
+			renderComponent({ ...defaultProps, selectedUserIds: [] });
+		});
+
+		expect(screen.getByText("Cancel")).toBeTruthy();
+	});
+
+	it("should render Reset Page Access button when users are already selected", async () => {
+		await act(async () => {
+			renderComponent({ ...defaultProps, selectedUserIds: [1] });
+		});
+
+		expect(screen.getByText("Reset Page Access")).toBeTruthy();
+	});
+
+	it("should show Saving text and disable Apply button when isSaving is true", async () => {
+		await act(async () => {
+			renderComponent({ ...defaultProps, isSaving: true });
+		});
+
+		const savingButton = screen.getByRole("button", { name: /Saving/ });
+		expect(savingButton).toBeTruthy();
+		expect((savingButton as HTMLButtonElement).disabled).toBe(true);
+	});
+
+	it("should show ACCESS TO section when users are selected", async () => {
+		await act(async () => {
+			renderComponent({
+				...defaultProps,
+				users: [{ id: 2, username: "jane", name: "Jane Smith", email: "jane@example.com", failed: 0, roles: [], isSuperAdmin: false, pagePermissions: [] }],
+			});
+		});
+
+		// The section renders when search is empty and users are selected
+		expect(screen.queryByText(/Select the users/)).toBeTruthy();
+	});
+
+	it("should show AVAILABLE USERS section", async () => {
+		await act(async () => {
+			renderComponent();
+		});
+
+		expect(screen.getByText("AVAILABLE USERS")).toBeTruthy();
+	});
+});
+
+describe("UsersList component search functionality", () => {
+	it("should show Select Users button when search has value", async () => {
+		renderComponent();
+
+		const searchField = screen.getByPlaceholderText("Search") as HTMLInputElement;
+
+		await act(async () => {
+			fireEvent.change(searchField, { target: { value: "test" } });
+		});
+
+		// When search is active, the button label changes
+		const selectButton = screen.queryByRole("button", { name: /Select Users/ });
+		expect(selectButton).toBeTruthy();
+	});
+
+	it("should clear search when Select Users button is clicked", async () => {
+		renderComponent();
+
+		const searchField = screen.getByPlaceholderText("Search") as HTMLInputElement;
+
+		await act(async () => {
+			fireEvent.change(searchField, { target: { value: "test" } });
+		});
+
+		const selectButton = screen.getByRole("button", { name: /Select Users/ });
+
+		await act(async () => {
+			fireEvent.click(selectButton);
+		});
+
+		expect((searchField as HTMLInputElement).value).toBe("");
+	});
+});
+
+describe("UsersList component user selection", () => {
+	it("should render user checkboxes", async () => {
+		renderComponent();
+
+		const checkboxes = screen.getAllByRole("checkbox");
+		expect(checkboxes.length).toBeGreaterThan(0);
+	});
+
+	it("should select and deselect users", async () => {
+		renderComponent();
+
+		const checkboxes = screen.getAllByRole("checkbox") as HTMLInputElement[];
+		fireEvent.click(checkboxes[0]);
+		expect(checkboxes[0].checked).toBe(true);
+
+		fireEvent.click(checkboxes[0]);
+		expect(checkboxes[0].checked).toBe(false);
+	});
+
+	it("should call onApply with selected user IDs when Apply button is clicked", async () => {
+		const onApplyMock = jest.fn();
+
+		renderComponent({ ...defaultProps, onApply: onApplyMock });
+
+		const checkboxes = screen.getAllByRole("checkbox");
+		if (checkboxes.length > 0) {
+			fireEvent.click(checkboxes[0]);
+		}
+
+		const applyButton = screen.getByText("Apply");
+		fireEvent.click(applyButton);
+
+		expect(onApplyMock).toBeCalled();
+	});
+
+	it("should include current user when applying selection", async () => {
+		const onApplyMock = jest.fn();
+
+		renderComponent({
+			...defaultProps,
+			users: [{ id: 2, username: "jane", name: "Jane Smith", email: "jane@example.com", failed: 0, roles: [], isSuperAdmin: false, pagePermissions: [] }],
+			onApply: onApplyMock,
+		});
+
+		const applyButton = screen.getByText("Apply");
+		fireEvent.click(applyButton);
+
+		// Current user (id: 1) should always be included
+		const callArgs = onApplyMock.mock.calls[0][0];
+		expect(callArgs).toContain(1);
+	});
+});
+
+describe("UsersList component actions", () => {
+	it("should call onCancel when Cancel button is clicked", async () => {
+		const onCancelMock = jest.fn();
+
+		await act(async () => {
+			renderComponent({
+				...defaultProps,
+				selectedUserIds: [],
+				onCancel: onCancelMock,
+			});
+		});
+
+		const cancelButton = screen.getByText("Cancel");
+
+		await act(async () => {
+			fireEvent.click(cancelButton);
+		});
+
+		expect(onCancelMock).toBeCalled();
+	});
+
+	it("should call onResetAccess when Reset Page Access button is clicked", () => {
+		const onResetAccessMock = jest.fn();
+
+		renderComponent({
+			...defaultProps,
+			selectedUserIds: [1],
+			onResetAccess: onResetAccessMock,
+		});
+
+		const resetButton = screen.getByText("Reset Page Access");
+		fireEvent.click(resetButton);
+
+		expect(onResetAccessMock).toBeCalled();
+	});
+
+	it("should disable Reset Page Access button when isSaving is true", () => {
+		renderComponent({
+			...defaultProps,
+			selectedUserIds: [1],
+			isSaving: true,
+		});
+
+		const resetButton = screen.getByRole("button", { name: /Reset Page Access/ });
+		expect((resetButton as HTMLButtonElement).disabled).toBe(true);
+	});
+
+	it("should ensure current user is always included in apply", async () => {
+		const onApplyMock = jest.fn();
+
+		renderComponent({
+			...defaultProps,
+			users: [{ id: 2, username: "jane", name: "Jane Smith", email: "jane@example.com", failed: 0, roles: [], isSuperAdmin: false, pagePermissions: [] }],
+			onApply: onApplyMock,
+		});
+
+		const applyButton = screen.getByText("Apply");
+		fireEvent.click(applyButton);
+
+		// Current user (id: 1) should be included along with any selected users
+		const callArgs = onApplyMock.mock.calls[0][0];
+		expect(callArgs).toContain(1);
+	});
+});