test: add an e2e test

Author: serhalp

modules/runtime/server/cache.ts

@@ -240,6 +240,24 @@ function getMockForUrl(url: string): MockResult | null {
     return null
   }
 
+  // Algolia npm-search API - return mock popular packages
+  if (host.endsWith('-dsn.algolia.net') && pathname.endsWith('/query')) {
+    return {
+      data: {
+        hits: [
+          { name: 'nuxt', downloadsLast30Days: 500_000, modified: new Date().toISOString() },
+          { name: 'pnpm', downloadsLast30Days: 800_000, modified: new Date().toISOString() },
+          { name: 'express', downloadsLast30Days: 1_000_000, modified: new Date().toISOString() },
+          { name: 'minimatch', downloadsLast30Days: 600_000, modified: new Date().toISOString() },
+          { name: 'next', downloadsLast30Days: 700_000, modified: new Date().toISOString() },
+          { name: 'axios', downloadsLast30Days: 900_000, modified: new Date().toISOString() },
+          { name: 'remix', downloadsLast30Days: 400_000, modified: new Date().toISOString() },
+          { name: 'webpack', downloadsLast30Days: 750_000, modified: new Date().toISOString() },
+        ],
+      },
+    }
+  }
+
   // esm.sh is handled specially via $fetch.raw override, not here
   // Return null to indicate no mock available at the cachedFetch level
 

test/e2e/homepage-picks.spec.ts

@@ -0,0 +1,38 @@
+import { expect, test } from './test-utils'
+
+test.describe('Homepage Picks', () => {
+  test('displays 4 picks with highlighted letters', async ({ page, goto }) => {
+    await goto('/', { waitUntil: 'hydration' })
+
+    // Use aria-label to target the picks nav specifically (not the header nav)
+    const picksNav = page.getByRole('navigation', { name: /npmx picks/i })
+    await expect(picksNav).toBeVisible({ timeout: 15000 })
+
+    const pickItems = picksNav.locator('ul > li')
+    await expect(pickItems).toHaveCount(4)
+
+    // Each pick should contain a bold highlighted letter
+    for (let i = 0; i < 4; i++) {
+      const highlightedLetter = pickItems.nth(i).locator('span.font-bold')
+      await expect(highlightedLetter).toBeVisible()
+    }
+
+    // Each pick should be a link to a package page
+    for (let i = 0; i < 4; i++) {
+      const link = pickItems.nth(i).locator('a')
+      const href = await link.getAttribute('href')
+      expect(href).toMatch(/^\/package\//)
+    }
+  })
+
+  test('pick links navigate to package pages', async ({ page, goto }) => {
+    await goto('/', { waitUntil: 'hydration' })
+
+    const picksNav = page.getByRole('navigation', { name: /npmx picks/i })
+    await expect(picksNav).toBeVisible({ timeout: 15000 })
+
+    const firstLink = picksNav.locator('ul > li a').first()
+    await firstLink.click()
+    await expect(page).toHaveURL(/\/package\//)
+  })
+})

test/fixtures/mock-routes.cjs

@@ -520,6 +520,25 @@ function matchGitHubApi(urlString) {
   return null
 }
 
+/**
+ * @param {string} _urlString
+ * @returns {MockResponse | null}
+ */
+function matchAlgoliaApi(_urlString) {
+  return json({
+    hits: [
+      { name: 'nuxt', downloadsLast30Days: 500000, modified: new Date().toISOString() },
+      { name: 'pnpm', downloadsLast30Days: 800000, modified: new Date().toISOString() },
+      { name: 'express', downloadsLast30Days: 1000000, modified: new Date().toISOString() },
+      { name: 'minimatch', downloadsLast30Days: 600000, modified: new Date().toISOString() },
+      { name: 'next', downloadsLast30Days: 700000, modified: new Date().toISOString() },
+      { name: 'axios', downloadsLast30Days: 900000, modified: new Date().toISOString() },
+      { name: 'remix', downloadsLast30Days: 400000, modified: new Date().toISOString() },
+      { name: 'webpack', downloadsLast30Days: 750000, modified: new Date().toISOString() },
+    ],
+  })
+}
+
 /**
  * Route definitions mapping URL patterns to their matchers.
  * Each entry has a pattern (for Playwright's page.route) and a match function
@@ -549,6 +568,7 @@ const routes = [
     pattern: 'https://constellation.microcosm.blue/**',
     match: matchConstellationApi,
   },
+  { name: 'Algolia API', pattern: 'https://*-dsn.algolia.net/**', match: matchAlgoliaApi },
 ]
 
 /**