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