@griddo/ax 11.14.2-rc.0 → 11.14.2

package/src/__tests__/components/HeadingsPreviewModal/HeadingsPreviewModal.utils.test.tsx

@@ -4,6 +4,7 @@ import {
 	extractUniqueHeadingTypes,
 	filterHeadings,
 	getHeadColor,
+	hasHiddenHeadings,
 } from "@ax/components/HeadingsPreviewModal/utils";
 
 const flatNode = (
@@ -11,7 +12,8 @@ const flatNode = (
 	text: string,
 	level: HeadingNode["level"],
 	children: HeadingNode[] = [],
-): HeadingNode => ({ tag, text, level, isHidden: false, children });
+	isHidden = false,
+): HeadingNode => ({ tag, text, level, isHidden, children });
 
 describe("analyzeHeadings", () => {
 	it("should return no errors for empty headings", () => {
@@ -111,6 +113,83 @@ describe("filterHeadings", () => {
 		const result = filterHeadings(headings, "h3");
 		expect(result).toHaveLength(0);
 	});
+
+	describe("with includeHidden parameter", () => {
+		it("should include hidden headings by default", () => {
+			const headingsWithHidden = [
+				flatNode("h1", "Title", 1, [flatNode("h2", "Visible", 2), flatNode("h2", "Hidden", 2, [], true)]),
+			];
+			const result = filterHeadings(headingsWithHidden, "all");
+			expect(result).toEqual(headingsWithHidden);
+		});
+
+		it("should explicitly include hidden headings when includeHidden is true", () => {
+			const headingsWithHidden = [
+				flatNode("h1", "Title", 1, [flatNode("h2", "Visible", 2), flatNode("h2", "Hidden", 2, [], true)]),
+			];
+			const result = filterHeadings(headingsWithHidden, "all", true);
+			expect(result).toEqual(headingsWithHidden);
+		});
+
+		it("should filter out hidden headings when includeHidden is false with filter 'all'", () => {
+			const headingsWithHidden = [
+				flatNode("h1", "Title", 1, [flatNode("h2", "Visible A", 2), flatNode("h2", "Hidden", 2, [], true), flatNode("h2", "Visible B", 2)]),
+			];
+			const result = filterHeadings(headingsWithHidden, "all", false);
+			expect(result).toHaveLength(1);
+			expect(result[0].tag).toBe("h1");
+			expect(result[0].children).toHaveLength(2);
+			expect(result[0].children.every((h) => !h.isHidden)).toBe(true);
+		});
+
+		it("should filter out hidden headings when flattening with specific type", () => {
+			const headingsWithHidden = [
+				flatNode("h1", "Title", 1, [
+					flatNode("h2", "Visible A", 2),
+					flatNode("h2", "Hidden", 2, [], true),
+					flatNode("h2", "Visible B", 2),
+				]),
+			];
+			const result = filterHeadings(headingsWithHidden, "h2", false);
+			expect(result).toHaveLength(2);
+			expect(result.every((h) => h.tag === "h2")).toBe(true);
+			expect(result.every((h) => !h.isHidden)).toBe(true);
+		});
+
+		it("should return empty array when all matching headings are hidden", () => {
+			const headingsWithHidden = [
+				flatNode("h1", "Title", 1, [flatNode("h2", "Hidden A", 2, [], true), flatNode("h2", "Hidden B", 2, [], true)]),
+			];
+			const result = filterHeadings(headingsWithHidden, "h2", false);
+			expect(result).toHaveLength(0);
+		});
+
+		it("should maintain hierarchy when filtering hidden with type 'all'", () => {
+			const headingsWithHidden = [
+				flatNode("h1", "Visible", 1, [
+					flatNode("h2", "Visible", 2, [flatNode("h3", "Hidden", 3, [], true)]),
+					flatNode("h2", "Hidden", 2, [], true),
+				]),
+			];
+			const result = filterHeadings(headingsWithHidden, "all", false);
+			expect(result).toHaveLength(1);
+			expect(result[0].tag).toBe("h1");
+			expect(result[0].children).toHaveLength(1);
+			expect(result[0].children[0].tag).toBe("h2");
+			expect(result[0].children[0].children).toHaveLength(0);
+		});
+
+		it("should filter hidden headings for specific type that has both visible and hidden", () => {
+			const headingsWithHidden = [
+				flatNode("h1", "Title", 1, [], true),
+				flatNode("h2", "Visible", 2),
+				flatNode("h2", "Hidden", 2, [], true),
+			];
+			const result = filterHeadings(headingsWithHidden, "h2", false);
+			expect(result).toHaveLength(1);
+			expect(result[0].text).toBe("Visible");
+		});
+	});
 });
 
 describe("extractUniqueHeadingTypes", () => {
@@ -148,3 +227,61 @@ describe("getHeadColor", () => {
 		expect(getHeadColor("unknown")).toBe("rgb(255, 255, 255)");
 	});
 });
+
+describe("hasHiddenHeadings", () => {
+	it("should return false when there are no hidden headings", () => {
+		const headings = [flatNode("h1", "Title", 1, [flatNode("h2", "Subtitle", 2)])];
+		expect(hasHiddenHeadings(headings)).toBe(false);
+	});
+
+	it("should return true when there are hidden headings with filter 'all'", () => {
+		const headings = [flatNode("h1", "Title", 1, [flatNode("h2", "Subtitle", 2, [], true)])];
+		expect(hasHiddenHeadings(headings, "all")).toBe(true);
+	});
+
+	it("should return true when a direct child heading is hidden", () => {
+		const headings = [flatNode("h1", "Title", 1, [], true)];
+		expect(hasHiddenHeadings(headings)).toBe(true);
+	});
+
+	it("should return true when a nested heading is hidden and filter matches", () => {
+		const headings = [flatNode("h1", "Title", 1, [flatNode("h2", "Subtitle", 2, [], true)])];
+		expect(hasHiddenHeadings(headings, "h2")).toBe(true);
+	});
+
+	it("should return false when hidden headings do not match the filter type", () => {
+		const headings = [flatNode("h1", "Title", 1, [flatNode("h2", "Subtitle", 2, [], true)])];
+		expect(hasHiddenHeadings(headings, "h1")).toBe(false);
+	});
+
+	it("should return true when filter type matches hidden heading", () => {
+		const headings = [flatNode("h1", "Title", 1, [], true), flatNode("h2", "Subtitle", 2)];
+		expect(hasHiddenHeadings(headings, "h1")).toBe(true);
+	});
+
+	it("should return false when no headings match the filter", () => {
+		const headings = [flatNode("h1", "Title", 1), flatNode("h2", "Subtitle", 2)];
+		expect(hasHiddenHeadings(headings, "h3")).toBe(false);
+	});
+
+	it("should return true when multiple levels have hidden headings of the same type", () => {
+		const headings = [
+			flatNode("h2", "Subtitle A", 2, [], true),
+			flatNode("h2", "Subtitle B", 2, [flatNode("h3", "Nested", 3, [], true)]),
+		];
+		expect(hasHiddenHeadings(headings, "h2")).toBe(true);
+	});
+
+	it("should handle deeply nested hidden headings", () => {
+		const headings = [
+			flatNode("h1", "Title", 1, [
+				flatNode("h2", "Subtitle", 2, [flatNode("h3", "Deep", 3, [flatNode("h4", "Deeper", 4, [], true)])]),
+			]),
+		];
+		expect(hasHiddenHeadings(headings, "h4")).toBe(true);
+	});
+
+	it("should return false for empty headings array", () => {
+		expect(hasHiddenHeadings([], "all")).toBe(false);
+	});
+});

package/src/__tests__/components/ImageDragAndDrop/CropStep/CropStep.test.tsx

@@ -0,0 +1,84 @@
+import CropStep from "@ax/components/ImageDragAndDrop/CropStep";
+import { parseTheme } from "@ax/helpers";
+import globalTheme from "@ax/themes/theme.json";
+
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { ThemeProvider } from "styled-components";
+
+afterEach(cleanup);
+
+const renderCropStep = (props = {}) =>
+	render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<CropStep imageSrc="data:image/jpeg;base64,abc" onConfirm={jest.fn()} onCancel={jest.fn()} {...props} />
+		</ThemeProvider>,
+	);
+
+describe("CropStep rendering", () => {
+	it("should render the cropper", () => {
+		renderCropStep();
+		expect(screen.getByTestId("cropper-mock")).toBeTruthy();
+	});
+
+	it("should render zoom controls", () => {
+		renderCropStep();
+		expect(screen.getByLabelText("Zoom in")).toBeTruthy();
+		expect(screen.getByLabelText("Zoom out")).toBeTruthy();
+		expect(screen.getByLabelText("Zoom")).toBeTruthy();
+	});
+
+	it("should render Done and Upload new image buttons", () => {
+		renderCropStep();
+		expect(screen.getByText("Done")).toBeTruthy();
+		expect(screen.getByText("Upload new image")).toBeTruthy();
+	});
+
+	it("should render zoom slider with correct range and step", () => {
+		renderCropStep();
+		const slider = screen.getByLabelText("Zoom") as HTMLInputElement;
+		expect(slider).toBeTruthy();
+		expect(slider.min).toBe("1");
+		expect(slider.max).toBe("3");
+		expect(slider.step).toBe("0.1");
+		expect(slider.value).toBe("1");
+	});
+});
+
+describe("CropStep events", () => {
+	it("should call onConfirm with cropped area when Done is clicked", () => {
+		const onConfirm = jest.fn();
+		renderCropStep({ onConfirm });
+		fireEvent.click(screen.getByText("Done"));
+		expect(onConfirm).toHaveBeenCalledWith({ x: 0, y: 0, width: 100, height: 100 });
+	});
+
+	it("should call onCancel when Upload new image is clicked", () => {
+		const onCancel = jest.fn();
+		renderCropStep({ onCancel });
+		fireEvent.click(screen.getByText("Upload new image"));
+		expect(onCancel).toHaveBeenCalledTimes(1);
+	});
+
+	it("should update zoom value when slider changes", () => {
+		renderCropStep();
+		const slider = screen.getByLabelText("Zoom") as HTMLInputElement;
+		fireEvent.change(slider, { target: { value: "2" } });
+		expect(slider.value).toBe("2");
+	});
+
+	it("should increase zoom when zoom in button is clicked", () => {
+		renderCropStep();
+		const slider = screen.getByLabelText("Zoom") as HTMLInputElement;
+		fireEvent.click(screen.getByLabelText("Zoom in"));
+		expect(slider.value).toBe("1.1");
+	});
+
+	it("should decrease zoom when zoom out button is clicked", () => {
+		renderCropStep();
+		const slider = screen.getByLabelText("Zoom") as HTMLInputElement;
+		expect(slider.value).toBe("1");
+		fireEvent.click(screen.getByLabelText("Zoom out"));
+		// Zoom can't go below MIN_ZOOM (1), so it should stay at 1
+		expect(slider.value).toBe("1");
+	});
+});

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

@@ -0,0 +1,173 @@
+import { Provider } from "react-redux";
+
+import ImageDragAndDrop from "@ax/components/ImageDragAndDrop";
+import { VALID_IMAGE_FORMATS } from "@ax/constants";
+import { parseTheme } from "@ax/helpers";
+import globalTheme from "@ax/themes/theme.json";
+
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import { ThemeProvider } from "styled-components";
+
+jest.mock("@ax/containers/Gallery", () => ({
+	galleryActions: {
+		uploadError: jest.fn(() => ({ type: "UPLOAD_ERROR" })),
+		resetError: jest.fn(() => ({ type: "RESET_ERROR" })),
+		uploadImage: jest.fn(() => async () => null),
+		replaceImage: jest.fn(() => async () => null),
+		setUploadSuccess: jest.fn(() => ({ type: "SET_UPLOAD_SUCCESS" })),
+	},
+}));
+
+afterEach(cleanup);
+
+const mockStore = configureStore([thunk]);
+
+const initialStore = {
+	gallery: {
+		isUploading: false,
+		isSuccess: false,
+		isError: false,
+		errorMsg: "",
+	},
+};
+
+const renderImageDragAndDrop = (props = {}, storeData = initialStore) => {
+	const store = mockStore(storeData);
+	return render(
+		<Provider store={store}>
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<ImageDragAndDrop siteID="global" handleUpload={jest.fn()} {...props} />
+			</ThemeProvider>
+		</Provider>,
+	);
+};
+
+describe("ImageDragAndDrop rendering", () => {
+	it("should render file-drag-and-drop-wrapper testid", () => {
+		renderImageDragAndDrop();
+		expect(screen.getByTestId("file-drag-and-drop-wrapper")).toBeTruthy();
+	});
+
+	it("should render Drag your image here text", () => {
+		renderImageDragAndDrop();
+		expect(screen.getByText("Drag your image here")).toBeTruthy();
+	});
+
+	it("should render Select images button", () => {
+		renderImageDragAndDrop();
+		expect(screen.getByText("Select images")).toBeTruthy();
+	});
+
+	it("should render valid formats text", () => {
+		renderImageDragAndDrop();
+		const validFormatsTexts = screen.getAllByText((_, element) => {
+			return VALID_IMAGE_FORMATS.every((format) => element?.textContent?.includes(format));
+		});
+		expect(validFormatsTexts.length).toBeGreaterThan(0);
+	});
+
+	it("should render valid formats in subtitle", () => {
+		renderImageDragAndDrop();
+		const subtitles = screen.getAllByText(/Max. size: 50MB/);
+		expect(subtitles.length).toBeGreaterThan(0);
+	});
+
+	it("should render file input element", () => {
+		renderImageDragAndDrop();
+		const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+		expect(fileInput).toBeTruthy();
+		const expectedAccept = VALID_IMAGE_FORMATS.map((format) => `.${format}`).join(",");
+		expect(fileInput.accept).toBe(expectedAccept);
+	});
+
+	it("should render placeholder when isAllowedToUpload is false", () => {
+		renderImageDragAndDrop({ isAllowedToUpload: false });
+		expect(screen.getByText("Select an image to see details")).toBeTruthy();
+		expect(screen.queryByText("Drag your image here")).toBeFalsy();
+	});
+
+	it("should render Uploading text when isUploading is true", () => {
+		renderImageDragAndDrop({}, { gallery: { isUploading: true, isSuccess: false, isError: false, errorMsg: "" } });
+		expect(screen.getByText("Uploading...")).toBeTruthy();
+	});
+
+	it("should render Image loaded text when isSuccess is true", () => {
+		renderImageDragAndDrop({}, { gallery: { isUploading: false, isSuccess: true, isError: false, errorMsg: "" } });
+		expect(screen.getByText("Image loaded!")).toBeTruthy();
+	});
+
+	it("should render error message when isError is true", () => {
+		renderImageDragAndDrop(
+			{},
+			{ gallery: { isUploading: false, isSuccess: false, isError: true, errorMsg: "Upload failed" } },
+		);
+		expect(screen.getByText("Error uploading image")).toBeTruthy();
+		expect(screen.getByText("Upload failed")).toBeTruthy();
+	});
+});
+
+describe("ImageDragAndDrop crop flow", () => {
+	it("should NOT render CropStep initially when withCrop is true", () => {
+		renderImageDragAndDrop({ withCrop: true });
+		expect(screen.queryByTestId("cropper-mock")).toBeFalsy();
+	});
+
+	it("should support withCrop prop - renders drag area for crop workflow", () => {
+		renderImageDragAndDrop({ withCrop: true });
+		// Verify component is rendered and ready for crop workflow
+		const dragArea = screen.getByTestId("file-drag-and-drop-wrapper");
+		expect(dragArea).toBeTruthy();
+		// CropStep will appear after a valid file is selected and read as data URL
+		expect(screen.queryByTestId("cropper-mock")).toBeFalsy();
+	});
+});
+
+describe("ImageDragAndDrop file validation", () => {
+	it("should accept multiple files when maxImages is not set", () => {
+		renderImageDragAndDrop();
+		const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+		expect(fileInput.multiple).toBe(true);
+	});
+
+	it("should not allow multiple files when maxImages is 1", () => {
+		renderImageDragAndDrop({ maxImages: 1 });
+		const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+		expect(fileInput.multiple).toBe(false);
+	});
+
+	it("should allow multiple files when maxImages is greater than 1", () => {
+		renderImageDragAndDrop({ maxImages: 5 });
+		const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+		expect(fileInput.multiple).toBe(true);
+	});
+});
+
+describe("ImageDragAndDrop TRY AGAIN", () => {
+	it("should render TRY AGAIN button", () => {
+		renderImageDragAndDrop();
+		expect(screen.getByText("TRY AGAIN")).toBeTruthy();
+	});
+
+	it("should be clickable", () => {
+		renderImageDragAndDrop();
+		const tryAgainButton = screen.getByText("TRY AGAIN");
+		fireEvent.click(tryAgainButton);
+		expect(tryAgainButton).toBeTruthy();
+	});
+});
+
+describe("ImageDragAndDrop inverse theme", () => {
+	it("should render with normal button style by default", () => {
+		renderImageDragAndDrop();
+		const selectButton = screen.getByText("Select images").closest("button");
+		expect(selectButton?.className).not.toContain("inverse");
+	});
+
+	it("should render with inverse button style when inverse prop is true", () => {
+		renderImageDragAndDrop({ inverse: true });
+		const selectButton = screen.getByText("Select images").closest("button");
+		expect(selectButton?.className).toContain("inverse");
+	});
+});

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

@@ -71,8 +71,7 @@ describe("KeywordsPreviewModal component rendering", () => {
 		renderComponent({ ...defaultProps, isOpen: true, keywordsFilter: ["seo"] });
 
 		expect(screen.getByText("Show keyword:")).toBeTruthy();
-		const seoElements = screen.getAllByText("seo");
-		expect(seoElements.length).toBeGreaterThan(0);
+		expect(screen.getByText("seo")).toBeTruthy();
 	});
 
 	it("should not render the filter section when keywordsFilter is empty", () => {
@@ -88,8 +87,8 @@ describe("KeywordsPreviewModal component events", () => {
 
 		renderComponent({ ...defaultProps, isOpen: true, toggleModal: toggleModalMock });
 
-		const closeButtons = screen.getAllByTestId("icon-action-component");
-		fireEvent.click(closeButtons[0]);
+		const closeButton = screen.getByTestId("icon-action-component");
+		fireEvent.click(closeButton);
 		expect(toggleModalMock).toBeCalled();
 	});
 

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

@@ -0,0 +1,120 @@
+import React from "react";
+
+import ProfileImage from "@ax/components/ProfileImage";
+import { parseTheme } from "@ax/helpers";
+import globalTheme from "@ax/themes/theme.json";
+
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { ThemeProvider } from "styled-components";
+
+jest.mock(
+	"@ax/components/ImageDragAndDrop",
+	() => (props: any) =>
+		React.createElement(
+			"div",
+			{
+				"data-testid": "image-drag-and-drop-mock",
+				onClick: () => props.handleUpload([{ id: 1, url: "http://example.com/image.jpg" }]),
+			},
+			React.createElement("button", { type: "button" }, "Upload Mock"),
+		),
+);
+
+afterEach(cleanup);
+
+const renderProfileImage = (props = {}) =>
+	render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<ProfileImage handleImage={jest.fn()} size={96} {...props} />
+		</ThemeProvider>,
+	);
+
+describe("ProfileImage rendering", () => {
+	it("should render profile-image-wrapper testid", () => {
+		renderProfileImage();
+		expect(screen.getByTestId("profile-image-wrapper")).toBeTruthy();
+	});
+
+	it("should render placeholder icon when no imageUrl is provided", () => {
+		renderProfileImage({ imageUrl: undefined });
+		const wrapper = screen.getByTestId("profile-image-wrapper");
+		expect(wrapper.querySelector("svg")).toBeTruthy();
+	});
+
+	it("should render image when imageUrl is provided", () => {
+		renderProfileImage({ imageUrl: "http://example.com/profile.jpg" });
+		const wrapper = screen.getByTestId("profile-image-wrapper");
+		const img = wrapper.querySelector("img");
+		expect(img).toBeTruthy();
+		expect(img?.getAttribute("src")).toContain("profile.jpg");
+	});
+
+	it("should render Edit Avatar text in overlay", () => {
+		renderProfileImage();
+		expect(screen.getByText("Edit Avatar")).toBeTruthy();
+	});
+});
+
+describe("ProfileImage modal", () => {
+	it("should open modal when profile-image-wrapper is clicked", () => {
+		renderProfileImage();
+		const wrapper = screen.getByTestId("profile-image-wrapper");
+		fireEvent.click(wrapper);
+		expect(screen.getByText("Upload Media")).toBeTruthy();
+	});
+
+	it("should close modal when profile-image-wrapper is clicked again", () => {
+		renderProfileImage();
+		const wrapper = screen.getByTestId("profile-image-wrapper");
+
+		fireEvent.click(wrapper);
+		expect(screen.getByText("Upload Media")).toBeTruthy();
+
+		fireEvent.click(wrapper);
+		expect(screen.queryByText("Upload Media")).toBeFalsy();
+	});
+
+	it("should render ImageDragAndDrop inside modal when open", () => {
+		renderProfileImage();
+		const wrapper = screen.getByTestId("profile-image-wrapper");
+		fireEvent.click(wrapper);
+
+		expect(screen.getByText("Upload Media")).toBeTruthy();
+		expect(screen.getByTestId("image-drag-and-drop-mock")).toBeTruthy();
+	});
+
+	it("should not render ImageDragAndDrop when modal is closed", () => {
+		renderProfileImage();
+		expect(screen.queryByTestId("image-drag-and-drop-mock")).toBeFalsy();
+	});
+});
+
+describe("ProfileImage upload", () => {
+	it("should call handleImage when image is uploaded", () => {
+		const handleImage = jest.fn();
+		renderProfileImage({ handleImage });
+
+		const wrapper = screen.getByTestId("profile-image-wrapper");
+		fireEvent.click(wrapper);
+
+		const uploadButton = screen.getByText("Upload Mock");
+		fireEvent.click(uploadButton);
+
+		expect(handleImage).toHaveBeenCalledWith({ id: 1, url: "http://example.com/image.jpg" });
+	});
+
+	it("should close modal after successful upload", () => {
+		const handleImage = jest.fn();
+		renderProfileImage({ handleImage });
+
+		const wrapper = screen.getByTestId("profile-image-wrapper");
+		fireEvent.click(wrapper);
+
+		expect(screen.getByText("Upload Media")).toBeTruthy();
+
+		const uploadButton = screen.getByText("Upload Mock");
+		fireEvent.click(uploadButton);
+
+		expect(screen.queryByText("Upload Media")).toBeFalsy();
+	});
+});

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

@@ -10,6 +10,14 @@ import globalTheme from "@ax/themes/theme.json";
 
 afterEach(cleanup);
 
+beforeEach(() => {
+	global.ResizeObserver = jest.fn().mockImplementation(() => ({
+		observe: jest.fn(),
+		unobserve: jest.fn(),
+		disconnect: jest.fn(),
+	}));
+});
+
 jest.mock("react", () => {
 	const originReact = jest.requireActual("react");
 	const mUseRef = jest.fn();