test(app): session actions

packages/app/e2e/actions.ts

@@ -4,6 +4,17 @@ import os from "node:os"
 import path from "node:path"
 import { execSync } from "node:child_process"
 import { modKey, serverUrl } from "./utils"
+import {
+  sessionItemSelector,
+  dropdownMenuTriggerSelector,
+  dropdownMenuContentSelector,
+  titlebarRightSelector,
+  popoverBodySelector,
+  listItemSelector,
+  listItemKeySelector,
+  listItemKeyStartsWithSelector,
+} from "./selectors"
+import type { createSdk } from "./utils"
 
 export async function defocus(page: Page) {
   await page.mouse.click(5, 5)
@@ -158,3 +169,103 @@ export function sessionIDFromUrl(url: string) {
   const match = /\/session\/([^/?#]+)/.exec(url)
   return match?.[1]
 }
+
+export async function hoverSessionItem(page: Page, sessionID: string) {
+  const sessionEl = page.locator(sessionItemSelector(sessionID)).first()
+  await expect(sessionEl).toBeVisible()
+  await sessionEl.hover()
+  return sessionEl
+}
+
+export async function openSessionMoreMenu(page: Page, sessionID: string) {
+  const sessionEl = await hoverSessionItem(page, sessionID)
+
+  const menuTrigger = sessionEl.locator(dropdownMenuTriggerSelector).first()
+  await expect(menuTrigger).toBeVisible()
+  await menuTrigger.click()
+
+  const menu = page.locator(dropdownMenuContentSelector).first()
+  await expect(menu).toBeVisible()
+  return menu
+}
+
+export async function clickMenuItem(menu: Locator, itemName: string | RegExp, options?: { force?: boolean }) {
+  const item = menu.getByRole("menuitem").filter({ hasText: itemName }).first()
+  await expect(item).toBeVisible()
+  await item.click({ force: options?.force })
+}
+
+export async function confirmDialog(page: Page, buttonName: string | RegExp) {
+  const dialog = page.getByRole("dialog").first()
+  await expect(dialog).toBeVisible()
+
+  const button = dialog.getByRole("button").filter({ hasText: buttonName }).first()
+  await expect(button).toBeVisible()
+  await button.click()
+}
+
+export async function openSharePopover(page: Page) {
+  const rightSection = page.locator(titlebarRightSelector)
+  const shareButton = rightSection.getByRole("button", { name: "Share" }).first()
+  await expect(shareButton).toBeVisible()
+
+  const popoverBody = page
+    .locator(popoverBodySelector)
+    .filter({ has: page.getByRole("button", { name: /^(Publish|Unpublish)$/ }) })
+    .first()
+
+  const opened = await popoverBody
+    .isVisible()
+    .then((x) => x)
+    .catch(() => false)
+
+  if (!opened) {
+    await shareButton.click()
+    await expect(popoverBody).toBeVisible()
+  }
+  return { rightSection, popoverBody }
+}
+
+export async function clickPopoverButton(page: Page, buttonName: string | RegExp) {
+  const button = page.getByRole("button").filter({ hasText: buttonName }).first()
+  await expect(button).toBeVisible()
+  await button.click()
+}
+
+export async function clickListItem(
+  container: Locator | Page,
+  filter: string | RegExp | { key?: string; text?: string | RegExp; keyStartsWith?: string },
+): Promise<Locator> {
+  let item: Locator
+
+  if (typeof filter === "string" || filter instanceof RegExp) {
+    item = container.locator(listItemSelector).filter({ hasText: filter }).first()
+  } else if (filter.keyStartsWith) {
+    item = container.locator(listItemKeyStartsWithSelector(filter.keyStartsWith)).first()
+  } else if (filter.key) {
+    item = container.locator(listItemKeySelector(filter.key)).first()
+  } else if (filter.text) {
+    item = container.locator(listItemSelector).filter({ hasText: filter.text }).first()
+  } else {
+    throw new Error("Invalid filter provided to clickListItem")
+  }
+
+  await expect(item).toBeVisible()
+  await item.click()
+  return item
+}
+
+export async function withSession<T>(
+  sdk: ReturnType<typeof createSdk>,
+  title: string,
+  callback: (session: { id: string; title: string }) => Promise<T>,
+): Promise<T> {
+  const session = await sdk.session.create({ title }).then((r) => r.data)
+  if (!session?.id) throw new Error("Session create did not return an id")
+
+  try {
+    return await callback(session)
+  } finally {
+    await sdk.session.delete({ sessionID: session.id }).catch(() => undefined)
+  }
+}

packages/app/e2e/app/server-default.spec.ts

@@ -1,5 +1,6 @@
 import { test, expect } from "../fixtures"
 import { serverName, serverUrl } from "../utils"
+import { clickListItem, closeDialog, clickMenuItem } from "../actions"
 
 const DEFAULT_SERVER_URL_KEY = "opencode.settings.dat:defaultServerUrl"
 
@@ -33,31 +34,18 @@ test("can set a default server on web", async ({ page, gotoSession }) => {
   const row = dialog.locator('[data-slot="list-item"]').filter({ hasText: serverName }).first()
   await expect(row).toBeVisible()
 
-  const menu = row.locator('[data-component="icon-button"]').last()
-  await menu.click()
-  await page.getByRole("menuitem", { name: "Set as default" }).click()
+  const menuTrigger = row.locator('[data-slot="dropdown-menu-trigger"]').first()
+  await expect(menuTrigger).toBeVisible()
+  await menuTrigger.click({ force: true })
+
+  const menu = page.locator('[data-component="dropdown-menu-content"]').first()
+  await expect(menu).toBeVisible()
+  await clickMenuItem(menu, /set as default/i)
 
   await expect.poll(() => page.evaluate((key) => localStorage.getItem(key), DEFAULT_SERVER_URL_KEY)).toBe(serverUrl)
   await expect(row.getByText("Default", { exact: true })).toBeVisible()
 
-  await page.keyboard.press("Escape")
-  const closed = await dialog
-    .waitFor({ state: "detached", timeout: 1500 })
-    .then(() => true)
-    .catch(() => false)
-
-  if (!closed) {
-    await page.keyboard.press("Escape")
-    const closedSecond = await dialog
-      .waitFor({ state: "detached", timeout: 1500 })
-      .then(() => true)
-      .catch(() => false)
-
-    if (!closedSecond) {
-      await page.locator('[data-component="dialog-overlay"]').click({ position: { x: 5, y: 5 } })
-      await expect(dialog).toHaveCount(0)
-    }
-  }
+  await closeDialog(page, dialog)
 
   await ensurePopoverOpen()
 

packages/app/e2e/app/session.spec.ts

@@ -1,21 +1,16 @@
 import { test, expect } from "../fixtures"
 import { promptSelector } from "../selectors"
+import { withSession } from "../actions"
 
 test("can open an existing session and type into the prompt", async ({ page, sdk, gotoSession }) => {
   const title = `e2e smoke ${Date.now()}`
-  const created = await sdk.session.create({ title }).then((r) => r.data)
 
-  if (!created?.id) throw new Error("Session create did not return an id")
-  const sessionID = created.id
-
-  try {
-    await gotoSession(sessionID)
+  await withSession(sdk, title, async (session) => {
+    await gotoSession(session.id)
 
     const prompt = page.locator(promptSelector)
     await prompt.click()
     await page.keyboard.type("hello from e2e")
     await expect(prompt).toContainText("hello from e2e")
-  } finally {
-    await sdk.session.delete({ sessionID }).catch(() => undefined)
-  }
+  })
 })

packages/app/e2e/app/titlebar-history.spec.ts

@@ -1,48 +1,42 @@
 import { test, expect } from "../fixtures"
-import { openSidebar } from "../actions"
+import { openSidebar, withSession } from "../actions"
 import { promptSelector } from "../selectors"
 
 test("titlebar back/forward navigates between sessions", async ({ page, slug, sdk, gotoSession }) => {
   await page.setViewportSize({ width: 1400, height: 800 })
 
   const stamp = Date.now()
-  const one = await sdk.session.create({ title: `e2e titlebar history 1 ${stamp}` }).then((r) => r.data)
-  const two = await sdk.session.create({ title: `e2e titlebar history 2 ${stamp}` }).then((r) => r.data)
 
-  if (!one?.id) throw new Error("Session create did not return an id")
-  if (!two?.id) throw new Error("Session create did not return an id")
+  await withSession(sdk, `e2e titlebar history 1 ${stamp}`, async (one) => {
+    await withSession(sdk, `e2e titlebar history 2 ${stamp}`, async (two) => {
+      await gotoSession(one.id)
 
-  try {
-    await gotoSession(one.id)
+      await openSidebar(page)
 
-    await openSidebar(page)
+      const link = page.locator(`[data-session-id="${two.id}"] a`).first()
+      await expect(link).toBeVisible()
+      await link.scrollIntoViewIfNeeded()
+      await link.click()
 
-    const link = page.locator(`[data-session-id="${two.id}"] a`).first()
-    await expect(link).toBeVisible()
-    await link.scrollIntoViewIfNeeded()
-    await link.click()
+      await expect(page).toHaveURL(new RegExp(`/${slug}/session/${two.id}(?:\\?|#|$)`))
+      await expect(page.locator(promptSelector)).toBeVisible()
 
-    await expect(page).toHaveURL(new RegExp(`/${slug}/session/${two.id}(?:\\?|#|$)`))
-    await expect(page.locator(promptSelector)).toBeVisible()
+      const back = page.getByRole("button", { name: "Back" })
+      const forward = page.getByRole("button", { name: "Forward" })
 
-    const back = page.getByRole("button", { name: "Back" })
-    const forward = page.getByRole("button", { name: "Forward" })
+      await expect(back).toBeVisible()
+      await expect(back).toBeEnabled()
+      await back.click()
 
-    await expect(back).toBeVisible()
-    await expect(back).toBeEnabled()
-    await back.click()
+      await expect(page).toHaveURL(new RegExp(`/${slug}/session/${one.id}(?:\\?|#|$)`))
+      await expect(page.locator(promptSelector)).toBeVisible()
 
-    await expect(page).toHaveURL(new RegExp(`/${slug}/session/${one.id}(?:\\?|#|$)`))
-    await expect(page.locator(promptSelector)).toBeVisible()
+      await expect(forward).toBeVisible()
+      await expect(forward).toBeEnabled()
+      await forward.click()
 
-    await expect(forward).toBeVisible()
-    await expect(forward).toBeEnabled()
-    await forward.click()
-
-    await expect(page).toHaveURL(new RegExp(`/${slug}/session/${two.id}(?:\\?|#|$)`))
-    await expect(page.locator(promptSelector)).toBeVisible()
-  } finally {
-    await sdk.session.delete({ sessionID: one.id }).catch(() => undefined)
-    await sdk.session.delete({ sessionID: two.id }).catch(() => undefined)
-  }
+      await expect(page).toHaveURL(new RegExp(`/${slug}/session/${two.id}(?:\\?|#|$)`))
+      await expect(page.locator(promptSelector)).toBeVisible()
+    })
+  })
 })

packages/app/e2e/files/file-open.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from "../fixtures"
-import { openPalette } from "../actions"
+import { openPalette, clickListItem } from "../actions"
 
 test("can open a file tab from the search palette", async ({ page, gotoSession }) => {
   await gotoSession()
@@ -9,9 +9,7 @@ test("can open a file tab from the search palette", async ({ page, gotoSession }
   const input = dialog.getByRole("textbox").first()
   await input.fill("package.json")
 
-  const fileItem = dialog.locator('[data-slot="list-item"][data-key^="file:"]').first()
-  await expect(fileItem).toBeVisible()
-  await fileItem.click()
+  await clickListItem(dialog, { keyStartsWith: "file:" })
 
   await expect(dialog).toHaveCount(0)
 

packages/app/e2e/files/file-viewer.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from "../fixtures"
-import { openPalette } from "../actions"
+import { openPalette, clickListItem } from "../actions"
 
 test("smoke file viewer renders real file content", async ({ page, gotoSession }) => {
   await gotoSession()
@@ -12,13 +12,7 @@ test("smoke file viewer renders real file content", async ({ page, gotoSession }
   const input = dialog.getByRole("textbox").first()
   await input.fill(file)
 
-  const fileItem = dialog
-    .locator(
-      '[data-slot="list-item"][data-key^="file:"][data-key*="packages"][data-key*="app"][data-key$="package.json"]',
-    )
-    .first()
-  await expect(fileItem).toBeVisible()
-  await fileItem.click()
+  await clickListItem(dialog, { text: /packages.*app.*package.json/ })
 
   await expect(dialog).toHaveCount(0)
 

packages/app/e2e/models/model-picker.spec.ts

@@ -1,5 +1,6 @@
 import { test, expect } from "../fixtures"
 import { promptSelector } from "../selectors"
+import { clickListItem } from "../actions"
 
 test("smoke model selection updates prompt footer", async ({ page, gotoSession }) => {
   await gotoSession()
@@ -32,9 +33,7 @@ test("smoke model selection updates prompt footer", async ({ page, gotoSession }
 
   await input.fill(model)
 
-  const item = dialog.locator(`[data-slot="list-item"][data-key="${key}"]`)
-  await expect(item).toBeVisible()
-  await item.click()
+  await clickListItem(dialog, { key })
 
   await expect(dialog).toHaveCount(0)
 

packages/app/e2e/models/models-visibility.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from "../fixtures"
 import { promptSelector } from "../selectors"
-import { closeDialog, openSettings } from "../actions"
+import { closeDialog, openSettings, clickListItem } from "../actions"
 
 test("hiding a model removes it from the model picker", async ({ page, gotoSession }) => {
   await gotoSession()

packages/app/e2e/projects/project-edit.spec.ts

@@ -14,7 +14,12 @@ test("dialog edit project updates name and startup script", async ({ page, gotoS
     await expect(trigger).toBeVisible()
     await trigger.click({ force: true })
 
-    await page.getByRole("menuitem", { name: "Edit" }).click()
+    const menu = page.locator('[data-component="dropdown-menu-content"]').first()
+    await expect(menu).toBeVisible()
+
+    const editItem = menu.getByRole("menuitem", { name: "Edit" }).first()
+    await expect(editItem).toBeVisible()
+    await editItem.click({ force: true })
 
     const dialog = page.getByRole("dialog")
     await expect(dialog).toBeVisible()

packages/app/e2e/projects/projects-close.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from "../fixtures"
-import { createTestProject, seedProjects, cleanupTestProject, openSidebar } from "../actions"
+import { createTestProject, seedProjects, cleanupTestProject, openSidebar, clickMenuItem } from "../actions"
 import { projectCloseHoverSelector, projectCloseMenuSelector, projectSwitchSelector } from "../selectors"
 import { dirSlug } from "../utils"
 
@@ -33,7 +33,7 @@ test("can close a project via project header more options menu", async ({ page,
   await page.setViewportSize({ width: 1400, height: 800 })
 
   const other = await createTestProject()
-  const otherName = other.split("/").pop()
+  const otherName = other.split("/").pop() ?? other
   const otherSlug = dirSlug(other)
   await seedProjects(page, { directory, extra: [other] })
 
@@ -59,17 +59,10 @@ test("can close a project via project header more options menu", async ({ page,
     await trigger.focus()
     await page.keyboard.press("Enter")
 
-    const close = page
-      .locator(projectCloseMenuSelector(otherSlug))
-      .or(page.getByRole("menuitem", { name: "Close" }))
-      .or(
-        page
-          .locator('[data-component="dropdown-menu-content"] [data-slot="dropdown-menu-item"]')
-          .filter({ hasText: "Close" }),
-      )
-      .first()
-    await expect(close).toBeVisible({ timeout: 10_000 })
-    await close.click({ force: true })
+    const menu = page.locator('[data-component="dropdown-menu-content"]').first()
+    await expect(menu).toBeVisible({ timeout: 10_000 })
+
+    await clickMenuItem(menu, /^Close$/i, { force: true })
     await expect(otherButton).toHaveCount(0)
   } finally {
     await cleanupTestProject(other)