refactor: improve NotFound component structure and enhance product service tests with type annotations

Author: diegotc86

src/routes/not-found/index.tsx

@@ -5,14 +5,16 @@ import { Button, Container, Section } from "@/components/ui";
 export default function NotFound() {
   return (
     <Container>
-      <Section className='flex justify-center items-center'>
-        <div className='text-center'>
-          <p className='text-base font-semibold text-accent-foreground'>404</p>
-          <h1 className='text-4xl leading-9 font-bold tracking-tight text-foreground mt-4 sm:text-6xl sm:leading-none'>Página no encontrada</h1>
-          <p className='text-lg font-medium text-muted-foreground mt-6 sm:text-xl leading-none'>
+      <Section className="flex justify-center items-center">
+        <div className="text-center" data-testid="not-found">
+          <p className="text-base font-semibold text-accent-foreground">404</p>
+          <h1 className="text-4xl leading-9 font-bold tracking-tight text-foreground mt-4 sm:text-6xl sm:leading-none">
+            Página no encontrada
+          </h1>
+          <p className="text-lg font-medium text-muted-foreground mt-6 sm:text-xl leading-none">
             No pudimos encontrar la página que estás buscando.
           </p>
-          <Button className='mt-10' asChild size="xl">
+          <Button className="mt-10" asChild size="xl">
             <Link to="/">Regresar al inicio</Link>
           </Button>
         </div>

src/routes/product/product.test.tsx

@@ -1,25 +1,13 @@
+import { render, screen } from "@testing-library/react";
+import { useNavigation } from "react-router";
 import { describe, expect, it, vi } from "vitest";
 
 import { createTestProduct } from "@/lib/utils.tests";
 import type { Product as ProductType } from "@/models/product.model";
-import { render, screen } from "@testing-library/react";
 
-import { useNavigation } from "react-router";
 import Product from ".";
-import type { Route } from "./+types";
 
-// Mock Container component since we just want to verify it's used correctly
-vi.mock("@/components/ui", () => ({
-  Container: vi.fn(({ children }) => (
-    <div data-testid="mock-container">{children}</div>
-  )),
-  Button: vi.fn(({ children, ...props }) => (
-    <button data-testid="mock-button" {...props}>
-      {children}
-    </button>
-  )),
-  Separator: vi.fn(() => <hr data-testid="mock-separator" />),
-}));
+import type { Route } from "./+types";
 
 // Helper function to create a test navigation object
 const createTestNavigation = (overrides = {}) => ({
@@ -38,6 +26,7 @@ const createTestNavigation = (overrides = {}) => ({
 vi.mock("react-router", () => ({
   Form: vi.fn(({ children }) => <form>{children}</form>),
   useNavigation: vi.fn(() => createTestNavigation()),
+  Link: vi.fn(({ children, ...props }) => <a {...props}>{children}</a>),
 }));
 
 const createTestProps = (
@@ -68,7 +57,7 @@ describe("Product Component", () => {
       // Step 3: Call - Render component
       render(<Product {...props} />);
       // Step 4: Verify - Check price is rendered correctly
-      expect(screen.getByText("$150.99")).toBeInTheDocument();
+      expect(screen.queryByText("$150.99")).toBeInTheDocument();
     });
 
     it("should render product description", () => {
@@ -80,7 +69,7 @@ describe("Product Component", () => {
       // Step 3: Call - Render component
       render(<Product {...props} />);
       // Step 4: Verify - Check description is rendered
-      expect(screen.getByText("Amazing product")).toBeInTheDocument();
+      expect(screen.queryByText("Amazing product")).toBeInTheDocument();
     });
 
     it("should render product image with correct src and alt attributes", () => {
@@ -107,7 +96,7 @@ describe("Product Component", () => {
       render(<Product {...props} />);
       // Step 4: Verify - Check features are rendered
       features.forEach((feature) => {
-        expect(screen.getByText(feature)).toBeInTheDocument();
+        expect(screen.queryByText(feature)).toBeInTheDocument();
       });
     });
 
@@ -119,7 +108,7 @@ describe("Product Component", () => {
       render(<Product {...props} />);
       // Step 4: Verify - Check button is present
       expect(
-        screen.getByRole("button", { name: "Agregar al Carrito" })
+        screen.queryByRole("button", { name: "Agregar al Carrito" })
       ).toBeInTheDocument();
     });
   });
@@ -133,7 +122,9 @@ describe("Product Component", () => {
       // Step 3: Call
       render(<Product {...props} />);
       // Step 4: Verify
-      const redirectInput = screen.getByDisplayValue(`/products/${productId}`);
+      const redirectInput = screen.queryByDisplayValue(
+        `/products/${productId}`
+      );
       expect(redirectInput).toBeInTheDocument();
     });
 
@@ -159,9 +150,9 @@ describe("Product Component", () => {
       props.loaderData.product = undefined;
 
       // Step 2: Mock - Mock NotFound component
-      vi.mock("../not-found", () => ({
-        default: () => <div data-testid="not-found">Not Found Page</div>,
-      }));
+      // vi.mock("../not-found", () => ({
+      //   default: () => <div data-testid="not-found">Not Found Page</div>,
+      // }));
       // Step 3: Call
       render(<Product {...props} />);
       // Step 4: Verify

src/services/product.service.test.ts

@@ -21,7 +21,7 @@ describe("Product Service", () => {
     it("should return products for a valid category slug", async () => {
       // Step 1: Setup - Create test data with valid category and products
       const testCategory = createTestCategory();
-      const mockedProducts = [
+      const mockedProducts: Product[] = [
         createTestProduct({ id: 1, categoryId: testCategory.id }),
         createTestProduct({
           id: 2,
@@ -33,7 +33,7 @@ describe("Product Service", () => {
       // Step 2: Mock - Configure repository responses
       vi.mocked(getCategoryBySlug).mockResolvedValue(testCategory);
       vi.mocked(productRepository.getProductsByCategory).mockResolvedValue(
-        mockedProducts as Product[]
+        mockedProducts
       );
 
       // Step 3: Call service function
@@ -52,19 +52,16 @@ describe("Product Service", () => {
       const invalidSlug = "invalid-slug";
 
       // Step 2: Mock - Configure error response
-      vi.mocked(getCategoryBySlug).mockRejectedValue(
-        new Error(`Category with slug "${invalidSlug}" not found`)
-      );
+      const errorMessage = `Category with slug "${invalidSlug}" not found`;
+      vi.mocked(getCategoryBySlug).mockRejectedValue(new Error(errorMessage));
 
       // Step 3: Call service function
       const getProducts = getProductsByCategorySlug(
         invalidSlug as Category["slug"]
       );
 
       // Step 4: Verify expected behavior
-      await expect(getProducts).rejects.toThrow(
-        `Category with slug "${invalidSlug}" not found`
-      );
+      await expect(getProducts).rejects.toThrow(errorMessage);
       expect(productRepository.getProductsByCategory).not.toHaveBeenCalled();
     });
   });
@@ -97,10 +94,10 @@ describe("Product Service", () => {
       vi.mocked(productRepository.getProductById).mockResolvedValue(null);
 
       // Step 3: Call service function
-      const getProduct = getProductById(nonExistentId);
+      const productPromise = getProductById(nonExistentId);
 
       // Step 4: Verify expected behavior
-      await expect(getProduct).rejects.toThrow("Product not found");
+      await expect(productPromise).rejects.toThrow("Product not found");
     });
   });
 });