Skip to content

Commit c41343e

Browse files
dlab-antondlab-anton
committed
Fix tests for vertical tabs implementation
1 parent 185362a commit c41343e

File tree

1 file changed

+92
-54
lines changed

1 file changed

+92
-54
lines changed

‎webview-ui/src/components/settings/__tests__/SettingsView.test.tsx‎

Lines changed: 92 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -89,19 +89,42 @@ jest.mock("@vscode/webview-ui-toolkit/react", () => ({
8989
// Mock Tab components
9090
jest.mock("../../../components/common/Tab", () => ({
9191
...jest.requireActual("../../../components/common/Tab"),
92-
Tab: ({ children }: any) => <div>{children}</div>,
93-
TabHeader: ({ children }: any) => <div>{children}</div>,
94-
TabContent: ({ children }: any) => <div>{children}</div>,
95-
TabList: ({ children, value, onValueChange, "data-testid": dataTestId }: any) => (
96-
<div data-testid={dataTestId} data-value={value}>
97-
{children}
98-
</div>
99-
),
100-
TabTrigger: ({ children, value, "data-testid": dataTestId, onClick }: any) => (
101-
<button data-testid={dataTestId} data-value={value} onClick={onClick}>
102-
{children}
103-
</button>
104-
),
92+
Tab: ({ children }: any) => <div data-testid="tab-container">{children}</div>,
93+
TabHeader: ({ children }: any) => <div data-testid="tab-header">{children}</div>,
94+
TabContent: ({ children }: any) => <div data-testid="tab-content">{children}</div>,
95+
TabList: ({ children, value, onValueChange, "data-testid": dataTestId }: any) => {
96+
// Store onValueChange in a global variable so TabTrigger can access it
97+
;(window as any).__onValueChange = onValueChange
98+
return (
99+
<div data-testid={dataTestId} data-value={value}>
100+
{children}
101+
</div>
102+
)
103+
},
104+
TabTrigger: ({ children, value, "data-testid": dataTestId, onClick, isSelected }: any) => {
105+
// This function simulates clicking on a tab and making its content visible
106+
const handleClick = () => {
107+
if (onClick) onClick()
108+
// Access onValueChange from the global variable
109+
const onValueChange = (window as any).__onValueChange
110+
if (onValueChange) onValueChange(value)
111+
// Make all tab contents invisible
112+
document.querySelectorAll("[data-tab-content]").forEach((el) => {
113+
;(el as HTMLElement).style.display = "none"
114+
})
115+
// Make this tab's content visible
116+
const tabContent = document.querySelector(`[data-tab-content="${value}"]`)
117+
if (tabContent) {
118+
;(tabContent as HTMLElement).style.display = "block"
119+
}
120+
}
121+
122+
return (
123+
<button data-testid={dataTestId} data-value={value} data-selected={isSelected} onClick={handleClick}>
124+
{children}
125+
</button>
126+
)
127+
},
105128
}))
106129

107130
// Mock Slider component
@@ -152,7 +175,7 @@ const renderSettingsView = () => {
152175
const onDone = jest.fn()
153176
const queryClient = new QueryClient()
154177

155-
render(
178+
const result = render(
156179
<ExtensionStateContextProvider>
157180
<QueryClientProvider client={queryClient}>
158181
<SettingsView onDone={onDone} />
@@ -163,7 +186,22 @@ const renderSettingsView = () => {
163186
// Hydrate initial state.
164187
mockPostMessage({})
165188

166-
return { onDone }
189+
// Helper function to activate a tab and ensure its content is visible
190+
const activateTab = (tabId: string) => {
191+
const tab = screen.getByTestId(`tab-${tabId}`)
192+
fireEvent.click(tab)
193+
194+
// Force a re-render to ensure tab content is visible
195+
result.rerender(
196+
<ExtensionStateContextProvider>
197+
<QueryClientProvider client={queryClient}>
198+
<SettingsView onDone={onDone} targetSection={tabId} />
199+
</QueryClientProvider>
200+
</ExtensionStateContextProvider>,
201+
)
202+
}
203+
204+
return { onDone, activateTab }
167205
}
168206

169207
describe("SettingsView - Sound Settings", () => {
@@ -174,9 +212,9 @@ describe("SettingsView - Sound Settings", () => {
174212
it("initializes with tts disabled by default", () => {
175213
renderSettingsView()
176214

177-
// First click on the notifications tab
178-
const notificationsTab = screen.getByTestId("tab-notifications")
179-
fireEvent.click(notificationsTab)
215+
// Activate the notifications tab using our helper
216+
const { activateTab } = renderSettingsView()
217+
activateTab("notifications")
180218

181219
const ttsCheckbox = screen.getByTestId("tts-enabled-checkbox")
182220
expect(ttsCheckbox).not.toBeChecked()
@@ -188,9 +226,9 @@ describe("SettingsView - Sound Settings", () => {
188226
it("initializes with sound disabled by default", () => {
189227
renderSettingsView()
190228

191-
// First click on the notifications tab
192-
const notificationsTab = screen.getByTestId("tab-notifications")
193-
fireEvent.click(notificationsTab)
229+
// Activate the notifications tab using our helper
230+
const { activateTab } = renderSettingsView()
231+
activateTab("notifications")
194232

195233
const soundCheckbox = screen.getByTestId("sound-enabled-checkbox")
196234
expect(soundCheckbox).not.toBeChecked()
@@ -202,9 +240,9 @@ describe("SettingsView - Sound Settings", () => {
202240
it("toggles tts setting and sends message to VSCode", () => {
203241
renderSettingsView()
204242

205-
// First click on the notifications tab
206-
const notificationsTab = screen.getByTestId("tab-notifications")
207-
fireEvent.click(notificationsTab)
243+
// Activate the notifications tab using our helper
244+
const { activateTab } = renderSettingsView()
245+
activateTab("notifications")
208246

209247
const ttsCheckbox = screen.getByTestId("tts-enabled-checkbox")
210248

@@ -227,9 +265,9 @@ describe("SettingsView - Sound Settings", () => {
227265
it("toggles sound setting and sends message to VSCode", () => {
228266
renderSettingsView()
229267

230-
// First click on the notifications tab
231-
const notificationsTab = screen.getByTestId("tab-notifications")
232-
fireEvent.click(notificationsTab)
268+
// Activate the notifications tab using our helper
269+
const { activateTab } = renderSettingsView()
270+
activateTab("notifications")
233271

234272
const soundCheckbox = screen.getByTestId("sound-enabled-checkbox")
235273

@@ -252,9 +290,9 @@ describe("SettingsView - Sound Settings", () => {
252290
it("shows tts slider when sound is enabled", () => {
253291
renderSettingsView()
254292

255-
// First click on the notifications tab
256-
const notificationsTab = screen.getByTestId("tab-notifications")
257-
fireEvent.click(notificationsTab)
293+
// Activate the notifications tab using our helper
294+
const { activateTab } = renderSettingsView()
295+
activateTab("notifications")
258296

259297
// Enable tts
260298
const ttsCheckbox = screen.getByTestId("tts-enabled-checkbox")
@@ -269,9 +307,9 @@ describe("SettingsView - Sound Settings", () => {
269307
it("shows volume slider when sound is enabled", () => {
270308
renderSettingsView()
271309

272-
// First click on the notifications tab
273-
const notificationsTab = screen.getByTestId("tab-notifications")
274-
fireEvent.click(notificationsTab)
310+
// Activate the notifications tab using our helper
311+
const { activateTab } = renderSettingsView()
312+
activateTab("notifications")
275313

276314
// Enable sound
277315
const soundCheckbox = screen.getByTestId("sound-enabled-checkbox")
@@ -286,9 +324,9 @@ describe("SettingsView - Sound Settings", () => {
286324
it("updates speed and sends message to VSCode when slider changes", () => {
287325
renderSettingsView()
288326

289-
// First click on the notifications tab
290-
const notificationsTab = screen.getByTestId("tab-notifications")
291-
fireEvent.click(notificationsTab)
327+
// Activate the notifications tab using our helper
328+
const { activateTab } = renderSettingsView()
329+
activateTab("notifications")
292330

293331
// Enable tts
294332
const ttsCheckbox = screen.getByTestId("tts-enabled-checkbox")
@@ -356,9 +394,9 @@ describe("SettingsView - Allowed Commands", () => {
356394
it("shows allowed commands section when alwaysAllowExecute is enabled", () => {
357395
renderSettingsView()
358396

359-
// First click on the autoApprove tab
360-
const autoApproveTab = screen.getByTestId("tab-autoApprove")
361-
fireEvent.click(autoApproveTab)
397+
// Activate the autoApprove tab using our helper
398+
const { activateTab } = renderSettingsView()
399+
activateTab("autoApprove")
362400

363401
// Enable always allow execute
364402
const executeCheckbox = screen.getByTestId("always-allow-execute-toggle")
@@ -371,9 +409,9 @@ describe("SettingsView - Allowed Commands", () => {
371409
it("adds new command to the list", () => {
372410
renderSettingsView()
373411

374-
// First click on the autoApprove tab
375-
const autoApproveTab = screen.getByTestId("tab-autoApprove")
376-
fireEvent.click(autoApproveTab)
412+
// Activate the autoApprove tab using our helper
413+
const { activateTab } = renderSettingsView()
414+
activateTab("autoApprove")
377415

378416
// Enable always allow execute
379417
const executeCheckbox = screen.getByTestId("always-allow-execute-toggle")
@@ -399,9 +437,9 @@ describe("SettingsView - Allowed Commands", () => {
399437
it("removes command from the list", () => {
400438
renderSettingsView()
401439

402-
// First click on the autoApprove tab
403-
const autoApproveTab = screen.getByTestId("tab-autoApprove")
404-
fireEvent.click(autoApproveTab)
440+
// Activate the autoApprove tab using our helper
441+
const { activateTab } = renderSettingsView()
442+
activateTab("autoApprove")
405443

406444
// Enable always allow execute
407445
const executeCheckbox = screen.getByTestId("always-allow-execute-toggle")
@@ -446,9 +484,9 @@ describe("SettingsView - Allowed Commands", () => {
446484
it("shows unsaved changes dialog when switching tabs with unsaved changes", () => {
447485
renderSettingsView()
448486

449-
// First click on the notifications tab
450-
const notificationsTab = screen.getByTestId("tab-notifications")
451-
fireEvent.click(notificationsTab)
487+
// Activate the notifications tab using our helper
488+
const { activateTab } = renderSettingsView()
489+
activateTab("notifications")
452490

453491
// Wait for the tab content to be rendered
454492
// Make a change to create unsaved changes
@@ -484,9 +522,9 @@ describe("SettingsView - Duplicate Commands", () => {
484522
it("prevents duplicate commands", () => {
485523
renderSettingsView()
486524

487-
// First click on the autoApprove tab
488-
const autoApproveTab = screen.getByTestId("tab-autoApprove")
489-
fireEvent.click(autoApproveTab)
525+
// Activate the autoApprove tab using our helper
526+
const { activateTab } = renderSettingsView()
527+
activateTab("autoApprove")
490528

491529
// Enable always allow execute
492530
const executeCheckbox = screen.getByTestId("always-allow-execute-toggle")
@@ -512,9 +550,9 @@ describe("SettingsView - Duplicate Commands", () => {
512550
it("saves allowed commands when clicking Save", () => {
513551
renderSettingsView()
514552

515-
// First click on the autoApprove tab
516-
const autoApproveTab = screen.getByTestId("tab-autoApprove")
517-
fireEvent.click(autoApproveTab)
553+
// Activate the autoApprove tab using our helper
554+
const { activateTab } = renderSettingsView()
555+
activateTab("autoApprove")
518556

519557
// Enable always allow execute
520558
const executeCheckbox = screen.getByTestId("always-allow-execute-toggle")

0 commit comments

Comments
 (0)