From 065f269b70283396451139a40f5cf2f874d6f4c0 Mon Sep 17 00:00:00 2001 From: Angel Date: Thu, 12 Jun 2025 12:14:10 -0500 Subject: [PATCH 1/3] feat: add test for OrderConfirmation loader to verify orderId extraction --- .../order-confirmation.loader.test.ts | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 src/routes/order-confirmation/order-confirmation.loader.test.ts 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, + }); + }); +}); From f5b188089e40ee7b06786104df44b98110526b77 Mon Sep 17 00:00:00 2001 From: Angel Date: Thu, 12 Jun 2025 15:27:39 -0500 Subject: [PATCH 2/3] feat: add OrderConfirmation component tests for success messages, tracking information, and layout structure --- .../order-confirmation.test.tsx | 80 +++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 src/routes/order-confirmation/order-confirmation.test.tsx 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..5afc55c --- /dev/null +++ b/src/routes/order-confirmation/order-confirmation.test.tsx @@ -0,0 +1,80 @@ +import { render, screen } from "@testing-library/react"; +import { describe, expect, it, vi } from "vitest"; + +import OrderConfirmation from "."; +import type { Route } from "./+types"; + +// Mock Container component +vi.mock("@/components/ui", () => ({ + Container: vi.fn(({ children }) => ( +
{children}
+ )), +})); + +// 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.getByText(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.getByText("Código de seguimiento"); + expect(trackingCodeLabel).toBeInTheDocument(); + + const trackingCode = screen.getByText(testOrderId); + expect(trackingCode).toBeInTheDocument(); + }); + }); + + describe("Layout Structure", () => { + it("should render with correct layout structure and classes", () => { + // Step 1: Setup - Create test props + const props = createTestProps(); + // Step 2: Mock + // Step 3: Call - Render component + render(); + // Step 4: Verify - Check layout structure + const container = screen.getByTestId("mock-container"); + expect(container).toBeInTheDocument(); + + const section = container.parentElement; + expect(section).toHaveClass( + "pt-12", + "pb-12", + "sm:pt-14", + "sm:pb-14", + "lg:pt-16", + "lg:pb-16" + ); + }); + }); +}); From 6c89778cd19b63fbf338fe05f4812adaee516eed Mon Sep 17 00:00:00 2001 From: Angel Date: Wed, 18 Jun 2025 19:25:31 -0500 Subject: [PATCH 3/3] refactor: simplify order-confirmation.test component by removing unnecessary mocks ans tests --- .../order-confirmation.test.tsx | 36 ++----------------- 1 file changed, 3 insertions(+), 33 deletions(-) diff --git a/src/routes/order-confirmation/order-confirmation.test.tsx b/src/routes/order-confirmation/order-confirmation.test.tsx index 5afc55c..becd17c 100644 --- a/src/routes/order-confirmation/order-confirmation.test.tsx +++ b/src/routes/order-confirmation/order-confirmation.test.tsx @@ -4,13 +4,6 @@ import { describe, expect, it, vi } from "vitest"; import OrderConfirmation from "."; import type { Route } from "./+types"; -// Mock Container component -vi.mock("@/components/ui", () => ({ - Container: vi.fn(({ children }) => ( -
{children}
- )), -})); - // Creates minimal test props for OrderConfirmation component const createTestProps = (orderId = "test-123"): Route.ComponentProps => ({ loaderData: { orderId }, @@ -33,7 +26,7 @@ describe("OrderConfirmation", () => { "Llegaremos a la puerta de tu domicilio lo antes posible", ]; expectedMessages.forEach((message) => { - expect(screen.getByText(message)).toBeInTheDocument(); + expect(screen.queryByText(message)).toBeInTheDocument(); }); }); }); @@ -47,34 +40,11 @@ describe("OrderConfirmation", () => { // Step 3: Call - Render component render(); // Step 4: Verify - Check tracking code section - const trackingCodeLabel = screen.getByText("Código de seguimiento"); + const trackingCodeLabel = screen.queryByText("Código de seguimiento"); expect(trackingCodeLabel).toBeInTheDocument(); - const trackingCode = screen.getByText(testOrderId); + const trackingCode = screen.queryByText(testOrderId); expect(trackingCode).toBeInTheDocument(); }); }); - - describe("Layout Structure", () => { - it("should render with correct layout structure and classes", () => { - // Step 1: Setup - Create test props - const props = createTestProps(); - // Step 2: Mock - // Step 3: Call - Render component - render(); - // Step 4: Verify - Check layout structure - const container = screen.getByTestId("mock-container"); - expect(container).toBeInTheDocument(); - - const section = container.parentElement; - expect(section).toHaveClass( - "pt-12", - "pb-12", - "sm:pt-14", - "sm:pb-14", - "lg:pt-16", - "lg:pb-16" - ); - }); - }); });