feat: add sheet component and docs qa baseline

2026-03-19 18:46:20 +08:00
parent 71ebb010b9
commit f318f94c9a
28 changed files with 1799 additions and 91 deletions
@@ -26,6 +26,24 @@ type LaunchFormValues = {
  summary: string;
 };

+async function waitForCondition(
+  predicate: () => boolean,
+  message: string,
+  timeoutMs = 2000
+) {
+  const startedAt = Date.now();
+
+  while (Date.now() - startedAt < timeoutMs) {
+    if (predicate()) {
+      return;
+    }
+
+    await new Promise((resolve) => window.setTimeout(resolve, 16));
+  }
+
+  throw new Error(message);
+}
+
 function LaunchSettingsForm() {
  const [submitted, setSubmitted] = useState<LaunchFormValues | null>(null);
  const form = useForm<LaunchFormValues>({
@@ -184,4 +202,67 @@ export default meta;

 type Story = StoryObj<typeof meta>;

-export const LaunchSettings: Story = {};
+export const LaunchSettings: Story = {
+  play: async ({ canvasElement }) => {
+    const emailInput = canvasElement.querySelector('input[placeholder="team@cadence.dev"]');
+
+    if (!(emailInput instanceof HTMLInputElement)) {
+      throw new Error("Expected the email input to render.");
+    }
+
+    emailInput.focus();
+    emailInput.value = "team@cadence.dev";
+    emailInput.dispatchEvent(new Event("input", { bubbles: true }));
+    emailInput.dispatchEvent(new Event("change", { bubbles: true }));
+
+    const roleTrigger = [...canvasElement.querySelectorAll('[data-slot="trigger"]')].find(
+      (element) => element.textContent?.includes("Design")
+    );
+
+    if (!(roleTrigger instanceof HTMLElement)) {
+      throw new Error("Expected the role select trigger to render.");
+    }
+
+    roleTrigger.click();
+
+    await waitForCondition(
+      () => document.body.querySelector('[role="listbox"]') instanceof HTMLElement,
+      "Expected the role select content to open."
+    );
+
+    const legalOption = [...document.body.querySelectorAll('[role="option"]')].find((element) =>
+      element.textContent?.includes("Legal")
+    );
+
+    if (!(legalOption instanceof HTMLElement)) {
+      throw new Error("Expected to find the Legal option.");
+    }
+
+    legalOption.click();
+
+    const summaryInput = canvasElement.querySelector("textarea");
+
+    if (!(summaryInput instanceof HTMLTextAreaElement)) {
+      throw new Error("Expected the launch summary textarea to render.");
+    }
+
+    summaryInput.value = "This release coordinates approvals, copy, and rollout risks.";
+    summaryInput.dispatchEvent(new Event("input", { bubbles: true }));
+    summaryInput.dispatchEvent(new Event("change", { bubbles: true }));
+
+    const submitButton = [...canvasElement.querySelectorAll("button")].find((element) =>
+      element.textContent?.includes("Save settings")
+    );
+
+    if (!(submitButton instanceof HTMLButtonElement)) {
+      throw new Error("Expected the form submit button to render.");
+    }
+
+    submitButton.click();
+
+    await waitForCondition(
+      () => canvasElement.textContent?.includes('"email": "team@cadence.dev"') ?? false,
+      "Expected the submitted payload preview to update."
+    );
+  }
+};