Initial Commit

apps/testbed/e2e/libraries/feature-flags.spec.ts

@@ -0,0 +1,67 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Feature Flags Page", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/feature-flags");
+    await expect(page.locator('[data-testid="page-title"]')).toContainText(
+      "@suaveplan/feature-flags",
+    );
+  });
+
+  test("demo-card and output are visible", async ({ page }) => {
+    await expect(page.locator('[data-testid="demo-card"]')).toBeVisible();
+    await expect(page.locator('[data-testid="output"]')).toBeVisible();
+  });
+
+  test("initial output shows placeholder text", async ({ page }) => {
+    await expect(page.locator('[data-testid="output"]')).toContainText(
+      "Enter a user ID and click Evaluate",
+    );
+  });
+
+  test("evaluating with 'alice' shows new-checkout enabled", async ({ page }) => {
+    await page.locator('input[type="text"]').fill("alice");
+    await page.locator('button:has-text("Evaluate")').click();
+
+    const output = page.locator('[data-testid="output"]');
+    await expect(output).toContainText("new-checkout");
+    // alice is in the user-target list, so new-checkout should be enabled
+    const text = await output.textContent();
+    const lines = text?.split("\n") ?? [];
+    const checkoutLine = lines.find((l) => l.includes("new-checkout"));
+    expect(checkoutLine).toContain("✓");
+  });
+
+  test("evaluating with 'carol' shows new-checkout disabled", async ({ page }) => {
+    await page.locator('input[type="text"]').fill("carol");
+    await page.locator('button:has-text("Evaluate")').click();
+
+    const output = page.locator('[data-testid="output"]');
+    await expect(output).toContainText("new-checkout");
+    const text = await output.textContent();
+    const lines = text?.split("\n") ?? [];
+    const checkoutLine = lines.find((l) => l.includes("new-checkout"));
+    expect(checkoutLine).toContain("✗");
+  });
+
+  test("dark-mode flag is always enabled (100% rollout)", async ({ page }) => {
+    await page.locator('input[type="text"]').fill("any-user-id");
+    await page.locator('button:has-text("Evaluate")').click();
+
+    const output = page.locator('[data-testid="output"]');
+    await expect(output).toContainText("dark-mode");
+    const text = await output.textContent();
+    const lines = text?.split("\n") ?? [];
+    const darkModeLine = lines.find((l) => l.includes("dark-mode"));
+    expect(darkModeLine).toContain("✓");
+  });
+
+  test("three flags appear in results", async ({ page }) => {
+    await page.locator('button:has-text("Evaluate")').click();
+
+    const output = page.locator('[data-testid="output"]');
+    await expect(output).toContainText("beta-ui");
+    await expect(output).toContainText("new-checkout");
+    await expect(output).toContainText("dark-mode");
+  });
+});