Skip to content

Commit 8f7a50f

Browse files
author
Rachel
authored
feat: UI updates to scaffolded files (#21155)
1 parent 925ef3d commit 8f7a50f

File tree

6 files changed

+64
-68
lines changed

6 files changed

+64
-68
lines changed

‎packages/data-context/src/actions/WizardActions.ts‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -174,14 +174,15 @@ export class WizardActions {
174174
}
175175

176176
private async scaffoldE2E () {
177-
const scaffolded = await Promise.all([
177+
// Order of the scaffoldedFiles is intentional, confirm before changing
178+
const scaffoldedFiles = await Promise.all([
178179
this.scaffoldConfig('e2e'),
179180
this.scaffoldSupport('e2e', this.ctx.coreData.wizard.chosenLanguage),
180181
this.scaffoldSupport('commands', this.ctx.coreData.wizard.chosenLanguage),
181182
this.scaffoldFixtures(),
182183
])
183184

184-
return scaffolded
185+
return scaffoldedFiles
185186
}
186187

187188
private async scaffoldComponent () {
@@ -190,13 +191,16 @@ export class WizardActions {
190191

191192
assert(chosenFramework && chosenLanguage && chosenBundler)
192193

193-
return await Promise.all([
194+
// Order of the scaffoldedFiles is intentional, confirm before changing
195+
const scaffoldedFiles = await Promise.all([
194196
this.scaffoldConfig('component'),
195-
this.scaffoldFixtures(),
196197
this.scaffoldSupport('component', chosenLanguage),
197198
this.scaffoldSupport('commands', chosenLanguage),
198199
this.scaffoldComponentIndexHtml(chosenFramework),
200+
this.scaffoldFixtures(),
199201
])
202+
203+
return scaffoldedFiles
200204
}
201205

202206
private async scaffoldSupport (fileName: 'e2e' | 'component' | 'commands', language: CodeLanguageEnum): Promise<NexusGenObjects['ScaffoldedFile']> {
@@ -207,14 +211,18 @@ export class WizardActions {
207211
await this.ctx.fs.mkdir(supportDir, { recursive: true })
208212

209213
let fileContent: string | undefined
214+
let description: string = ''
210215

211216
if (fileName === 'commands') {
212217
fileContent = commandsFileBody(language)
218+
description = 'A support file that is useful for creating custom Cypress commands and overwriting existing ones.'
213219
} else if (fileName === 'e2e') {
214220
fileContent = supportFileE2E(language)
221+
description = 'The support file that is bundled and loaded before each E2E spec.'
215222
} else if (fileName === 'component') {
216223
assert(this.ctx.coreData.wizard.chosenFramework)
217224
fileContent = supportFileComponent(language, this.ctx.coreData.wizard.chosenFramework)
225+
description = 'The support file that is bundled and loaded before each component testing spec.'
218226
}
219227

220228
assert(fileContent)
@@ -223,7 +231,7 @@ export class WizardActions {
223231

224232
return {
225233
status: 'valid',
226-
description: `Added a ${fileName === 'commands' ? 'commands' : 'support'} file, for extending the Cypress api`,
234+
description,
227235
file: {
228236
absolute: supportFile,
229237
},
@@ -259,7 +267,7 @@ export class WizardActions {
259267

260268
return {
261269
status: 'changes',
262-
description: 'Merge this code with your existing config file',
270+
description: 'Merge this code with your existing config file.',
263271
file: {
264272
absolute: this.ctx.lifecycleManager.configFilePath,
265273
contents: configCode,
@@ -272,10 +280,14 @@ export class WizardActions {
272280
// only do this if config file doesn't exist
273281
this.ctx.lifecycleManager.setConfigFilePath(`cypress.config.${this.ctx.coreData.wizard.chosenLanguage}`)
274282

283+
const description = (testingType === 'e2e')
284+
? 'The Cypress config file for E2E testing.'
285+
: 'The Cypress config file where the component testing dev server is configured.'
286+
275287
return this.scaffoldFile(
276288
this.ctx.lifecycleManager.configFilePath,
277289
configCode,
278-
'Created a new config file',
290+
description,
279291
)
280292
}
281293

@@ -289,7 +301,7 @@ export class WizardActions {
289301

290302
return {
291303
status: 'skipped',
292-
description: 'Fixtures folder already exists',
304+
description: 'An example fixture for data imported into your Cypress tests, such as `cy.intercept()`.',
293305
file: {
294306
absolute: exampleScaffoldPath,
295307
contents: '// Skipped',
@@ -325,7 +337,7 @@ export class WizardActions {
325337
return this.scaffoldFile(
326338
componentIndexHtmlPath,
327339
chosenFramework.componentIndexHtml(),
328-
'The HTML used as the wrapper for all component tests',
340+
'The HTML wrapper that each component is served with. Used for global fonts, CSS, JS, HTML, etc.',
329341
)
330342
}
331343

‎packages/frontend-shared/src/locales/en-US.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -610,7 +610,7 @@
610610
},
611611
"configFiles": {
612612
"title": "Configuration Files",
613-
"description": "We added the following files to your project."
613+
"description": "We added the following files to your project:"
614614
},
615615
"chooseBrowser": {
616616
"title": "Choose a Browser",

‎packages/launchpad/cypress/e2e/project-setup.cy.ts‎

Lines changed: 38 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,30 @@
1-
function verifyFiles (relativePaths: string[]) {
2-
cy.withCtx(async (ctx, o) => {
3-
for (const relativePath of o.relativePaths) {
4-
const stats = await ctx.file.checkIfFileExists(relativePath)
1+
function verifyScaffoldedFiles (testingType: string) {
2+
const expectedFileOrder = (testingType === 'e2e') ? [
3+
'cypress.config.',
4+
'support/e2e.',
5+
'support/commands.',
6+
'fixtures/example.',
7+
] : [
8+
'cypress.config.',
9+
'support/component.',
10+
'support/commands.',
11+
'support/component-index.',
12+
'fixtures/example.',
13+
]
14+
15+
cy.get('[data-cy="collapsible-header"] h2')
16+
.should(($elements) => expect($elements).to.have.length(expectedFileOrder.length)) // assert number of files
17+
.each(($el, i) => {
18+
const relativePath = $el.text()
19+
20+
expect(relativePath, `file index ${i}`).to.include(expectedFileOrder[i]) // assert file order
21+
22+
cy.withCtx(async (ctx, o) => { // assert file exists
23+
const stats = await ctx.file.checkIfFileExists(o.relativePath)
524

625
expect(stats).to.not.be.null.and.not.be.undefined
7-
}
8-
}, { relativePaths })
26+
}, { relativePath })
27+
})
928
}
1029

1130
describe('Launchpad: Setup Project', () => {
@@ -200,7 +219,7 @@ describe('Launchpad: Setup Project', () => {
200219
cy.findByRole('button', { name: 'Next Step' }).click()
201220

202221
cy.contains('h1', 'Configuration Files')
203-
cy.findByText('We added the following files to your project.')
222+
cy.findByText('We added the following files to your project:')
204223

205224
cy.get('[data-cy=changes]').within(() => {
206225
cy.contains('cypress.config.js')
@@ -212,12 +231,7 @@ describe('Launchpad: Setup Project', () => {
212231
cy.containsPath('cypress/fixtures/example.json')
213232
})
214233

215-
verifyFiles([
216-
'cypress.config.js',
217-
'cypress/support/e2e.js',
218-
'cypress/support/commands.js',
219-
'cypress/fixtures/example.json',
220-
])
234+
verifyScaffoldedFiles('e2e')
221235
})
222236

223237
it('moves to "Choose a Browser" page after clicking "Continue" button in first step in configuration page', () => {
@@ -230,7 +244,7 @@ describe('Launchpad: Setup Project', () => {
230244
cy.findByRole('button', { name: 'Next Step' }).click()
231245

232246
cy.contains('h1', 'Configuration Files')
233-
cy.findByText('We added the following files to your project.')
247+
cy.findByText('We added the following files to your project:')
234248

235249
cy.get('[data-cy=valid]').within(() => {
236250
cy.contains('cypress.config.js')
@@ -239,12 +253,7 @@ describe('Launchpad: Setup Project', () => {
239253
cy.containsPath('cypress/fixtures/example.json')
240254
})
241255

242-
verifyFiles([
243-
'cypress.config.js',
244-
'cypress/support/e2e.js',
245-
'cypress/support/commands.js',
246-
'cypress/fixtures/example.json',
247-
])
256+
verifyScaffoldedFiles('e2e')
248257
})
249258

250259
it('shows the configuration setup page when opened via cli with --component flag', () => {
@@ -293,7 +302,7 @@ describe('Launchpad: Setup Project', () => {
293302
cy.findByRole('button', { name: 'Next Step' }).click()
294303

295304
cy.contains('h1', 'Configuration Files')
296-
cy.findByText('We added the following files to your project.')
305+
cy.findByText('We added the following files to your project:')
297306

298307
cy.get('[data-cy=valid]').within(() => {
299308
cy.contains('cypress.config.js')
@@ -302,12 +311,7 @@ describe('Launchpad: Setup Project', () => {
302311
cy.containsPath('cypress/fixtures/example.json')
303312
})
304313

305-
verifyFiles([
306-
'cypress.config.js',
307-
'cypress/support/e2e.js',
308-
'cypress/support/commands.js',
309-
'cypress/fixtures/example.json',
310-
])
314+
verifyScaffoldedFiles('e2e')
311315

312316
cy.findByRole('button', { name: 'Continue' })
313317
.should('not.have.disabled')
@@ -334,7 +338,7 @@ describe('Launchpad: Setup Project', () => {
334338
cy.findByRole('button', { name: 'Next Step' }).click()
335339

336340
cy.contains('h1', 'Configuration Files')
337-
cy.findByText('We added the following files to your project.')
341+
cy.findByText('We added the following files to your project:')
338342

339343
cy.get('[data-cy=valid]').within(() => {
340344
cy.contains('cypress.config.ts')
@@ -343,12 +347,7 @@ describe('Launchpad: Setup Project', () => {
343347
cy.containsPath('cypress/fixtures/example.json')
344348
})
345349

346-
verifyFiles([
347-
'cypress.config.ts',
348-
'cypress/support/e2e.ts',
349-
'cypress/support/commands.ts',
350-
'cypress/fixtures/example.json',
351-
])
350+
verifyScaffoldedFiles('e2e')
352351
})
353352

354353
it('can setup e2e testing for a project selecting TS when CT is configured and config file is JS', () => {
@@ -368,7 +367,7 @@ describe('Launchpad: Setup Project', () => {
368367
cy.findByRole('button', { name: 'Next Step' }).click()
369368

370369
cy.contains('h1', 'Configuration Files')
371-
cy.findByText('We added the following files to your project.')
370+
cy.findByText('We added the following files to your project:')
372371

373372
cy.get('[data-cy=changes]').within(() => {
374373
cy.contains('cypress.config.js')
@@ -380,12 +379,7 @@ describe('Launchpad: Setup Project', () => {
380379
cy.containsPath('cypress/fixtures/example.json')
381380
})
382381

383-
verifyFiles([
384-
'cypress.config.js',
385-
'cypress/support/e2e.ts',
386-
'cypress/support/commands.ts',
387-
'cypress/fixtures/example.json',
388-
])
382+
verifyScaffoldedFiles('e2e')
389383
})
390384

391385
it('can setup CT testing for a project selecting TS when E2E is configured and config file is JS', () => {
@@ -442,12 +436,7 @@ describe('Launchpad: Setup Project', () => {
442436
cy.containsPath('cypress/support/commands.ts')
443437
})
444438

445-
verifyFiles([
446-
'cypress.config.js',
447-
'cypress/support/component-index.html',
448-
'cypress/support/component.ts',
449-
'cypress/support/commands.ts',
450-
])
439+
verifyScaffoldedFiles('component')
451440

452441
cy.findByRole('button', { name: 'Continue' }).should('have.disabled')
453442
})
@@ -501,12 +490,7 @@ describe('Launchpad: Setup Project', () => {
501490
cy.containsPath('cypress/support/commands.ts')
502491
})
503492

504-
verifyFiles([
505-
'cypress.config.js',
506-
'cypress/support/component-index.html',
507-
'cypress/support/component.ts',
508-
'cypress/support/commands.ts',
509-
])
493+
verifyScaffoldedFiles('component')
510494

511495
cy.findByRole('button', { name: 'Continue' }).should('have.disabled')
512496
})
@@ -679,7 +663,7 @@ describe('Launchpad: Setup Project', () => {
679663
cy.containsPath('cypress/fixtures/example.json')
680664
})
681665

682-
verifyFiles(['cypress.config.ts', 'cypress/support/component-index.html', 'cypress/support/component.ts', 'cypress/support/commands.ts', 'cypress/fixtures/example.json'])
666+
verifyScaffoldedFiles('component')
683667

684668
cy.findByRole('button', { name: 'Continue' }).click()
685669

‎packages/launchpad/cypress/e2e/scaffold-project.cy.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ function scaffoldAndOpenE2EProject (opts: {
4545
cy.contains('E2E Testing').click()
4646
cy.contains(opts.language === 'js' ? 'JavaScript' : 'TypeScript').click()
4747
cy.contains('Next').click()
48-
cy.contains('We added the following files to your project.')
48+
cy.contains('We added the following files to your project:')
4949
cy.contains('Continue').click()
5050
}
5151

@@ -84,7 +84,7 @@ function scaffoldAndOpenCTProject (opts: {
8484

8585
cy.contains('Next Step').click()
8686
cy.contains('Skip').click()
87-
cy.contains('We added the following files to your project.')
87+
cy.contains('We added the following files to your project:')
8888
cy.contains('Continue').click()
8989
}
9090

‎packages/launchpad/src/components/code/FileRow.cy.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const messages = defaultMessages.setupPage.configFile
2121
const changesRequiredDescription = messages.changesRequiredDescription.replace('{0}', '')
2222

2323
describe('FileRow', () => {
24-
it('renders each status', () => {
24+
it('renders each status, the expected files, and expected styles', () => {
2525
cy.mount(() => (
2626
<div class="w-full p-5">
2727
<FileRow

‎packages/launchpad/src/components/code/FileRow.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<template #target="{open}">
1010
<ListRowHeader
1111
:class="{ 'border-b border-b-gray-100 rounded-b-none': open }"
12-
class="cursor-pointer"
12+
class="cursor-pointer font-medium"
1313
:description="description"
1414
:icon="statusInfo.icon"
1515
>

0 commit comments

Comments
 (0)