From f996fafbe1845c0f85c84ff97eba25fa2c9bf0e2 Mon Sep 17 00:00:00 2001
From: marinom2 <martinbmarinov@gmail.com>
Date: Wed, 29 Jul 2026 10:52:38 +0300
Subject: [PATCH] fix(e2e): assert the hero CTA by its real role, not the
 component's name
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`landing renders the dual-track hero and CTAs` has failed on main since at
least 21 July, so CI has been red on every merge and the signal was worthless.

The assertion looked for `getByRole("button", { name: /Get the app/i })`, but
the CTA is `<Button asChild><Link href="/onboard">…</Link></Button>`. `asChild`
swaps the `<button>` for a Radix `Slot`, which renders the child - so the DOM
node is an `<a>` and its accessible role is "link". No `button` with that name
has ever existed on the page.

The sibling assertion one line above already gets this right for the Builder
hub CTA, which is the same construction; only this line was wrong. Asserting
the shipped role rather than the wrapping component's name is also what makes
the test meaningful: role is what assistive tech sees.

13 passed locally (was 12 passed, 1 failed).
---
 tests/e2e/smoke.spec.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/tests/e2e/smoke.spec.ts b/tests/e2e/smoke.spec.ts
index ce05a3a..bcbe74f 100644
--- a/tests/e2e/smoke.spec.ts
+++ b/tests/e2e/smoke.spec.ts
@@ -7,7 +7,11 @@ test("landing renders the dual-track hero and CTAs", async ({ page }) => {
   await page.goto("/");
   await expect(page.getByRole("heading", { name: /Build with, and run for/i })).toBeVisible();
   await expect(page.getByRole("link", { name: /Builder hub/i }).first()).toBeVisible(); // build track CTA
-  await expect(page.getByRole("button", { name: /Get the app/i })).toBeVisible(); // worker track CTA
+  // Both CTAs are <Button asChild><Link>…</Link></Button>. asChild swaps the
+  // <button> for a Radix Slot that renders the child, so the DOM node is an <a>
+  // and the accessible role is "link", not "button" - assert what ships, not
+  // the component name that wraps it.
+  await expect(page.getByRole("link", { name: /Get the app/i })).toBeVisible(); // worker track CTA
 });
 
 test("nav: connect button + network toggle present", async ({ page }) => {