@evenicanpm/storefront-core 1.7.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@evenicanpm/storefront-core",
-	"version": "1.7.0",
+	"version": "1.8.0",
 	"description": "Core module for D365/e4 Headless Storefront",
 	"type": "module",
 	"scripts": {
@@ -16,7 +16,7 @@
 	"author": "Evenica",
 	"license": "ISC",
 	"dependencies": {
-		"@evenicanpm/ui": "file:../../../common/@evenicanpm/ui"
+		"@evenicanpm/ui": "^1.8.0"
 	},
 	"devDependencies": {
 		"@storybook/addon-docs": "^9.1.6",
@@ -48,5 +48,6 @@
 		"@storybook/builder-manager": {
 			"esbuild": "0.19.11"
 		}
-	}
+	},
+	"gitHead": "485f77c5cce7c36849fb9d416d1e503d0f9299a3"
 }

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

@@ -0,0 +1,91 @@
+import { render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+import T from "../index";
+
+vi.mock("next-intl", () => ({
+	useTranslations: vi.fn(() => (key: string) => {
+		const translations: Record<string, string> = {
+			"HomePage.welcome": "Welcome to our store",
+			"HomePage.products": "Products",
+			"Navigation.home": "Home",
+			"Navigation.about": "About Us",
+			"Common.loading": "Loading...",
+			"Common.error": "An error occurred",
+		};
+		return translations[key] || key;
+	}),
+}));
+
+describe("T (Translation Component)", () => {
+	it("renders translation for given path", () => {
+		render(<T path="HomePage.welcome" />);
+		expect(screen.getByText("Welcome to our store")).toBeInTheDocument();
+	});
+
+	it("renders multiple translations", () => {
+		const { container } = render(
+			<>
+				<T path="HomePage.welcome" />
+				<T path="Navigation.home" />
+			</>,
+		);
+		const text = container.textContent || "";
+		expect(text).toContain("Welcome to our store");
+		expect(text).toContain("Home");
+	});
+
+	it("renders fallback path when translation not found", () => {
+		render(<T path="Unknown.path" />);
+		expect(screen.getByText("Unknown.path")).toBeInTheDocument();
+	});
+
+	it("handles nested translation paths", () => {
+		render(<T path="Navigation.home" />);
+		expect(screen.getByText("Home")).toBeInTheDocument();
+	});
+
+	it("renders common translations", () => {
+		render(<T path="Common.loading" />);
+		expect(screen.getByText("Loading...")).toBeInTheDocument();
+	});
+
+	it("renders multiple different paths together", () => {
+		const { container } = render(
+			<>
+				<T path="HomePage.welcome" />
+				<T path="Navigation.home" />
+			</>,
+		);
+		const text = container.textContent || "";
+		expect(text).toContain("Welcome to our store");
+		expect(text).toContain("Home");
+	});
+
+	it("renders translation with special characters", () => {
+		render(<T path="Common.error" />);
+		expect(screen.getByText("An error occurred")).toBeInTheDocument();
+	});
+
+	it("accepts dynamic paths", () => {
+		const paths = ["HomePage.welcome", "Navigation.home", "Common.loading"];
+		const { container } = render(
+			<>
+				{paths.map((path) => (
+					<T key={path} path={path} />
+				))}
+			</>,
+		);
+		const text = container.textContent || "";
+		expect(text).toContain("Welcome to our store");
+		expect(text).toContain("Home");
+		expect(text).toContain("Loading...");
+	});
+
+	it("re-renders when path changes", () => {
+		const { rerender } = render(<T path="HomePage.welcome" />);
+		expect(screen.getByText("Welcome to our store")).toBeInTheDocument();
+
+		rerender(<T path="Navigation.home" />);
+		expect(screen.getByText("Home")).toBeInTheDocument();
+	});
+});

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

@@ -0,0 +1,28 @@
+import { render, screen } from "@testing-library/react";
+import AccordionHeader from "../accordion-header";
+
+describe("accordion-header", () => {
+	it("renders the provided header text", () => {
+		render(<AccordionHeader>Accordion Title</AccordionHeader>);
+
+		expect(screen.getByText("Accordion Title")).toBeInTheDocument();
+	});
+
+	it("shows the caret icon by default", () => {
+		const { container } = render(
+			<AccordionHeader>Accordion With Icon</AccordionHeader>,
+		);
+
+		expect(container.querySelector(".caret")).toBeInTheDocument();
+	});
+
+	it("hides the caret icon when showIcon is false", () => {
+		const { container } = render(
+			<AccordionHeader showIcon={false}>
+				Accordion Without Icon
+			</AccordionHeader>,
+		);
+
+		expect(container.querySelector(".caret")).not.toBeInTheDocument();
+	});
+});

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/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();
+		});
+	});
+});