@su-record/vibe 2.9.17 → 2.9.19

package/skills/e2e-commerce/templates/test-scenarios.md

@@ -1,170 +1,170 @@
-# E2E Commerce Test Scenario Template
-
-## Setup
-
-```typescript
-// {{TEST_FILE}}.spec.ts
-import { test, expect } from "@playwright/test";
-import { setupServer } from "msw/node";
-import { http, HttpResponse } from "msw";
-
-// Seed test data once per suite — clean up in afterAll
-test.beforeAll(async ({ request }) => {
-  await request.post("/api/test/seed", {
-    data: {
-      product: { id: "{{PRODUCT_ID}}", stock: 10, price: {{PRICE}} },
-      user: { email: "{{TEST_USER_EMAIL}}", password: "{{TEST_USER_PASSWORD}}" },
-      coupon: { code: "{{COUPON_CODE}}", type: "percentage", value: 10 },
-    },
-  });
-});
-
-test.afterAll(async ({ request }) => {
-  await request.post("/api/test/cleanup", { data: { scope: "{{TEST_SUITE_ID}}" } });
-});
-```
-
-## P0 — Happy Path Checkout
-
-```typescript
-test("happy path: cart → checkout → payment → confirmation", async ({ page }) => {
-  // 1. Add to cart
-  await page.goto("/products/{{PRODUCT_SLUG}}");
-  await page.getByRole("button", { name: "Add to Cart" }).click();
-  await page.getByRole("link", { name: "View Cart" }).click();
-
-  // 2. Proceed to checkout
-  await expect(page.getByText("{{PRODUCT_NAME}}")).toBeVisible();
-  await page.getByRole("button", { name: "Checkout" }).click();
-
-  // 3. Fill shipping
-  await page.fill('[name="address"]', "{{TEST_ADDRESS}}");
-  await page.fill('[name="city"]', "{{TEST_CITY}}");
-  await page.getByRole("button", { name: "Continue to Payment" }).click();
-
-  // 4. Pay (use PG sandbox card)
-  await page.fill('[name="cardNumber"]', "{{SANDBOX_CARD_NUMBER}}");
-  await page.fill('[name="expiry"]', "{{SANDBOX_CARD_EXPIRY}}");
-  await page.fill('[name="cvv"]', "{{SANDBOX_CARD_CVV}}");
-  await page.getByRole("button", { name: "Place Order" }).click();
-
-  // 5. Confirm — verify order status text, not just URL
-  await page.waitForURL("**/order-confirmation/**");
-  await expect(page.getByText("Order Confirmed")).toBeVisible();
-  await expect(page.getByTestId("order-id")).not.toBeEmpty();
-});
-```
-
-## P0 — Payment Failure + Stock Release
-
-```typescript
-test("payment failure releases reserved stock", async ({ page, request }) => {
-  const stockBefore = await request
-    .get("/api/products/{{PRODUCT_ID}}/stock")
-    .then((r) => r.json());
-
-  await page.goto("/products/{{PRODUCT_SLUG}}");
-  await page.getByRole("button", { name: "Add to Cart" }).click();
-  await page.goto("/checkout");
-  await page.fill('[name="cardNumber"]', "4000000000000002"); // Decline card
-
-  await page.getByRole("button", { name: "Place Order" }).click();
-  await expect(page.getByText(/payment failed|declined/i)).toBeVisible();
-
-  // Verify stock is released — not just error shown
-  const stockAfter = await request
-    .get("/api/products/{{PRODUCT_ID}}/stock")
-    .then((r) => r.json());
-  expect(stockAfter.available).toBe(stockBefore.available);
-});
-```
-
-## P0 — Duplicate Payment Prevention
-
-```typescript
-test("double-click does not create duplicate order", async ({ page, request }) => {
-  await page.goto("/checkout?prefilled=true");
-  const submitBtn = page.getByRole("button", { name: "Place Order" });
-
-  // Simulate double-click simultaneously
-  await Promise.all([submitBtn.click(), submitBtn.click()]);
-  await page.waitForURL("**/order-confirmation/**");
-
-  const orderId = await page.getByTestId("order-id").textContent();
-
-  // Verify only one order was created via API
-  const orders = await request
-    .get(`/api/orders?reference={{TEST_IDEMPOTENCY_KEY}}`)
-    .then((r) => r.json());
-  expect(orders.total).toBe(1);
-});
-```
-
-## P0 — Out-of-Stock Blocks Checkout
-
-```typescript
-test("out-of-stock product blocks checkout with clear message", async ({ page, request }) => {
-  // Deplete stock via test API
-  await request.post("/api/test/deplete-stock", { data: { productId: "{{PRODUCT_ID}}" } });
-
-  await page.goto("/checkout?prefilled=true");
-  await page.getByRole("button", { name: "Place Order" }).click();
-
-  await expect(page.getByText(/out of stock|unavailable/i)).toBeVisible();
-  await expect(page).not.toHaveURL("**/order-confirmation/**");
-});
-```
-
-## P1 — Coupon Calculation
-
-```typescript
-test("percentage coupon applies correct discount", async ({ page }) => {
-  await page.goto("/cart");
-  await page.fill('[name="couponCode"]', "{{COUPON_CODE}}");
-  await page.getByRole("button", { name: "Apply" }).click();
-
-  const total = await page.getByTestId("cart-total").textContent();
-  // {{PRICE}} * (1 - 0.10) = expected total
-  await expect(page.getByTestId("discount-amount")).toContainText("{{EXPECTED_DISCOUNT}}");
-});
-```
-
-## P1 — Cart Merge on Login
-
-```typescript
-test("guest cart merges into user cart on login", async ({ page }) => {
-  // Add item as guest
-  await page.goto("/products/{{PRODUCT_SLUG}}");
-  await page.getByRole("button", { name: "Add to Cart" }).click();
-
-  // Login
-  await page.goto("/login");
-  await page.fill('[name="email"]', "{{TEST_USER_EMAIL}}");
-  await page.fill('[name="password"]', "{{TEST_USER_PASSWORD}}");
-  await page.getByRole("button", { name: "Sign In" }).click();
-
-  // Guest cart item should appear in user cart
-  await page.goto("/cart");
-  await expect(page.getByText("{{PRODUCT_NAME}}")).toBeVisible();
-});
-```
-
-## MSW Mock PG Server (CI)
-
-```typescript
-// mocks/pg-server.ts
-export const pgHandlers = [
-  http.post("{{PG_ENDPOINT}}", async ({ request }) => {
-    const body = await request.json() as Record<string, unknown>;
-    const card = body.cardNumber as string;
-
-    if (card === "4000000000000002") {
-      return HttpResponse.json({ status: "FAILED", code: "CARD_DECLINED" }, { status: 400 });
-    }
-    return HttpResponse.json({
-      status: "APPROVED",
-      transactionId: `mock_${Date.now()}`,
-    });
-  }),
-];
-```
+# E2E Commerce Test Scenario Template
+
+## Setup
+
+```typescript
+// {{TEST_FILE}}.spec.ts
+import { test, expect } from "@playwright/test";
+import { setupServer } from "msw/node";
+import { http, HttpResponse } from "msw";
+
+// Seed test data once per suite — clean up in afterAll
+test.beforeAll(async ({ request }) => {
+  await request.post("/api/test/seed", {
+    data: {
+      product: { id: "{{PRODUCT_ID}}", stock: 10, price: {{PRICE}} },
+      user: { email: "{{TEST_USER_EMAIL}}", password: "{{TEST_USER_PASSWORD}}" },
+      coupon: { code: "{{COUPON_CODE}}", type: "percentage", value: 10 },
+    },
+  });
+});
+
+test.afterAll(async ({ request }) => {
+  await request.post("/api/test/cleanup", { data: { scope: "{{TEST_SUITE_ID}}" } });
+});
+```
+
+## P0 — Happy Path Checkout
+
+```typescript
+test("happy path: cart → checkout → payment → confirmation", async ({ page }) => {
+  // 1. Add to cart
+  await page.goto("/products/{{PRODUCT_SLUG}}");
+  await page.getByRole("button", { name: "Add to Cart" }).click();
+  await page.getByRole("link", { name: "View Cart" }).click();
+
+  // 2. Proceed to checkout
+  await expect(page.getByText("{{PRODUCT_NAME}}")).toBeVisible();
+  await page.getByRole("button", { name: "Checkout" }).click();
+
+  // 3. Fill shipping
+  await page.fill('[name="address"]', "{{TEST_ADDRESS}}");
+  await page.fill('[name="city"]', "{{TEST_CITY}}");
+  await page.getByRole("button", { name: "Continue to Payment" }).click();
+
+  // 4. Pay (use PG sandbox card)
+  await page.fill('[name="cardNumber"]', "{{SANDBOX_CARD_NUMBER}}");
+  await page.fill('[name="expiry"]', "{{SANDBOX_CARD_EXPIRY}}");
+  await page.fill('[name="cvv"]', "{{SANDBOX_CARD_CVV}}");
+  await page.getByRole("button", { name: "Place Order" }).click();
+
+  // 5. Confirm — verify order status text, not just URL
+  await page.waitForURL("**/order-confirmation/**");
+  await expect(page.getByText("Order Confirmed")).toBeVisible();
+  await expect(page.getByTestId("order-id")).not.toBeEmpty();
+});
+```
+
+## P0 — Payment Failure + Stock Release
+
+```typescript
+test("payment failure releases reserved stock", async ({ page, request }) => {
+  const stockBefore = await request
+    .get("/api/products/{{PRODUCT_ID}}/stock")
+    .then((r) => r.json());
+
+  await page.goto("/products/{{PRODUCT_SLUG}}");
+  await page.getByRole("button", { name: "Add to Cart" }).click();
+  await page.goto("/checkout");
+  await page.fill('[name="cardNumber"]', "4000000000000002"); // Decline card
+
+  await page.getByRole("button", { name: "Place Order" }).click();
+  await expect(page.getByText(/payment failed|declined/i)).toBeVisible();
+
+  // Verify stock is released — not just error shown
+  const stockAfter = await request
+    .get("/api/products/{{PRODUCT_ID}}/stock")
+    .then((r) => r.json());
+  expect(stockAfter.available).toBe(stockBefore.available);
+});
+```
+
+## P0 — Duplicate Payment Prevention
+
+```typescript
+test("double-click does not create duplicate order", async ({ page, request }) => {
+  await page.goto("/checkout?prefilled=true");
+  const submitBtn = page.getByRole("button", { name: "Place Order" });
+
+  // Simulate double-click simultaneously
+  await Promise.all([submitBtn.click(), submitBtn.click()]);
+  await page.waitForURL("**/order-confirmation/**");
+
+  const orderId = await page.getByTestId("order-id").textContent();
+
+  // Verify only one order was created via API
+  const orders = await request
+    .get(`/api/orders?reference={{TEST_IDEMPOTENCY_KEY}}`)
+    .then((r) => r.json());
+  expect(orders.total).toBe(1);
+});
+```
+
+## P0 — Out-of-Stock Blocks Checkout
+
+```typescript
+test("out-of-stock product blocks checkout with clear message", async ({ page, request }) => {
+  // Deplete stock via test API
+  await request.post("/api/test/deplete-stock", { data: { productId: "{{PRODUCT_ID}}" } });
+
+  await page.goto("/checkout?prefilled=true");
+  await page.getByRole("button", { name: "Place Order" }).click();
+
+  await expect(page.getByText(/out of stock|unavailable/i)).toBeVisible();
+  await expect(page).not.toHaveURL("**/order-confirmation/**");
+});
+```
+
+## P1 — Coupon Calculation
+
+```typescript
+test("percentage coupon applies correct discount", async ({ page }) => {
+  await page.goto("/cart");
+  await page.fill('[name="couponCode"]', "{{COUPON_CODE}}");
+  await page.getByRole("button", { name: "Apply" }).click();
+
+  const total = await page.getByTestId("cart-total").textContent();
+  // {{PRICE}} * (1 - 0.10) = expected total
+  await expect(page.getByTestId("discount-amount")).toContainText("{{EXPECTED_DISCOUNT}}");
+});
+```
+
+## P1 — Cart Merge on Login
+
+```typescript
+test("guest cart merges into user cart on login", async ({ page }) => {
+  // Add item as guest
+  await page.goto("/products/{{PRODUCT_SLUG}}");
+  await page.getByRole("button", { name: "Add to Cart" }).click();
+
+  // Login
+  await page.goto("/login");
+  await page.fill('[name="email"]', "{{TEST_USER_EMAIL}}");
+  await page.fill('[name="password"]', "{{TEST_USER_PASSWORD}}");
+  await page.getByRole("button", { name: "Sign In" }).click();
+
+  // Guest cart item should appear in user cart
+  await page.goto("/cart");
+  await expect(page.getByText("{{PRODUCT_NAME}}")).toBeVisible();
+});
+```
+
+## MSW Mock PG Server (CI)
+
+```typescript
+// mocks/pg-server.ts
+export const pgHandlers = [
+  http.post("{{PG_ENDPOINT}}", async ({ request }) => {
+    const body = await request.json() as Record<string, unknown>;
+    const card = body.cardNumber as string;
+
+    if (card === "4000000000000002") {
+      return HttpResponse.json({ status: "FAILED", code: "CARD_DECLINED" }, { status: 400 });
+    }
+    return HttpResponse.json({
+      status: "APPROVED",
+      transactionId: `mock_${Date.now()}`,
+    });
+  }),
+];
+```