Skip to content

Commit bfe81f8

Browse files
brunobergherbrunobergher
committed
Fixes tests
1 parent 0dd8890 commit bfe81f8

File tree

1 file changed

+132
-38
lines changed

1 file changed

+132
-38
lines changed

‎webview-ui/src/components/chat/__tests__/CommandPatternSelector.spec.tsx‎

Lines changed: 132 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react"
2-
import { render, screen, fireEvent } from "@testing-library/react"
2+
import { render, screen, fireEvent, within } from "@testing-library/react"
33

44
import { CommandPatternSelector } from "../CommandPatternSelector"
55
import { TooltipProvider } from "../../../components/ui/tooltip"
@@ -58,13 +58,23 @@ describe("CommandPatternSelector", () => {
5858
</TestWrapper>,
5959
)
6060

61+
// Find the button that expands the section
62+
const manageCommandsButton = screen.getByText("chat:commandExecution.manageCommands").closest("button")
63+
expect(manageCommandsButton).toBeInTheDocument()
64+
6165
// Click to expand the component
62-
const expandButton = screen.getByRole("button")
63-
fireEvent.click(expandButton)
66+
fireEvent.click(manageCommandsButton!)
67+
68+
// Find the container for the patterns. It's the next sibling of the button's parent div.
69+
const patternsContainer = manageCommandsButton?.nextElementSibling as HTMLElement
70+
expect(patternsContainer).toBeInTheDocument()
71+
72+
// Use within to query elements inside the patterns container
73+
const { getByText } = within(patternsContainer)
6474

6575
// Check that the patterns are shown
66-
expect(screen.getByText("npm install express")).toBeInTheDocument()
67-
expect(screen.getByText("- Full command")).toBeInTheDocument()
76+
expect(getByText("npm install express")).toBeInTheDocument()
77+
expect(getByText("- Full command")).toBeInTheDocument()
6878
})
6979

7080
it("should show extracted patterns when expanded", () => {
@@ -74,15 +84,25 @@ describe("CommandPatternSelector", () => {
7484
</TestWrapper>,
7585
)
7686

87+
// Find the button that expands the section
88+
const manageCommandsButton = screen.getByText("chat:commandExecution.manageCommands").closest("button")
89+
expect(manageCommandsButton).toBeInTheDocument()
90+
7791
// Click to expand the component
78-
const expandButton = screen.getByRole("button")
79-
fireEvent.click(expandButton)
92+
fireEvent.click(manageCommandsButton!)
93+
94+
// Find the container for the patterns. It's the next sibling of the button's parent div.
95+
const patternsContainer = manageCommandsButton?.nextElementSibling as HTMLElement
96+
expect(patternsContainer).toBeInTheDocument()
97+
98+
// Use within to query elements inside the patterns container
99+
const { getByText } = within(patternsContainer)
80100

81101
// Check that patterns are shown
82-
expect(screen.getByText("npm install")).toBeInTheDocument()
83-
expect(screen.getByText("- Install npm packages")).toBeInTheDocument()
84-
expect(screen.getByText("npm *")).toBeInTheDocument()
85-
expect(screen.getByText("- Any npm command")).toBeInTheDocument()
102+
expect(getByText("npm install")).toBeInTheDocument()
103+
expect(getByText("- Install npm packages")).toBeInTheDocument()
104+
expect(getByText("npm *")).toBeInTheDocument()
105+
expect(getByText("- Any npm command")).toBeInTheDocument()
86106
})
87107

88108
it("should allow editing patterns when clicked", () => {
@@ -92,16 +112,26 @@ describe("CommandPatternSelector", () => {
92112
</TestWrapper>,
93113
)
94114

115+
// Find the button that expands the section
116+
const manageCommandsButton = screen.getByText("chat:commandExecution.manageCommands").closest("button")
117+
expect(manageCommandsButton).toBeInTheDocument()
118+
95119
// Click to expand the component
96-
const expandButton = screen.getByRole("button")
97-
fireEvent.click(expandButton)
120+
fireEvent.click(manageCommandsButton!)
121+
122+
// Find the container for the patterns. It's the next sibling of the button's parent div.
123+
const patternsContainer = manageCommandsButton?.nextElementSibling as HTMLElement
124+
expect(patternsContainer).toBeInTheDocument()
125+
126+
// Use within to query elements inside the patterns container
127+
const { getByText, getByDisplayValue } = within(patternsContainer)
98128

99129
// Click on a pattern
100-
const patternDiv = screen.getByText("npm install express").closest("div")
130+
const patternDiv = getByText("npm install express").closest("div")
101131
fireEvent.click(patternDiv!)
102132

103133
// An input should appear
104-
const input = screen.getByDisplayValue("npm install express") as HTMLInputElement
134+
const input = getByDisplayValue("npm install express") as HTMLInputElement
105135
expect(input).toBeInTheDocument()
106136

107137
// Change the value
@@ -116,12 +146,23 @@ describe("CommandPatternSelector", () => {
116146
</TestWrapper>,
117147
)
118148

149+
// Find the button that expands the section
150+
const manageCommandsButton = screen.getByText("chat:commandExecution.manageCommands").closest("button")
151+
expect(manageCommandsButton).toBeInTheDocument()
152+
119153
// Click to expand the component
120-
const expandButton = screen.getByRole("button")
121-
fireEvent.click(expandButton)
154+
fireEvent.click(manageCommandsButton!)
155+
156+
// Find the container for the patterns
157+
const patternsContainer = manageCommandsButton?.nextElementSibling as HTMLElement
158+
expect(patternsContainer).toBeInTheDocument()
159+
160+
// Use within to query elements inside the patterns container
161+
const { getByText } = within(patternsContainer)
122162

123163
// Find the npm install pattern row
124-
const npmInstallPattern = screen.getByText("npm install").closest(".ml-5")
164+
const npmInstallText = getByText("npm install")
165+
const npmInstallPattern = npmInstallText.closest(".flex")?.parentElement
125166

126167
// The allow button should have the active styling (we can check by aria-label)
127168
const allowButton = npmInstallPattern?.querySelector('button[aria-label*="removeFromAllowed"]')
@@ -140,12 +181,23 @@ describe("CommandPatternSelector", () => {
140181
</TestWrapper>,
141182
)
142183

184+
// Find the button that expands the section
185+
const manageCommandsButton = screen.getByText("chat:commandExecution.manageCommands").closest("button")
186+
expect(manageCommandsButton).toBeInTheDocument()
187+
143188
// Click to expand the component
144-
const expandButton = screen.getByRole("button")
145-
fireEvent.click(expandButton)
189+
fireEvent.click(manageCommandsButton!)
190+
191+
// Find the container for the patterns
192+
const patternsContainer = manageCommandsButton?.nextElementSibling as HTMLElement
193+
expect(patternsContainer).toBeInTheDocument()
194+
195+
// Use within to query elements inside the patterns container
196+
const { getByText } = within(patternsContainer)
146197

147198
// Find the git push pattern row
148-
const gitPushPattern = screen.getByText("git push").closest(".ml-5")
199+
const gitPushText = getByText("git push")
200+
const gitPushPattern = gitPushText.closest(".flex")?.parentElement
149201

150202
// The deny button should have the active styling (we can check by aria-label)
151203
const denyButton = gitPushPattern?.querySelector('button[aria-label*="removeFromDenied"]')
@@ -165,12 +217,23 @@ describe("CommandPatternSelector", () => {
165217
</TestWrapper>,
166218
)
167219

220+
// Find the button that expands the section
221+
const manageCommandsButton = screen.getByText("chat:commandExecution.manageCommands").closest("button")
222+
expect(manageCommandsButton).toBeInTheDocument()
223+
168224
// Click to expand the component
169-
const expandButton = screen.getByRole("button")
170-
fireEvent.click(expandButton)
225+
fireEvent.click(manageCommandsButton!)
226+
227+
// Find the container for the patterns
228+
const patternsContainer = manageCommandsButton?.nextElementSibling as HTMLElement
229+
expect(patternsContainer).toBeInTheDocument()
230+
231+
// Use within to query elements inside the patterns container
232+
const { getByText } = within(patternsContainer)
171233

172234
// Find a pattern row and click allow
173-
const patternRow = screen.getByText("npm install express").closest(".ml-5")
235+
const patternText = getByText("npm install express")
236+
const patternRow = patternText.closest(".flex")?.parentElement
174237
const allowButton = patternRow?.querySelector('button[aria-label*="addToAllowed"]')
175238
fireEvent.click(allowButton!)
176239

@@ -191,12 +254,23 @@ describe("CommandPatternSelector", () => {
191254
</TestWrapper>,
192255
)
193256

257+
// Find the button that expands the section
258+
const manageCommandsButton = screen.getByText("chat:commandExecution.manageCommands").closest("button")
259+
expect(manageCommandsButton).toBeInTheDocument()
260+
194261
// Click to expand the component
195-
const expandButton = screen.getByRole("button")
196-
fireEvent.click(expandButton)
262+
fireEvent.click(manageCommandsButton!)
263+
264+
// Find the container for the patterns
265+
const patternsContainer = manageCommandsButton?.nextElementSibling as HTMLElement
266+
expect(patternsContainer).toBeInTheDocument()
267+
268+
// Use within to query elements inside the patterns container
269+
const { getByText } = within(patternsContainer)
197270

198271
// Find a pattern row and click deny
199-
const patternRow = screen.getByText("npm install express").closest(".ml-5")
272+
const patternText = getByText("npm install express")
273+
const patternRow = patternText.closest(".flex")?.parentElement
200274
const denyButton = patternRow?.querySelector('button[aria-label*="addToDenied"]')
201275
fireEvent.click(denyButton!)
202276

@@ -217,23 +291,33 @@ describe("CommandPatternSelector", () => {
217291
</TestWrapper>,
218292
)
219293

294+
// Find the button that expands the section
295+
const manageCommandsButton = screen.getByText("chat:commandExecution.manageCommands").closest("button")
296+
expect(manageCommandsButton).toBeInTheDocument()
297+
220298
// Click to expand the component
221-
const expandButton = screen.getByRole("button")
222-
fireEvent.click(expandButton)
299+
fireEvent.click(manageCommandsButton!)
300+
301+
// Find the container for the patterns
302+
const patternsContainer = manageCommandsButton?.nextElementSibling as HTMLElement
303+
expect(patternsContainer).toBeInTheDocument()
304+
305+
// Use within to query elements inside the patterns container
306+
const { getByText, getByDisplayValue } = within(patternsContainer)
223307

224308
// Click on a pattern to edit
225-
const patternDiv = screen.getByText("npm install express").closest("div")
309+
const patternDiv = getByText("npm install express").closest("div")
226310
fireEvent.click(patternDiv!)
227311

228312
// Edit the pattern
229-
const input = screen.getByDisplayValue("npm install express") as HTMLInputElement
313+
const input = getByDisplayValue("npm install express") as HTMLInputElement
230314
fireEvent.change(input, { target: { value: "npm install react" } })
231315

232316
// Don't press Enter or blur - just click the button while still editing
233317
// This simulates the user clicking the button while the input is still focused
234318

235319
// Find the allow button in the same row as the input
236-
const patternRow = input.closest(".ml-5")
320+
const patternRow = input.closest(".flex")?.parentElement
237321
const allowButton = patternRow?.querySelector('button[aria-label*="addToAllowed"]')
238322
expect(allowButton).toBeInTheDocument()
239323

@@ -251,23 +335,33 @@ describe("CommandPatternSelector", () => {
251335
</TestWrapper>,
252336
)
253337

338+
// Find the button that expands the section
339+
const manageCommandsButton = screen.getByText("chat:commandExecution.manageCommands").closest("button")
340+
expect(manageCommandsButton).toBeInTheDocument()
341+
254342
// Click to expand the component
255-
const expandButton = screen.getByRole("button")
256-
fireEvent.click(expandButton)
343+
fireEvent.click(manageCommandsButton!)
344+
345+
// Find the container for the patterns
346+
const patternsContainer = manageCommandsButton?.nextElementSibling as HTMLElement
347+
expect(patternsContainer).toBeInTheDocument()
348+
349+
// Use within to query elements inside the patterns container
350+
const { getByText, getByDisplayValue, queryByDisplayValue } = within(patternsContainer)
257351

258352
// Click on a pattern to edit
259-
const patternDiv = screen.getByText("npm install express").closest("div")
353+
const patternDiv = getByText("npm install express").closest("div")
260354
fireEvent.click(patternDiv!)
261355

262356
// Edit the pattern
263-
const input = screen.getByDisplayValue("npm install express") as HTMLInputElement
357+
const input = getByDisplayValue("npm install express") as HTMLInputElement
264358
fireEvent.change(input, { target: { value: "npm install react" } })
265359

266360
// Press Escape to cancel
267361
fireEvent.keyDown(input, { key: "Escape" })
268362

269363
// The original value should be restored
270-
expect(screen.getByText("npm install express")).toBeInTheDocument()
271-
expect(screen.queryByDisplayValue("npm install react")).not.toBeInTheDocument()
364+
expect(getByText("npm install express")).toBeInTheDocument()
365+
expect(queryByDisplayValue("npm install react")).not.toBeInTheDocument()
272366
})
273367
})

0 commit comments

Comments
 (0)