test: add basic e2e and unit tests

Author: devdumpling

test/unit/parse-package-param.spec.ts

@@ -0,0 +1,126 @@
+import { describe, expect, it } from 'vitest'
+import { parsePackageParam } from '../../shared/utils/npm'
+
+describe('parsePackageParam', () => {
+  describe('unscoped packages', () => {
+    it('parses package name without version', () => {
+      const result = parsePackageParam('vue')
+      expect(result).toEqual({
+        packageName: 'vue',
+        version: undefined,
+        rest: [],
+      })
+    })
+
+    it('parses package name with version', () => {
+      const result = parsePackageParam('vue/v/3.4.0')
+      expect(result).toEqual({
+        packageName: 'vue',
+        version: '3.4.0',
+        rest: [],
+      })
+    })
+
+    it('parses package name with prerelease version', () => {
+      const result = parsePackageParam('nuxt/v/4.0.0-rc.1')
+      expect(result).toEqual({
+        packageName: 'nuxt',
+        version: '4.0.0-rc.1',
+        rest: [],
+      })
+    })
+
+    it('parses package name with version and file path', () => {
+      const result = parsePackageParam('vue/v/3.4.0/src/index.ts')
+      expect(result).toEqual({
+        packageName: 'vue',
+        version: '3.4.0',
+        rest: ['src', 'index.ts'],
+      })
+    })
+
+    it('parses package name with version and nested file path', () => {
+      const result = parsePackageParam('lodash/v/4.17.21/lib/fp/map.js')
+      expect(result).toEqual({
+        packageName: 'lodash',
+        version: '4.17.21',
+        rest: ['lib', 'fp', 'map.js'],
+      })
+    })
+  })
+
+  describe('scoped packages', () => {
+    it('parses scoped package name without version', () => {
+      const result = parsePackageParam('@nuxt/kit')
+      expect(result).toEqual({
+        packageName: '@nuxt/kit',
+        version: undefined,
+        rest: [],
+      })
+    })
+
+    it('parses scoped package name with version', () => {
+      const result = parsePackageParam('@nuxt/kit/v/1.0.0')
+      expect(result).toEqual({
+        packageName: '@nuxt/kit',
+        version: '1.0.0',
+        rest: [],
+      })
+    })
+
+    it('parses scoped package name with version and file path', () => {
+      const result = parsePackageParam('@vue/compiler-sfc/v/3.5.0/dist/index.d.ts')
+      expect(result).toEqual({
+        packageName: '@vue/compiler-sfc',
+        version: '3.5.0',
+        rest: ['dist', 'index.d.ts'],
+      })
+    })
+
+    it('parses deeply nested scoped packages', () => {
+      const result = parsePackageParam('@types/node/v/22.0.0')
+      expect(result).toEqual({
+        packageName: '@types/node',
+        version: '22.0.0',
+        rest: [],
+      })
+    })
+  })
+
+  describe('edge cases', () => {
+    it('handles package name that looks like a version marker', () => {
+      // Package named "v" shouldn't be confused with version separator
+      const result = parsePackageParam('v')
+      expect(result).toEqual({
+        packageName: 'v',
+        version: undefined,
+        rest: [],
+      })
+    })
+
+    it('handles version segment without actual version', () => {
+      // "v" at the end without a version after it
+      const result = parsePackageParam('vue/v')
+      expect(result).toEqual({
+        packageName: 'vue/v',
+        version: undefined,
+        rest: [],
+      })
+    })
+
+    it('handles package with "v" in the name followed by version', () => {
+      const result = parsePackageParam('vueuse/v/12.0.0')
+      expect(result).toEqual({
+        packageName: 'vueuse',
+        version: '12.0.0',
+        rest: [],
+      })
+    })
+
+    it('handles empty rest when file path is empty', () => {
+      const result = parsePackageParam('react/v/18.2.0')
+      expect(result.rest).toEqual([])
+      expect(result.rest.length).toBe(0)
+    })
+  })
+})

tests/docs.spec.ts

@@ -0,0 +1,186 @@
+import { expect, test } from '@nuxt/test-utils/playwright'
+
+test.describe('API Documentation Pages', () => {
+  test('docs page loads and shows content for a package', async ({ page, goto }) => {
+    // Use a small, stable package with TypeScript types
+    await goto('/docs/ufo/v/1.6.3', { waitUntil: 'networkidle' })
+
+    // Page title should include package name
+    await expect(page).toHaveTitle(/ufo.*docs/i)
+
+    // Header should show package name and version
+    await expect(page.locator('header').getByText('ufo')).toBeVisible()
+    await expect(page.locator('header').getByText('1.6.3')).toBeVisible()
+
+    // API Docs badge should be visible
+    await expect(page.locator('text=API Docs')).toBeVisible()
+
+    // Should have documentation content
+    const docsContent = page.locator('.docs-content')
+    await expect(docsContent).toBeVisible()
+
+    // Should have at least one function documented
+    await expect(page.locator('.docs-badge--function').first()).toBeVisible()
+  })
+
+  test('docs page shows TOC sidebar on desktop', async ({ page, goto }) => {
+    await goto('/docs/ufo/v/1.6.3', { waitUntil: 'networkidle' })
+
+    // TOC sidebar should be visible (on desktop viewport)
+    const tocSidebar = page.locator('aside')
+    await expect(tocSidebar).toBeVisible()
+
+    // Should have "Contents" heading
+    await expect(tocSidebar.getByText('Contents')).toBeVisible()
+
+    // Should have section links (Functions, etc.)
+    await expect(tocSidebar.locator('a[href="#section-function"]')).toBeVisible()
+  })
+
+  test('TOC links navigate to sections', async ({ page, goto }) => {
+    await goto('/docs/ufo/v/1.6.3', { waitUntil: 'networkidle' })
+
+    // Click on Functions in TOC
+    const functionsLink = page.locator('aside a[href="#section-function"]')
+    await functionsLink.click()
+
+    // URL should have the hash
+    await expect(page).toHaveURL(/#section-function/)
+
+    // Section should be scrolled into view
+    const functionSection = page.locator('#section-function')
+    await expect(functionSection).toBeInViewport()
+  })
+
+  test('clicking symbol name scrolls to symbol', async ({ page, goto }) => {
+    await goto('/docs/ufo/v/1.6.3', { waitUntil: 'networkidle' })
+
+    // Find a symbol link in the TOC
+    const symbolLink = page.locator('aside a[href^="#function-"]').first()
+    const href = await symbolLink.getAttribute('href')
+
+    // Click the symbol link
+    await symbolLink.click()
+
+    // URL should have the hash
+    await expect(page).toHaveURL(new RegExp(href!.replace('#', '#')))
+  })
+
+  test('docs page without version redirects to latest', async ({ page, goto }) => {
+    await goto('/docs/ufo', { waitUntil: 'networkidle' })
+
+    // Should redirect to include version
+    await expect(page).toHaveURL(/\/docs\/ufo\/v\//)
+  })
+
+  test('package link in header navigates to package page', async ({ page, goto }) => {
+    await goto('/docs/ufo/v/1.6.3', { waitUntil: 'networkidle' })
+
+    // Click on package name in header
+    const packageLink = page.locator('header a').filter({ hasText: 'ufo' })
+    await packageLink.click()
+
+    // Should navigate to package page (URL ends with /ufo)
+    await expect(page).toHaveURL(/\/ufo$/)
+  })
+
+  test('docs page handles package gracefully when types unavailable', async ({ page, goto }) => {
+    // Use a simple JS package - the page should load without crashing
+    // regardless of whether it has types or shows an error state
+    await goto('/docs/is-odd/v/3.0.1', { waitUntil: 'networkidle' })
+
+    // Header should always show the package name
+    await expect(page.locator('header').getByText('is-odd')).toBeVisible()
+    
+    // Page should be in one of two states:
+    // 1. Shows "not available" / error message
+    // 2. Shows actual docs content (if types were found)
+    const errorState = page.locator('text=/not available|could not generate/i')
+    const docsContent = page.locator('.docs-content')
+    
+    // One of these should be visible
+    await expect(errorState.or(docsContent)).toBeVisible()
+  })
+})
+
+test.describe('Version Selector', () => {
+  test('version selector dropdown shows versions', async ({ page, goto }) => {
+    await goto('/docs/ufo/v/1.6.3', { waitUntil: 'networkidle' })
+
+    // Find and click the version selector button
+    const versionButton = page.locator('header button').filter({ hasText: '1.6.3' })
+
+    // Skip if version selector not present (data might not be loaded)
+    if (!(await versionButton.isVisible())) {
+      test.skip()
+      return
+    }
+
+    await versionButton.click()
+
+    // Dropdown should appear with version options
+    const dropdown = page.locator('[role="listbox"]')
+    await expect(dropdown).toBeVisible()
+
+    // Should show multiple versions
+    const versionOptions = dropdown.locator('[role="option"]')
+    await expect(versionOptions.first()).toBeVisible()
+  })
+
+  test('selecting a version navigates to that version', async ({ page, goto }) => {
+    await goto('/docs/ufo/v/1.6.3', { waitUntil: 'networkidle' })
+
+    // Find and click the version selector button
+    const versionButton = page.locator('header button').filter({ hasText: '1.6.3' })
+
+    // Skip if version selector not present
+    if (!(await versionButton.isVisible())) {
+      test.skip()
+      return
+    }
+
+    await versionButton.click()
+
+    // Find a different version and click it
+    const differentVersion = page.locator('[role="option"]').filter({ hasNotText: '1.6.3' }).first()
+
+    // Skip if no other versions available
+    if (!(await differentVersion.isVisible())) {
+      test.skip()
+      return
+    }
+
+    const versionText = await differentVersion.textContent()
+    await differentVersion.click()
+
+    // URL should change to the new version
+    if (versionText) {
+      const versionMatch = versionText.match(/\d+\.\d+\.\d+/)
+      if (versionMatch) {
+        await expect(page).toHaveURL(new RegExp(`/docs/ufo/v/${versionMatch[0]}`))
+      }
+    }
+  })
+
+  test('escape key closes version dropdown', async ({ page, goto }) => {
+    await goto('/docs/ufo/v/1.6.3', { waitUntil: 'networkidle' })
+
+    const versionButton = page.locator('header button').filter({ hasText: '1.6.3' })
+
+    if (!(await versionButton.isVisible())) {
+      test.skip()
+      return
+    }
+
+    await versionButton.click()
+
+    const dropdown = page.locator('[role="listbox"]')
+    await expect(dropdown).toBeVisible()
+
+    // Press escape
+    await page.keyboard.press('Escape')
+
+    // Dropdown should close
+    await expect(dropdown).not.toBeVisible()
+  })
+})