Something went wrong. Try again.
[READ-ONLY]
a fast, modern browser for the npm registry forked from npmx.dev/npmx.dev
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174import { expect, test } from './test-utils'
test.describe('Create Command', () => { test.describe('Visibility', () => { test('/vite - should show create command (same maintainers)', async ({ page, goto }) => { await goto('/package/vite', { waitUntil: 'domcontentloaded' })
// Create command section should be visible (SSR) // Use specific container to avoid matching README code blocks const createCommandSection = page.locator('.group\\/createcmd').first() await expect(createCommandSection).toBeVisible() await expect(createCommandSection.locator('code')).toContainText(/create vite/i)
// Link to create-vite should be present (uses sr-only text, so check attachment not visibility) await expect(page.locator('a[href="/package/create-vite"]').first()).toBeAttached() })
test('/next - should show create command (shared maintainer, same repo)', async ({ page, goto, }) => { await goto('/package/next', { waitUntil: 'domcontentloaded' })
// Create command section should be visible (SSR) // Use specific container to avoid matching README code blocks const createCommandSection = page.locator('.group\\/createcmd').first() await expect(createCommandSection).toBeVisible() await expect(createCommandSection.locator('code')).toContainText(/create next-app/i)
// Link to create-next-app should be present (uses sr-only text, so check attachment not visibility) await expect(page.locator('a[href="/package/create-next-app"]').first()).toBeAttached() })
test('/nuxt - should show create command (same maintainer, same org)', async ({ page, goto, }) => { await goto('/package/nuxt', { waitUntil: 'domcontentloaded' })
// Create command section should be visible (SSR) // nuxt has create-nuxt package, so command is "npm create nuxt" // Use specific container to avoid matching README code blocks const createCommandSection = page.locator('.group\\/createcmd').first() await expect(createCommandSection).toBeVisible() await expect(createCommandSection.locator('code')).toContainText(/create nuxt/i) })
test('/is-odd - should NOT show create command (no create-is-odd exists)', async ({ page, goto, }) => { await goto('/package/is-odd', { waitUntil: 'domcontentloaded' })
// Wait for package to load await expect(page.locator('h1').filter({ hasText: 'is-odd' })).toBeVisible()
// Create command section should NOT be visible (no create-is-odd exists) // Use .first() for consistency, though none should exist const createCommandSection = page.locator('.group\\/createcmd').first() await expect(createCommandSection).not.toBeVisible() }) })
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' })
// Find the install command container const installCommandContainer = page.locator('.group\\/installcmd').first() await expect(installCommandContainer).toBeVisible()
// Copy button should initially be hidden const copyButton = installCommandContainer.locator('button') await expect(copyButton).toHaveCSS('opacity', '0')
// Hover over the container await installCommandContainer.hover()
// Copy button should become visible await expect(copyButton).toHaveCSS('opacity', '1') })
test('clicking copy button copies install command and shows confirmation', async ({ page, goto, context, }) => { // Grant clipboard permissions await context.grantPermissions(['clipboard-read', 'clipboard-write'])
await goto('/package/is-odd', { waitUntil: 'hydration' })
// Find and hover over the install command container const installCommandContainer = page.locator('.group\\/installcmd').first() await installCommandContainer.hover()
// Click the copy button const copyButton = installCommandContainer.locator('button') await copyButton.click()
// Button text should change to "copied!" await expect(copyButton).toContainText(/copied/i)
// Verify clipboard content contains the install command const clipboardContent = await page.evaluate(() => navigator.clipboard.readText()) expect(clipboardContent).toMatch(/install is-odd|add is-odd/i)
await expect(copyButton).toContainText(/copy/i, { timeout: 5000 }) await expect(copyButton).not.toContainText(/copied/i) }) })})