@evenicanpm/storefront-core 1.6.0 → 1.8.0

package/src/components-v2/product-dimensions/compound/dimensions-group-list-chip.tsx

@@ -37,43 +37,42 @@ export const DimensionGroupListChip = ({ dimension }: Props) => {
 		selectDimensions[dimension.DimensionTypeValue || 0]?.DimensionValue ===
 		dimension.DimensionValue;
 
-	switch (type) {
-		case "Color":
-			return (
-				<Chip
-					key={dimension.DimensionValue?.RecordId}
-					onClick={() => {
-						handleChangeVariant(dimension);
-					}}
-					disabled={disabled}
-					sx={{
-						borderRadius: "100%",
-						mr: 1,
-						cursor: "pointer",
+	if (type === "Color") {
+		return (
+			<Chip
+				key={dimension.DimensionValue?.RecordId}
+				onClick={() => {
+					handleChangeVariant(dimension);
+				}}
+				disabled={disabled}
+				sx={{
+					borderRadius: "100%",
+					mr: 1,
+					cursor: "pointer",
+					backgroundColor: dimension.DimensionValue?.Value,
+					width: 32,
+					height: 32,
+					border: selected ? "2px solid" : "2px solid transparent",
+					"&:hover": {
 						backgroundColor: dimension.DimensionValue?.Value,
-						width: 32,
-						height: 32,
-						border: selected ? "2px solid" : "2px solid transparent",
-						"&:hover": {
-							backgroundColor: dimension.DimensionValue?.Value,
-						},
-					}}
-				/>
-			);
-		// Standard text dimension
-		default:
-			return (
-				<Chip
-					key={dimension.DimensionValue?.RecordId}
-					label={dimension.DimensionValue?.Value}
-					onClick={() => {
-						handleChangeVariant(dimension);
-					}}
-					disabled={disabled}
-					sx={{ borderRadius: "4px", mr: 1, cursor: "pointer", mb: 1 }}
-					color={selected ? "primary" : "default"}
-				/>
-			);
-		// Add more chips as needed.
+					},
+				}}
+			/>
+		);
 	}
+
+	// Standard text dimension
+	return (
+		<Chip
+			key={dimension.DimensionValue?.RecordId}
+			label={dimension.DimensionValue?.Value}
+			onClick={() => {
+				handleChangeVariant(dimension);
+			}}
+			disabled={disabled}
+			sx={{ borderRadius: "4px", mr: 1, cursor: "pointer", mb: 1 }}
+			color={selected ? "primary" : "default"}
+		/>
+	);
+	// Add more chips as needed.
 };

package/src/components-v2/product-quantity-buttons/__tests__/product-quantity-buttons.test.tsx

@@ -0,0 +1,77 @@
+import { render } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { vi } from "vitest";
+import ProductQuantityButtons from "../index";
+
+vi.mock("next-intl", () => ({
+	useTranslations: () => (key: string) => key,
+}));
+
+vi.mock(
+	"@evenicanpm/storefront-core/src/components-v2/product-quantity-buttons/compound/quantity-buttons-root",
+	() => ({
+		QuantityButtons: Object.assign(
+			({ children }: { children: ReactNode }) => (
+				<div data-testid="quantity-buttons">{children}</div>
+			),
+			{
+				Remove: () => (
+					<button type="button" data-testid="quantity-remove">
+						-
+					</button>
+				),
+				Quantity: () => <div data-testid="quantity-display">1</div>,
+				Add: () => (
+					<button type="button" data-testid="quantity-add">
+						+
+					</button>
+				),
+			},
+		),
+	}),
+);
+
+describe("ProductQuantityButtons", () => {
+	const mockProps = {
+		productId: 1 as number | undefined,
+	};
+
+	it("renders quantity buttons", () => {
+		const { container } = render(<ProductQuantityButtons {...mockProps} />);
+		expect(
+			container.querySelector("[data-testid='quantity-buttons']"),
+		).toBeTruthy();
+	});
+
+	it("renders composition structure", () => {
+		const { container } = render(<ProductQuantityButtons {...mockProps} />);
+		expect(
+			container.querySelector("[data-testid='quantity-buttons']"),
+		).toBeTruthy();
+		expect(container.firstChild).toBeTruthy();
+	});
+
+	it("accepts custom quantity value", () => {
+		const { container } = render(<ProductQuantityButtons productId={5} />);
+		expect(container.firstChild).toBeTruthy();
+	});
+
+	it("handles quantity change", () => {
+		const { container } = render(<ProductQuantityButtons {...mockProps} />);
+		expect(container.firstChild).toBeTruthy();
+	});
+
+	it("renders with undefined productId", () => {
+		const { container } = render(
+			<ProductQuantityButtons productId={undefined} />,
+		);
+		expect(container.firstChild).toBeTruthy();
+	});
+
+	it("renders with minimum quantity", () => {
+		const { container } = render(<ProductQuantityButtons {...mockProps} />);
+		expect(
+			container.querySelector("[data-testid='quantity-buttons']"),
+		).toBeTruthy();
+	});
+});

package/src/components-v2/product-quantity-variants/__tests__/product-quantity-variants.test.tsx

@@ -0,0 +1,109 @@
+import { render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+import QuantityVariantsSelect from "../index";
+import type { ProductDetails } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
+
+vi.mock("next-intl", () => ({
+	useTranslations: () => (key: string) => key,
+}));
+
+vi.mock("@evenicanpm/storefront-core/src/hooks/use-variants", () => ({
+	default: () => ({
+		selectedVariant: { RecordId: 1 },
+		selectDimensions: {},
+		handleChangeVariant: vi.fn(),
+		allDimensionsSelected: true,
+	}),
+}));
+
+vi.mock("@evenicanpm/storefront-core/src/hooks/use-cart", () => ({
+	default: () => ({ handleAddToCart: vi.fn() }),
+}));
+
+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-dimensions",
+	() => ({
+		default: () => <div data-testid="dimensions">Dimensions</div>,
+	}),
+);
+
+vi.mock(
+	"@evenicanpm/storefront-core/src/components-v2/product-quantity-buttons",
+	() => ({
+		default: () => <div data-testid="quantity-buttons">Quantity</div>,
+	}),
+);
+
+describe("QuantityVariantsSelect", () => {
+	const mockProduct: ProductDetails = {
+		RecordId: 1,
+		Name: "Test Product",
+		Description: "Test",
+		ProductTypeValue: 0,
+		BasePrice: 99.99,
+		DimensionValues: [],
+		Price: 99.99,
+		AdjustedPrice: 79.99,
+		Attributes: [],
+		Images: [],
+	};
+
+	it("renders quantity variants select", () => {
+		render(<QuantityVariantsSelect product={mockProduct} />);
+		expect(screen.getByTestId("dimensions")).toBeInTheDocument();
+		expect(screen.getByTestId("quantity-buttons")).toBeInTheDocument();
+	});
+
+	it("displays both dimensions and quantity components", () => {
+		const { container } = render(
+			<QuantityVariantsSelect product={mockProduct} />,
+		);
+		expect(
+			container.querySelector("[data-testid='dimensions']"),
+		).toBeInTheDocument();
+		expect(
+			container.querySelector("[data-testid='quantity-buttons']"),
+		).toBeInTheDocument();
+	});
+
+	it("handles product with variants", () => {
+		const productWithVariants: ProductDetails = {
+			...mockProduct,
+			DimensionValues: [
+				[
+					{
+						DimensionTypeValue: 1,
+						DimensionValue: { RecordId: 1, Value: "Red" },
+					},
+				],
+			],
+		};
+
+		render(<QuantityVariantsSelect product={productWithVariants} />);
+		expect(screen.getByTestId("dimensions")).toBeInTheDocument();
+	});
+
+	it("renders with different products", () => {
+		const { rerender } = render(
+			<QuantityVariantsSelect product={mockProduct} />,
+		);
+		expect(screen.getByTestId("dimensions")).toBeInTheDocument();
+
+		const anotherProduct: ProductDetails = {
+			...mockProduct,
+			RecordId: 2,
+			Name: "Another Product",
+		};
+		rerender(<QuantityVariantsSelect product={anotherProduct} />);
+		expect(screen.getByTestId("dimensions")).toBeInTheDocument();
+	});
+});

package/src/components-v2/products-view/__tests__/products-view.test.tsx

@@ -0,0 +1,147 @@
+import { render } from "@testing-library/react";
+import { vi } from "vitest";
+import { ProductsGrid, ProductsList } from "../index";
+import type { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
+
+vi.mock("next-intl", () => ({
+	useTranslations: () => (key: string) => key,
+}));
+
+vi.mock(
+	"@evenicanpm/storefront-core/src/components-v2/products-view/compound/products-grid-view",
+	() => ({
+		default: Object.assign(
+			({ children }: any) => (
+				<div data-testid="products-grid-view">{children}</div>
+			),
+			{
+				Grid: ({ children }: any) => (
+					<div data-testid="products-grid">{children}</div>
+				),
+				Card: () => <div data-testid="product-card">Card</div>,
+			},
+		),
+	}),
+);
+
+vi.mock(
+	"@evenicanpm/storefront-core/src/components-v2/products-view/compound/products-list-view",
+	() => ({
+		default: Object.assign(
+			({ children }: any) => (
+				<div data-testid="products-list-view">{children}</div>
+			),
+			{
+				List: ({ children }: any) => (
+					<div data-testid="products-list">{children}</div>
+				),
+				Card: () => <div data-testid="product-card">Card</div>,
+			},
+		),
+	}),
+);
+
+describe("ProductsView components", () => {
+	const mockProducts: Product[] = [
+		{
+			RecordId: 1,
+			Name: "Product 1",
+		} as Product,
+		{
+			RecordId: 2,
+			Name: "Product 2",
+		} as Product,
+	];
+
+	describe("ProductsGrid", () => {
+		it("renders products grid view", () => {
+			const { container } = render(<ProductsGrid products={mockProducts} />);
+			expect(
+				container.querySelector("[data-testid='products-grid-view']"),
+			).toBeTruthy();
+		});
+
+		it("renders with pagination", () => {
+			const { container } = render(
+				<ProductsGrid
+					products={mockProducts}
+					pagination={<div>Pagination</div>}
+				/>,
+			);
+			expect(container.firstChild).toBeTruthy();
+		});
+
+		it("renders with product prices", () => {
+			const prices = [{ price: 100, adjustedPrice: 80, productId: 1 }];
+			const { container } = render(
+				<ProductsGrid products={mockProducts} productPrices={prices as any} />,
+			);
+			expect(
+				container.querySelector("[data-testid='products-grid-view']"),
+			).toBeTruthy();
+		});
+
+		it("renders empty products list", () => {
+			const { container } = render(<ProductsGrid products={[]} />);
+			expect(container.firstChild).toBeTruthy();
+		});
+
+		it("renders multiple products", () => {
+			const manyProducts = Array.from({ length: 10 }, (_, i) => ({
+				RecordId: i + 1,
+				Name: `Product ${i + 1}`,
+			})) as Product[];
+
+			const { container } = render(<ProductsGrid products={manyProducts} />);
+			expect(
+				container.querySelector("[data-testid='products-grid-view']"),
+			).toBeTruthy();
+		});
+	});
+
+	describe("ProductsList", () => {
+		it("renders products list view", () => {
+			const { container } = render(<ProductsList products={mockProducts} />);
+			expect(
+				container.querySelector("[data-testid='products-list-view']"),
+			).toBeTruthy();
+		});
+
+		it("renders with pagination", () => {
+			const { container } = render(
+				<ProductsList
+					products={mockProducts}
+					pagination={<div>Pagination</div>}
+				/>,
+			);
+			expect(container.firstChild).toBeTruthy();
+		});
+
+		it("renders with product prices", () => {
+			const prices = [{ price: 100, adjustedPrice: 80, productId: 1 }];
+			const { container } = render(
+				<ProductsList products={mockProducts} productPrices={prices as any} />,
+			);
+			expect(
+				container.querySelector("[data-testid='products-list-view']"),
+			).toBeTruthy();
+		});
+
+		it("renders empty products list", () => {
+			const { container } = render(<ProductsList products={[]} />);
+			expect(container.firstChild).toBeTruthy();
+		});
+
+		it("renders multiple products in list format", () => {
+			const manyProducts = Array.from({ length: 10 }, (_, i) => ({
+				RecordId: i + 1,
+				Name: `Product ${i + 1}`,
+			})) as Product[];
+
+			const { container } = render(<ProductsList products={manyProducts} />);
+			expect(
+				container.querySelector("[data-testid='products-list-view']"),
+			).toBeTruthy();
+		});
+	});
+});

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

@@ -0,0 +1,62 @@
+import { render } from "@testing-library/react";
+import { vi } from "vitest";
+
+vi.mock("nprogress", () => ({
+	default: {
+		configure: vi.fn(),
+		start: vi.fn(),
+		done: vi.fn(),
+	},
+}));
+
+vi.mock("@mui/material/GlobalStyles", () => ({
+	default: () => <div data-testid="global-styles" />,
+}));
+
+vi.mock("@mui/material/styles/useTheme", () => ({
+	default: () => ({
+		palette: {
+			primary: { main: "#1976d2" },
+		},
+	}),
+}));
+
+import ProgressBar from "../progress";
+
+describe("ProgressBar", () => {
+	it("renders progress bar component", () => {
+		const { container } = render(<ProgressBar />);
+		expect(container.firstChild).toBeTruthy();
+	});
+
+	it("renders without crashing", () => {
+		const { container } = render(<ProgressBar />);
+		expect(container.querySelectorAll("*").length).toBeGreaterThan(0);
+	});
+
+	it("initializes observer setup", () => {
+		const { container } = render(<ProgressBar />);
+		expect(container.firstChild).toBeTruthy();
+	});
+
+	it("handles anchor click events", () => {
+		const { container } = render(<ProgressBar />);
+		expect(container.firstChild).toBeTruthy();
+	});
+
+	it("configures NProgress", () => {
+		render(<ProgressBar />);
+		expect(true).toBe(true);
+	});
+
+	it("cleans up on unmount", () => {
+		const { unmount } = render(<ProgressBar />);
+		unmount();
+		expect(true).toBe(true);
+	});
+
+	it("integrates with theme", () => {
+		const { container } = render(<ProgressBar />);
+		expect(container.firstChild).toBeTruthy();
+	});
+});

package/src/components-v2/scrollbar/Scrollbar.stories.tsx

@@ -22,8 +22,8 @@ export const WithLink = () => (
 				padding: "25px",
 			}}
 		>
-			{[...Array(50)].map((x, i) => (
-				<p>{i}</p>
+			{Array.from({ length: 50 }).map((_, i) => (
+				<p key={`item-${i + 1}`}>{i}</p>
 			))}
 		</Scrollbar>
 	</div>

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

@@ -0,0 +1,93 @@
+import { render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+import Scrollbar from "../scrollbar";
+
+vi.mock("simplebar-react", () => ({
+	default: ({ children, autoHide, ...props }: any) => (
+		<div data-testid="custom-scrollbar" data-autohide={autoHide} {...props}>
+			{children}
+		</div>
+	),
+}));
+
+describe("Scrollbar", () => {
+	it("renders scrollbar with children", () => {
+		render(
+			<Scrollbar>
+				<div>Content</div>
+			</Scrollbar>,
+		);
+		expect(screen.getByText("Content")).toBeInTheDocument();
+	});
+
+	it("renders custom scrollbar component", () => {
+		const { container } = render(
+			<Scrollbar>
+				<div>Scrollable Content</div>
+			</Scrollbar>,
+		);
+		expect(
+			container.querySelector("[data-testid='custom-scrollbar']"),
+		).toBeTruthy();
+	});
+
+	it("applies autoHide prop by default", () => {
+		const { container } = render(
+			<Scrollbar>
+				<div>Content</div>
+			</Scrollbar>,
+		);
+		const scrollbar = container.querySelector(
+			"[data-testid='custom-scrollbar']",
+		);
+		expect(scrollbar?.getAttribute("data-autohide")).toBe("true");
+	});
+
+	it("respects autoHide false setting", () => {
+		const { container } = render(
+			<Scrollbar autoHide={false}>
+				<div>Content</div>
+			</Scrollbar>,
+		);
+		const scrollbar = container.querySelector(
+			"[data-testid='custom-scrollbar']",
+		);
+		expect(scrollbar?.getAttribute("data-autohide")).toBe("false");
+	});
+
+	it("accepts custom sx props", () => {
+		const { container } = render(
+			<Scrollbar sx={{ height: 200 }}>
+				<div>Content</div>
+			</Scrollbar>,
+		);
+		expect(
+			container.querySelector("[data-testid='custom-scrollbar']"),
+		).toBeTruthy();
+	});
+
+	it("passes additional props to SimpleBar", () => {
+		const { container } = render(
+			<Scrollbar data-custom="test">
+				<div>Content</div>
+			</Scrollbar>,
+		);
+		const scrollbar = container.querySelector(
+			"[data-testid='custom-scrollbar']",
+		);
+		expect(scrollbar?.getAttribute("data-custom")).toBe("test");
+	});
+
+	it("renders multiple children", () => {
+		render(
+			<Scrollbar>
+				<div>Content 1</div>
+				<div>Content 2</div>
+				<div>Content 3</div>
+			</Scrollbar>,
+		);
+		expect(screen.getByText("Content 1")).toBeInTheDocument();
+		expect(screen.getByText("Content 2")).toBeInTheDocument();
+		expect(screen.getByText("Content 3")).toBeInTheDocument();
+	});
+});