test: update tests for new package-header

Author: alexdln

app/components/Package/Header.vue

@@ -221,6 +221,7 @@ const likeAction = async () => {
     ref="header"
     class="bg-bg sticky top-14 z-1 border-b border-border flex flex-col md:flex-row-reverse items-baseline justify-between gap-x-2 gap-y-1 flex-wrap min-w-0 pt-2"
     :class="[$style.packageHeader]"
+    data-testid="package-subheader"
   >
     <div
       class="flex items-center max-md:justify-between max-md:w-full max-md:flex-row-reverse gap-2"

test/e2e/create-command.spec.ts

@@ -61,67 +61,6 @@ test.describe('Create Command', () => {
     })
   })
 
-  test.describe('Copy Functionality', () => {
-    test('hovering create command shows copy button', async ({ page, goto }) => {
-      await goto('/package/vite', { waitUntil: 'hydration' })
-
-      await expect(page.locator('h1')).toContainText('vite', { timeout: 15000 })
-
-      await expect(page.locator('main header').locator('text=/v\\d+\\.\\d+/')).toBeVisible({
-        timeout: 15000,
-      })
-
-      // Find the create command container (wait longer for API response)
-      const createCommandContainer = page.locator('.group\\/createcmd').first()
-      await expect(createCommandContainer).toBeVisible({ timeout: 20000 })
-
-      // Copy button should initially be hidden (opacity-0)
-      const copyButton = createCommandContainer.locator('button')
-      await expect(copyButton).toHaveCSS('opacity', '0')
-
-      // Hover over the container
-      await createCommandContainer.hover()
-
-      // Copy button should become visible
-      await expect(copyButton).toHaveCSS('opacity', '1')
-    })
-
-    test('clicking copy button copies create command and shows confirmation', async ({
-      page,
-      goto,
-      context,
-    }) => {
-      // Grant clipboard permissions
-      await context.grantPermissions(['clipboard-read', 'clipboard-write'])
-
-      await goto('/package/vite', { waitUntil: 'hydration' })
-      await expect(page.locator('h1')).toContainText('vite', { timeout: 15000 })
-
-      await expect(page.locator('main header').locator('text=/v\\d+\\.\\d+/')).toBeVisible({
-        timeout: 15000,
-      })
-
-      const createCommandContainer = page.locator('.group\\/createcmd').first()
-      await expect(createCommandContainer).toBeVisible({ timeout: 20000 })
-
-      await createCommandContainer.hover()
-
-      // Click the copy button
-      const copyButton = createCommandContainer.locator('button')
-      await copyButton.click()
-
-      // Button text should change to "copied!"
-      await expect(copyButton).toContainText(/copied/i)
-
-      // Verify clipboard content contains the create command
-      const clipboardContent = await page.evaluate(() => navigator.clipboard.readText())
-      expect(clipboardContent).toMatch(/create vite/i)
-
-      await expect(copyButton).toContainText(/copy/i, { timeout: 5000 })
-      await expect(copyButton).not.toContainText(/copied/i)
-    })
-  })
-
   test.describe('Install Command Copy', () => {
     test('hovering install command shows copy button', async ({ page, goto }) => {
       await goto('/package/is-odd', { waitUntil: 'hydration' })

test/e2e/package-manager-select.spec.ts

@@ -6,12 +6,12 @@ test.describe('Package Page', () => {
 
     await expect(page.locator('h1')).toContainText('vue', { timeout: 15000 })
 
-    const packageManagerButton = page.locator('button[aria-haspopup="listbox"]').first()
+    const packageManagerButton = page.locator('article button[aria-haspopup="listbox"]').first()
     await expect(packageManagerButton).toBeVisible()
 
     // Open dropdown
     await packageManagerButton.click()
-    const packageManagerDropdown = page.locator('[role="listbox"]')
+    const packageManagerDropdown = page.locator('article [role="listbox"]')
     await expect(packageManagerDropdown).toBeVisible({ timeout: 5000 })
 
     // Arrow keys navigate the listbox

test/e2e/url-compatibility.spec.ts

@@ -8,7 +8,9 @@ test.describe('npmjs.com URL Compatibility', () => {
       // Should show package name
       await expect(page.locator('h1')).toContainText('vue')
       // Should have version badge
-      await expect(page.locator('main header').locator('text=/v\\d+\\.\\d+/')).toBeVisible()
+      await expect(
+        page.locator('[data-testid="package-subheader"]').locator('text=/v\\d+\\.\\d+/'),
+      ).toBeVisible()
     })
 
     test('/package/@nuxt/kit → scoped package page', async ({ page, goto }) => {
@@ -24,7 +26,7 @@ test.describe('npmjs.com URL Compatibility', () => {
       // Should show package name
       await expect(page.locator('h1')).toContainText('vue')
       // Should show the specific version
-      await expect(page.locator('text=v3.5.27')).toBeVisible()
+      await expect(page.locator('text=3.5.27')).toBeVisible()
     })
 
     test('/package/@nuxt/kit/v/3.20.0 → scoped package specific version', async ({
@@ -36,7 +38,7 @@ test.describe('npmjs.com URL Compatibility', () => {
       // Should show scoped package name
       await expect(page.locator('h1')).toContainText('@nuxt/kit')
       // Should show the specific version (or "not latest" indicator)
-      await expect(page.locator('text=v3.20.0').first()).toBeVisible()
+      await expect(page.locator('text=3.20.0').first()).toBeVisible()
     })
 
     test('/package/nonexistent-pkg-12345 → 404 handling', async ({ page, goto }) => {