Refactor: to add test about as variants of polos and stickers

Author: Kellyarias02

src/lib/utils.tests.ts

@@ -63,6 +63,8 @@ export const createTestProduct = (overrides?: Partial<Product>): Product => ({
   categoryId: 1,
   isOnSale: false,
   features: ["Feature 1", "Feature 2"],
+  variants: [],
+  stickersVariants: [],
   createdAt: new Date(),
   updatedAt: new Date(),
   ...overrides,

src/routes/product/index.tsx

@@ -121,7 +121,7 @@ export default function Product({ loaderData }: Route.ComponentProps) {
                   onSelect={setSelectedMeasure}
                 />
               )}
-              {/* Botón de agregar al carrito */}
+              
               <Button
                 size="xl"
                 className="w-full md:w-80"

src/routes/product/product.test.tsx

@@ -27,6 +27,7 @@ vi.mock("react-router", () => ({
   Form: vi.fn(({ children }) => <form>{children}</form>),
   useNavigation: vi.fn(() => createTestNavigation()),
   Link: vi.fn(({ children, ...props }) => <a {...props}>{children}</a>),
+  useSearchParams: vi.fn(() => [new URLSearchParams(), vi.fn()]),
 }));
 
 const createTestProps = (
@@ -61,6 +62,23 @@ describe("Product Component", () => {
       expect(screen.queryByText("S/150.99")).toBeInTheDocument();
     });
 
+    it("should render product price with correct currency for stickers variants", () => {
+      // Step 1: Setup - Create test props with stickers variants
+      const props = createTestProps({
+        price: 100,
+        stickersVariants: [
+          { id: 1, measure: "3*3", price: 80 },
+          { id: 2, measure: "5*5", price: 120 },
+          { id: 3, measure: "10*10", price: 150 },
+        ],
+      });
+      // Step 2: Mock - Component mocks already set up above
+      // Step 3: Call - Render component
+      render(<Product {...props} />);
+      // Step 4: Verify - Check price is rendered correctly (should use first variant price)
+      expect(screen.queryByText("S/80")).toBeInTheDocument();
+    });
+
     it("should render product description", () => {
       // Step 1: Setup - Create test props
       const props = createTestProps({
@@ -101,6 +119,44 @@ describe("Product Component", () => {
       });
     });
 
+    it("should render size selector when product has variants", () => {
+      // Step 1: Setup - Create test props with variants
+      const props = createTestProps({
+        variants: [
+          { id: 1, size: "small" },
+          { id: 2, size: "medium" },
+          { id: 3, size: "large" },
+        ],
+      });
+      // Step 2: Mock - Component mocks already set up above
+      // Step 3: Call - Render component
+      render(<Product {...props} />);
+      // Step 4: Verify - Check size selector is rendered
+      expect(screen.queryByText("Talla")).toBeInTheDocument();
+      expect(screen.queryByText("Small")).toBeInTheDocument();
+      expect(screen.queryByText("Medium")).toBeInTheDocument();
+      expect(screen.queryByText("Large")).toBeInTheDocument();
+    });
+
+    it("should render measure selector when product has stickers variants", () => {
+      // Step 1: Setup - Create test props with stickers variants
+      const props = createTestProps({
+        stickersVariants: [
+          { id: 1, measure: "3*3", price: 80 },
+          { id: 2, measure: "5*5", price: 120 },
+          { id: 3, measure: "10*10", price: 150 },
+        ],
+      });
+      // Step 2: Mock - Component mocks already set up above
+      // Step 3: Call - Render component
+      render(<Product {...props} />);
+      // Step 4: Verify - Check measure selector is rendered
+      expect(screen.queryByText("Medida")).toBeInTheDocument();
+      expect(screen.queryByText("3*3")).toBeInTheDocument();
+      expect(screen.queryByText("5*5")).toBeInTheDocument();
+      expect(screen.queryByText("10*10")).toBeInTheDocument();
+    });
+
     it('should render "Agregar al Carrito" button', () => {
       // Step 1: Setup - Create test props
       const props = createTestProps();
@@ -148,7 +204,7 @@ describe("Product Component", () => {
     it("should render NotFound component when product is not provided", () => {
       // Step 1: Setup - Create props without product
       const props = createTestProps();
-      props.loaderData.product = undefined;
+      props.loaderData = { product: undefined };
 
       // Step 2: Mock - Mock NotFound component
       // vi.mock("../not-found", () => ({

src/services/product.service.test.ts

@@ -51,6 +51,10 @@ describe("Product Service", () => {
       expect(getCategoryBySlug).toHaveBeenCalledWith(testCategory.slug);
       expect(mockPrisma.product.findMany).toHaveBeenCalledWith({
         where: { categoryId: testCategory.id },
+        include: {
+          stickersVariants: true,
+          variants: true
+        },
       });
       expect(products).toEqual(
         mockedProducts.map((product) => ({
@@ -93,27 +97,35 @@ describe("Product Service", () => {
       // Step 4: Verify expected behavior
       expect(mockPrisma.product.findUnique).toHaveBeenCalledWith({
         where: { id: testProduct.id },
+        include: { 
+          stickersVariants: true,
+          variants: true 
+        },
       });
       expect(result).toEqual({
         ...testProduct,
         price: testProduct.price.toNumber(),
       });
     });
 
-    it("should throw error when product does not exist", async () => {
+    it("should return null when product does not exist", async () => {
       // Step 1: Setup - Configure ID for non-existent product
       const nonExistentId = 999;
 
       // Step 2: Mock - Configure null response from Prisma
       vi.mocked(mockPrisma.product.findUnique).mockResolvedValue(null);
 
       // Step 3: Call service function
-      const productPromise = getProductById(nonExistentId);
+      const result = await getProductById(nonExistentId);
 
       // Step 4: Verify expected behavior
-      await expect(productPromise).rejects.toThrow("Product not found");
+      expect(result).toBeNull();
       expect(mockPrisma.product.findUnique).toHaveBeenCalledWith({
         where: { id: nonExistentId },
+        include: { 
+          stickersVariants: true,
+          variants: true 
+        },
       });
     });
   });