Fix version dropdown group expansion behavior

- cover version page links for scoped and unscoped packages
- add regression tests for collapsing groups, prop resets, and loading guards

Author: tinsever

test/nuxt/components/Package/Versions.spec.ts

@@ -1,7 +1,9 @@
 import { describe, expect, it, vi, beforeEach } from 'vitest'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
 import type { DOMWrapper } from '@vue/test-utils'
+import type { Router } from 'vue-router'
 import PackageVersions from '~/components/Package/Versions.vue'
+import { packageVersionsRoute } from '~/utils/router'
 
 // Mock the fetchAllPackageVersions function
 const mockFetchAllPackageVersions = vi.fn()
@@ -109,6 +111,42 @@ describe('PackageVersions', () => {
       expect(versionLinks[0]?.text()).toBe('1.0.0')
     })
 
+    it('view-all-versions link uses packageVersionsRoute for unscoped packages', async () => {
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0'),
+          },
+          distTags: { latest: '1.0.0' },
+          time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      const router = component.vm.$router as Router
+      const expectedHref = router.resolve(packageVersionsRoute('test-package')).href
+      const viewAll = component.find('[data-testid="view-all-versions-link"]')
+      expect(viewAll.attributes('href')).toBe(expectedHref)
+    })
+
+    it('view-all-versions link uses packageVersionsRoute for scoped packages', async () => {
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: '@scope/test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0'),
+          },
+          distTags: { latest: '1.0.0' },
+          time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      const router = component.vm.$router as Router
+      const expectedHref = router.resolve(packageVersionsRoute('@scope/test-package')).href
+      const viewAll = component.find('[data-testid="view-all-versions-link"]')
+      expect(viewAll.attributes('href')).toBe(expectedHref)
+    })
+
     it('highlights the current version row when selectedVersion prop matches', async () => {
       const component = await mountSuspended(PackageVersions, {
         props: {

test/nuxt/components/VersionSelector.spec.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it, vi, beforeEach } from 'vitest'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
+import type { PackageVersionInfo } from '#shared/types/npm-registry'
 import VersionSelector from '~/components/VersionSelector.vue'
 
 // Mock the fetchAllPackageVersions function
@@ -466,6 +467,99 @@ describe('VersionSelector', () => {
         expect(collapsedButton.exists()).toBe(true)
       })
     })
+
+    it('collapses additional version groups with ArrowLeft when showAllGroups is open', async () => {
+      mockFetchAllPackageVersions.mockResolvedValue([
+        { version: '1.0.0', time: '2024-01-15T12:00:00.000Z', hasProvenance: false },
+        { version: '0.9.0', time: '2024-01-10T12:00:00.000Z', hasProvenance: false },
+      ])
+
+      const component = await mountSuspended(VersionSelector, {
+        props: {
+          packageName: 'test-package',
+          currentVersion: '1.0.0',
+          versions: { '1.0.0': {}, '0.9.0': {} },
+          distTags: { latest: '1.0.0' },
+          urlPattern: '/package-docs/test-package/v/{version}',
+        },
+      })
+
+      const trigger = component.find('button[aria-haspopup="listbox"]')
+      await trigger.trigger('click')
+
+      await component.find('[role="listbox"] button[aria-expanded="false"]').trigger('click')
+
+      await vi.waitFor(() => {
+        expect(component.find('[role="listbox"]').text()).toContain('0.9')
+      })
+
+      const listbox = component.find('[role="listbox"]')
+      await listbox.trigger('keydown', { key: 'ArrowLeft' })
+
+      await vi.waitFor(() => {
+        expect(listbox.text()).not.toContain('0.9')
+      })
+    })
+
+    it('resets showAllGroups when dist-tags props change after loading', async () => {
+      mockFetchAllPackageVersions.mockResolvedValue([
+        { version: '1.0.0', time: '2024-01-15T12:00:00.000Z', hasProvenance: false },
+        { version: '0.9.0', time: '2024-01-10T12:00:00.000Z', hasProvenance: false },
+      ])
+
+      const component = await mountSuspended(VersionSelector, {
+        props: {
+          packageName: 'test-package',
+          currentVersion: '1.0.0',
+          versions: { '1.0.0': {}, '0.9.0': {} },
+          distTags: { latest: '1.0.0' },
+          urlPattern: '/package-docs/test-package/v/{version}',
+        },
+      })
+
+      const trigger = component.find('button[aria-haspopup="listbox"]')
+      await trigger.trigger('click')
+      await component.find('[role="listbox"] button[aria-expanded="false"]').trigger('click')
+
+      await vi.waitFor(() => {
+        expect(component.find('[role="listbox"]').text()).toContain('0.9')
+      })
+
+      await component.setProps({ distTags: { latest: '1.0.0' } })
+
+      await vi.waitFor(() => {
+        expect(component.find('[role="listbox"]').text()).not.toContain('0.9')
+      })
+    })
+
+    it('ignores expand clicks while a group is already loading', async () => {
+      let finishLoad: (value: PackageVersionInfo[]) => void
+      const loadPromise = new Promise<PackageVersionInfo[]>(resolve => {
+        finishLoad = resolve
+      })
+      mockFetchAllPackageVersions.mockReturnValue(loadPromise)
+
+      const component = await mountSuspended(VersionSelector, {
+        props: {
+          packageName: 'test-package',
+          currentVersion: '1.0.0',
+          versions: { '1.0.0': {} },
+          distTags: { latest: '1.0.0' },
+          urlPattern: '/package-docs/test-package/v/{version}',
+        },
+      })
+
+      const trigger = component.find('button[aria-haspopup="listbox"]')
+      await trigger.trigger('click')
+
+      const expandButton = component.find('[role="listbox"] button[aria-expanded]')
+      await expandButton.trigger('click')
+      await expandButton.trigger('click')
+
+      expect(mockFetchAllPackageVersions).toHaveBeenCalledTimes(1)
+
+      finishLoad!([{ version: '1.0.0', time: '2024-01-15T12:00:00.000Z', hasProvenance: false }])
+    })
   })
 
   describe('0.x version grouping', () => {