From c4e4e939a2ece1d827be7f19acdd1734c691292a Mon Sep 17 00:00:00 2001
From: Kellyarias02 <kellyarias@gmail.com>
Date: Sat, 30 Aug 2025 11:07:36 -0500
Subject: [PATCH] Refactor: to add test about as variants of polos and stickers

---
 src/lib/utils.tests.ts               |  2 +
 src/routes/product/index.tsx         |  2 +-
 src/routes/product/product.test.tsx  | 58 +++++++++++++++++++++++++++-
 src/services/product.service.test.ts | 18 +++++++--
 4 files changed, 75 insertions(+), 5 deletions(-)

diff --git a/src/lib/utils.tests.ts b/src/lib/utils.tests.ts
index 1526f23..1ff1527 100644
--- a/src/lib/utils.tests.ts
+++ b/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,
diff --git a/src/routes/product/index.tsx b/src/routes/product/index.tsx
index 106efe2..791d2ed 100644
--- a/src/routes/product/index.tsx
+++ b/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"
diff --git a/src/routes/product/product.test.tsx b/src/routes/product/product.test.tsx
index f70059d..3ae7f2a 100644
--- a/src/routes/product/product.test.tsx
+++ b/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", () => ({
diff --git a/src/services/product.service.test.ts b/src/services/product.service.test.ts
index 7bac27a..7a56c15 100644
--- a/src/services/product.service.test.ts
+++ b/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,6 +97,10 @@ 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,
@@ -100,7 +108,7 @@ describe("Product Service", () => {
       });
     });
 
-    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;
 
@@ -108,12 +116,16 @@ describe("Product Service", () => {
       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 
+        },
       });
     });
   });