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.
9import { Effect } from "effect";
10
11import { scenario } from "../src/scenario";
12import { Browser, Target } from "../src/services";
13
14scenario(
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
212 <Link212 <Link
213 to="/{-$orgSlug}"213 to="/{-$orgSlug}"
214 onClick={props.onNavigate}214 onClick={props.onNavigate}
215 data-testid="sidebar-integrations-heading"
215 className="text-xs font-medium uppercase tracking-widest text-muted-foreground transition-colors hover:text-foreground"216 className="text-xs font-medium uppercase tracking-widest text-muted-foreground transition-colors hover:text-foreground"
216 >217 >
217 Integrations218 Integrations
@@ -220,6 +221,7 @@ function SidebarContent(props: { · 2 unmodified lines
220 variant="ghost"221 variant="ghost"
221 size="icon-xs"222 size="icon-xs"
222 aria-label="Connect an integration"223 aria-label="Connect an integration"
224 data-testid="sidebar-connect-integration"
223 className="text-muted-foreground/60 hover:text-foreground"225 className="text-muted-foreground/60 hover:text-foreground"
224 onClick={() => setConnectOpen(true)}226 onClick={() => setConnectOpen(true)}
225 >227 >