plugin-manager.e2e.ts 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. // Web e2e scenario: the plugin manager tab in Plugins settings over a scaffold
  2. // profile runtime — one installed bundle switched on, one plain plugin added to
  3. // an agent preset and switched off there, and the configuration tab writing one
  4. // field under that preset's settings scope. Zero model calls: everything is
  5. // client state plus the profile files and the settings document, so there is
  6. // no fixture and a stray stream would fail loud on the open llm seam.
  7. import { mkdtemp, readFile, rm } from 'node:fs/promises'
  8. import { tmpdir } from 'node:os'
  9. import { fileURLToPath } from 'node:url'
  10. import type { Browser, Page } from 'playwright'
  11. import { chromium } from 'playwright'
  12. import { afterAll, beforeAll, describe, expect, it, onTestFailed } from 'vitest'
  13. import { join } from 'node:path'
  14. import {
  15. assertFixtureInventory, captureStableAria, compareOrRefreshGolden,
  16. launchWebScaffold, watchConsole, webSnapshotMode, type WebScaffold,
  17. } from './scaffold.ts'
  18. import { ZH_BROWSER_LOCALE, saveFailureShot } from './support.ts'
  19. const SNAPSHOT_DIR = fileURLToPath(new URL('./expected/plugin-manager', import.meta.url))
  20. const MANAGER_EXPECTED = join(SNAPSHOT_DIR, 'manager.expected.md')
  21. const DETAIL_EXPECTED = join(SNAPSHOT_DIR, 'preset-detail.expected.md')
  22. const FIXTURE_PLUGINS = fileURLToPath(new URL('./fixtures/plugins', import.meta.url))
  23. const MODE = webSnapshotMode()
  24. describe('web e2e: plugin manager', () => {
  25. let scaffold: WebScaffold
  26. let browser: Browser
  27. let page: Page
  28. let tripwire: ReturnType<typeof watchConsole>
  29. /** The writable preset root the scenario's preset overlays land in. */
  30. let presetRoot: string
  31. beforeAll(async () => {
  32. presetRoot = await mkdtemp(join(tmpdir(), 'dsh-web-e2e-presets-'))
  33. scaffold = await launchWebScaffold({
  34. // The scaffold pins a roster without a user root, so a preset's user
  35. // patch layer needs one: an empty root beside the shipped presets.
  36. agentPresets: { roots: [{ path: presetRoot, trust: 'user' }], default: 'standard' },
  37. profileRuntime: {
  38. packages: [
  39. { dir: join(FIXTURE_PLUGINS, 'fixture-bundle') },
  40. { dir: join(FIXTURE_PLUGINS, 'fixture-plain-plugin') },
  41. ],
  42. },
  43. })
  44. browser = await chromium.launch()
  45. page = await browser.newPage({ viewport: { width: 1680, height: 1000 }, locale: ZH_BROWSER_LOCALE })
  46. tripwire = watchConsole(page)
  47. await page.goto(scaffold.authenticatedUrl, { waitUntil: 'load' })
  48. await page.waitForSelector('[class*="frame"]', { timeout: 30_000 })
  49. }, 120_000)
  50. afterAll(async () => {
  51. await browser?.close()
  52. await scaffold?.close()
  53. await rm(presetRoot, { recursive: true, force: true })
  54. })
  55. /** Open the settings dialog on the Plugins section and select one of its tabs. */
  56. async function openPluginsTab(tab: string) {
  57. if (await page.getByRole('dialog', { name: '设置' }).count() > 0) {
  58. await page.keyboard.press('Escape')
  59. await expect.poll(() => page.getByRole('dialog', { name: '设置' }).count(), { timeout: 5_000 }).toBe(0)
  60. }
  61. await page.getByRole('button', { name: '设置', exact: true }).click()
  62. const dialog = page.getByRole('dialog', { name: '设置' })
  63. await dialog.waitFor({ timeout: 10_000 })
  64. await dialog.getByRole('button', { name: '插件', exact: true }).click()
  65. await dialog.getByRole('tab', { name: tab, exact: true }).click()
  66. await expect
  67. .poll(() => dialog.getByRole('tab', { name: tab, exact: true }).getAttribute('aria-selected'), { timeout: 5_000 })
  68. .toBe('true')
  69. return dialog
  70. }
  71. /** Open the settings dialog on one preset's detail page. */
  72. async function openPresetDetail(name: string) {
  73. if (await page.getByRole('dialog', { name: '设置' }).count() > 0) {
  74. await page.keyboard.press('Escape')
  75. await expect.poll(() => page.getByRole('dialog', { name: '设置' }).count(), { timeout: 5_000 }).toBe(0)
  76. }
  77. await page.getByRole('button', { name: '设置', exact: true }).click()
  78. const dialog = page.getByRole('dialog', { name: '设置' })
  79. await dialog.waitFor({ timeout: 10_000 })
  80. await dialog.getByRole('button', { name: 'Agent 预设', exact: true }).click()
  81. await dialog.getByRole('button', { name: `配置: ${name}` }).click()
  82. await dialog.getByRole('heading', { name }).waitFor({ timeout: 10_000 })
  83. return dialog
  84. }
  85. /** One file under the harness home, or the empty string while it does not exist. */
  86. async function homeFile(...segments: string[]): Promise<string> {
  87. return readFile(join(scaffold.harnessHome, ...segments), 'utf8').catch(() => '')
  88. }
  89. it('lists the profile packages with their switches', async () => {
  90. onTestFailed(() => saveFailureShot(page, 'web-e2e-plugin-manager-list'))
  91. const dialog = await openPluginsTab('插件管理')
  92. await dialog.getByText('示例组合包', { exact: true }).waitFor({ timeout: 20_000 })
  93. expect(await dialog.getByText('示例插件', { exact: true }).count()).toBe(1)
  94. // The bundle is installed but not enabled; the plain plugin carries no
  95. // switch, only its **Add to…** menu; uninstall waits on the plugin's page,
  96. // which names the module and where it is composed, and the crumb leads back.
  97. const toggle = dialog.getByRole('switch', { name: '启用 示例组合包' })
  98. expect(await toggle.getAttribute('aria-checked')).toBe('false')
  99. expect(await dialog.getByRole('switch', { name: '启用 示例插件' }).count()).toBe(0)
  100. expect(await dialog.getByRole('button', { name: '加入到…' }).count()).toBe(1)
  101. expect(await dialog.getByRole('button', { name: '卸载 示例插件' }).count()).toBe(0)
  102. await dialog.getByRole('button', { name: '查看 示例插件' }).click()
  103. await dialog.getByRole('button', { name: '卸载 示例插件' }).waitFor({ timeout: 5_000 })
  104. await dialog.getByText('尚未加入', { exact: true }).waitFor({ timeout: 5_000 })
  105. await dialog.getByRole('button', { name: '返回插件列表' }).click()
  106. await expect.poll(() => dialog.getByRole('button', { name: '卸载 示例插件' }).count(), { timeout: 5_000 }).toBe(0)
  107. const snapshot = await captureStableAria(page, '[role="dialog"]', scaffold.workspaceCwd)
  108. await compareOrRefreshGolden(MANAGER_EXPECTED, snapshot, MODE)
  109. expect(tripwire.pageErrors).toEqual([])
  110. }, 60_000)
  111. it('enables a bundle into the profile manifest and reports the restart it waits for', async () => {
  112. onTestFailed(() => saveFailureShot(page, 'web-e2e-plugin-manager-enable'))
  113. const dialog = await openPluginsTab('插件管理')
  114. const toggle = dialog.getByRole('switch', { name: '启用 示例组合包' })
  115. await toggle.waitFor({ timeout: 20_000 })
  116. await toggle.click()
  117. await expect.poll(async () => (await homeFile('profiles', 'scaffold', 'package.json')).includes('"@fixture/bundle"'), {
  118. timeout: 10_000,
  119. }).toBe(true)
  120. const manifest = JSON.parse(await homeFile('profiles', 'scaffold', 'package.json')) as {
  121. dsh: { profile: { bundles: string[] } }
  122. }
  123. expect(manifest.dsh.profile.bundles).toEqual(['@fixture/bundle'])
  124. // A startup-applied profile: the switch is on, and the banner names the package.
  125. await expect.poll(() => toggle.getAttribute('aria-checked'), { timeout: 10_000 }).toBe('true')
  126. await dialog.getByText('以下更改会在下次启动生效:示例组合包').waitFor({ timeout: 10_000 })
  127. expect(await dialog.getByText('需重启', { exact: true }).count()).toBe(1)
  128. // The pack's page lists its rows from the probe. A profile that applies
  129. // patches at its next start keeps them read-only: no row switch.
  130. await dialog.getByRole('button', { name: '查看 示例组合包' }).click()
  131. await dialog.locator('[data-plugin-row]', { hasText: 'fixture-row' }).waitFor({ timeout: 10_000 })
  132. expect(await dialog.getByRole('switch', { name: '启用组件 fixture-row' }).count()).toBe(0)
  133. await dialog.getByRole('button', { name: '返回插件列表' }).click()
  134. expect(tripwire.pageErrors).toEqual([])
  135. }, 60_000)
  136. it('adds a plain plugin to a preset, then switches it off and deletes it on the preset\'s detail page', async () => {
  137. onTestFailed(() => saveFailureShot(page, 'web-e2e-plugin-manager-preset-row'))
  138. const dialog = await openPluginsTab('插件管理')
  139. await dialog.getByRole('button', { name: '加入到…' }).click()
  140. await page.getByRole('menuitem', { name: '预设:标准模式' }).click()
  141. const overlay = (): Promise<string> => readFile(join(presetRoot, 'standard', 'cordis.patch.yml'), 'utf8').catch(() => '')
  142. await expect.poll(async () => (await overlay()).includes('@fixture/plain-plugin'), { timeout: 10_000 }).toBe(true)
  143. expect(await overlay()).toContain('id: fixture/plain-plugin')
  144. // The **Add to…** menu now marks that preset as joined. Escape would
  145. // close the settings dialog as well, so the menu closes through its anchor.
  146. await dialog.getByRole('button', { name: '加入到…' }).click()
  147. await page.getByRole('menuitem', { name: '预设:标准模式(已加入)' }).waitFor({ timeout: 5_000 })
  148. await dialog.getByRole('button', { name: '加入到…' }).click()
  149. await expect.poll(() => page.getByRole('menuitem').count(), { timeout: 5_000 }).toBe(0)
  150. // The preset's detail page, behind the gear on its card, lists the new
  151. // row under the package's title as the user's, switched on, with the
  152. // local mark.
  153. await dialog.getByRole('button', { name: 'Agent 预设', exact: true }).click()
  154. await dialog.getByRole('button', { name: '配置: 标准模式' }).click()
  155. await dialog.getByRole('heading', { name: '标准模式' }).waitFor({ timeout: 10_000 })
  156. const presetRow = dialog.locator('[data-preset-row="fixture/plain-plugin"]')
  157. const rowToggle = presetRow.getByRole('switch', { name: '启用 示例插件' })
  158. await rowToggle.waitFor({ timeout: 10_000 })
  159. expect(await rowToggle.getAttribute('aria-checked')).toBe('true')
  160. expect(await presetRow.getAttribute('data-plugin-source')).toBe('user')
  161. expect(await presetRow.getByText('本地', { exact: true }).count()).toBe(1)
  162. const detailSnapshot = await captureStableAria(page, '[data-preset-detail="standard"]', scaffold.workspaceCwd)
  163. await compareOrRefreshGolden(DETAIL_EXPECTED, detailSnapshot, MODE)
  164. await rowToggle.click()
  165. await expect.poll(async () => (await overlay()).includes('disabled: true'), { timeout: 10_000 }).toBe(true)
  166. await expect.poll(() => rowToggle.getAttribute('aria-checked'), { timeout: 10_000 }).toBe('false')
  167. await presetRow.getByRole('button', { name: '从这个预设删除 示例插件' }).click()
  168. await expect.poll(async () => (await overlay()).includes('@fixture/plain-plugin'), { timeout: 10_000 }).toBe(false)
  169. await expect.poll(() => rowToggle.count(), { timeout: 10_000 }).toBe(0)
  170. // The breadcrumb leads back to the roster.
  171. await dialog.getByRole('button', { name: '返回 Agent 预设' }).click()
  172. await dialog.getByRole('button', { name: '配置: 标准模式' }).waitFor({ timeout: 10_000 })
  173. expect(tripwire.pageErrors).toEqual([])
  174. }, 60_000)
  175. it('writes a configuration field under one preset scope and leaves the shared value alone', async () => {
  176. onTestFailed(() => saveFailureShot(page, 'web-e2e-plugin-manager-scope'))
  177. const dialog = await openPresetDetail('标准模式')
  178. // The detail page's settings section edits the preset's own scope.
  179. const settingsSection = dialog.locator('[data-settings-scope="preset/standard"]')
  180. await settingsSection.getByRole('button', { name: '展开设置: 终端' }).click()
  181. const timeout = settingsSection.getByLabel('命令超时(毫秒)')
  182. await timeout.waitFor({ timeout: 10_000 })
  183. expect(await timeout.inputValue()).toBe('60000')
  184. await timeout.fill('12000')
  185. await settingsSection.getByRole('button', { name: '保存', exact: true }).click()
  186. const settings = (): Promise<string> => homeFile('settings.yaml')
  187. await expect.poll(async () => (await settings()).includes('timeoutMs: 12000'), { timeout: 10_000 }).toBe(true)
  188. const document = await settings()
  189. expect(document).toContain('scopes:')
  190. expect(document).toContain('preset/standard:')
  191. expect(document.indexOf('scopes:')).toBeLessThan(document.indexOf('timeoutMs: 12000'))
  192. // On the configuration tab the shared instance still shows the composed default.
  193. const plugins = await openPluginsTab('插件配置')
  194. await plugins.getByRole('button', { name: '展开设置: 终端' }).click()
  195. await expect.poll(() => plugins.getByLabel('命令超时(毫秒)').inputValue(), { timeout: 5_000 }).toBe('60000')
  196. expect(await plugins.getByText('已覆盖').count()).toBe(0)
  197. expect(tripwire.pageErrors).toEqual([])
  198. }, 60_000)
  199. it.skipIf(MODE === 'record')('keeps the fixture inventory closed', async () => {
  200. expect(tripwire.warnings).toEqual([])
  201. await assertFixtureInventory(SNAPSHOT_DIR, ['manager.expected.md', 'preset-detail.expected.md'])
  202. })
  203. })