davidwindham.com
forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
1import { expect, test } from './test-utils'
2
3test.describe('Package Page', () => {
4 test('/vue → package manager select dropdown works', async ({ page, goto }) => {
5 await goto('/package/vue', { waitUntil: 'hydration' })
6
7 await expect(page.locator('h1')).toContainText('vue', { timeout: 15000 })
8
9 const packageManagerButton = page.locator('button[aria-haspopup="listbox"]').first()
10 await expect(packageManagerButton).toBeVisible()
11
12 // Open dropdown
13 await packageManagerButton.click()
14 const packageManagerDropdown = page.locator('[role="listbox"]')
15 await expect(packageManagerDropdown).toBeVisible({ timeout: 5000 })
16
17 // Arrow keys navigate the listbox
18 await packageManagerButton.press('ArrowDown')
19 const firstDescendant = await packageManagerDropdown.getAttribute('aria-activedescendant')
20 await packageManagerButton.press('ArrowDown')
21 const secondDescendant = await packageManagerDropdown.getAttribute('aria-activedescendant')
22 expect(secondDescendant).not.toBe(firstDescendant)
23
24 // Escape closes dropdown and returns focus
25 await packageManagerButton.press('Escape')
26 await expect(packageManagerDropdown).not.toBeVisible()
27 await expect(packageManagerButton).toBeFocused()
28
29 // Enter selects option and closes dropdown
30 await packageManagerButton.click()
31 await expect(packageManagerDropdown).toBeVisible({ timeout: 5000 })
32 await packageManagerButton.press('ArrowDown')
33 await packageManagerButton.press('Enter')
34 await expect(packageManagerDropdown).not.toBeVisible()
35 })
36})