History

Add e2e scenario for sidebar Integrations heading link and connect button

Rhys Sullivan committed 4 months ago

Commit b1cd0211 parent ed19aab2 files · +53 −0Browse files

Unified · Split

2 files
  1. e2e/scenarios/sidebar-integrations-heading-ui.test.ts +51 −0
  2. packages/app/src/web/shell.tsx +2 −0
e2e/scenarios/sidebar-integrations-heading-ui.test.ts+51−0
@@ -0,0 +1,51 @@
1+// The sidebar "INTEGRATIONS" section heading used to be inert text. It is now a
2+// live link to the integrations page, and a plus button beside it opens the
3+// same Connect dialog the integrations page uses. This drives the browser path:
4+// 1. Land on a non-integrations route so navigation is observable.
5+// 2. Click the sidebar Integrations heading and assert we arrive on the
6+// integrations page (its own "Integrations" <h1> renders).
7+// 3. Click the plus button and assert the "Connect an integration" dialog
8+// opens, without leaving the current page.
9+import { Effect } from "effect";
10+
11+import { scenario } from "../src/scenario";
12+import { Browser, Target } from "../src/services";
13+
14+scenario(
15+ "Sidebar · the Integrations heading links to the page and its plus button opens the Connect dialog",
16+ { timeout: 120_000 },
17+ Effect.gen(function* () {
18+ const target = yield* Target;
19+ const browser = yield* Browser;
20+ const identity = yield* target.newIdentity();
21+
22+ yield* browser.session(identity, async ({ page, step }) => {
23+ await step("Open the app on the Secrets route", async () => {
24+ await page.goto("/secrets", { waitUntil: "domcontentloaded" });
25+ await page.getByTestId("sidebar-integrations-heading").waitFor();
26+ });
27+
28+ await step(
29+ "Clicking the sidebar Integrations heading opens the integrations page",
30+ async () => {
31+ await page.getByTestId("sidebar-integrations-heading").click();
32+ // The integrations page renders its own title as an <h1> inside <main>;
33+ // the sidebar copy is scoped out via getByRole("main").
34+ await page
35+ .getByRole("main")
36+ .getByRole("heading", { name: "Integrations", level: 1 })
37+ .waitFor({ timeout: 20_000 });
38+ },
39+ );
40+
41+ await step("The sidebar plus button opens the Connect dialog", async () => {
42+ await page.getByTestId("sidebar-connect-integration").click();
43+ const dialog = page.getByRole("dialog");
44+ await dialog.waitFor({ timeout: 20_000 });
45+ await dialog
46+ .getByRole("heading", { name: "Connect an integration" })
47+ .waitFor({ state: "visible", timeout: 20_000 });
48+ });
49+ });
50+ }),
51+);
packages/app/src/web/shell.tsx+2−0
@@ -212,6 +212,7 @@ function SidebarContent(props: { · 211 unmodified lines
212212 <Link
213213 to="/{-$orgSlug}"
214214 onClick={props.onNavigate}
215+ data-testid="sidebar-integrations-heading"
215216 className="text-xs font-medium uppercase tracking-widest text-muted-foreground transition-colors hover:text-foreground"
216217 >
217218 Integrations
@@ -220,6 +221,7 @@ function SidebarContent(props: { · 2 unmodified lines
220221 variant="ghost"
221222 size="icon-xs"
222223 aria-label="Connect an integration"
224+ data-testid="sidebar-connect-integration"
223225 className="text-muted-foreground/60 hover:text-foreground"
224226 onClick={() => setConnectOpen(true)}
225227 >