@evenicanpm/storefront-core 1.7.0 → 1.8.1

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

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