@evenicanpm/storefront-core 1.6.0 → 1.8.0

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

@@ -0,0 +1,53 @@
+import { render, screen } from "@testing-library/react";
+import Home from "../home";
+import ShoppingBagOutlined from "../shopping-bag-outlined";
+import CartBag from "../cart-bag";
+import User from "../user";
+
+describe("Icon components", () => {
+	it("renders Home icon", () => {
+		render(<Home data-testid="home-icon" />);
+
+		const icon = screen.getByTestId("home-icon");
+		expect(icon).toBeInTheDocument();
+		expect(icon.tagName).toBe("svg");
+	});
+
+	it("renders ShoppingBagOutlined icon", () => {
+		render(<ShoppingBagOutlined data-testid="bag-icon" />);
+
+		const icon = screen.getByTestId("bag-icon");
+		expect(icon).toBeInTheDocument();
+		expect(icon.tagName).toBe("svg");
+	});
+
+	it("renders CartBag icon", () => {
+		render(<CartBag data-testid="cart-bag-icon" />);
+
+		const icon = screen.getByTestId("cart-bag-icon");
+		expect(icon).toBeInTheDocument();
+		expect(icon.tagName).toBe("svg");
+	});
+
+	it("renders User icon", () => {
+		render(<User data-testid="user-icon" />);
+
+		const icon = screen.getByTestId("user-icon");
+		expect(icon).toBeInTheDocument();
+		expect(icon.tagName).toBe("svg");
+	});
+
+	it("accepts size prop", () => {
+		render(<Home data-testid="home-sized" fontSize="large" />);
+
+		const icon = screen.getByTestId("home-sized");
+		expect(icon).toBeInTheDocument();
+		expect(icon.tagName).toBe("svg");
+	});
+
+	it("accepts color prop", () => {
+		render(<Home data-testid="home-colored" color="primary" />);
+
+		expect(screen.getByTestId("home-colored")).toBeInTheDocument();
+	});
+});

package/src/components-v2/mobile-navigation/__tests__/mobile-navigation-bar.test.tsx

@@ -0,0 +1,94 @@
+import { render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import MobileNavigationBar from "../mobile-navigation-bar";
+import Home from "../../icons/home";
+
+vi.mock("@mui/material/useMediaQuery", () => ({
+	default: vi.fn(() => true),
+}));
+
+vi.mock(
+	"@evenicanpm/storefront-core/src/api-manager/services/cart/queries/get-cart",
+	() => ({
+		default: {
+			useData: vi.fn(() => ({ data: { TotalItems: 2 } })),
+		},
+	}),
+);
+
+vi.mock("next-intl", () => ({
+	useTranslations: vi.fn(() => (key: string) => key),
+}));
+
+describe("mobile-navigation-bar", () => {
+	it("does not render when media query is false", () => {
+		const mock = vi.mocked(useMediaQuery);
+		mock.mockReturnValue(false);
+
+		const { container } = render(<MobileNavigationBar />);
+
+		mock.mockReturnValue(true);
+		expect(container.innerHTML).toBe("");
+	});
+
+	it("renders default menu items when media query is true", () => {
+		render(<MobileNavigationBar />);
+
+		expect(screen.getByText("home")).toBeInTheDocument();
+		expect(screen.getByText("category")).toBeInTheDocument();
+		expect(screen.getByText("cart")).toBeInTheDocument();
+		expect(screen.getByText("account")).toBeInTheDocument();
+	});
+
+	it("renders custom menu list when provided", () => {
+		const customMenu = [
+			{ title: "custom1", Icon: Home, href: "/custom1" },
+			{ title: "custom2", Icon: Home, href: "/custom2" },
+		];
+
+		render(<MobileNavigationBar menuList={customMenu} />);
+
+		expect(screen.getByText("custom1")).toBeInTheDocument();
+		expect(screen.getByText("custom2")).toBeInTheDocument();
+	});
+
+	it("renders custom children when provided", () => {
+		render(
+			<MobileNavigationBar>
+				<div>Custom Navigation Item</div>
+			</MobileNavigationBar>,
+		);
+
+		expect(screen.getByText("Custom Navigation Item")).toBeInTheDocument();
+	});
+
+	it("renders MenuItem with title, Icon, and href", () => {
+		render(
+			<MobileNavigationBar
+				menuList={[{ title: "test", Icon: Home, href: "/test" }]}
+			/>,
+		);
+
+		const link = screen.getByText("test").closest("a");
+		expect(link).toHaveAttribute("href", "/test");
+	});
+
+	it("displays cart badge with item count", () => {
+		render(
+			<MobileNavigationBar
+				menuList={[{ title: "cart", Icon: Home, href: "/cart" }]}
+			/>,
+		);
+
+		expect(screen.getByText("cart")).toBeInTheDocument();
+	});
+
+	it("renders MenuItem without href for non-link items", () => {
+		render(
+			<MobileNavigationBar menuList={[{ title: "nolink", Icon: Home }]} />,
+		);
+
+		expect(screen.getByText("nolink")).toBeInTheDocument();
+	});
+});

package/src/components-v2/nav-link/__tests__/nav-link.test.tsx

@@ -0,0 +1,75 @@
+import { render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+import NavLink from "../nav-link";
+
+vi.mock("next/navigation", () => ({
+	usePathname: vi.fn(() => "/products"),
+}));
+
+import { usePathname } from "next/navigation";
+
+describe("nav-link", () => {
+	it("renders as a link with href", () => {
+		render(<NavLink href="/products">Products</NavLink>);
+
+		const link = screen.getByRole("link", { name: "Products" });
+		expect(link).toBeInTheDocument();
+		expect(link).toHaveAttribute("href", "/products");
+	});
+
+	it("applies active state when route matches", () => {
+		render(<NavLink href="/products">Products</NavLink>);
+
+		const link = screen.getByRole("link", { name: "Products" });
+		expect(link).toBeInTheDocument();
+		expect(link).toHaveAttribute("href", "/products");
+	});
+
+	it("applies inactive state when route does not match", () => {
+		render(<NavLink href="/about">About</NavLink>);
+
+		const link = screen.getByRole("link", { name: "About" });
+		expect(link).toBeInTheDocument();
+	});
+
+	it("handles root path correctly", () => {
+		vi.mocked(usePathname).mockReturnValue("/");
+
+		render(<NavLink href="/">Home</NavLink>);
+
+		const link = screen.getByRole("link", { name: "Home" });
+		expect(link).toHaveAttribute("href", "/");
+	});
+
+	it("accepts custom className", () => {
+		render(
+			<NavLink href="/products" className="custom-class">
+				Products
+			</NavLink>,
+		);
+
+		const link = screen.getByRole("link", { name: "Products" });
+		expect(link).toHaveClass("custom-class");
+	});
+
+	it("accepts custom style", () => {
+		render(
+			<NavLink href="/products" style={{ textDecoration: "underline" }}>
+				Products
+			</NavLink>,
+		);
+
+		const link = screen.getByRole("link", { name: "Products" });
+		expect(link).toHaveStyle("text-decoration: underline");
+	});
+
+	it("renders children correctly", () => {
+		render(
+			<NavLink href="/products">
+				<span>Product Link</span>
+			</NavLink>,
+		);
+
+		expect(screen.getByText("Product Link")).toBeInTheDocument();
+	});
+});

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

@@ -0,0 +1,96 @@
+import { render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+
+vi.mock("next-intl", () => ({
+	useTranslations: () => (key: string) => key,
+}));
+
+vi.mock(
+	"@evenicanpm/storefront-core/src/components-v2/navbar/categories",
+	() => ({
+		default: () => <div data-testid="navbar-categories">Categories</div>,
+	}),
+);
+
+vi.mock(
+	"@evenicanpm/storefront-core/src/components-v2/navbar/nav-list",
+	() => ({
+		default: () => <div data-testid="navbar-nav-list">Navigation List</div>,
+	}),
+);
+
+import Navbar from "../navbar";
+
+describe("navbar", () => {
+	it("renders default navbar with categories and navigation", () => {
+		render(<Navbar />);
+
+		expect(screen.getByTestId("navbar-categories")).toBeInTheDocument();
+		expect(screen.getByTestId("navbar-nav-list")).toBeInTheDocument();
+	});
+
+	it("renders custom children when provided", () => {
+		render(
+			<Navbar>
+				<div>Custom Content</div>
+			</Navbar>,
+		);
+
+		expect(screen.getByText("Custom Content")).toBeInTheDocument();
+	});
+
+	it("renders Navbar.Content wrapper", () => {
+		render(
+			<Navbar>
+				<Navbar.Content>
+					<div>Content Wrapper</div>
+				</Navbar.Content>
+			</Navbar>,
+		);
+
+		expect(screen.getByText("Content Wrapper")).toBeInTheDocument();
+	});
+
+	it("hides categories when hideCategories is true", () => {
+		render(
+			<Navbar hideCategories={true}>
+				<Navbar.Content>
+					<Navbar.Categories />
+					<Navbar.Navigation />
+				</Navbar.Content>
+			</Navbar>,
+		);
+
+		expect(screen.queryByTestId("navbar-categories")).not.toBeInTheDocument();
+	});
+
+	it("renders Navigation subcomponent", () => {
+		render(
+			<Navbar>
+				<Navbar.Navigation />
+			</Navbar>,
+		);
+
+		expect(screen.getByTestId("navbar-nav-list")).toBeInTheDocument();
+	});
+
+	it("renders Categories subcomponent when not hidden", () => {
+		render(
+			<Navbar hideCategories={false}>
+				<Navbar.Categories />
+			</Navbar>,
+		);
+
+		expect(screen.getByTestId("navbar-categories")).toBeInTheDocument();
+	});
+
+	it("accepts border and elevation props", () => {
+		render(
+			<Navbar border={1} elevation={4}>
+				<div>Content</div>
+			</Navbar>,
+		);
+
+		expect(screen.getByText("Content")).toBeInTheDocument();
+	});
+});

package/src/components-v2/product-cards/__tests__/product-cards.test.tsx

@@ -0,0 +1,91 @@
+import { render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+import DiscountChip from "../discount-chip";
+import FavoriteButton from "../favorite-button";
+import ProductPrice from "../product-price";
+import ProductRating from "../product-rating";
+import ProductTitle from "../product-title";
+
+vi.mock("next-intl", () => ({
+	useTranslations: () => (key: string) => key,
+}));
+
+describe("product-cards components", () => {
+	describe("DiscountChip", () => {
+		it("renders discount chip", () => {
+			const { container } = render(<DiscountChip discount={20} />);
+			expect(container.firstChild).toBeTruthy();
+		});
+
+		it("renders with custom sx props", () => {
+			const { container } = render(
+				<DiscountChip discount={15} sx={{ color: "red" }} />,
+			);
+			expect(container.querySelector("*")).toBeTruthy();
+		});
+	});
+
+	describe("FavoriteButton", () => {
+		it("renders favorite button", () => {
+			const { container } = render(
+				<FavoriteButton isFavorite={false} onToggle={vi.fn()} />,
+			);
+			expect(container.querySelector("button")).toBeTruthy();
+		});
+
+		it("accepts onToggle handler", () => {
+			const handleClick = vi.fn();
+			const { container } = render(
+				<FavoriteButton isFavorite={false} onToggle={handleClick} />,
+			);
+			expect(container.querySelector("button")).toBeInTheDocument();
+		});
+	});
+
+	describe("ProductPrice", () => {
+		it("renders product price", () => {
+			const { container } = render(
+				<ProductPrice price={99.99} discount={20} />,
+			);
+			expect(container.firstChild).toBeTruthy();
+		});
+
+		it("renders with sale price", () => {
+			const { container } = render(<ProductPrice price={100} discount={50} />);
+			expect(container.querySelector("*")).toBeTruthy();
+		});
+	});
+
+	describe("ProductRating", () => {
+		it("renders product rating", () => {
+			const { container } = render(<ProductRating showRating rating={4.5} />);
+			expect(container.firstChild).toBeTruthy();
+		});
+
+		it("renders with zero rating", () => {
+			const { container } = render(<ProductRating showRating rating={0} />);
+			expect(container.firstChild).toBeTruthy();
+		});
+	});
+
+	describe("ProductTitle", () => {
+		it("renders product title", () => {
+			render(<ProductTitle title="Test Product" slug="test-product" />);
+			expect(screen.getByText("Test Product")).toBeInTheDocument();
+		});
+
+		it("renders with long title", () => {
+			const longTitle =
+				"This is a very long product title that should be rendered correctly";
+			render(<ProductTitle title={longTitle} slug="long-product-title" />);
+			expect(screen.getByText(longTitle)).toBeInTheDocument();
+		});
+
+		it("renders as a link", () => {
+			const { container } = render(
+				<ProductTitle title="Product" slug="product-slug" />,
+			);
+			expect(container.querySelector("a")).toBeTruthy();
+		});
+	});
+});

package/src/components-v2/product-dialog/__tests__/product-dialog.test.tsx

@@ -0,0 +1,129 @@
+import { render } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { vi } from "vitest";
+import ProductDialog from "../index";
+
+vi.mock("next-intl", () => ({
+	useTranslations: () => (key: string) => key,
+}));
+
+vi.mock(
+	"@evenicanpm/storefront-core/src/api-manager/services/product/queries/get-product-details",
+	() => ({
+		default: {
+			useData: vi.fn(() => ({
+				data: {
+					RecordId: 1,
+					Name: "Test Product",
+					Description: "Test description",
+				},
+			})),
+		},
+	}),
+);
+
+vi.mock(
+	"@evenicanpm/storefront-core/src/api-manager/services/product/queries/get-product-availability",
+	() => ({
+		default: {
+			useData: vi.fn(() => ({ data: { OrgUnitAvailabilities: [] } })),
+		},
+	}),
+);
+
+vi.mock(
+	"@evenicanpm/storefront-core/src/components-v2/product-dialog/compound/product-dialog",
+	() => ({
+		default: Object.assign(
+			({
+				children,
+				openDialog,
+			}: {
+				children: ReactNode;
+				openDialog: boolean;
+			}) => {
+				if (!openDialog) return null;
+				return <div data-testid="product-dialog">{children}</div>;
+			},
+			{
+				Content: Object.assign(
+					({ children }: { children: ReactNode }) => (
+						<div data-testid="product-dialog-content">{children}</div>
+					),
+					{
+						Images: () => <div data-testid="product-images">Images</div>,
+						Info: Object.assign(
+							({ children }: { children: ReactNode }) => (
+								<div data-testid="product-info">{children}</div>
+							),
+							{
+								Name: () => <div data-testid="product-name">Name</div>,
+								Category: () => (
+									<div data-testid="product-category">Category</div>
+								),
+								Description: () => (
+									<div data-testid="product-description">Description</div>
+								),
+								Rating: () => <div data-testid="product-rating">Rating</div>,
+								AddToCart: () => (
+									<button type="button" data-testid="add-to-cart">
+										Add to Cart
+									</button>
+								),
+							},
+						),
+					},
+				),
+			},
+		),
+	}),
+);
+
+describe("ProductDialog", () => {
+	it("renders ProductDialog component", () => {
+		const { container } = render(
+			<ProductDialog productId={1} openDialog={true} />,
+		);
+		expect(container.firstChild).toBeTruthy();
+	});
+
+	it("passes correct props", () => {
+		const { container } = render(
+			<ProductDialog productId={2} openDialog={true} />,
+		);
+		expect(
+			container.querySelector("[data-testid='product-dialog']"),
+		).toBeTruthy();
+	});
+
+	it("handles close handler", () => {
+		const handleClose = vi.fn();
+		const { container } = render(
+			<ProductDialog
+				productId={1}
+				openDialog={true}
+				handleCloseDialog={handleClose}
+			/>,
+		);
+		expect(container.firstChild).toBeTruthy();
+	});
+
+	it("renders with different product IDs", () => {
+		const { rerender, container } = render(
+			<ProductDialog productId={1} openDialog={true} />,
+		);
+		expect(container.firstChild).toBeTruthy();
+
+		rerender(<ProductDialog productId={2} openDialog={true} />);
+		expect(container.firstChild).toBeTruthy();
+	});
+
+	it("renders with composition structure", () => {
+		const { container } = render(
+			<ProductDialog productId={1} openDialog={true} />,
+		);
+		expect(
+			container.querySelector("[data-testid='product-dialog']"),
+		).toBeTruthy();
+	});
+});

package/src/components-v2/product-dimensions/__tests__/product-dimensions.test.tsx

@@ -0,0 +1,130 @@
+import { render } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { vi } from "vitest";
+import ProductDimensions from "../index";
+import type { ProductDimensionValueInventoryAvailability } from "@msdyn365-commerce/retail-proxy";
+
+vi.mock("next-intl", () => ({
+	useTranslations: () => (key: string) => key,
+}));
+
+vi.mock(
+	"@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions",
+	() => ({
+		Dimensions: Object.assign(
+			({ children }: { children: ReactNode }) => (
+				<div data-testid="dimensions">{children}</div>
+			),
+			{
+				Group: Object.assign(
+					({ children }: { children: ReactNode }) => (
+						<div data-testid="dimension-group">{children}</div>
+					),
+					{
+						Label: () => <div data-testid="dimension-label">Dimension</div>,
+						List: () => (
+							<ul data-testid="dimension-list">
+								<li>Value</li>
+							</ul>
+						),
+						Error: () => <div data-testid="dimension-error">Error</div>,
+					},
+				),
+			},
+		),
+	}),
+);
+
+describe("ProductDimensions", () => {
+	const mockDimension: ProductDimensionValueInventoryAvailability = {
+		DimensionTypeValue: 1,
+		DimensionValue: {
+			RecordId: 1,
+			Value: "Red",
+		},
+	};
+
+	const mockDimensionGroups: ProductDimensionValueInventoryAvailability[][] = [
+		[mockDimension],
+	];
+
+	const mockSelectDimensions: Record<
+		number,
+		ProductDimensionValueInventoryAvailability
+	> = {};
+
+	const mockHandleChangeVariant = vi.fn();
+
+	it("renders product dimensions", () => {
+		const { container } = render(
+			<ProductDimensions
+				dimensionGroups={mockDimensionGroups}
+				selectDimensions={mockSelectDimensions}
+				handleChangeVariant={mockHandleChangeVariant}
+			/>,
+		);
+		expect(container.querySelector("[data-testid='dimensions']")).toBeTruthy();
+	});
+
+	it("renders multiple dimension groups", () => {
+		const multipleDimensions: ProductDimensionValueInventoryAvailability[][] = [
+			[mockDimension],
+			[{ ...mockDimension, DimensionValue: { RecordId: 2, Value: "Large" } }],
+		];
+
+		const { container } = render(
+			<ProductDimensions
+				dimensionGroups={multipleDimensions}
+				selectDimensions={mockSelectDimensions}
+				handleChangeVariant={mockHandleChangeVariant}
+			/>,
+		);
+		expect(container.querySelector("[data-testid='dimensions']")).toBeTruthy();
+	});
+
+	it("passes handleChangeVariant callback", () => {
+		const { container } = render(
+			<ProductDimensions
+				dimensionGroups={mockDimensionGroups}
+				selectDimensions={mockSelectDimensions}
+				handleChangeVariant={mockHandleChangeVariant}
+			/>,
+		);
+		expect(container.firstChild).toBeTruthy();
+	});
+
+	it("shows dimension error when provided", () => {
+		const { container } = render(
+			<ProductDimensions
+				dimensionGroups={mockDimensionGroups}
+				selectDimensions={mockSelectDimensions}
+				handleChangeVariant={mockHandleChangeVariant}
+				showDimensionError={true}
+			/>,
+		);
+		expect(container.firstChild).toBeTruthy();
+	});
+
+	it("renders with selected dimensions", () => {
+		const selectedDimensions = { 0: mockDimension };
+		const { container } = render(
+			<ProductDimensions
+				dimensionGroups={mockDimensionGroups}
+				selectDimensions={selectedDimensions}
+				handleChangeVariant={mockHandleChangeVariant}
+			/>,
+		);
+		expect(container.querySelector("[data-testid='dimensions']")).toBeTruthy();
+	});
+
+	it("renders empty dimension groups", () => {
+		const { container } = render(
+			<ProductDimensions
+				dimensionGroups={[]}
+				selectDimensions={mockSelectDimensions}
+				handleChangeVariant={mockHandleChangeVariant}
+			/>,
+		);
+		expect(container.firstChild).toBeTruthy();
+	});
+});