@evenicanpm/storefront-core 1.6.0 → 1.8.0

package/src/components-v2/carousel/__tests__/carousel.test.tsx

@@ -0,0 +1,208 @@
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { render, screen } from "@testing-library/react";
+import type React from "react";
+import { vi } from "vitest";
+import Carousel from "../carousel";
+
+vi.mock("react-slick", () => {
+	const Slider = ({
+		children,
+		rtl,
+		autoplay,
+		autoplaySpeed,
+		slidesToShow,
+		arrows,
+		dots,
+		nextArrow,
+		prevArrow,
+		appendDots,
+		customPaging,
+	}: {
+		children: React.ReactNode;
+		rtl?: boolean;
+		autoplay?: boolean;
+		autoplaySpeed?: number;
+		slidesToShow?: number;
+		arrows?: boolean;
+		dots?: boolean;
+		nextArrow?: React.ReactNode;
+		prevArrow?: React.ReactNode;
+		appendDots?: (dots: React.ReactNode) => React.ReactNode;
+		customPaging?: (index: number) => React.ReactNode;
+	}) => (
+		<div
+			data-testid="mock-slider"
+			data-rtl={String(Boolean(rtl))}
+			data-autoplay={String(Boolean(autoplay))}
+			data-autoplay-speed={String(autoplaySpeed ?? "")}
+			data-slides-to-show={String(slidesToShow ?? "")}
+			data-arrows={String(Boolean(arrows))}
+			data-dots={String(Boolean(dots))}
+		>
+			<div data-testid="mock-arrows">
+				{nextArrow}
+				{prevArrow}
+			</div>
+			{dots && appendDots && customPaging ? (
+				<div data-testid="mock-dots">
+					{appendDots(<li>{customPaging(0)}</li>)}
+				</div>
+			) : null}
+			<div data-testid="mock-children">{children}</div>
+		</div>
+	);
+
+	return {
+		default: Slider,
+	};
+});
+
+const renderWithTheme = (
+	ui: React.ReactElement,
+	direction: "ltr" | "rtl" = "ltr",
+) => {
+	const theme = createTheme({ direction });
+	return render(<ThemeProvider theme={theme}>{ui}</ThemeProvider>);
+};
+
+describe("carousel", () => {
+	it("renders slide content", () => {
+		renderWithTheme(
+			<Carousel>
+				<div>Slide One</div>
+				<div>Slide Two</div>
+			</Carousel>,
+		);
+
+		expect(screen.getByText("Slide One")).toBeInTheDocument();
+		expect(screen.getByText("Slide Two")).toBeInTheDocument();
+	});
+
+	it("enables custom arrows when arrows config is provided", () => {
+		renderWithTheme(
+			<Carousel arrows={{ sx: { color: "red" } }}>
+				<div>Slide</div>
+			</Carousel>,
+		);
+
+		const slider = screen.getByTestId("mock-slider");
+		expect(slider).toHaveAttribute("data-arrows", "true");
+		expect(document.querySelector(".next")).toBeInTheDocument();
+		expect(document.querySelector(".prev")).toBeInTheDocument();
+	});
+
+	it("enables custom dots when dots config is provided", () => {
+		renderWithTheme(
+			<Carousel dots={{ dotColor: "orange" }}>
+				<div>Slide</div>
+			</Carousel>,
+		);
+
+		const slider = screen.getByTestId("mock-slider");
+		expect(slider).toHaveAttribute("data-dots", "true");
+		expect(screen.getByTestId("mock-dots")).toBeInTheDocument();
+	});
+
+	it("enables custom arrows when legacy arrowStyles is provided", () => {
+		renderWithTheme(
+			<Carousel arrowStyles={{ color: "blue" }}>
+				<div>Slide</div>
+			</Carousel>,
+		);
+
+		const slider = screen.getByTestId("mock-slider");
+		expect(slider).toHaveAttribute("data-arrows", "true");
+		expect(document.querySelector(".next")).toBeInTheDocument();
+		expect(document.querySelector(".prev")).toBeInTheDocument();
+	});
+
+	it("uses react-slick default arrows when arrows is true", () => {
+		renderWithTheme(
+			<Carousel arrows={true}>
+				<div>Slide</div>
+			</Carousel>,
+		);
+
+		const slider = screen.getByTestId("mock-slider");
+		expect(slider).toHaveAttribute("data-arrows", "true");
+		expect(document.querySelector(".next")).not.toBeInTheDocument();
+		expect(document.querySelector(".prev")).not.toBeInTheDocument();
+	});
+
+	it("disables arrows by default", () => {
+		renderWithTheme(
+			<Carousel>
+				<div>Slide</div>
+			</Carousel>,
+		);
+
+		expect(screen.getByTestId("mock-slider")).toHaveAttribute(
+			"data-arrows",
+			"false",
+		);
+	});
+
+	it("enables custom dots when legacy dotColor or dotStyles is provided", () => {
+		renderWithTheme(
+			<Carousel dotColor="green" dotStyles={{ bottom: 0 }}>
+				<div>Slide</div>
+			</Carousel>,
+		);
+
+		const slider = screen.getByTestId("mock-slider");
+		expect(slider).toHaveAttribute("data-dots", "true");
+		expect(screen.getByTestId("mock-dots")).toBeInTheDocument();
+	});
+
+	it("uses react-slick default dots when dots is true", () => {
+		renderWithTheme(
+			<Carousel dots={true}>
+				<div>Slide</div>
+			</Carousel>,
+		);
+
+		const slider = screen.getByTestId("mock-slider");
+		expect(slider).toHaveAttribute("data-dots", "true");
+		expect(screen.queryByTestId("mock-dots")).not.toBeInTheDocument();
+	});
+
+	it("disables dots by default", () => {
+		renderWithTheme(
+			<Carousel>
+				<div>Slide</div>
+			</Carousel>,
+		);
+
+		expect(screen.getByTestId("mock-slider")).toHaveAttribute(
+			"data-dots",
+			"false",
+		);
+	});
+
+	it("passes rtl setting from theme direction", () => {
+		renderWithTheme(
+			<Carousel>
+				<div>RTL Slide</div>
+			</Carousel>,
+			"rtl",
+		);
+
+		expect(screen.getByTestId("mock-slider")).toHaveAttribute(
+			"data-rtl",
+			"true",
+		);
+	});
+
+	it("passes autoplay and other settings through to slider", () => {
+		renderWithTheme(
+			<Carousel autoplay={true} autoplaySpeed={4500} slidesToShow={3}>
+				<div>Slide</div>
+			</Carousel>,
+		);
+
+		const slider = screen.getByTestId("mock-slider");
+		expect(slider).toHaveAttribute("data-autoplay", "true");
+		expect(slider).toHaveAttribute("data-autoplay-speed", "4500");
+		expect(slider).toHaveAttribute("data-slides-to-show", "3");
+	});
+});

package/src/components-v2/carousel-cards/carousel-card-1/__tests__/carousel-card-1.test.tsx

@@ -0,0 +1,81 @@
+import { render, screen } from "@testing-library/react";
+import CarouselCard1 from "../carousel-card-1";
+
+describe("carousel-card-1", () => {
+	it("renders composed carousel card content", () => {
+		render(
+			<CarouselCard1>
+				<CarouselCard1.Info>
+					<CarouselCard1.Title title="Amazing Product" />
+					<CarouselCard1.Description description="Built for everyday comfort" />
+					<CarouselCard1.Button
+						buttonLink="/products/amazing"
+						buttonText="Buy Now"
+					/>
+				</CarouselCard1.Info>
+				<CarouselCard1.Image imgUrl="/images/product.png" />
+			</CarouselCard1>,
+		);
+
+		expect(
+			screen.getByRole("heading", { name: "Amazing Product" }),
+		).toBeInTheDocument();
+		expect(screen.getByText("Built for everyday comfort")).toBeInTheDocument();
+		expect(screen.getByRole("button", { name: "Buy Now" })).toBeInTheDocument();
+		expect(
+			screen.getByRole("img", { name: "carousel card image" }),
+		).toBeInTheDocument();
+	});
+
+	it("renders info section children", () => {
+		render(
+			<CarouselCard1.Info>
+				<div>Info content</div>
+			</CarouselCard1.Info>,
+		);
+
+		expect(screen.getByText("Info content")).toBeInTheDocument();
+	});
+
+	it("renders title text", () => {
+		render(<CarouselCard1.Title title="Featured Item" />);
+
+		expect(
+			screen.getByRole("heading", { name: "Featured Item" }),
+		).toBeInTheDocument();
+	});
+
+	it("renders description text", () => {
+		render(<CarouselCard1.Description description="Limited time offer" />);
+
+		expect(screen.getByText("Limited time offer")).toBeInTheDocument();
+	});
+
+	it("renders button with link and text", () => {
+		render(<CarouselCard1.Button buttonLink="/sale" buttonText="Shop Sale" />);
+
+		expect(
+			screen.getByRole("button", { name: "Shop Sale" }),
+		).toBeInTheDocument();
+		expect(screen.getByRole("link", { name: "Shop Sale" })).toHaveAttribute(
+			"href",
+			"/sale",
+		);
+	});
+
+	it("renders image with provided source", () => {
+		render(<CarouselCard1.Image imgUrl="/images/carousel-item.png" />);
+
+		expect(
+			screen.getByRole("img", { name: "carousel card image" }),
+		).toHaveAttribute("src", "/images/carousel-item.png");
+	});
+
+	it("renders image with empty source when imgUrl is not provided", () => {
+		render(<CarouselCard1.Image />);
+
+		expect(
+			screen.getByRole("img", { name: "carousel card image" }),
+		).not.toHaveAttribute("src");
+	});
+});

package/src/components-v2/categories/__tests__/category-menu.test.tsx

@@ -0,0 +1,115 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+import CategoryMenu from "../category-menu";
+
+vi.mock(
+	"@evenicanpm/storefront-core/src/components-v2/categories/category-list/index",
+	() => ({
+		default: ({ open }: { open: boolean }) => (
+			<div data-testid="category-list" data-open={String(open)}>
+				Category List
+			</div>
+		),
+	}),
+);
+
+describe("category-menu", () => {
+	it("renders with the provided render prop", () => {
+		render(
+			<CategoryMenu
+				render={(handler) => (
+					<button type="button" onClick={handler} data-testid="toggle-btn">
+						Toggle Categories
+					</button>
+				)}
+			/>,
+		);
+
+		expect(screen.getByTestId("toggle-btn")).toBeInTheDocument();
+		expect(screen.getByTestId("category-list")).toBeInTheDocument();
+	});
+
+	it("toggles dropdown open state on click", () => {
+		render(
+			<CategoryMenu
+				render={(handler) => (
+					<button type="button" onClick={handler} data-testid="toggle-btn">
+						Toggle
+					</button>
+				)}
+			/>,
+		);
+
+		const button = screen.getByTestId("toggle-btn");
+		const categoryList = screen.getByTestId("category-list");
+
+		expect(categoryList).toHaveAttribute("data-open", "false");
+
+		fireEvent.click(button);
+		expect(categoryList).toHaveAttribute("data-open", "true");
+
+		fireEvent.click(button);
+		expect(categoryList).toHaveAttribute("data-open", "false");
+	});
+
+	it("closes dropdown when clicking outside", () => {
+		render(
+			<div>
+				<CategoryMenu
+					render={(handler) => (
+						<button type="button" onClick={handler} data-testid="toggle-btn">
+							Toggle
+						</button>
+					)}
+				/>
+				<div data-testid="outside">Outside Element</div>
+			</div>,
+		);
+
+		const button = screen.getByTestId("toggle-btn");
+		const categoryList = screen.getByTestId("category-list");
+		const outside = screen.getByTestId("outside");
+
+		fireEvent.click(button);
+		expect(categoryList).toHaveAttribute("data-open", "true");
+
+		fireEvent.click(outside);
+		expect(categoryList).toHaveAttribute("data-open", "false");
+	});
+
+	it("does not close dropdown when clicking inside it", () => {
+		render(
+			<CategoryMenu
+				render={(handler) => (
+					<button type="button" onClick={handler} data-testid="toggle-btn">
+						Toggle
+					</button>
+				)}
+			/>,
+		);
+
+		const button = screen.getByTestId("toggle-btn");
+		const categoryList = screen.getByTestId("category-list");
+
+		fireEvent.click(button);
+		expect(categoryList).toHaveAttribute("data-open", "true");
+
+		fireEvent.click(categoryList);
+		expect(categoryList).toHaveAttribute("data-open", "true");
+	});
+
+	it("applies dropdown-icon styling", () => {
+		const { container } = render(
+			<CategoryMenu
+				render={(handler) => (
+					<button type="button" onClick={handler}>
+						<span className="dropdown-icon">Icon</span>
+					</button>
+				)}
+			/>,
+		);
+
+		const icon = container.querySelector(".dropdown-icon");
+		expect(icon).toBeInTheDocument();
+	});
+});

package/src/components-v2/categories/category-list/category-list.tsx

@@ -82,7 +82,11 @@ CategoryList.Item = ({ category }: ItemProps) => {
 			href={`/products/${Url}`}
 			title={Name ?? ""}
 			caret={hasChildren}
-			render={hasChildren ? megaMenuRenderers[menuType]?.(Children!) : null}
+			render={
+				Children && Children.length > 0
+					? megaMenuRenderers[menuType]?.(Children)
+					: null
+			}
 		/>
 	);
 };

package/src/components-v2/categories/category-menu.tsx

@@ -2,7 +2,7 @@
 
 import CategoryList from "@evenicanpm/storefront-core/src/components-v2/categories/category-list/index";
 import styled from "@mui/material/styles/styled";
-import { type MouseEvent, useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 // STYLED COMPONENT
 const Wrapper = styled("div", {
@@ -31,13 +31,19 @@ type Props = {
 // not as a reusable UI element that needs further extensibility.
 export default function CategoryMenu({ render }: Readonly<Props>) {
 	const [open, setOpen] = useState(false);
+	const wrapperRef = useRef<HTMLDivElement | null>(null);
 
-	const onClick = (e: MouseEvent<HTMLButtonElement>) => {
-		e.stopPropagation();
+	const onClick = () => {
 		setOpen((open) => !open);
 	};
 
-	const handleDocumentClick = useCallback(() => setOpen(false), []);
+	const handleDocumentClick = useCallback((e: globalThis.MouseEvent) => {
+		const target = e.target as Node | null;
+		if (target && wrapperRef.current?.contains(target)) {
+			return;
+		}
+		setOpen(false);
+	}, []);
 
 	useEffect(() => {
 		document.addEventListener("click", handleDocumentClick);
@@ -45,7 +51,7 @@ export default function CategoryMenu({ render }: Readonly<Props>) {
 	}, [handleDocumentClick]);
 
 	return (
-		<Wrapper open={open}>
+		<Wrapper ref={wrapperRef} open={open}>
 			{render(onClick)}
 
 			<CategoryList open={open} />

package/src/components-v2/flex-box/__tests__/flex-box.test.tsx

@@ -0,0 +1,88 @@
+import { render, screen } from "@testing-library/react";
+import FlexBox from "../flex-box";
+import FlexBetween from "../flex-between";
+import FlexRowCenter from "../flex-row-center";
+
+describe("FlexBox components", () => {
+	describe("FlexBox", () => {
+		it("renders children and applies flex display", () => {
+			render(
+				<FlexBox data-testid="flex-box-test">
+					<div>Child 1</div>
+					<div>Child 2</div>
+				</FlexBox>,
+			);
+
+			expect(screen.getByText("Child 1")).toBeInTheDocument();
+			expect(screen.getByText("Child 2")).toBeInTheDocument();
+			expect(screen.getByTestId("flex-box-test")).toBeInTheDocument();
+		});
+
+		it("accepts and applies custom BoxProps", () => {
+			render(
+				<FlexBox data-testid="flex-box" gap={2} padding={1}>
+					Content
+				</FlexBox>,
+			);
+
+			const box = screen.getByTestId("flex-box");
+			expect(box).toBeInTheDocument();
+			expect(box).toHaveStyle("display: flex");
+		});
+	});
+
+	describe("FlexBetween", () => {
+		it("renders children with space-between and center alignment", () => {
+			render(
+				<FlexBetween data-testid="flex-between">
+					<div>Left</div>
+					<div>Right</div>
+				</FlexBetween>,
+			);
+
+			expect(screen.getByText("Left")).toBeInTheDocument();
+			expect(screen.getByText("Right")).toBeInTheDocument();
+
+			const box = screen.getByTestId("flex-between");
+			expect(box).toHaveStyle("display: flex");
+			expect(box).toHaveStyle("justify-content: space-between");
+			expect(box).toHaveStyle("align-items: center");
+		});
+
+		it("accepts custom props", () => {
+			render(
+				<FlexBetween data-testid="flex-between-custom" sx={{ height: 100 }}>
+					Content
+				</FlexBetween>,
+			);
+
+			expect(screen.getByTestId("flex-between-custom")).toBeInTheDocument();
+		});
+	});
+
+	describe("FlexRowCenter", () => {
+		it("renders children centered both horizontally and vertically", () => {
+			render(
+				<FlexRowCenter data-testid="flex-row-center">
+					<span>Centered</span>
+				</FlexRowCenter>,
+			);
+
+			const box = screen.getByTestId("flex-row-center");
+			expect(screen.getByText("Centered")).toBeInTheDocument();
+			expect(box).toHaveStyle("display: flex");
+			expect(box).toHaveStyle("justify-content: center");
+			expect(box).toHaveStyle("align-items: center");
+		});
+
+		it("applies custom styles", () => {
+			render(
+				<FlexRowCenter data-testid="flex-row-custom" minHeight={200}>
+					Flex Center
+				</FlexRowCenter>,
+			);
+
+			expect(screen.getByTestId("flex-row-custom")).toBeInTheDocument();
+		});
+	});
+});

package/src/components-v2/header/__tests__/header.test.tsx

@@ -0,0 +1,122 @@
+import { render, screen } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { vi } from "vitest";
+import Header from "../header";
+
+vi.mock("@evenicanpm/storefront-core/src/hooks/use-nextauth-session", () => ({
+	useAppSession: vi.fn(() => ({ session: null })),
+}));
+
+vi.mock(
+	"@evenicanpm/storefront-core/src/api-manager/services/cart/queries/get-cart",
+	() => ({
+		default: {
+			useData: vi.fn(() => ({ data: null })),
+		},
+	}),
+);
+
+vi.mock(
+	"@evenicanpm/storefront-core/src/components-v2/mini-cart/mini-cart-trigger",
+	() => ({
+		default: ({ children }: { children: React.ReactNode }) => (
+			<div data-testid="mini-cart-trigger">{children}</div>
+		),
+	}),
+);
+
+vi.mock("@evenicanpm/storefront-core/src/components-v2/site-logo", () => ({
+	default: () => <div data-testid="site-logo">Logo</div>,
+}));
+
+vi.mock(
+	"@evenicanpm/storefront-core/src/components-v2/header/components/categories-menu",
+	() => ({
+		default: () => <div data-testid="categories-menu">Categories</div>,
+	}),
+);
+
+vi.mock(
+	"@evenicanpm/storefront-core/src/components-v2/header/components/user",
+	() => {
+		const User = ({ children }: { children?: ReactNode }) => (
+			<div data-testid="user-component">User: {children}</div>
+		);
+		User.DesktopTrigger = () => <div data-testid="user-trigger">Trigger</div>;
+		User.Menu = () => <div data-testid="user-menu">Menu</div>;
+		User.LoginButton = () => (
+			<button type="button" data-testid="login-button">
+				Login
+			</button>
+		);
+		return { default: User };
+	},
+);
+
+describe("header", () => {
+	it("renders header wrapper with children", () => {
+		render(
+			<Header>
+				<div>Header Content</div>
+			</Header>,
+		);
+
+		expect(screen.getByText("Header Content")).toBeInTheDocument();
+	});
+
+	it("renders LeftSlot with children", () => {
+		render(
+			<Header.LeftSlot>
+				<span>Left Content</span>
+			</Header.LeftSlot>,
+		);
+
+		expect(screen.getByText("Left Content")).toBeInTheDocument();
+	});
+
+	it("renders Logo subcomponent", () => {
+		render(<Header.Logo />);
+
+		expect(screen.getByTestId("site-logo")).toBeInTheDocument();
+		expect(screen.getByText("Logo")).toBeInTheDocument();
+	});
+
+	it("renders Categories subcomponent", () => {
+		render(<Header.Categories />);
+
+		expect(screen.getByTestId("categories-menu")).toBeInTheDocument();
+	});
+
+	it("renders MidSlot with children", () => {
+		render(
+			<Header.MidSlot>
+				<span>Mid Content</span>
+			</Header.MidSlot>,
+		);
+
+		expect(screen.getByText("Mid Content")).toBeInTheDocument();
+	});
+
+	it("renders User subcomponent", () => {
+		render(<Header.User />);
+
+		expect(screen.getByTestId("user-component")).toBeInTheDocument();
+	});
+
+	it("renders Cart subcomponent", () => {
+		render(<Header.Cart />);
+
+		expect(screen.queryByTestId("mini-cart-trigger")).not.toBeInTheDocument();
+	});
+
+	it("accepts custom className", () => {
+		const { container } = render(
+			<Header className="custom-header">
+				<div>Content</div>
+			</Header>,
+		);
+
+		const wrapper = container.firstChild;
+		expect(wrapper).toHaveClass("custom-header");
+	});
+});