Skip to content

Commit

Permalink
feat: UI updates to scaffolded files (#21155)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rachelruderman
rachelruderman committed Apr 25, 2022
1 parent 925ef3d commit 8f7a50f
Show file tree
Hide file tree
Showing 6 changed files with 64 additions and 68 deletions.
30 changes: 21 additions & 9 deletions packages/data-context/src/actions/WizardActions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,14 +174,15 @@ export class WizardActions {
}

private async scaffoldE2E () {
const scaffolded = await Promise.all([
// Order of the scaffoldedFiles is intentional, confirm before changing
const scaffoldedFiles = await Promise.all([
this.scaffoldConfig('e2e'),
this.scaffoldSupport('e2e', this.ctx.coreData.wizard.chosenLanguage),
this.scaffoldSupport('commands', this.ctx.coreData.wizard.chosenLanguage),
this.scaffoldFixtures(),
])

return scaffolded
return scaffoldedFiles
}

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

assert(chosenFramework && chosenLanguage && chosenBundler)

return await Promise.all([
// Order of the scaffoldedFiles is intentional, confirm before changing
const scaffoldedFiles = await Promise.all([
this.scaffoldConfig('component'),
this.scaffoldFixtures(),
this.scaffoldSupport('component', chosenLanguage),
this.scaffoldSupport('commands', chosenLanguage),
this.scaffoldComponentIndexHtml(chosenFramework),
this.scaffoldFixtures(),
])

return scaffoldedFiles
}

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

let fileContent: string | undefined
let description: string = ''

if (fileName === 'commands') {
fileContent = commandsFileBody(language)
description = 'A support file that is useful for creating custom Cypress commands and overwriting existing ones.'
} else if (fileName === 'e2e') {
fileContent = supportFileE2E(language)
description = 'The support file that is bundled and loaded before each E2E spec.'
} else if (fileName === 'component') {
assert(this.ctx.coreData.wizard.chosenFramework)
fileContent = supportFileComponent(language, this.ctx.coreData.wizard.chosenFramework)
description = 'The support file that is bundled and loaded before each component testing spec.'
}

assert(fileContent)
Expand All @@ -223,7 +231,7 @@ export class WizardActions {

return {
status: 'valid',
description: `Added a ${fileName === 'commands' ? 'commands' : 'support'} file, for extending the Cypress api`,
description,
file: {
absolute: supportFile,
},
Expand Down Expand Up @@ -259,7 +267,7 @@ export class WizardActions {

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

const description = (testingType === 'e2e')
? 'The Cypress config file for E2E testing.'
: 'The Cypress config file where the component testing dev server is configured.'

return this.scaffoldFile(
this.ctx.lifecycleManager.configFilePath,
configCode,
'Created a new config file',
description,
)
}

Expand All @@ -289,7 +301,7 @@ export class WizardActions {

return {
status: 'skipped',
description: 'Fixtures folder already exists',
description: 'An example fixture for data imported into your Cypress tests, such as `cy.intercept()`.',
file: {
absolute: exampleScaffoldPath,
contents: '// Skipped',
Expand Down Expand Up @@ -325,7 +337,7 @@ export class WizardActions {
return this.scaffoldFile(
componentIndexHtmlPath,
chosenFramework.componentIndexHtml(),
'The HTML used as the wrapper for all component tests',
'The HTML wrapper that each component is served with. Used for global fonts, CSS, JS, HTML, etc.',
)
}

Expand Down
2 changes: 1 addition & 1 deletion packages/frontend-shared/src/locales/en-US.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -610,7 +610,7 @@
},
"configFiles": {
"title": "Configuration Files",
"description": "We added the following files to your project."
"description": "We added the following files to your project:"
},
"chooseBrowser": {
"title": "Choose a Browser",
Expand Down
92 changes: 38 additions & 54 deletions packages/launchpad/cypress/e2e/project-setup.cy.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,30 @@
function verifyFiles (relativePaths: string[]) {
cy.withCtx(async (ctx, o) => {
for (const relativePath of o.relativePaths) {
const stats = await ctx.file.checkIfFileExists(relativePath)
function verifyScaffoldedFiles (testingType: string) {
const expectedFileOrder = (testingType === 'e2e') ? [
'cypress.config.',
'support/e2e.',
'support/commands.',
'fixtures/example.',
] : [
'cypress.config.',
'support/component.',
'support/commands.',
'support/component-index.',
'fixtures/example.',
]

cy.get('[data-cy="collapsible-header"] h2')
.should(($elements) => expect($elements).to.have.length(expectedFileOrder.length)) // assert number of files
.each(($el, i) => {
const relativePath = $el.text()

expect(relativePath, `file index ${i}`).to.include(expectedFileOrder[i]) // assert file order

cy.withCtx(async (ctx, o) => { // assert file exists
const stats = await ctx.file.checkIfFileExists(o.relativePath)

expect(stats).to.not.be.null.and.not.be.undefined
}
}, { relativePaths })
}, { relativePath })
})
}

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

cy.contains('h1', 'Configuration Files')
cy.findByText('We added the following files to your project.')
cy.findByText('We added the following files to your project:')

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

verifyFiles([
'cypress.config.js',
'cypress/support/e2e.js',
'cypress/support/commands.js',
'cypress/fixtures/example.json',
])
verifyScaffoldedFiles('e2e')
})

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

cy.contains('h1', 'Configuration Files')
cy.findByText('We added the following files to your project.')
cy.findByText('We added the following files to your project:')

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

verifyFiles([
'cypress.config.js',
'cypress/support/e2e.js',
'cypress/support/commands.js',
'cypress/fixtures/example.json',
])
verifyScaffoldedFiles('e2e')
})

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

cy.contains('h1', 'Configuration Files')
cy.findByText('We added the following files to your project.')
cy.findByText('We added the following files to your project:')

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

verifyFiles([
'cypress.config.js',
'cypress/support/e2e.js',
'cypress/support/commands.js',
'cypress/fixtures/example.json',
])
verifyScaffoldedFiles('e2e')

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

cy.contains('h1', 'Configuration Files')
cy.findByText('We added the following files to your project.')
cy.findByText('We added the following files to your project:')

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

verifyFiles([
'cypress.config.ts',
'cypress/support/e2e.ts',
'cypress/support/commands.ts',
'cypress/fixtures/example.json',
])
verifyScaffoldedFiles('e2e')
})

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

cy.contains('h1', 'Configuration Files')
cy.findByText('We added the following files to your project.')
cy.findByText('We added the following files to your project:')

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

verifyFiles([
'cypress.config.js',
'cypress/support/e2e.ts',
'cypress/support/commands.ts',
'cypress/fixtures/example.json',
])
verifyScaffoldedFiles('e2e')
})

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

verifyFiles([
'cypress.config.js',
'cypress/support/component-index.html',
'cypress/support/component.ts',
'cypress/support/commands.ts',
])
verifyScaffoldedFiles('component')

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

verifyFiles([
'cypress.config.js',
'cypress/support/component-index.html',
'cypress/support/component.ts',
'cypress/support/commands.ts',
])
verifyScaffoldedFiles('component')

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

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

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

Expand Down
4 changes: 2 additions & 2 deletions packages/launchpad/cypress/e2e/scaffold-project.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ function scaffoldAndOpenE2EProject (opts: {
cy.contains('E2E Testing').click()
cy.contains(opts.language === 'js' ? 'JavaScript' : 'TypeScript').click()
cy.contains('Next').click()
cy.contains('We added the following files to your project.')
cy.contains('We added the following files to your project:')
cy.contains('Continue').click()
}

Expand Down Expand Up @@ -84,7 +84,7 @@ function scaffoldAndOpenCTProject (opts: {

cy.contains('Next Step').click()
cy.contains('Skip').click()
cy.contains('We added the following files to your project.')
cy.contains('We added the following files to your project:')
cy.contains('Continue').click()
}

Expand Down
2 changes: 1 addition & 1 deletion packages/launchpad/src/components/code/FileRow.cy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const messages = defaultMessages.setupPage.configFile
const changesRequiredDescription = messages.changesRequiredDescription.replace('{0}', '')

describe('FileRow', () => {
it('renders each status', () => {
it('renders each status, the expected files, and expected styles', () => {
cy.mount(() => (
<div class="w-full p-5">
<FileRow
Expand Down
2 changes: 1 addition & 1 deletion packages/launchpad/src/components/code/FileRow.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<template #target="{open}">
<ListRowHeader
:class="{ 'border-b border-b-gray-100 rounded-b-none': open }"
class="cursor-pointer"
class="cursor-pointer font-medium"
:description="description"
:icon="statusInfo.icon"
>
Expand Down

3 comments on commit 8f7a50f

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 8f7a50f Apr 25, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the linux x64 version of the Test Runner.

Learn more about this pre-release platform-specific build at https://on.cypress.io/installing-cypress#Install-pre-release-version.

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/10.0.0/linux-x64/10.0-release-8f7a50f4fca8fbc2714a59a2a0e58bb070bbb4f2/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 8f7a50f Apr 25, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the darwin x64 version of the Test Runner.

Learn more about this pre-release platform-specific build at https://on.cypress.io/installing-cypress#Install-pre-release-version.

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/10.0.0/darwin-x64/10.0-release-8f7a50f4fca8fbc2714a59a2a0e58bb070bbb4f2/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 8f7a50f Apr 25, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the win32 x64 version of the Test Runner.

Learn more about this pre-release platform-specific build at https://on.cypress.io/installing-cypress#Install-pre-release-version.

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/10.0.0/win32-x64/10.0-release-8f7a50f4fca8fbc2714a59a2a0e58bb070bbb4f2/cypress.tgz

Please sign in to comment.