From b6dfe99dda4ef319fab1fff8b93776c603adcb5d Mon Sep 17 00:00:00 2001
From: Wes <wesb@block.xyz>
Date: Thu, 2 Apr 2026 15:09:19 -0700
Subject: [PATCH] fix: update E2E tests for Radix dialog component changes

The Tailwind v4 upgrade (#85) replaced dialog components with Radix UI
primitives that use aria-labelledby instead of aria-label. Update E2E
tests to check DialogTitle h2 text instead of missing aria-label attrs,
and use getByRole("button", { name: "Close" }) for the X close button.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 tests/e2e/personas.spec.ts | 13 +++++++------
 tests/e2e/skills.spec.ts   |  5 ++---
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/tests/e2e/personas.spec.ts b/tests/e2e/personas.spec.ts
index 0dfe5de..6ecc6bc 100644
--- a/tests/e2e/personas.spec.ts
+++ b/tests/e2e/personas.spec.ts
@@ -55,7 +55,9 @@ test.describe("Personas view", () => {
       .click();
     const dialog = page.getByRole("dialog");
     await expect(dialog).toBeVisible();
-    await expect(dialog).toHaveAttribute("aria-label", "Create persona");
+    await expect(
+      dialog.locator("h2", { hasText: "New Persona" }),
+    ).toBeVisible();
     // Check form fields
     await expect(dialog.getByPlaceholder("e.g. Code Reviewer")).toBeVisible();
     await expect(
@@ -109,7 +111,7 @@ test.describe("Personas view", () => {
       .first()
       .click();
     await expect(page.getByRole("dialog")).toBeVisible();
-    await page.getByLabel("Close").click();
+    await page.getByRole("button", { name: "Close" }).click();
     await expect(page.getByRole("dialog")).not.toBeVisible();
   });
 
@@ -120,10 +122,9 @@ test.describe("Personas view", () => {
     await page.getByLabel("Persona: Code Reviewer").click();
     const dialog = page.getByRole("dialog");
     await expect(dialog).toBeVisible();
-    await expect(dialog).toHaveAttribute(
-      "aria-label",
-      "Edit persona Code Reviewer",
-    );
+    await expect(
+      dialog.locator("h2", { hasText: "Edit Persona" }),
+    ).toBeVisible();
     // Fields should be pre-filled
     await expect(dialog.getByPlaceholder("e.g. Code Reviewer")).toHaveValue(
       "Code Reviewer",
diff --git a/tests/e2e/skills.spec.ts b/tests/e2e/skills.spec.ts
index 25a6eb7..52b5f58 100644
--- a/tests/e2e/skills.spec.ts
+++ b/tests/e2e/skills.spec.ts
@@ -45,7 +45,7 @@ test.describe("Skills view", () => {
     await page.getByRole("button", { name: "New Skill" }).first().click();
     const dialog = page.getByRole("dialog");
     await expect(dialog).toBeVisible();
-    await expect(dialog).toHaveAttribute("aria-label", "New Skill");
+    await expect(dialog.locator("h2", { hasText: "New Skill" })).toBeVisible();
     // Check form fields
     await expect(dialog.getByPlaceholder("my-skill-name")).toBeVisible();
     await expect(
@@ -115,7 +115,7 @@ test.describe("Skills view", () => {
     await navigateToSkills(page);
     await page.getByRole("button", { name: "New Skill" }).first().click();
     await expect(page.getByRole("dialog")).toBeVisible();
-    await page.getByLabel("Close").click();
+    await page.getByRole("button", { name: "Close" }).click();
     await expect(page.getByRole("dialog")).not.toBeVisible();
   });
 
@@ -153,7 +153,6 @@ test.describe("Skills view", () => {
     await page.getByRole("menuitem", { name: "Edit" }).click();
     const dialog = page.getByRole("dialog");
     await expect(dialog).toBeVisible();
-    await expect(dialog).toHaveAttribute("aria-label", "Edit Skill");
     await expect(dialog.locator("h2", { hasText: "Edit Skill" })).toBeVisible();
     // Name should be pre-filled and read-only
     const nameInput = dialog.getByPlaceholder("my-skill-name");