OrderConfirmation-route-module-test

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();
+    });
+  });
+});