mirror of
https://github.com/anomalyco/opencode.git
synced 2026-10-30 01:30:33 +00:00
86 lines
4.2 KiB
TypeScript
86 lines
4.2 KiB
TypeScript
import { expect, story } from "../../stories/playwright/story"
|
||
|
||
story("enables Any only after confirmation and supports resetting the preview", async ({ mount }) => {
|
||
const component = await mount("app-current-session-surface--web-search-request")
|
||
const card = component.getByRole("region", { name: "Third-party web search" })
|
||
await expect(card.getByRole("button", { name: "Enable", exact: true })).toBeEnabled()
|
||
await expect(card.getByRole("button", { name: "Search provider Any", exact: true })).toBeVisible()
|
||
await card.getByRole("button", { name: "Enable", exact: true }).click()
|
||
await expect(component.getByRole("status")).toHaveText("Web search selection (local only): random")
|
||
await expect(card).toHaveCount(0)
|
||
await component.getByRole("button", { name: "Reset", exact: true }).click()
|
||
await expect(card.getByRole("button", { name: "Enable", exact: true })).toBeEnabled()
|
||
})
|
||
|
||
story("declining search is an explicit disabled selection", async ({ mount }) => {
|
||
const component = await mount("app-current-session-surface--web-search-request")
|
||
const card = component.getByRole("region", { name: "Third-party web search" })
|
||
await card.getByRole("button", { name: "Don’t use search", exact: true }).click()
|
||
await expect(component.getByRole("status")).toHaveText("Web search selection (local only): false")
|
||
await expect(card).toHaveCount(0)
|
||
})
|
||
|
||
story("sizes provider options to their content", async ({ mount, page }) => {
|
||
const component = await mount("app-current-session-surface--web-search-request")
|
||
await component.getByRole("button", { name: "Search provider Any", exact: true }).click()
|
||
const menu = page.getByRole("listbox", { name: "Search provider", exact: true })
|
||
await expect(menu).toBeVisible()
|
||
|
||
const metrics = await menu.evaluate((listbox) => {
|
||
const items = Array.from(listbox.querySelectorAll('[data-component="menu-v2-item"]'))
|
||
|
||
const longest = items
|
||
.flatMap((item) => {
|
||
const label = item.querySelector('[data-slot="menu-v2-item-content"]')?.getBoundingClientRect()
|
||
const check = item.querySelector('[data-slot="menu-v2-item-indicator"]')?.getBoundingClientRect()
|
||
|
||
return label && check ? [{ label, check }] : []
|
||
})
|
||
.toSorted((a, b) => b.label.width - a.label.width)[0]
|
||
|
||
return {
|
||
width: listbox.getBoundingClientRect().width,
|
||
gap: longest ? longest.check.left - longest.label.right : 0,
|
||
}
|
||
})
|
||
|
||
expect(metrics.width).toBeLessThan(160)
|
||
expect(metrics.gap).toBe(24)
|
||
})
|
||
|
||
for (const width of [360, 1200]) {
|
||
for (const direction of ["ltr", "rtl"]) {
|
||
for (const theme of ["light", "dark"]) {
|
||
story(`selects and confirms a provider at ${width}px in ${direction} ${theme}`, async ({ mount, page }) => {
|
||
await page.setViewportSize({ width, height: 900 })
|
||
|
||
const component = await mount("app-current-session-surface--web-search-request", {
|
||
globals: { theme, direction },
|
||
})
|
||
|
||
const card = component.getByRole("region", { name: "Third-party web search" })
|
||
const select = card.getByRole("button", { name: /^Search provider/ })
|
||
await expect(select).toBeEnabled()
|
||
await expect(card).toHaveCSS("direction", direction)
|
||
expect(await card.evaluate((node) => node.scrollWidth <= node.clientWidth)).toBe(true)
|
||
await select.focus()
|
||
await select.press("Enter")
|
||
const list = page.getByRole("listbox", { name: "Search provider", exact: true })
|
||
await expect(list).toHaveCSS("direction", direction)
|
||
await list.getByRole("option", { name: "Parallel", exact: true }).click()
|
||
await expect(select).toHaveText("Parallel")
|
||
await expect(card).toBeVisible()
|
||
await expect(component.getByRole("status")).toHaveText("Ready")
|
||
await expect(select).toBeFocused()
|
||
await select.press("Tab")
|
||
await expect(card.getByRole("button", { name: "Don’t use search", exact: true })).toBeFocused()
|
||
await page.keyboard.press("Tab")
|
||
const enable = card.getByRole("button", { name: "Enable", exact: true })
|
||
await expect(enable).toBeFocused()
|
||
await enable.press("Enter")
|
||
await expect(component.getByRole("status")).toHaveText("Web search selection (local only): parallel")
|
||
await expect(card).toHaveCount(0)
|
||
})
|
||
}
|
||
}
|
||
}
|