@griddo/ax 11.12.0 → 11.12.1-rc.0

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

@@ -1,23 +1,22 @@
-import React from "react";
-
-import { ThemeProvider } from "styled-components";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { mock } from "jest-mock-extended";
-import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { ThemeProvider } from "styled-components";
 import "@testing-library/jest-dom";
 
-import Button, { IButtonProps } from "@ax/components/Button";
+import Button, { type IButtonProps } from "@ax/components/Button";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 
 afterEach(cleanup);
 
-const defaultProps = mock<IButtonProps>();
+const createDefaultProps = (): IButtonProps => mock<IButtonProps>();
 
 describe("Button component rendering", () => {
 	it("should render the component with the default button and no icon", () => {
+		const props = createDefaultProps();
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Button {...defaultProps} />
+				<Button {...props} />
 			</ThemeProvider>,
 		);
 
@@ -28,12 +27,13 @@ describe("Button component rendering", () => {
 	});
 
 	it("should render the component with the text button and an icon", () => {
-		defaultProps.buttonStyle = "text";
-		defaultProps.icon = "delete";
+		const props = createDefaultProps();
+		props.buttonStyle = "text";
+		props.icon = "delete";
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Button {...defaultProps} />
+				<Button {...props} />
 			</ThemeProvider>,
 		);
 
@@ -44,10 +44,11 @@ describe("Button component rendering", () => {
 	});
 
 	it("should render the component with the line button", () => {
-		defaultProps.buttonStyle = "line";
+		const props = createDefaultProps();
+		props.buttonStyle = "line";
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Button {...defaultProps} />
+				<Button {...props} />
 			</ThemeProvider>,
 		);
 
@@ -56,10 +57,12 @@ describe("Button component rendering", () => {
 	});
 
 	it("should render the component with a className", () => {
-		defaultProps.className = "my-class";
+		const props = createDefaultProps();
+		props.className = "my-class";
+		props.buttonStyle = "line";
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Button {...defaultProps} />
+				<Button {...props} />
 			</ThemeProvider>,
 		);
 
@@ -69,10 +72,11 @@ describe("Button component rendering", () => {
 	});
 
 	it("should render the children", () => {
-		defaultProps.children = "el texto";
+		const props = createDefaultProps();
+		props.children = "el texto";
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Button {...defaultProps} />
+				<Button {...props} />
 			</ThemeProvider>,
 		);
 
@@ -80,13 +84,12 @@ describe("Button component rendering", () => {
 	});
 
 	it("should trigger the onClick action", () => {
-		defaultProps.buttonStyle = "lineInverse";
-		const handleOnClickMock = defaultProps.onClick as jest.MockedFunction<
-			(e: React.MouseEvent<HTMLButtonElement>) => void
-		>;
+		const props = createDefaultProps();
+		props.buttonStyle = "lineInverse";
+		const handleOnClickMock = props.onClick as jest.MockedFunction<(e: React.MouseEvent<HTMLButtonElement>) => void>;
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Button {...defaultProps} />
+				<Button {...props} />
 			</ThemeProvider>,
 		);
 
@@ -97,14 +100,13 @@ describe("Button component rendering", () => {
 	});
 
 	it("should not trigger the onClick action if the button is disabled", () => {
-		defaultProps.buttonStyle = "lineInverse";
-		defaultProps.disabled = true;
-		const handleOnClickMock = defaultProps.onClick as jest.MockedFunction<
-			(e: React.MouseEvent<HTMLButtonElement>) => void
-		>;
+		const props = createDefaultProps();
+		props.buttonStyle = "lineInverse";
+		props.disabled = true;
+		const handleOnClickMock = props.onClick as jest.MockedFunction<(e: React.MouseEvent<HTMLButtonElement>) => void>;
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Button {...defaultProps} />
+				<Button {...props} />
 			</ThemeProvider>,
 		);
 

package/src/__tests__/components/HeadingsPreviewModal/ErrorsBanner/ErrorItem/ErrorItem.test.tsx

@@ -0,0 +1,158 @@
+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 ErrorItem from "@ax/components/HeadingsPreviewModal/ErrorsBanner/ErrorItem";
+import type { IHeadingError } from "@ax/components/HeadingsPreviewModal/utils";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const mockError: IHeadingError = {
+	message: "Check heading structure for SEO compliance",
+	description: "Ensure headings are properly nested",
+	headingIds: [1, 2, 3],
+};
+
+const defaultProps = {
+	error: mockError,
+	onSelectHeading: jest.fn(() => jest.fn()),
+};
+
+const renderComponent = (props = defaultProps) =>
+	render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<ErrorItem {...props} />
+		</ThemeProvider>,
+	);
+
+describe("ErrorItem component rendering", () => {
+	it("should render the error message", () => {
+		renderComponent();
+		expect(screen.getByText("Check heading structure for SEO compliance")).toBeTruthy();
+	});
+
+	it("should show heading counter text", () => {
+		renderComponent();
+		expect(screen.getByText("3 headings")).toBeTruthy();
+	});
+
+	it("should show the open toggle button when headingIds are present", () => {
+		renderComponent();
+		const buttons = screen.getAllByRole("button");
+		// toggle (index 0) + close (index 1) + prev (index 2) + next (index 3)
+		expect(buttons.length).toBe(4);
+	});
+
+	it("should not show the open toggle button when headingIds is empty", () => {
+		const props = {
+			...defaultProps,
+			error: { ...mockError, headingIds: [] },
+		};
+		renderComponent(props);
+		const buttons = screen.getAllByRole("button");
+		// only close (index 0) + prev (index 1) + next (index 2) — no toggle
+		expect(buttons.length).toBe(3);
+	});
+
+	it("should not render when dismissed", () => {
+		renderComponent();
+		expect(screen.getByText("Check heading structure for SEO compliance")).toBeTruthy();
+
+		const buttons = screen.getAllByRole("button");
+		// Close button is at index 1 (after toggle)
+		fireEvent.click(buttons[1]);
+
+		expect(screen.queryByText("Check heading structure for SEO compliance")).toBeNull();
+	});
+});
+
+describe("ErrorItem component events", () => {
+	it("should call onSelectHeading when the open button is clicked", () => {
+		const onSelectHeadingMock = jest.fn(() => jest.fn());
+		renderComponent({ ...defaultProps, onSelectHeading: onSelectHeadingMock });
+
+		const buttons = screen.getAllByRole("button");
+		// Toggle open is at index 0
+		fireEvent.click(buttons[0]);
+
+		expect(onSelectHeadingMock).toBeCalledWith(mockError.headingIds[0]);
+	});
+
+	it("should update counter to '1 of 3 headings' after opening", () => {
+		renderComponent();
+
+		const buttons = screen.getAllByRole("button");
+		fireEvent.click(buttons[0]);
+
+		expect(screen.getByText("1 of 3 headings")).toBeTruthy();
+	});
+
+	it("should call onSelectHeading with first heading ID when next button is clicked", () => {
+		const onSelectHeadingMock = jest.fn(() => jest.fn());
+		renderComponent({ ...defaultProps, onSelectHeading: onSelectHeadingMock });
+
+		const buttons = screen.getAllByRole("button");
+		// Next button is at index 3 (toggle, close, prev, next)
+		fireEvent.click(buttons[3]);
+
+		expect(onSelectHeadingMock).toBeCalledWith(mockError.headingIds[0]);
+	});
+
+	it("should update counter to '2 of 3 headings' after two next clicks", () => {
+		renderComponent();
+
+		const buttons = screen.getAllByRole("button");
+		fireEvent.click(buttons[3]);
+		fireEvent.click(buttons[3]);
+
+		expect(screen.getByText("2 of 3 headings")).toBeTruthy();
+	});
+
+	it("should call onSelectHeading with previous heading ID when prev button is clicked", () => {
+		const onSelectHeadingMock = jest.fn(() => jest.fn());
+		renderComponent({ ...defaultProps, onSelectHeading: onSelectHeadingMock });
+
+		const buttons = screen.getAllByRole("button");
+		// Advance to index 1, then go back
+		fireEvent.click(buttons[3]);
+		fireEvent.click(buttons[3]);
+
+		jest.clearAllMocks();
+		fireEvent.click(buttons[2]);
+
+		expect(onSelectHeadingMock).toBeCalledWith(mockError.headingIds[0]);
+	});
+
+	it("should not navigate prev when already at the first heading", () => {
+		const onSelectHeadingMock = jest.fn(() => jest.fn());
+		renderComponent({ ...defaultProps, onSelectHeading: onSelectHeadingMock });
+
+		const buttons = screen.getAllByRole("button");
+		// Open sets currentIndex to 0, then try to go prev
+		fireEvent.click(buttons[0]);
+		jest.clearAllMocks();
+		fireEvent.click(buttons[2]);
+
+		expect(onSelectHeadingMock).not.toBeCalled();
+	});
+
+	it("should not navigate next when already at the last heading", () => {
+		const onSelectHeadingMock = jest.fn(() => jest.fn());
+		renderComponent({ ...defaultProps, onSelectHeading: onSelectHeadingMock });
+
+		const buttons = screen.getAllByRole("button");
+		// Click next 3 times to reach the end (headingIds has 3 items, indices 0-2)
+		fireEvent.click(buttons[3]);
+		fireEvent.click(buttons[3]);
+		fireEvent.click(buttons[3]);
+		jest.clearAllMocks();
+
+		// Fourth click should be a no-op
+		fireEvent.click(buttons[3]);
+		expect(onSelectHeadingMock).not.toBeCalled();
+	});
+});

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

@@ -0,0 +1,90 @@
+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 ErrorsBanner from "@ax/components/HeadingsPreviewModal/ErrorsBanner";
+import type { IHeadingError } from "@ax/components/HeadingsPreviewModal/utils";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const mockError: IHeadingError = {
+	message: "No H1 in this page",
+	description: "Add an H1 tag",
+	headingIds: [],
+};
+
+const defaultProps = {
+	errors: [mockError],
+	onSelectHeading: jest.fn(() => jest.fn()),
+	isOpen: false,
+	setIsOpen: jest.fn(),
+	resetKey: 0,
+};
+
+const renderComponent = (props = defaultProps) =>
+	render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<ErrorsBanner {...props} />
+		</ThemeProvider>,
+	);
+
+describe("ErrorsBanner component rendering", () => {
+	it("should render the SEO Alerts header", () => {
+		renderComponent();
+		expect(screen.getByText("SEO Alerts")).toBeTruthy();
+	});
+
+	it("should render the error message from the errors list", () => {
+		renderComponent();
+		expect(screen.getByText("No H1 in this page")).toBeTruthy();
+	});
+
+	it("should render multiple errors", () => {
+		const props = {
+			...defaultProps,
+			errors: [
+				{ message: "Error one", description: "Desc", headingIds: [] },
+				{ message: "Error two", description: "Desc", headingIds: [] },
+			],
+		};
+		renderComponent(props);
+		expect(screen.getByText("Error one")).toBeTruthy();
+		expect(screen.getByText("Error two")).toBeTruthy();
+	});
+
+	it("should not render when dismissed", () => {
+		renderComponent();
+		expect(screen.getByText("SEO Alerts")).toBeTruthy();
+
+		const buttons = screen.getAllByRole("button");
+		// Close button is the second button in the header (after toggle)
+		fireEvent.click(buttons[1]);
+
+		expect(screen.queryByText("SEO Alerts")).toBeNull();
+	});
+});
+
+describe("ErrorsBanner component events", () => {
+	it("should call setIsOpen with true when toggle is clicked and isOpen is false", () => {
+		const setIsOpenMock = jest.fn();
+		renderComponent({ ...defaultProps, isOpen: false, setIsOpen: setIsOpenMock });
+
+		const buttons = screen.getAllByRole("button");
+		// Toggle is the first button in the header
+		fireEvent.click(buttons[0]);
+		expect(setIsOpenMock).toBeCalledWith(true);
+	});
+
+	it("should call setIsOpen with false when toggle is clicked and isOpen is true", () => {
+		const setIsOpenMock = jest.fn();
+		renderComponent({ ...defaultProps, isOpen: true, setIsOpen: setIsOpenMock });
+
+		const buttons = screen.getAllByRole("button");
+		fireEvent.click(buttons[0]);
+		expect(setIsOpenMock).toBeCalledWith(false);
+	});
+});

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

@@ -0,0 +1,178 @@
+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 type { HeadingNode } from "@ax/types";
+import HeadingsPreviewModal from "@ax/components/HeadingsPreviewModal";
+import * as headingsUtils from "@ax/components/HeadingsPreviewModal/utils";
+import globalTheme from "@ax/themes/theme.json";
+
+jest.mock("@ax/components/HeadingsPreviewModal/utils", () => ({
+	...jest.requireActual("@ax/components/HeadingsPreviewModal/utils"),
+	parseHeadingsTree: jest.fn().mockReturnValue([]),
+}));
+
+afterEach(cleanup);
+
+const createHeadingNode = (
+	tag: HeadingNode["tag"],
+	text: string,
+	level: HeadingNode["level"],
+	children: HeadingNode[] = [],
+): HeadingNode => ({
+	tag,
+	text,
+	level,
+	isHidden: false,
+	children,
+});
+
+const mockHeadings: HeadingNode[] = [
+	createHeadingNode("h1", "Main Title", 1, [createHeadingNode("h2", "Subtitle", 2)]),
+];
+
+const browserRef = { current: document.createElement("div") } as React.RefObject<HTMLDivElement>;
+
+const defaultProps = {
+	isOpen: false,
+	browserRef: { current: null } as React.RefObject<HTMLDivElement>,
+	toggleModal: jest.fn(),
+	headingsFilter: "all" as const,
+	setHeadingsFilter: jest.fn(),
+};
+
+const renderComponent = (props = defaultProps) =>
+	render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<HeadingsPreviewModal {...props} />
+		</ThemeProvider>,
+	);
+
+describe("HeadingsPreviewModal component rendering", () => {
+	it("should not render the headings content when closed", () => {
+		renderComponent();
+
+		expect(screen.queryByText("Show headings:")).toBeNull();
+		expect(screen.queryByTestId("wrapper")).toBeNull();
+	});
+
+	it("should render the empty state when open with no headings", () => {
+		renderComponent({ ...defaultProps, isOpen: true });
+
+		const floatingPanel = screen.getByTestId("floating-panel");
+		expect(floatingPanel).toBeTruthy();
+
+		const emptyState = screen.getByTestId("wrapper");
+		expect(emptyState).toBeTruthy();
+		expect(emptyState).toHaveTextContent("There are no headings available to display");
+	});
+
+	it("should render heading items when open with headings", () => {
+		(headingsUtils.parseHeadingsTree as jest.Mock).mockReturnValueOnce(mockHeadings);
+
+		renderComponent({ ...defaultProps, isOpen: true, browserRef });
+
+		const floatingPanel = screen.getByTestId("floating-panel");
+		expect(floatingPanel).toBeTruthy();
+
+		const allButtons = screen.getAllByRole("button");
+		const headingItems = allButtons.filter((el) => el.hasAttribute("data-heading-id"));
+		expect(headingItems.length).toBeGreaterThan(0);
+	});
+
+	it("should render filter buttons when open with headings", () => {
+		(headingsUtils.parseHeadingsTree as jest.Mock).mockReturnValueOnce(mockHeadings);
+
+		renderComponent({ ...defaultProps, isOpen: true, browserRef });
+
+		const filterText = screen.getByText("Show headings:");
+		expect(filterText).toBeTruthy();
+
+		const allFilter = screen.getByText("all");
+		expect(allFilter).toBeTruthy();
+
+		const h1Texts = screen.getAllByText("h1");
+		const h1FilterButton = h1Texts.find((el) => el.tagName === "BUTTON");
+		expect(h1FilterButton).toBeTruthy();
+
+		const h2Texts = screen.getAllByText("h2");
+		const h2FilterButton = h2Texts.find((el) => el.tagName === "BUTTON");
+		expect(h2FilterButton).toBeTruthy();
+	});
+
+	it("should render the errors banner when there are SEO errors", () => {
+		const headingsWithoutH1: HeadingNode[] = [createHeadingNode("h2", "Subtitle", 2)];
+		(headingsUtils.parseHeadingsTree as jest.Mock).mockReturnValueOnce(headingsWithoutH1);
+
+		renderComponent({ ...defaultProps, isOpen: true, browserRef });
+
+		const seoAlerts = screen.getByText("SEO Alerts");
+		expect(seoAlerts).toBeTruthy();
+	});
+
+	it("should not render the errors banner when there are no SEO errors", () => {
+		(headingsUtils.parseHeadingsTree as jest.Mock).mockReturnValueOnce(mockHeadings);
+
+		renderComponent({ ...defaultProps, isOpen: true, browserRef });
+
+		const seoAlerts = screen.queryByText("SEO Alerts");
+		expect(seoAlerts).toBeNull();
+	});
+});
+
+describe("HeadingsPreviewModal component events", () => {
+	it("should call toggleModal when close button is clicked", () => {
+		const toggleModalMock = jest.fn();
+
+		renderComponent({ ...defaultProps, isOpen: true, toggleModal: toggleModalMock });
+
+		const closeButton = screen.getByTestId("icon-action-component");
+		fireEvent.click(closeButton);
+		expect(toggleModalMock).toBeCalled();
+	});
+
+	it("should call setHeadingsFilter when a filter button is clicked", () => {
+		const setHeadingsFilterMock = jest.fn();
+		(headingsUtils.parseHeadingsTree as jest.Mock).mockReturnValueOnce(mockHeadings);
+
+		renderComponent({ ...defaultProps, isOpen: true, browserRef, setHeadingsFilter: setHeadingsFilterMock });
+
+		const h1Texts = screen.getAllByText("h1");
+		const h1FilterButton = h1Texts.find((el) => el.tagName === "BUTTON") as HTMLElement;
+		expect(h1FilterButton).toBeTruthy();
+		fireEvent.click(h1FilterButton);
+		expect(setHeadingsFilterMock).toBeCalledWith("h1");
+	});
+
+	it("should select a heading item when clicked", () => {
+		(headingsUtils.parseHeadingsTree as jest.Mock).mockReturnValueOnce(mockHeadings);
+
+		renderComponent({ ...defaultProps, isOpen: true, browserRef });
+
+		const allButtons = screen.getAllByRole("button");
+		const headingItems = allButtons.filter((el) => el.hasAttribute("data-heading-id"));
+		expect(headingItems.length).toBeGreaterThan(0);
+
+		fireEvent.click(headingItems[0]);
+
+		expect(headingItems[0]).toBeTruthy();
+	});
+
+	it("should deselect a heading item when clicked again", () => {
+		(headingsUtils.parseHeadingsTree as jest.Mock).mockReturnValueOnce(mockHeadings);
+
+		renderComponent({ ...defaultProps, isOpen: true, browserRef });
+
+		const allButtons = screen.getAllByRole("button");
+		const headingItems = allButtons.filter((el) => el.hasAttribute("data-heading-id"));
+		expect(headingItems.length).toBeGreaterThan(0);
+
+		fireEvent.click(headingItems[0]);
+		fireEvent.click(headingItems[0]);
+
+		expect(headingItems[0]).toBeTruthy();
+	});
+});