Testing

package.json

@@ -16,7 +16,8 @@
     "migrate:dev": "tsx src/db/scripts/migrate.ts",
     "reset-db:dev": "npm run drop-db:dev && npm run create-db:dev && npm run migrate:dev && npm run seed:dev",
     "seed": "node dist/db/scripts/seed.js",
-    "seed:dev": "tsx src/db/scripts/seed.ts"
+    "seed:dev": "tsx src/db/scripts/seed.ts",
+    "test": "vitest"
   },
   "dependencies": {
     "@hookform/resolvers": "^4.1.3",
@@ -48,6 +49,9 @@
   "devDependencies": {
     "@eslint/js": "^9.15.0",
     "@react-router/dev": "^7.5.1",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
     "@types/jsonwebtoken": "^9.0.9",
     "@types/node": "^22.10.2",
     "@types/pg": "^8.15.2",
@@ -61,14 +65,17 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
+    "global-jsdom": "^26.0.0",
     "globals": "^15.12.0",
+    "jsdom": "^26.1.0",
     "postcss": "^8.5.3",
     "react-router-devtools": "^1.1.10",
     "tailwindcss": "^3.4.17",
     "tsx": "^4.19.4",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.15.0",
     "vite": "^6.0.1",
-    "vite-tsconfig-paths": "^5.1.4"
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.2.1"
   }
 }

src/components/ui/button/button.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+
+import { Button } from "@/components/ui";
+
+describe("Button Component", () => {
+  it("render correctly", () => {
+    render(<Button>Click me</Button>);
+
+    const button = screen.queryByRole("button", {
+      name: /click me/i,
+    });
+
+    expect(button).toBeInTheDocument();
+  });
+
+  it("render secondary variant correctly", () => {
+    render(<Button variant="secondary">Click me</Button>);
+
+    const button = screen.queryByRole("button", {
+      name: /click me/i,
+    });
+
+    expect(button).toHaveClass(
+      "bg-secondary",
+      "text-secondary-foreground",
+      "hover:bg-secondary-hover"
+    );
+  });
+});

src/lib/utils.tests.ts

@@ -0,0 +1,75 @@
+import { vi } from "vitest";
+
+import type { Category } from "@/models/category.model";
+import type { Product } from "@/models/product.model";
+import type { User } from "@/models/user.model";
+
+import type { Session } from "react-router";
+
+type TestRequestConfig = {
+  url?: string;
+  headers?: HeadersInit;
+};
+
+// Helper functions for creating commonly used test objects
+export const createTestUser = (overrides?: Partial<User>): User => ({
+  id: 1,
+  email: "",
+  name: null,
+  password: null,
+  isGuest: false,
+  createdAt: new Date().toISOString(),
+  updatedAt: new Date().toISOString(),
+  ...overrides,
+});
+
+export const createTestRequest = (overrides?: TestRequestConfig): Request => {
+  const defaultConfig: TestRequestConfig = {
+    url: "http://localhost/test",
+    headers: { Cookie: "session=mock-session-id" },
+  };
+
+  const config = { ...defaultConfig, ...overrides };
+  return new Request(config.url!, {
+    headers: { ...defaultConfig.headers, ...config.headers },
+  });
+};
+
+export const createMockSession = (userId: number | null): Session => ({
+  id: "mock-session-id",
+  data: {},
+  has: vi.fn(),
+  get: vi.fn().mockReturnValue(userId), // Default userId in session
+  set: vi.fn(),
+  flash: vi.fn(),
+  unset: vi.fn(),
+});
+
+export const createTestProduct = (overrides?: Partial<Product>): Product => ({
+  id: 1,
+  title: "Test Product",
+  imgSrc: "/test-image.jpg",
+  alt: "Test alt text",
+  price: 100,
+  description: "Test description",
+  categoryId: 1,
+  isOnSale: false,
+  features: ["Feature 1", "Feature 2"],
+  createdAt: new Date().toISOString(),
+  updatedAt: new Date().toISOString(),
+  ...overrides,
+});
+
+export const createTestCategory = (
+  overrides?: Partial<Category>
+): Category => ({
+  id: 1,
+  title: "Polos",
+  slug: "polos",
+  imgSrc: "/images/polos.jpg",
+  alt: "Colección de polos para programadores",
+  description: "Explora nuestra colección de polos para programadores",
+  createdAt: new Date().toISOString(),
+  updatedAt: new Date().toISOString(),
+  ...overrides,
+});

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/order-confirmation/order-confirmation.loader.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+
+import { loader } from ".";
+
+describe("OrderConfirmation loader", () => {
+  // Helper function to create loader arguments
+  const createLoaderArgs = (orderId: string) => ({
+    params: { orderId },
+    request: new Request(`http://localhost/order-confirmation/${orderId}`),
+    context: {},
+  });
+
+  it("should return orderId from params", async () => {
+    // Step 1: Setup - Create test data
+    const testOrderId = "testOrderId-123"; // Example order ID
+
+    // Step 2: Mock - Not needed as loader has no dependencies
+
+    // Step 3: Call service function
+    const result = await loader(createLoaderArgs(testOrderId));
+
+    // Step 4: Verify expected behavior
+    expect(result).toEqual({
+      orderId: testOrderId,
+    });
+  });
+});

src/routes/order-confirmation/order-confirmation.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import OrderConfirmation from ".";
+import type { Route } from "./+types";
+
+// Creates minimal test props for OrderConfirmation component
+const createTestProps = (orderId = "test-123"): Route.ComponentProps => ({
+  loaderData: { orderId },
+  params: vi.fn() as any,
+  matches: vi.fn() as any,
+});
+
+describe("OrderConfirmation", () => {
+  describe("Success Messages Display", () => {
+    it("should display all success messages correctly", () => {
+      // Step 1: Setup - Create test props
+      const props = createTestProps();
+      // Step 2: Mock
+      // Step 3: Call - Render component
+      render(<OrderConfirmation {...props} />);
+      // Step 4: Verify - Check all success messages
+      const expectedMessages = [
+        "¡Muchas gracias por tu compra!",
+        "Tu orden está en camino",
+        "Llegaremos a la puerta de tu domicilio lo antes posible",
+      ];
+      expectedMessages.forEach((message) => {
+        expect(screen.queryByText(message)).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("Order Tracking Information", () => {
+    it("should display correct tracking code section", () => {
+      // Step 1: Setup - Create test props with a specific order ID
+      const testOrderId = "order-456";
+      const props = createTestProps(testOrderId);
+      // Step 2: Mock
+      // Step 3: Call - Render component
+      render(<OrderConfirmation {...props} />);
+      // Step 4: Verify - Check tracking code section
+      const trackingCodeLabel = screen.queryByText("Código de seguimiento");
+      expect(trackingCodeLabel).toBeInTheDocument();
+
+      const trackingCode = screen.queryByText(testOrderId);
+      expect(trackingCode).toBeInTheDocument();
+    });
+  });
+});

src/routes/product/product.loader.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it, vi } from "vitest";
+
+import { createTestProduct } from "@/lib/utils.tests";
+import * as productService from "@/services/product.service";
+
+import { loader } from ".";
+
+// Mock the product service
+vi.mock("@/services/product.service", () => ({
+  getProductById: vi.fn(), // mock function
+}));
+
+const mockGetProductById = vi.mocked(productService.getProductById);
+
+describe("Product loader", () => {
+  const createLoaderArgs = (id: string) => ({
+    params: { id },
+    request: new Request(`http://localhost/products/${id}`),
+    context: {},
+  });
+
+  it("returns a product when it exists", async () => {
+    const mockProduct = createTestProduct();
+
+    mockGetProductById.mockResolvedValue(mockProduct);
+
+    const result = await loader(createLoaderArgs("1"));
+
+    expect(result.product).toBeDefined();
+    expect(result.product).toEqual(mockProduct);
+    expect(mockGetProductById).toHaveBeenCalledWith(1);
+  });
+
+  it("returns empty object when product does not exist", async () => {
+    mockGetProductById.mockRejectedValue(new Error("Product not found"));
+
+    const result = await loader(createLoaderArgs("999"));
+
+    expect(result).toEqual({});
+    expect(mockGetProductById).toHaveBeenCalledWith(999);
+  });
+
+  it("handles invalid product id", async () => {
+    mockGetProductById.mockRejectedValue(new Error("Invalid ID"));
+
+    const result = await loader(createLoaderArgs("invalid"));
+
+    expect(result).toEqual({});
+    expect(mockGetProductById).toHaveBeenCalledWith(NaN);
+  });
+});