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('Create Command', () => {
4 test.describe('Visibility', () => {
5 test('/vite - should show create command (same maintainers)', async ({ page, goto }) => {
6 await goto('/package/vite', { waitUntil: 'domcontentloaded' })
7
8 // Create command section should be visible (SSR)
9 // Use specific container to avoid matching README code blocks
10 const createCommandSection = page.locator('.group\\/createcmd').first()
11 await expect(createCommandSection).toBeVisible()
12 await expect(createCommandSection.locator('code')).toContainText(/create vite/i)
13
14 // Link to create-vite should be present (uses sr-only text, so check attachment not visibility)
15 await expect(page.locator('a[href="/package/create-vite"]').first()).toBeAttached()
16 })
17
18 test('/next - should show create command (shared maintainer, same repo)', async ({
19 page,
20 goto,
21 }) => {
22 await goto('/package/next', { waitUntil: 'domcontentloaded' })
23
24 // Create command section should be visible (SSR)
25 // Use specific container to avoid matching README code blocks
26 const createCommandSection = page.locator('.group\\/createcmd').first()
27 await expect(createCommandSection).toBeVisible()
28 await expect(createCommandSection.locator('code')).toContainText(/create next-app/i)
29
30 // Link to create-next-app should be present (uses sr-only text, so check attachment not visibility)
31 await expect(page.locator('a[href="/package/create-next-app"]').first()).toBeAttached()
32 })
33
34 test('/nuxt - should show create command (same maintainer, same org)', async ({
35 page,
36 goto,
37 }) => {
38 await goto('/package/nuxt', { waitUntil: 'domcontentloaded' })
39
40 // Create command section should be visible (SSR)
41 // nuxt has create-nuxt package, so command is "npm create nuxt"
42 // Use specific container to avoid matching README code blocks
43 const createCommandSection = page.locator('.group\\/createcmd').first()
44 await expect(createCommandSection).toBeVisible()
45 await expect(createCommandSection.locator('code')).toContainText(/create nuxt/i)
46 })
47
48 test('/is-odd - should NOT show create command (no create-is-odd exists)', async ({
49 page,
50 goto,
51 }) => {
52 await goto('/package/is-odd', { waitUntil: 'domcontentloaded' })
53
54 // Wait for package to load
55 await expect(page.locator('h1').filter({ hasText: 'is-odd' })).toBeVisible()
56
57 // Create command section should NOT be visible (no create-is-odd exists)
58 // Use .first() for consistency, though none should exist
59 const createCommandSection = page.locator('.group\\/createcmd').first()
60 await expect(createCommandSection).not.toBeVisible()
61 })
62 })
63
64 test.describe('Copy Functionality', () => {
65 test('hovering create command shows copy button', async ({ page, goto }) => {
66 await goto('/package/vite', { waitUntil: 'hydration' })
67
68 await expect(page.locator('h1')).toContainText('vite', { timeout: 15000 })
69
70 await expect(page.locator('main header').locator('text=/v\\d+\\.\\d+/')).toBeVisible({
71 timeout: 15000,
72 })
73
74 // Find the create command container (wait longer for API response)
75 const createCommandContainer = page.locator('.group\\/createcmd').first()
76 await expect(createCommandContainer).toBeVisible({ timeout: 20000 })
77
78 // Copy button should initially be hidden (opacity-0)
79 const copyButton = createCommandContainer.locator('button')
80 await expect(copyButton).toHaveCSS('opacity', '0')
81
82 // Hover over the container
83 await createCommandContainer.hover()
84
85 // Copy button should become visible
86 await expect(copyButton).toHaveCSS('opacity', '1')
87 })
88
89 test('clicking copy button copies create command and shows confirmation', async ({
90 page,
91 goto,
92 context,
93 }) => {
94 // Grant clipboard permissions
95 await context.grantPermissions(['clipboard-read', 'clipboard-write'])
96
97 await goto('/package/vite', { waitUntil: 'hydration' })
98 await expect(page.locator('h1')).toContainText('vite', { timeout: 15000 })
99
100 await expect(page.locator('main header').locator('text=/v\\d+\\.\\d+/')).toBeVisible({
101 timeout: 15000,
102 })
103
104 const createCommandContainer = page.locator('.group\\/createcmd').first()
105 await expect(createCommandContainer).toBeVisible({ timeout: 20000 })
106
107 await createCommandContainer.hover()
108
109 // Click the copy button
110 const copyButton = createCommandContainer.locator('button')
111 await copyButton.click()
112
113 // Button text should change to "copied!"
114 await expect(copyButton).toContainText(/copied/i)
115
116 // Verify clipboard content contains the create command
117 const clipboardContent = await page.evaluate(() => navigator.clipboard.readText())
118 expect(clipboardContent).toMatch(/create vite/i)
119
120 await expect(copyButton).toContainText(/copy/i, { timeout: 5000 })
121 await expect(copyButton).not.toContainText(/copied/i)
122 })
123 })
124
125 test.describe('Install Command Copy', () => {
126 test('hovering install command shows copy button', async ({ page, goto }) => {
127 await goto('/package/is-odd', { waitUntil: 'hydration' })
128
129 // Find the install command container
130 const installCommandContainer = page.locator('.group\\/installcmd').first()
131 await expect(installCommandContainer).toBeVisible()
132
133 // Copy button should initially be hidden
134 const copyButton = installCommandContainer.locator('button')
135 await expect(copyButton).toHaveCSS('opacity', '0')
136
137 // Hover over the container
138 await installCommandContainer.hover()
139
140 // Copy button should become visible
141 await expect(copyButton).toHaveCSS('opacity', '1')
142 })
143
144 test('clicking copy button copies install command and shows confirmation', async ({
145 page,
146 goto,
147 context,
148 }) => {
149 // Grant clipboard permissions
150 await context.grantPermissions(['clipboard-read', 'clipboard-write'])
151
152 await goto('/package/is-odd', { waitUntil: 'hydration' })
153
154 // Find and hover over the install command container
155 const installCommandContainer = page.locator('.group\\/installcmd').first()
156 await installCommandContainer.hover()
157
158 // Click the copy button
159 const copyButton = installCommandContainer.locator('button')
160 await copyButton.click()
161
162 // Button text should change to "copied!"
163 await expect(copyButton).toContainText(/copied/i)
164
165 // Verify clipboard content contains the install command
166 const clipboardContent = await page.evaluate(() => navigator.clipboard.readText())
167 expect(clipboardContent).toMatch(/install is-odd|add is-odd/i)
168
169 await expect(copyButton).toContainText(/copy/i, { timeout: 5000 })
170 await expect(copyButton).not.toContainText(/copied/i)
171 })
172 })
173})