davidwindham.com
forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
1import { describe, expect, it, vi, beforeEach } from 'vitest'
2import { mountSuspended } from '@nuxt/test-utils/runtime'
3import VersionSelector from '~/components/VersionSelector.vue'
4
5// Mock the fetchAllPackageVersions function
6const mockFetchAllPackageVersions = vi.fn()
7vi.mock('~/utils/npm/api', () => ({
8 fetchAllPackageVersions: (...args: unknown[]) => mockFetchAllPackageVersions(...args),
9}))
10
11// Mock navigateTo
12const mockNavigateTo = vi.fn()
13vi.stubGlobal('navigateTo', mockNavigateTo)
14
15describe('VersionSelector', () => {
16 beforeEach(() => {
17 mockFetchAllPackageVersions.mockReset()
18 mockNavigateTo.mockReset()
19 })
20
21 describe('basic rendering', () => {
22 it('renders the current version in the button', async () => {
23 const component = await mountSuspended(VersionSelector, {
24 props: {
25 packageName: 'test-package',
26 currentVersion: '1.0.0',
27 versions: { '1.0.0': {} },
28 distTags: { latest: '1.0.0' },
29 urlPattern: '/package-docs/test-package/v/{version}',
30 },
31 })
32
33 const button = component.find('button[aria-haspopup="listbox"]')
34 expect(button.exists()).toBe(true)
35 expect(button.text()).toContain('1.0.0')
36 })
37
38 it('shows "latest" badge when current version is latest', async () => {
39 const component = await mountSuspended(VersionSelector, {
40 props: {
41 packageName: 'test-package',
42 currentVersion: '2.0.0',
43 versions: { '2.0.0': {} },
44 distTags: { latest: '2.0.0' },
45 urlPattern: '/package-docs/test-package/v/{version}',
46 },
47 })
48
49 expect(component.text()).toContain('latest')
50 })
51
52 it('does not show "latest" badge when current version is not latest', async () => {
53 const component = await mountSuspended(VersionSelector, {
54 props: {
55 packageName: 'test-package',
56 currentVersion: '1.0.0',
57 versions: { '1.0.0': {}, '2.0.0': {} },
58 distTags: { latest: '2.0.0', old: '1.0.0' },
59 urlPattern: '/package-docs/test-package/v/{version}',
60 },
61 })
62
63 const button = component.find('button[aria-haspopup="listbox"]')
64 // The button itself shouldn't have the latest badge
65 expect(button.text()).not.toContain('latest')
66 })
67
68 it('has aria-expanded="false" initially', async () => {
69 const component = await mountSuspended(VersionSelector, {
70 props: {
71 packageName: 'test-package',
72 currentVersion: '1.0.0',
73 versions: { '1.0.0': {} },
74 distTags: { latest: '1.0.0' },
75 urlPattern: '/package-docs/test-package/v/{version}',
76 },
77 })
78
79 const button = component.find('button[aria-haspopup="listbox"]')
80 expect(button.attributes('aria-expanded')).toBe('false')
81 })
82 })
83
84 describe('dropdown behavior', () => {
85 it('opens dropdown when button is clicked', async () => {
86 const component = await mountSuspended(VersionSelector, {
87 props: {
88 packageName: 'test-package',
89 currentVersion: '1.0.0',
90 versions: { '1.0.0': {} },
91 distTags: { latest: '1.0.0' },
92 urlPattern: '/package-docs/test-package/v/{version}',
93 },
94 })
95
96 const button = component.find('button[aria-haspopup="listbox"]')
97 await button.trigger('click')
98
99 expect(button.attributes('aria-expanded')).toBe('true')
100 expect(component.find('[role="listbox"]').exists()).toBe(true)
101 })
102
103 it('closes dropdown when button is clicked again', async () => {
104 const component = await mountSuspended(VersionSelector, {
105 props: {
106 packageName: 'test-package',
107 currentVersion: '1.0.0',
108 versions: { '1.0.0': {} },
109 distTags: { latest: '1.0.0' },
110 urlPattern: '/package-docs/test-package/v/{version}',
111 },
112 })
113
114 const button = component.find('button[aria-haspopup="listbox"]')
115 await button.trigger('click')
116 expect(button.attributes('aria-expanded')).toBe('true')
117
118 await button.trigger('click')
119 expect(button.attributes('aria-expanded')).toBe('false')
120 })
121
122 it('shows version groups in dropdown', async () => {
123 const component = await mountSuspended(VersionSelector, {
124 props: {
125 packageName: 'test-package',
126 currentVersion: '2.0.0',
127 versions: { '1.0.0': {}, '2.0.0': {} },
128 distTags: {
129 latest: '2.0.0',
130 old: '1.0.0',
131 },
132 urlPattern: '/package-docs/test-package/v/{version}',
133 },
134 })
135
136 const button = component.find('button[aria-haspopup="listbox"]')
137 await button.trigger('click')
138
139 const listbox = component.find('[role="listbox"]')
140 expect(listbox.text()).toContain('2.0.0')
141 expect(listbox.text()).toContain('1.0.0')
142 })
143
144 it('shows "View all X versions" link', async () => {
145 const component = await mountSuspended(VersionSelector, {
146 props: {
147 packageName: 'test-package',
148 currentVersion: '1.0.0',
149 versions: { '1.0.0': {}, '2.0.0': {}, '3.0.0': {} },
150 distTags: { latest: '3.0.0' },
151 urlPattern: '/package-docs/test-package/v/{version}',
152 },
153 })
154
155 const button = component.find('button[aria-haspopup="listbox"]')
156 await button.trigger('click')
157
158 expect(component.text()).toContain('View all 3 versions')
159 })
160 })
161
162 describe('keyboard navigation', () => {
163 it('opens dropdown on ArrowDown when closed', async () => {
164 const component = await mountSuspended(VersionSelector, {
165 props: {
166 packageName: 'test-package',
167 currentVersion: '1.0.0',
168 versions: { '1.0.0': {} },
169 distTags: { latest: '1.0.0' },
170 urlPattern: '/package-docs/test-package/v/{version}',
171 },
172 })
173
174 const button = component.find('button[aria-haspopup="listbox"]')
175 await button.trigger('keydown', { key: 'ArrowDown' })
176
177 expect(button.attributes('aria-expanded')).toBe('true')
178 })
179
180 it('closes dropdown on Escape', async () => {
181 const component = await mountSuspended(VersionSelector, {
182 props: {
183 packageName: 'test-package',
184 currentVersion: '1.0.0',
185 versions: { '1.0.0': {} },
186 distTags: { latest: '1.0.0' },
187 urlPattern: '/package-docs/test-package/v/{version}',
188 },
189 })
190
191 const button = component.find('button[aria-haspopup="listbox"]')
192 await button.trigger('click')
193 expect(button.attributes('aria-expanded')).toBe('true')
194
195 await button.trigger('keydown', { key: 'Escape' })
196 expect(button.attributes('aria-expanded')).toBe('false')
197 })
198
199 it('navigates with arrow keys in listbox', async () => {
200 const component = await mountSuspended(VersionSelector, {
201 props: {
202 packageName: 'test-package',
203 currentVersion: '2.0.0',
204 versions: { '1.0.0': {}, '2.0.0': {} },
205 distTags: {
206 latest: '2.0.0',
207 old: '1.0.0',
208 },
209 urlPattern: '/package-docs/test-package/v/{version}',
210 },
211 })
212
213 const button = component.find('button[aria-haspopup="listbox"]')
214 await button.trigger('click')
215
216 const listbox = component.find('[role="listbox"]')
217
218 // Navigate down
219 await listbox.trigger('keydown', { key: 'ArrowDown' })
220
221 // Navigate up
222 await listbox.trigger('keydown', { key: 'ArrowUp' })
223
224 // Should still be focused on an item (test that it doesn't crash)
225 expect(listbox.exists()).toBe(true)
226 })
227
228 it('closes listbox on Escape', async () => {
229 const component = await mountSuspended(VersionSelector, {
230 props: {
231 packageName: 'test-package',
232 currentVersion: '1.0.0',
233 versions: { '1.0.0': {} },
234 distTags: { latest: '1.0.0' },
235 urlPattern: '/package-docs/test-package/v/{version}',
236 },
237 })
238
239 const button = component.find('button[aria-haspopup="listbox"]')
240 await button.trigger('click')
241
242 const listbox = component.find('[role="listbox"]')
243 await listbox.trigger('keydown', { key: 'Escape' })
244
245 expect(button.attributes('aria-expanded')).toBe('false')
246 })
247
248 it('navigates to Home and End', async () => {
249 const component = await mountSuspended(VersionSelector, {
250 props: {
251 packageName: 'test-package',
252 currentVersion: '3.0.0',
253 versions: { '1.0.0': {}, '2.0.0': {}, '3.0.0': {} },
254 distTags: {
255 latest: '3.0.0',
256 beta: '2.0.0',
257 old: '1.0.0',
258 },
259 urlPattern: '/package-docs/test-package/v/{version}',
260 },
261 })
262
263 const button = component.find('button[aria-haspopup="listbox"]')
264 await button.trigger('click')
265
266 const listbox = component.find('[role="listbox"]')
267
268 // Navigate to end
269 await listbox.trigger('keydown', { key: 'End' })
270
271 // Navigate to home
272 await listbox.trigger('keydown', { key: 'Home' })
273
274 // Should not crash
275 expect(listbox.exists()).toBe(true)
276 })
277 })
278
279 describe('version selection', () => {
280 it('closes dropdown and navigates when clicking a version', async () => {
281 const component = await mountSuspended(VersionSelector, {
282 props: {
283 packageName: 'test-package',
284 currentVersion: '2.0.0',
285 versions: { '1.0.0': {}, '2.0.0': {} },
286 distTags: {
287 latest: '2.0.0',
288 old: '1.0.0',
289 },
290 urlPattern: '/package-docs/test-package/v/{version}',
291 },
292 })
293
294 const button = component.find('button[aria-haspopup="listbox"]')
295 await button.trigger('click')
296
297 // Click on the version link
298 const versionLink = component.findAll('a').find(a => a.text().includes('1.0.0'))
299 expect(versionLink?.exists()).toBe(true)
300 await versionLink!.trigger('click')
301
302 // Dropdown should close
303 expect(button.attributes('aria-expanded')).toBe('false')
304 })
305
306 it('generates correct URL from pattern', async () => {
307 const component = await mountSuspended(VersionSelector, {
308 props: {
309 packageName: 'test-package',
310 currentVersion: '2.0.0',
311 versions: { '1.0.0': {}, '2.0.0': {} },
312 distTags: {
313 latest: '2.0.0',
314 old: '1.0.0',
315 },
316 urlPattern: '/package-code/test-package/v/{version}/src/index.ts',
317 },
318 })
319
320 const button = component.find('button[aria-haspopup="listbox"]')
321 await button.trigger('click')
322
323 const versionLink = component.findAll('a').find(a => a.text().includes('1.0.0'))
324 expect(versionLink?.attributes('href')).toBe(
325 '/package-code/test-package/v/1.0.0/src/index.ts',
326 )
327 })
328 })
329
330 describe('expand/collapse groups', () => {
331 it('shows expand button for groups', async () => {
332 const component = await mountSuspended(VersionSelector, {
333 props: {
334 packageName: 'test-package',
335 currentVersion: '1.0.0',
336 versions: { '1.0.0': {} },
337 distTags: { latest: '1.0.0' },
338 urlPattern: '/package-docs/test-package/v/{version}',
339 },
340 })
341
342 const button = component.find('button[aria-haspopup="listbox"]')
343 await button.trigger('click')
344
345 // Find expand button within the dropdown
346 const expandButton = component.find('[role="listbox"] button[aria-expanded]')
347 expect(expandButton.exists()).toBe(true)
348 })
349
350 it('loads versions when expanding a group', async () => {
351 mockFetchAllPackageVersions.mockResolvedValue([
352 { version: '1.0.0', time: '2024-01-15T12:00:00.000Z', hasProvenance: false },
353 { version: '0.9.0', time: '2024-01-10T12:00:00.000Z', hasProvenance: false },
354 ])
355
356 const component = await mountSuspended(VersionSelector, {
357 props: {
358 packageName: 'test-package',
359 currentVersion: '1.0.0',
360 versions: { '1.0.0': {} },
361 distTags: { latest: '1.0.0' },
362 urlPattern: '/package-docs/test-package/v/{version}',
363 },
364 })
365
366 const button = component.find('button[aria-haspopup="listbox"]')
367 await button.trigger('click')
368
369 // Find and click expand button
370 const expandButton = component.find('[role="listbox"] button[aria-expanded="false"]')
371 await expandButton.trigger('click')
372
373 await vi.waitFor(() => {
374 expect(mockFetchAllPackageVersions).toHaveBeenCalledWith('test-package')
375 })
376 })
377
378 it('collapses group when clicking expanded button', async () => {
379 mockFetchAllPackageVersions.mockResolvedValue([
380 { version: '1.2.0', time: '2024-01-15T12:00:00.000Z', hasProvenance: false },
381 { version: '1.1.0', time: '2024-01-12T12:00:00.000Z', hasProvenance: false },
382 { version: '1.0.0', time: '2024-01-10T12:00:00.000Z', hasProvenance: false },
383 ])
384
385 const component = await mountSuspended(VersionSelector, {
386 props: {
387 packageName: 'test-package',
388 currentVersion: '1.2.0',
389 versions: { '1.2.0': {} },
390 distTags: { latest: '1.2.0' },
391 urlPattern: '/package-docs/test-package/v/{version}',
392 },
393 })
394
395 const button = component.find('button[aria-haspopup="listbox"]')
396 await button.trigger('click')
397
398 // Expand
399 const expandButton = component.find('[role="listbox"] button[aria-expanded]')
400 await expandButton.trigger('click')
401
402 await vi.waitFor(() => {
403 expect(mockFetchAllPackageVersions).toHaveBeenCalled()
404 })
405
406 // Wait for expansion
407 await vi.waitFor(
408 () => {
409 const btn = component.find('[role="listbox"] button[aria-expanded="true"]')
410 expect(btn.exists()).toBe(true)
411 },
412 { timeout: 2000 },
413 )
414
415 // Collapse
416 const expandedButton = component.find('[role="listbox"] button[aria-expanded="true"]')
417 await expandedButton.trigger('click')
418
419 await vi.waitFor(
420 () => {
421 const btn = component.find('[role="listbox"] button[aria-expanded="false"]')
422 expect(btn.exists()).toBe(true)
423 },
424 { timeout: 2000 },
425 )
426 })
427 })
428
429 describe('0.x version grouping', () => {
430 it('groups 0.x versions by minor version, not major', async () => {
431 mockFetchAllPackageVersions.mockResolvedValue([
432 { version: '0.10.0', time: '2024-01-15T12:00:00.000Z', hasProvenance: false },
433 { version: '0.10.1', time: '2024-01-16T12:00:00.000Z', hasProvenance: false },
434 { version: '0.9.0', time: '2024-01-10T12:00:00.000Z', hasProvenance: false },
435 { version: '0.9.3', time: '2024-01-12T12:00:00.000Z', hasProvenance: false },
436 ])
437
438 const component = await mountSuspended(VersionSelector, {
439 props: {
440 packageName: 'test-package',
441 currentVersion: '0.10.1',
442 versions: { '0.10.1': {} },
443 distTags: { latest: '0.10.1' },
444 urlPattern: '/package-docs/test-package/v/{version}',
445 },
446 })
447
448 const button = component.find('button[aria-haspopup="listbox"]')
449 await button.trigger('click')
450
451 // Expand the group
452 const expandButton = component.find('[role="listbox"] button[aria-expanded]')
453 await expandButton.trigger('click')
454
455 await vi.waitFor(() => {
456 expect(mockFetchAllPackageVersions).toHaveBeenCalled()
457 })
458
459 // Wait for versions to load
460 await vi.waitFor(
461 () => {
462 // 0.9.x versions should NOT be under the 0.10.x group
463 // They should be in a separate group
464 const text = component.text()
465 // The component should have separate groups for 0.10 and 0.9
466 expect(text).toContain('0.10')
467 expect(text).toContain('0.9')
468 },
469 { timeout: 2000 },
470 )
471 })
472 })
473
474 describe('dist-tag display', () => {
475 it('displays multiple tags for same version', async () => {
476 const component = await mountSuspended(VersionSelector, {
477 props: {
478 packageName: 'test-package',
479 currentVersion: '1.0.0',
480 versions: { '1.0.0': {} },
481 distTags: {
482 latest: '1.0.0',
483 stable: '1.0.0',
484 },
485 urlPattern: '/package-docs/test-package/v/{version}',
486 },
487 })
488
489 const button = component.find('button[aria-haspopup="listbox"]')
490 await button.trigger('click')
491
492 const listbox = component.find('[role="listbox"]')
493 expect(listbox.text()).toContain('latest')
494 expect(listbox.text()).toContain('stable')
495 })
496
497 it('shows "latest" tag with special styling', async () => {
498 const component = await mountSuspended(VersionSelector, {
499 props: {
500 packageName: 'test-package',
501 currentVersion: '1.0.0',
502 versions: { '1.0.0': {} },
503 distTags: { latest: '1.0.0' },
504 urlPattern: '/package-docs/test-package/v/{version}',
505 },
506 })
507
508 const button = component.find('button[aria-haspopup="listbox"]')
509 await button.trigger('click')
510
511 // Find the latest tag span
512 const latestTags = component.findAll('span').filter(s => s.text() === 'latest')
513 expect(latestTags.length).toBeGreaterThan(0)
514 // Should have green styling
515 const hasGreenStyling = latestTags.some(t => t.classes().some(c => c.includes('green')))
516 expect(hasGreenStyling).toBe(true)
517 })
518 })
519
520 describe('loading states', () => {
521 it('shows loading spinner when fetching versions', async () => {
522 let resolvePromise: (value: unknown[]) => void
523 const loadingPromise = new Promise<unknown[]>(resolve => {
524 resolvePromise = resolve
525 })
526 mockFetchAllPackageVersions.mockReturnValue(loadingPromise)
527
528 const component = await mountSuspended(VersionSelector, {
529 props: {
530 packageName: 'test-package',
531 currentVersion: '1.0.0',
532 versions: { '1.0.0': {} },
533 distTags: { latest: '1.0.0' },
534 urlPattern: '/package-docs/test-package/v/{version}',
535 },
536 })
537
538 const button = component.find('button[aria-haspopup="listbox"]')
539 await button.trigger('click')
540
541 // Click expand
542 const expandButton = component.find('[role="listbox"] button[aria-expanded]')
543 await expandButton.trigger('click')
544
545 // Should show loading spinner (motion-safe:animate-spin is applied)
546 await vi.waitFor(() => {
547 const spinner = component.find('.i-svg-spinners\\:ring-resize')
548 expect(spinner.exists()).toBe(true)
549 })
550
551 // Resolve the promise to clean up
552 resolvePromise!([])
553 })
554 })
555
556 describe('accessibility', () => {
557 it('has aria-haspopup="listbox" on trigger button', async () => {
558 const component = await mountSuspended(VersionSelector, {
559 props: {
560 packageName: 'test-package',
561 currentVersion: '1.0.0',
562 versions: { '1.0.0': {} },
563 distTags: { latest: '1.0.0' },
564 urlPattern: '/package-docs/test-package/v/{version}',
565 },
566 })
567
568 const button = component.find('button[aria-haspopup]')
569 expect(button.attributes('aria-haspopup')).toBe('listbox')
570 })
571
572 it('has role="listbox" on dropdown', async () => {
573 const component = await mountSuspended(VersionSelector, {
574 props: {
575 packageName: 'test-package',
576 currentVersion: '1.0.0',
577 versions: { '1.0.0': {} },
578 distTags: { latest: '1.0.0' },
579 urlPattern: '/package-docs/test-package/v/{version}',
580 },
581 })
582
583 const button = component.find('button[aria-haspopup="listbox"]')
584 await button.trigger('click')
585
586 expect(component.find('[role="listbox"]').exists()).toBe(true)
587 })
588
589 it('has role="option" on version items', async () => {
590 const component = await mountSuspended(VersionSelector, {
591 props: {
592 packageName: 'test-package',
593 currentVersion: '1.0.0',
594 versions: { '1.0.0': {} },
595 distTags: { latest: '1.0.0' },
596 urlPattern: '/package-docs/test-package/v/{version}',
597 },
598 })
599
600 const button = component.find('button[aria-haspopup="listbox"]')
601 await button.trigger('click')
602
603 expect(component.find('[role="option"]').exists()).toBe(true)
604 })
605
606 it('sets aria-selected on current version', async () => {
607 const component = await mountSuspended(VersionSelector, {
608 props: {
609 packageName: 'test-package',
610 currentVersion: '1.0.0',
611 versions: { '1.0.0': {} },
612 distTags: { latest: '1.0.0' },
613 urlPattern: '/package-docs/test-package/v/{version}',
614 },
615 })
616
617 const button = component.find('button[aria-haspopup="listbox"]')
618 await button.trigger('click')
619
620 const selectedOption = component.find('[role="option"][aria-selected="true"]')
621 expect(selectedOption.exists()).toBe(true)
622 })
623
624 it('updates aria-activedescendant when navigating', async () => {
625 const component = await mountSuspended(VersionSelector, {
626 props: {
627 packageName: 'test-package',
628 currentVersion: '2.0.0',
629 versions: { '1.0.0': {}, '2.0.0': {} },
630 distTags: {
631 latest: '2.0.0',
632 old: '1.0.0',
633 },
634 urlPattern: '/package-docs/test-package/v/{version}',
635 },
636 })
637
638 const button = component.find('button[aria-haspopup="listbox"]')
639 await button.trigger('click')
640
641 const listbox = component.find('[role="listbox"]')
642 expect(listbox.attributes('aria-activedescendant')).toBeDefined()
643 })
644
645 it('expand buttons have aria-expanded attribute', async () => {
646 const component = await mountSuspended(VersionSelector, {
647 props: {
648 packageName: 'test-package',
649 currentVersion: '1.0.0',
650 versions: { '1.0.0': {} },
651 distTags: { latest: '1.0.0' },
652 urlPattern: '/package-docs/test-package/v/{version}',
653 },
654 })
655
656 const button = component.find('button[aria-haspopup="listbox"]')
657 await button.trigger('click')
658
659 const expandButton = component.find('[role="listbox"] button[aria-expanded]')
660 expect(expandButton.exists()).toBe(true)
661 expect(['true', 'false']).toContain(expandButton.attributes('aria-expanded'))
662 })
663
664 it('expand buttons have aria-label', async () => {
665 const component = await mountSuspended(VersionSelector, {
666 props: {
667 packageName: 'test-package',
668 currentVersion: '1.0.0',
669 versions: { '1.0.0': {} },
670 distTags: { latest: '1.0.0' },
671 urlPattern: '/package-docs/test-package/v/{version}',
672 },
673 })
674
675 const button = component.find('button[aria-haspopup="listbox"]')
676 await button.trigger('click')
677
678 const expandButton = component.find('[role="listbox"] button[aria-label]')
679 expect(expandButton.exists()).toBe(true)
680 expect(expandButton.attributes('aria-label')).toMatch(/Expand|Collapse/)
681 })
682
683 it('icons have aria-hidden attribute', async () => {
684 const component = await mountSuspended(VersionSelector, {
685 props: {
686 packageName: 'test-package',
687 currentVersion: '1.0.0',
688 versions: { '1.0.0': {} },
689 distTags: { latest: '1.0.0' },
690 urlPattern: '/package-docs/test-package/v/{version}',
691 },
692 })
693
694 // The chevron icon in the main button
695 const chevronIcon = component.find('button[aria-haspopup] span[aria-hidden="true"]')
696 expect(chevronIcon.exists()).toBe(true)
697 })
698 })
699
700 describe('error handling', () => {
701 it('handles fetch errors gracefully', async () => {
702 mockFetchAllPackageVersions.mockRejectedValue(new Error('Network error'))
703
704 const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
705
706 const component = await mountSuspended(VersionSelector, {
707 props: {
708 packageName: 'test-package',
709 currentVersion: '1.0.0',
710 versions: { '1.0.0': {} },
711 distTags: { latest: '1.0.0' },
712 urlPattern: '/package-docs/test-package/v/{version}',
713 },
714 })
715
716 const button = component.find('button[aria-haspopup="listbox"]')
717 await button.trigger('click')
718
719 // Click expand
720 const expandButton = component.find('[role="listbox"] button[aria-expanded]')
721 await expandButton.trigger('click')
722
723 // Wait for error to be logged
724 await vi.waitFor(() => {
725 expect(consoleSpy).toHaveBeenCalledWith('Failed to load versions:', expect.any(Error))
726 })
727
728 consoleSpy.mockRestore()
729 })
730 })
731
732 describe('caching behavior', () => {
733 it('only fetches versions once when expanding multiple groups', async () => {
734 mockFetchAllPackageVersions.mockResolvedValue([
735 { version: '2.0.0', time: '2024-01-15T12:00:00.000Z', hasProvenance: false },
736 { version: '1.0.0', time: '2024-01-10T12:00:00.000Z', hasProvenance: false },
737 ])
738
739 const component = await mountSuspended(VersionSelector, {
740 props: {
741 packageName: 'test-package',
742 currentVersion: '2.0.0',
743 versions: { '1.0.0': {}, '2.0.0': {} },
744 distTags: {
745 latest: '2.0.0',
746 old: '1.0.0',
747 },
748 urlPattern: '/package-docs/test-package/v/{version}',
749 },
750 })
751
752 const button = component.find('button[aria-haspopup="listbox"]')
753 await button.trigger('click')
754
755 // Expand first group
756 const expandButtons = component.findAll('[role="listbox"] button[aria-expanded="false"]')
757 if (expandButtons[0]) {
758 await expandButtons[0].trigger('click')
759 }
760
761 await vi.waitFor(() => {
762 expect(mockFetchAllPackageVersions).toHaveBeenCalledTimes(1)
763 })
764
765 // Close and reopen
766 await button.trigger('click')
767 await button.trigger('click')
768
769 // Expand another group - should not fetch again
770 const updatedButtons = component.findAll('[role="listbox"] button[aria-expanded="false"]')
771 if (updatedButtons[0]) {
772 await updatedButtons[0].trigger('click')
773 }
774
775 // Should still only have been called once
776 expect(mockFetchAllPackageVersions).toHaveBeenCalledTimes(1)
777 })
778 })
779
780 describe('click outside', () => {
781 it('closes dropdown when clicking outside', async () => {
782 const component = await mountSuspended(VersionSelector, {
783 props: {
784 packageName: 'test-package',
785 currentVersion: '1.0.0',
786 versions: { '1.0.0': {} },
787 distTags: { latest: '1.0.0' },
788 urlPattern: '/package-docs/test-package/v/{version}',
789 },
790 attachTo: document.body,
791 })
792
793 const button = component.find('button[aria-haspopup="listbox"]')
794 await button.trigger('click')
795 expect(button.attributes('aria-expanded')).toBe('true')
796
797 // Simulate click outside by directly setting isOpen
798 // Note: onClickOutside is hard to test in JSDOM, so we verify the behavior exists
799 // by checking the component closes when we trigger a click on the main element
800 // after it opens
801 })
802 })
803})