app.spec.ts

e2e/ui/app.spec.ts

1. import AxeBuilder from '@axe-core/playwright'
2. import { expect, test, type Page } from '@playwright/test'
4. const sizes = [
5. { name: 'desktop', width: 1280, height: 800 },
6. { name: 'small', width: 760, height: 520 },
7. ]
8. const themes = ['light', 'dark'] as const
10. async function openApp(page: Page, theme: 'light' | 'dark', reduce = false) {
11. await page.emulateMedia({ colorScheme: theme })
12. if (reduce) {
13. const cdp = await page.context().newCDPSession(page)
14. await cdp.send('Emulation.setEmulatedMedia', {
15. features: [{ name: 'prefers-reduced-transparency', value: 'reduce' }],
16. })
17. }
18. await page.goto('/')
19. await expect(page.getByTestId('composer-input')).toBeVisible()
20. }
22. async function noSidewaysScroll(page: Page) {
23. const overflow = await page.evaluate(
24. () => document.documentElement.scrollWidth - document.documentElement.clientWidth,
25. )
26. expect(overflow).toBeLessThanOrEqual(0)
27. }
29. for (const size of sizes) {
30. for (const theme of themes) {
31. test.describe(`${size.name} ${theme}`, () => {
32. test.use({ viewport: { width: size.width, height: size.height } })
34. test('opens a chat, sends, streams and shows the cost', async ({ page }) => {
35. await openApp(page, theme)
36. await expect(page.locator('html')).toHaveAttribute('data-theme', theme)
37. await noSidewaysScroll(page)
38. await page.getByRole('button', { name: /Tidy a bash backup script/ }).click()
39. await expect(page.getByTestId('msg-assistant').first()).toContainText('rsync')
40. await expect(page.getByTestId('cost-line').first()).toContainText(/in, .* out, \$/)
41. await expect(page.getByTestId('chat-total')).toContainText('$')
42. await page.getByTestId('composer-input').fill('Explain the index I should add in SQL')
43. await expect(page.getByTestId('estimate')).toContainText('tokens in')
44. await page.getByTestId('send').click()
45. await expect(page.getByTestId('msg-assistant').last()).toContainText('CREATE INDEX')
46. await expect(page.getByTestId('msg-assistant').last().getByTestId('cost-line')).toBeVisible()
47. await noSidewaysScroll(page)
48. })
50. test('model picker shows prices and filters', async ({ page }) => {
51. await openApp(page, theme)
52. await page.getByTestId('model-button').click()
53. const picker = page.getByRole('dialog', { name: 'Choose a model' })
54. await expect(picker).toContainText('$0.09 / $0.55')
55. await picker.getByRole('tab', { name: 'Vision' }).click()
56. await expect(picker.getByRole('option')).toHaveCount(6)
57. await picker.getByRole('tab', { name: 'Local' }).click()
58. await expect(picker.getByRole('option').first()).toContainText('llama3.2')
59. await expect(picker.getByRole('option').first()).toContainText('free')
60. await picker.getByRole('option').first().click()
61. await expect(page.getByTestId('model-button')).toContainText('llama3.2')
62. await noSidewaysScroll(page)
63. })
64. })
65. }
66. }
68. test('stop keeps the partial reply', async ({ page }) => {
69. await openApp(page, 'light')
70. await page.getByTestId('composer-input').fill('Tell me about caching, at length')
71. await page.getByTestId('send').click()
72. await expect(page.getByTestId('stop')).toBeVisible()
73. await page.waitForTimeout(150)
74. await page.getByTestId('stop').click()
75. await expect(page.getByTestId('msg-assistant').last()).toContainText('Stopped.')
76. await expect(page.getByTestId('msg-assistant').last().getByTestId('cost-line')).toContainText('est.')
77. })
79. test('search finds a message and opens its chat', async ({ page }) => {
80. await openApp(page, 'dark')
81. await page.keyboard.press('ControlOrMeta+k')
82. await page.getByTestId('search-input').fill('bm25')
83. const hit = page.locator('.hits li').first()
84. await expect(hit).toContainText('How FTS5 bm25 ranking works')
85. await expect(hit.locator('mark').first()).toHaveText(/bm25/i)
86. await hit.click()
87. await expect(page.locator('.chat-title')).toHaveText('How FTS5 bm25 ranking works')
88. })
90. test('usage and settings open and read cleanly', async ({ page }) => {
91. await openApp(page, 'light')
92. await page.getByTestId('spend-meter').click()
93. await expect(page.getByRole('dialog', { name: 'Usage' })).toContainText('By model')
94. await expect(page.getByTestId('usage-total')).toContainText('$')
95. await page.keyboard.press('Escape')
96. await page.keyboard.press('ControlOrMeta+,')
97. const settings = page.getByRole('dialog', { name: 'Settings' })
98. await expect(settings).toContainText('Monthly budget')
99. await expect(settings.getByTestId('shortcut')).toBeVisible()
100. await noSidewaysScroll(page)
101. })
103. test('reduced transparency makes the panels opaque', async ({ page }) => {
104. await openApp(page, 'light', true)
105. const blur = await page.locator('.composer').evaluate((el) => getComputedStyle(el).backdropFilter)
106. expect(blur === 'none' || /blur\(0px\)/.test(blur)).toBe(true)
107. })
109. test('the quick prompt answers and shows the cost', async ({ page }) => {
110. await page.setViewportSize({ width: 640, height: 420 })
111. await page.goto('/quick.html')
112. await page.getByLabel('Quick prompt').fill('What should I index in SQL?')
113. await page.getByLabel('Quick prompt').press('Enter')
114. await expect(page.locator('.quick-body')).toContainText('CREATE INDEX')
115. await expect(page.getByTestId('cost-line')).toBeVisible()
116. await noSidewaysScroll(page)
117. })
119. test('an Enter pressed before the quick prompt has loaded is not lost', async ({ page }) => {
120. // Hold back the IPC client, as a slow first start would.
121. await page.route(/mockClient.*\.js/, async (route) => {
122. await new Promise((r) => setTimeout(r, 1500))
123. await route.continue()
124. })
125. await page.setViewportSize({ width: 640, height: 420 })
126. await page.goto('/quick.html')
127. await page.getByLabel('Quick prompt').fill('What should I index in SQL?')
128. await page.getByLabel('Quick prompt').press('Enter')
129. await expect(page.locator('.quick-body')).toContainText('CREATE INDEX', { timeout: 8000 })
130. })
132. for (const theme of themes) {
133. test(`no contrast or labeling problems (${theme})`, async ({ page }) => {
134. await openApp(page, theme)
135. await page.getByRole('button', { name: /Compare two pricing tiers/ }).click()
136. await expect(page.getByTestId('msg-assistant')).toBeVisible()
137. // axe ships newer Playwright types than the pinned runner; the Page is the same object.
138. const results = await new AxeBuilder({ page } as unknown as ConstructorParameters<typeof AxeBuilder>[0])
139. .withTags(['wcag2a', 'wcag2aa'])
140. .analyze()
141. const problems = results.violations.map(
142. (v) =>
143. `${v.id}: ${v.nodes
144. .map((n) => n.target.join(' '))
145. .slice(0, 4)
146. .join(' | ')}`,
147. )
148. expect(problems).toEqual([])
149. })
150. }