fix: update E2E tests for Radix dialog component changes (#87)

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>
This commit is contained in:
Wes
2026-04-02 15:13:19 -07:00
committed by GitHub
parent ffed31739a
commit d6e9359fca
2 changed files with 9 additions and 9 deletions
+7 -6
View File
@@ -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",
+2 -3
View File
@@ -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");