diff --git a/src/routes/order-confirmation/order-confirmation.loader.test.ts b/src/routes/order-confirmation/order-confirmation.loader.test.ts new file mode 100644 index 0000000..a8475b1 --- /dev/null +++ b/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, + }); + }); +}); diff --git a/src/routes/order-confirmation/order-confirmation.test.tsx b/src/routes/order-confirmation/order-confirmation.test.tsx new file mode 100644 index 0000000..becd17c --- /dev/null +++ b/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(); + // 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(); + // 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(); + }); + }); +});