@evenicanpm/storefront-core 1.7.0 → 1.8.0

package/src/components-v2/search-bar/__tests__/search-bar.test.tsx

@@ -0,0 +1,142 @@
+import { render } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { vi } from "vitest";
+import { SearchBarViewLg, SearchBarViewSm } from "../index";
+
+vi.mock("next-intl", () => ({
+	useTranslations: () => (key: string) => key,
+}));
+
+vi.mock(
+	"@evenicanpm/storefront-core/src/components-v2/search-bar/compound/search-bar-root",
+	() => ({
+		default: Object.assign(
+			({
+				children,
+				handleCloseDrawer,
+			}: {
+				children: ReactNode;
+				handleCloseDrawer?: () => void;
+			}) => (
+				<button
+					type="button"
+					data-testid="search-bar"
+					onClick={handleCloseDrawer}
+				>
+					{children}
+				</button>
+			),
+			{
+				TextField: () => <input data-testid="search-input" />,
+				Results: Object.assign(
+					({ children }: { children: ReactNode }) => (
+						<div data-testid="results">{children}</div>
+					),
+					{
+						ItemCardLg: () => <div data-testid="item-card-lg">Item</div>,
+						ItemCardSm: () => <div data-testid="item-card-sm">Item</div>,
+					},
+				),
+			},
+		),
+	}),
+);
+
+describe("SearchBar components", () => {
+	describe("SearchBarViewLg", () => {
+		it("renders large search bar view", () => {
+			const { container } = render(<SearchBarViewLg />);
+			expect(
+				container.querySelector("[data-testid='search-bar']"),
+			).toBeTruthy();
+		});
+
+		it("accepts handleCloseDrawer prop", () => {
+			const handleClose = vi.fn();
+			const { container } = render(
+				<SearchBarViewLg handleCloseDrawer={handleClose} />,
+			);
+			expect(
+				container.querySelector("[data-testid='search-bar']"),
+			).toBeTruthy();
+		});
+
+		it("renders search bar structure", () => {
+			const { container } = render(<SearchBarViewLg />);
+			const searchBar = container.querySelector("[data-testid='search-bar']");
+			expect(searchBar).toBeTruthy();
+			expect(searchBar?.children.length).toBeGreaterThan(0);
+		});
+
+		it("renders with results container", () => {
+			const { container } = render(<SearchBarViewLg />);
+			const searchBar = container.querySelector("[data-testid='search-bar']");
+			expect(searchBar).toBeTruthy();
+		});
+	});
+
+	describe("SearchBarViewSm", () => {
+		it("renders small search bar view", () => {
+			const { container } = render(<SearchBarViewSm />);
+			expect(
+				container.querySelector("[data-testid='search-bar']"),
+			).toBeTruthy();
+		});
+
+		it("accepts handleCloseDrawer prop", () => {
+			const handleClose = vi.fn();
+			const { container } = render(
+				<SearchBarViewSm handleCloseDrawer={handleClose} />,
+			);
+			expect(
+				container.querySelector("[data-testid='search-bar']"),
+			).toBeTruthy();
+		});
+
+		it("renders search bar structure", () => {
+			const { container } = render(<SearchBarViewSm />);
+			const searchBar = container.querySelector("[data-testid='search-bar']");
+			expect(searchBar).toBeTruthy();
+		});
+
+		it("renders with results container", () => {
+			const { container } = render(<SearchBarViewSm />);
+			const searchBar = container.querySelector("[data-testid='search-bar']");
+			expect(searchBar?.children.length).toBeGreaterThan(0);
+		});
+
+		it("renders different from large view", () => {
+			const { container: lgContainer } = render(<SearchBarViewLg />);
+			const { container: smContainer } = render(<SearchBarViewSm />);
+			expect(
+				lgContainer.querySelector("[data-testid='search-bar']"),
+			).toBeTruthy();
+			expect(
+				smContainer.querySelector("[data-testid='search-bar']"),
+			).toBeTruthy();
+		});
+	});
+
+	describe("SearchBar integration", () => {
+		it("renders search bar without close handler", () => {
+			const { container } = render(
+				<SearchBarViewLg handleCloseDrawer={undefined} />,
+			);
+			expect(
+				container.querySelector("[data-testid='search-bar']"),
+			).toBeTruthy();
+		});
+
+		it("both views render successfully", () => {
+			const { container: lgContainer } = render(<SearchBarViewLg />);
+			expect(
+				lgContainer.querySelector("[data-testid='search-bar']"),
+			).toBeTruthy();
+
+			const { container: smContainer } = render(<SearchBarViewSm />);
+			expect(
+				smContainer.querySelector("[data-testid='search-bar']"),
+			).toBeTruthy();
+		});
+	});
+});

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

@@ -0,0 +1,100 @@
+import { render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+import { Section } from "../compound/section";
+
+vi.mock("next-intl", () => ({
+	useTranslations: () => (key: string) => key,
+}));
+
+vi.mock(
+	"@evenicanpm/storefront-core/src/components-v2/section/compound/section-header",
+	() => ({
+		SectionHeader: () => <div data-testid="section-header">Header</div>,
+	}),
+);
+
+vi.mock("@mui/material/Container", () => ({
+	default: ({ className, children }: any) => (
+		<div data-testid="mui-container" className={className}>
+			{children}
+		</div>
+	),
+}));
+
+describe("Section", () => {
+	it("renders section with children", () => {
+		render(
+			<Section>
+				<div>Section Content</div>
+			</Section>,
+		);
+		expect(screen.getByText("Section Content")).toBeInTheDocument();
+	});
+
+	it("renders with Container component", () => {
+		const { container } = render(
+			<Section>
+				<div>Content</div>
+			</Section>,
+		);
+		expect(
+			container.querySelector("[data-testid='mui-container']"),
+		).toBeTruthy();
+	});
+
+	it("passes className to Container", () => {
+		const { container } = render(
+			<Section>
+				<div>Content</div>
+			</Section>,
+		);
+		const containerElement = container.querySelector(
+			"[data-testid='mui-container']",
+		);
+		expect(containerElement?.className).toContain("pb-1");
+	});
+
+	it("accepts Box props", () => {
+		const { container } = render(
+			<Section sx={{ backgroundColor: "red" }}>
+				<div>Content</div>
+			</Section>,
+		);
+		expect(container.firstChild).toBeTruthy();
+	});
+
+	it("renders with spacing", () => {
+		render(
+			<Section>
+				<div>Spaced Content</div>
+			</Section>,
+		);
+		expect(screen.getByText("Spaced Content")).toBeInTheDocument();
+	});
+
+	it("exposes Header subcomponent", () => {
+		expect(Section.Header).toBeDefined();
+	});
+
+	it("renders multiple children inside container", () => {
+		render(
+			<Section>
+				<div>Child 1</div>
+				<div>Child 2</div>
+				<div>Child 3</div>
+			</Section>,
+		);
+		expect(screen.getByText("Child 1")).toBeInTheDocument();
+		expect(screen.getByText("Child 2")).toBeInTheDocument();
+		expect(screen.getByText("Child 3")).toBeInTheDocument();
+	});
+
+	it("accepts custom sx styling", () => {
+		const { container } = render(
+			<Section sx={{ padding: 2, margin: 1 }}>
+				<div>Styled Section</div>
+			</Section>,
+		);
+		expect(container.firstChild).toBeTruthy();
+	});
+});

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

@@ -0,0 +1,156 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { vi } from "vitest";
+import SideNav from "../side-nav";
+
+vi.mock("@evenicanpm/storefront-core/src/components-v2/scrollbar", () => ({
+	default: ({
+		children,
+		autoHide,
+	}: {
+		children: ReactNode;
+		autoHide?: boolean;
+	}) => (
+		<div data-testid="scrollbar" data-autohide={autoHide}>
+			{children}
+		</div>
+	),
+}));
+
+vi.mock("@mui/material/Drawer", () => ({
+	default: ({
+		open,
+		onClose,
+		children,
+		anchor,
+	}: {
+		open: boolean;
+		onClose?: () => void;
+		children: ReactNode;
+		anchor: string;
+	}) => (
+		<button
+			type="button"
+			data-testid="drawer"
+			data-open={open}
+			data-anchor={anchor}
+			onClick={() => onClose?.()}
+		>
+			{children}
+		</button>
+	),
+}));
+
+describe("SideNav", () => {
+	const mockHandler = (toggle: () => void) => (
+		<button type="button" data-testid="toggle-button" onClick={toggle}>
+			Toggle
+		</button>
+	);
+
+	it("renders side nav with handler and children", () => {
+		render(
+			<SideNav handler={mockHandler}>
+				<div>Side Nav Content</div>
+			</SideNav>,
+		);
+		expect(screen.getByText("Side Nav Content")).toBeInTheDocument();
+		expect(screen.getByTestId("toggle-button")).toBeInTheDocument();
+	});
+
+	it("renders drawer component", () => {
+		const { container } = render(
+			<SideNav handler={mockHandler}>
+				<div>Content</div>
+			</SideNav>,
+		);
+		expect(container.querySelector("[data-testid='drawer']")).toBeTruthy();
+	});
+
+	it("renders with default position left", () => {
+		const { container } = render(
+			<SideNav handler={mockHandler}>
+				<div>Content</div>
+			</SideNav>,
+		);
+		const drawer = container.querySelector("[data-testid='drawer']");
+		expect(drawer?.getAttribute("data-anchor")).toBe("left");
+	});
+
+	it("renders with custom position right", () => {
+		const { container } = render(
+			<SideNav position="right" handler={mockHandler}>
+				<div>Content</div>
+			</SideNav>,
+		);
+		const drawer = container.querySelector("[data-testid='drawer']");
+		expect(drawer?.getAttribute("data-anchor")).toBe("right");
+	});
+
+	it("manages drawer state", () => {
+		const { container } = render(
+			<SideNav handler={mockHandler}>
+				<div>Content</div>
+			</SideNav>,
+		);
+		const drawer = container.querySelector("[data-testid='drawer']");
+		expect(drawer?.getAttribute("data-open")).toBe("false");
+	});
+
+	it("accepts custom width", () => {
+		const { container } = render(
+			<SideNav width={300} handler={mockHandler}>
+				<div>Content</div>
+			</SideNav>,
+		);
+		expect(container.querySelector("[data-testid='drawer']")).toBeTruthy();
+	});
+
+	it("uses scrollbar for children", () => {
+		const { container } = render(
+			<SideNav handler={mockHandler}>
+				<div>Scrollable Content</div>
+			</SideNav>,
+		);
+		expect(container.querySelector("[data-testid='scrollbar']")).toBeTruthy();
+	});
+
+	it("handles drawer close", () => {
+		const { container } = render(
+			<SideNav handler={mockHandler}>
+				<div>Content</div>
+			</SideNav>,
+		);
+		const drawer = container.querySelector("[data-testid='drawer']");
+		if (drawer) fireEvent.click(drawer);
+		expect(screen.getByTestId("toggle-button")).toBeInTheDocument();
+	});
+
+	it("accepts external toggle function", () => {
+		const externalToggle = vi.fn();
+		const { container } = render(
+			<SideNav toggle={externalToggle} handler={mockHandler}>
+				<div>Content</div>
+			</SideNav>,
+		);
+		expect(container.querySelector("[data-testid='drawer']")).toBeTruthy();
+	});
+
+	it("syncs external and internal state", () => {
+		const { rerender, container } = render(
+			<SideNav open={true} handler={mockHandler}>
+				<div>Content</div>
+			</SideNav>,
+		);
+		let drawer = container.querySelector("[data-testid='drawer']");
+		expect(drawer?.getAttribute("data-open")).toBe("true");
+
+		rerender(
+			<SideNav open={false} handler={mockHandler}>
+				<div>Content</div>
+			</SideNav>,
+		);
+		drawer = container.querySelector("[data-testid='drawer']");
+		expect(drawer?.getAttribute("data-open")).toBe("false");
+	});
+});