Skip to content

Commit 508c796

Browse files
danielroedanielroe
committed
chore: revert create-command test
1 parent f45016d commit 508c796

1 file changed

Lines changed: 52 additions & 89 deletions

File tree

‎tests/create-command.spec.ts‎

Lines changed: 52 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,13 @@ import { expect, test } from '@nuxt/test-utils/playwright'
33
test.describe('Create Command', () => {
44
test.describe('Visibility', () => {
55
test('/vite - should show create command (same maintainers)', async ({ page, goto }) => {
6-
await goto('/vite', { waitUntil: 'hydration' })
7-
8-
await expect(page.locator('h1')).toContainText('vite', { timeout: 15000 })
6+
await goto('/vite', { waitUntil: 'domcontentloaded' })
97

10-
// Create command is loaded via API (packageAnalysis), wait for it
11-
// All PM variants are rendered; npm is visible by default
12-
const createCommandRow = page
13-
.locator('[data-pm-cmd="npm"]')
14-
.filter({ hasText: /create vite/i })
15-
await expect(createCommandRow).toBeVisible()
16-
await expect(createCommandRow.locator('code')).toContainText(/create vite/i)
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')
11+
await expect(createCommandSection).toBeVisible()
12+
await expect(createCommandSection.locator('code')).toContainText(/create vite/i)
1713

1814
// Link to create-vite should be present (uses sr-only text, so check attachment not visibility)
1915
await expect(page.locator('a[href="/create-vite"]')).toBeAttached()
@@ -23,81 +19,58 @@ test.describe('Create Command', () => {
2319
page,
2420
goto,
2521
}) => {
26-
await goto('/next', { waitUntil: 'hydration' })
27-
28-
// Wait for package page to load
29-
await expect(page.locator('h1')).toContainText('next', { timeout: 15000 })
22+
await goto('/next', { waitUntil: 'domcontentloaded' })
3023

31-
// Create command is loaded via API
32-
const createCommandRow = page
33-
.locator('[data-pm-cmd="npm"]')
34-
.filter({ hasText: /create next-app/i })
35-
await expect(createCommandRow).toBeVisible({ timeout: 15000 })
36-
await expect(createCommandRow.locator('code')).toContainText(/create next-app/i)
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')
27+
await expect(createCommandSection).toBeVisible()
28+
await expect(createCommandSection.locator('code')).toContainText(/create next-app/i)
3729

38-
// Link to create-next-app should be present
30+
// Link to create-next-app should be present (uses sr-only text, so check attachment not visibility)
3931
await expect(page.locator('a[href="/create-next-app"]')).toBeAttached()
4032
})
4133

4234
test('/nuxt - should show create command (same maintainer, same org)', async ({
4335
page,
4436
goto,
4537
}) => {
46-
await goto('/nuxt', { waitUntil: 'hydration' })
47-
48-
// Wait for package page to load (longer timeout for network flakiness)
49-
await expect(page.locator('h1')).toContainText('nuxt', { timeout: 15000 })
50-
51-
// Create command is loaded via API, wait for it
52-
const createCommandRow = page
53-
.locator('[data-pm-cmd="npm"]')
54-
.filter({ hasText: /create nuxt/i })
55-
await expect(createCommandRow).toBeVisible({ timeout: 15000 })
56-
await expect(createCommandRow.locator('code')).toContainText(/create nuxt/i)
38+
await goto('/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')
44+
await expect(createCommandSection).toBeVisible()
45+
await expect(createCommandSection.locator('code')).toContainText(/create nuxt/i)
5746
})
5847

5948
test('/color - should NOT show create command (different maintainers)', async ({
6049
page,
6150
goto,
6251
}) => {
63-
await goto('/color', { waitUntil: 'hydration' })
52+
await goto('/color', { waitUntil: 'domcontentloaded' })
6453

65-
// Wait for package page to load
54+
// Wait for package to load
6655
await expect(page.locator('h1').filter({ hasText: 'color' })).toBeVisible()
6756

68-
// Wait for API to complete (install command should be visible)
69-
await expect(page.locator('[data-pm-cmd="npm"]').first()).toBeVisible()
70-
71-
// Give time for any create command to appear, then verify it doesn't
72-
await page.waitForTimeout(1000)
73-
74-
// Create command should NOT exist (different maintainers)
75-
const createCommandRow = page
76-
.locator('[data-pm-cmd="npm"]')
77-
.filter({ hasText: /\bcreate color\b/i })
78-
await expect(createCommandRow).toHaveCount(0)
57+
// Create command section should NOT be visible (different maintainers)
58+
const createCommandSection = page.locator('.group\\/createcmd')
59+
await expect(createCommandSection).not.toBeVisible()
7960
})
8061

8162
test('/lodash - should NOT show create command (no create-lodash exists)', async ({
8263
page,
8364
goto,
8465
}) => {
85-
await goto('/lodash', { waitUntil: 'hydration' })
66+
await goto('/lodash', { waitUntil: 'domcontentloaded' })
8667

87-
// Wait for package page to load
68+
// Wait for package to load
8869
await expect(page.locator('h1').filter({ hasText: 'lodash' })).toBeVisible()
8970

90-
// Wait for API to complete (install command should be visible)
91-
await expect(page.locator('[data-pm-cmd="npm"]').first()).toBeVisible()
92-
93-
// Give time for any create command to appear, then verify it doesn't
94-
await page.waitForTimeout(1000)
95-
96-
// Create command should NOT exist (no create-lodash exists)
97-
const createCommandRow = page
98-
.locator('[data-pm-cmd="npm"]')
99-
.filter({ hasText: /\bcreate lodash\b/i })
100-
await expect(createCommandRow).toHaveCount(0)
71+
// Create command section should NOT be visible (no create-lodash exists)
72+
const createCommandSection = page.locator('.group\\/createcmd')
73+
await expect(createCommandSection).not.toBeVisible()
10174
})
10275
})
10376

@@ -106,22 +79,19 @@ test.describe('Create Command', () => {
10679
await goto('/vite', { waitUntil: 'hydration' })
10780

10881
// Wait for package analysis API to load (create command requires this)
109-
// First ensure the package page has loaded (longer timeout for network flakiness)
110-
await expect(page.locator('h1')).toContainText('vite', { timeout: 15000 })
82+
// First ensure the package page has loaded
83+
await expect(page.locator('h1')).toContainText('vite')
11184

112-
// Find the create command row (npm variant) - it contains "create vite" in code
113-
// The component renders all PM variants; npm is visible by default
114-
const createCommandRow = page
115-
.locator('[data-pm-cmd="npm"]')
116-
.filter({ hasText: /create vite/i })
117-
await expect(createCommandRow).toBeVisible({ timeout: 15000 })
85+
// Find the create command container (wait longer for API response)
86+
const createCommandContainer = page.locator('.group\\/createcmd')
87+
await expect(createCommandContainer).toBeVisible({ timeout: 15000 })
11888

11989
// Copy button should initially be hidden (opacity-0)
120-
const copyButton = createCommandRow.locator('button')
90+
const copyButton = createCommandContainer.locator('button')
12191
await expect(copyButton).toHaveCSS('opacity', '0')
12292

12393
// Hover over the container
124-
await createCommandRow.hover()
94+
await createCommandContainer.hover()
12595

12696
// Copy button should become visible
12797
await expect(copyButton).toHaveCSS('opacity', '1')
@@ -137,18 +107,12 @@ test.describe('Create Command', () => {
137107

138108
await goto('/vite', { waitUntil: 'hydration' })
139109

140-
// Wait for h1 to confirm page loaded (longer timeout for network flakiness)
141-
await expect(page.locator('h1')).toContainText('vite', { timeout: 15000 })
142-
143-
// Find and hover over the create command row (npm variant), wait for API
144-
const createCommandRow = page
145-
.locator('[data-pm-cmd="npm"]')
146-
.filter({ hasText: /create vite/i })
147-
await expect(createCommandRow).toBeVisible({ timeout: 15000 })
148-
await createCommandRow.hover()
110+
// Find and hover over the create command container
111+
const createCommandContainer = page.locator('.group\\/createcmd')
112+
await createCommandContainer.hover()
149113

150114
// Click the copy button
151-
const copyButton = createCommandRow.locator('button')
115+
const copyButton = createCommandContainer.locator('button')
152116
await copyButton.click()
153117

154118
// Button text should change to "copied!"
@@ -167,17 +131,16 @@ test.describe('Create Command', () => {
167131
test('hovering install command shows copy button', async ({ page, goto }) => {
168132
await goto('/lodash', { waitUntil: 'hydration' })
169133

170-
// Find the npm install command row (npm is the default, so it's visible)
171-
// The component uses group/cmd class for each command row
172-
const installCommandRow = page.locator('[data-pm-cmd="npm"]').first()
173-
await expect(installCommandRow).toBeVisible()
134+
// Find the install command container
135+
const installCommandContainer = page.locator('.group\\/installcmd')
136+
await expect(installCommandContainer).toBeVisible()
174137

175-
// Copy button should initially be hidden (opacity-0)
176-
const copyButton = installCommandRow.locator('button')
138+
// Copy button should initially be hidden
139+
const copyButton = installCommandContainer.locator('button')
177140
await expect(copyButton).toHaveCSS('opacity', '0')
178141

179142
// Hover over the container
180-
await installCommandRow.hover()
143+
await installCommandContainer.hover()
181144

182145
// Copy button should become visible
183146
await expect(copyButton).toHaveCSS('opacity', '1')
@@ -193,12 +156,12 @@ test.describe('Create Command', () => {
193156

194157
await goto('/lodash', { waitUntil: 'hydration' })
195158

196-
// Find and hover over the npm install command row (npm is the default)
197-
const installCommandRow = page.locator('[data-pm-cmd="npm"]').first()
198-
await installCommandRow.hover()
159+
// Find and hover over the install command container
160+
const installCommandContainer = page.locator('.group\\/installcmd')
161+
await installCommandContainer.hover()
199162

200163
// Click the copy button
201-
const copyButton = installCommandRow.locator('button')
164+
const copyButton = installCommandContainer.locator('button')
202165
await copyButton.click()
203166

204167
// Button text should change to "copied!"

0 commit comments

Comments
 (0)