components.test.tsx

src/components/components.test.tsx

1. import { act, fireEvent, render, screen } from '@testing-library/react'
2. import { beforeEach, describe, expect, it } from 'vitest'
4. import type { IpcClient } from '../ipc/client'
5. import { createMockClient } from '../ipc/mock/mockClient'
6. import { useStore } from '../state/store'
7. import { Markdown } from './Markdown'
8. import { prettyShortcut, SettingsPanel, shortcutFrom } from './SettingsPanel'
9. import { Sidebar } from './Sidebar'
11. const key = (code: string, mods: Partial<Record<'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey', boolean>> = {}) => ({
12. code,
13. metaKey: false,
14. ctrlKey: false,
15. altKey: false,
16. shiftKey: false,
17. ...mods,
18. })
20. describe('shortcut recorder', () => {
21. it('builds global-shortcut strings', () => {
22. expect(shortcutFrom(key('Space', { metaKey: true, shiftKey: true }), true)).toBe('CommandOrControl+Shift+Space')
23. expect(shortcutFrom(key('KeyJ', { ctrlKey: true, altKey: true }), false)).toBe('CommandOrControl+Alt+J')
24. expect(shortcutFrom(key('KeyJ'), true)).toBeNull() // a bare key is not a global shortcut
25. expect(shortcutFrom(key('ArrowUp', { metaKey: true }), true)).toBeNull()
26. expect(prettyShortcut('CommandOrControl+Shift+Space', true)).toBe('⌘⇧Space')
27. expect(prettyShortcut('CommandOrControl+Shift+Space', false)).toBe('Ctrl+Shift+Space')
28. })
29. })
31. describe('markdown', () => {
32. it('renders code and tables, and never raw HTML', () => {
33. const { container } = render(
34. <Markdown
35. text={
36. '**bold** <script>alert(1)</script><img src=x onerror=alert(1)>\n\n| a | b |\n|---|---|\n| 1 | 2 |\n\n```bash\necho hi\n```'
37. }
38. />,
39. )
40. expect(container.querySelector('strong')?.textContent).toBe('bold')
41. expect(container.querySelector('script')).toBeNull()
42. expect(container.querySelector('img')).toBeNull()
43. expect(container.querySelector('table')).not.toBeNull()
44. expect(container.querySelector('.codeblock-bar')?.textContent).toContain('bash')
45. expect(container.querySelector('.hljs-built_in, .hljs-keyword')).not.toBeNull()
46. })
48. it('links do not navigate the app', () => {
49. const opened: string[] = []
50. const client = { openUrl: async (url: string) => void opened.push(url) } as unknown as IpcClient
51. useStore.setState({ client })
52. render(<Markdown text="[site](https://example.com), [plain](http://example.com) and [bad](javascript:alert(1))" />)
53. const link = screen.getByText('site') as HTMLAnchorElement
54. const bad = screen.getByText('bad') as HTMLAnchorElement
55. expect(link.title).toBe('https://example.com')
56. expect(bad.getAttribute('href') ?? '').not.toMatch(/^javascript:/i)
57. // fireEvent returns false when the click's default (navigation) was prevented.
58. for (const a of [link, screen.getByText('plain'), bad]) expect(fireEvent.click(a)).toBe(false)
59. expect(opened).toEqual(['https://example.com'])
60. useStore.setState({ client: null })
61. })
62. })
64. describe('the store streams a reply', () => {
65. beforeEach(() => {
66. useStore.setState({ client: null, view: null, streaming: null, drafts: [], toasts: [] })
67. })
69. it('creates the chat, streams, then settles with a cost', async () => {
70. const client = createMockClient({ delay: 1, empty: true })
71. await act(() => useStore.getState().init(client))
72. let sent = false
73. await act(async () => {
74. sent = await useStore.getState().send('what does a cache layer buy me')
75. })
76. expect(sent).toBe(true)
77. expect(useStore.getState().view?.messages[0].content).toBe('what does a cache layer buy me')
78. await act(() => new Promise((r) => setTimeout(r, 400)))
79. const s = useStore.getState()
80. expect(s.streaming).toBeNull()
81. const reply = s.view!.messages[1]
82. expect(reply.status).toBe('complete')
83. expect(reply.content).toContain('You asked')
84. expect(reply.cost_nanousd).toBeGreaterThan(0)
85. expect(s.conversations[0].title).toBe('what does a cache layer buy me')
86. expect(s.spend!.month_nanousd).toBe(reply.cost_nanousd)
87. })
89. it('stop keeps the partial reply as cancelled', async () => {
90. const client = createMockClient({ delay: 20, empty: true })
91. await act(() => useStore.getState().init(client))
92. await act(async () => {
93. await useStore.getState().send('please write a long answer about caching')
94. })
95. await act(() => new Promise((r) => setTimeout(r, 90)))
96. await act(() => useStore.getState().stop())
97. await act(() => new Promise((r) => setTimeout(r, 60)))
98. const reply = useStore.getState().view!.messages[1]
99. expect(reply.status).toBe('cancelled')
100. expect(reply.usage_source).toBe('estimated')
101. expect(reply.content.length).toBeGreaterThan(0)
102. })
104. it('without a key, sending is refused with a clear message', async () => {
105. const client = createMockClient({ empty: true, hasKey: false })
106. await act(() => useStore.getState().init(client))
107. let sent = true
108. await act(async () => {
109. sent = await useStore.getState().send('hi')
110. })
111. expect(sent).toBe(false)
112. expect(useStore.getState().toasts[0].text).toMatch(/Add your DeepInfra API key/)
113. })
114. })
116. describe('titles, labels and the key field', () => {
117. beforeEach(() => {
118. useStore.setState({ client: null, view: null, streaming: null, drafts: [], toasts: [], panel: null })
119. })
121. it('the open chat takes its title from the first message', async () => {
122. const client = createMockClient({ delay: 1, empty: true })
123. await act(() => useStore.getState().init(client))
124. await act(async () => {
125. await useStore.getState().send('Does this set read?')
126. })
127. await act(() => new Promise((r) => setTimeout(r, 200)))
128. expect(useStore.getState().view?.conversation.title).toBe('Does this set read?')
129. })
131. it('a chat whose reply was refused is not labeled free', async () => {
132. const client = createMockClient({ empty: true })
133. await act(() => useStore.getState().init(client))
134. const s = (await client.listConversations(false))[0]
135. expect(s).toBeUndefined()
136. const conv = await client.createConversation('deepinfra', 'google/gemma-3-12b-it', null, 'main')
137. const list = await client.listConversations(false)
138. const summary = list.find((x) => x.id === conv.id)!
139. expect(summary.has_usage).toBe(false)
140. // A refused reply is saved with no usage and no cost; a local model's reply has usage and no cost.
141. const refused = { ...summary, message_count: 2 }
142. const local = { ...summary, id: 'local', title: 'Local reply', message_count: 2, has_usage: true }
143. act(() => useStore.setState({ conversations: [refused, local] }))
144. const { container } = render(<Sidebar />)
145. const costs = [...container.querySelectorAll('.conv-cost')].map((el) => el.textContent)
146. expect(costs).toEqual(['', 'free'])
147. })
149. it('Enter in the key field saves it and confirms at once', async () => {
150. const client = createMockClient({ empty: true, hasKey: false })
151. await act(() => useStore.getState().init(client))
152. render(<SettingsPanel />)
153. const input = screen.getByTestId('api-key')
154. fireEvent.change(input, { target: { value: 'di-test-key' } })
155. await act(async () => {
156. fireEvent.submit(input.closest('form')!)
157. await new Promise((r) => setTimeout(r, 20))
158. })
159. expect(await client.hasApiKey('deepinfra')).toBe(true)
160. expect(useStore.getState().keys.deepinfra).toBe(true)
161. expect(useStore.getState().toasts.map((t) => t.text)).toContain('Key saved. DeepInfra accepted it.')
162. })
164. it('a refused key is not saved, and says so in one message', async () => {
165. const client = createMockClient({ empty: true, hasKey: false })
166. await act(() => useStore.getState().init(client))
167. render(<SettingsPanel />)
168. const input = screen.getByTestId('api-key')
169. fireEvent.change(input, { target: { value: 'bad-key' } })
170. await act(async () => {
171. fireEvent.submit(input.closest('form')!)
172. await new Promise((r) => setTimeout(r, 20))
173. })
174. expect(await client.hasApiKey('deepinfra')).toBe(false)
175. const toasts = useStore.getState().toasts.map((t) => t.text)
176. expect(toasts).toEqual(['DeepInfra rejected this key, so it was not saved. Copy the whole key again and paste it.'])
177. })
178. })