From 8f7a50f4fca8fbc2714a59a2a0e58bb070bbb4f2 Mon Sep 17 00:00:00 2001 From: Rachel Date: Mon, 25 Apr 2022 08:39:17 -0700 Subject: [PATCH] feat: UI updates to scaffolded files (#21155) --- .../data-context/src/actions/WizardActions.ts | 30 ++++-- .../frontend-shared/src/locales/en-US.json | 2 +- .../launchpad/cypress/e2e/project-setup.cy.ts | 92 ++++++++----------- .../cypress/e2e/scaffold-project.cy.ts | 4 +- .../src/components/code/FileRow.cy.tsx | 2 +- .../launchpad/src/components/code/FileRow.vue | 2 +- 6 files changed, 64 insertions(+), 68 deletions(-) diff --git a/packages/data-context/src/actions/WizardActions.ts b/packages/data-context/src/actions/WizardActions.ts index 09a34dff7dac..5293a0f3b523 100644 --- a/packages/data-context/src/actions/WizardActions.ts +++ b/packages/data-context/src/actions/WizardActions.ts @@ -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 () { @@ -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 { @@ -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) @@ -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, }, @@ -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, @@ -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, ) } @@ -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', @@ -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.', ) } diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json index ba6717a03151..8ff4995b32be 100644 --- a/packages/frontend-shared/src/locales/en-US.json +++ b/packages/frontend-shared/src/locales/en-US.json @@ -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", diff --git a/packages/launchpad/cypress/e2e/project-setup.cy.ts b/packages/launchpad/cypress/e2e/project-setup.cy.ts index aa8a05e27143..de6bc58d1e39 100644 --- a/packages/launchpad/cypress/e2e/project-setup.cy.ts +++ b/packages/launchpad/cypress/e2e/project-setup.cy.ts @@ -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', () => { @@ -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') @@ -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', () => { @@ -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') @@ -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', () => { @@ -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') @@ -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') @@ -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') @@ -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', () => { @@ -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') @@ -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', () => { @@ -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') }) @@ -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') }) @@ -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() diff --git a/packages/launchpad/cypress/e2e/scaffold-project.cy.ts b/packages/launchpad/cypress/e2e/scaffold-project.cy.ts index bdfa63b321b8..1ae840667ff9 100644 --- a/packages/launchpad/cypress/e2e/scaffold-project.cy.ts +++ b/packages/launchpad/cypress/e2e/scaffold-project.cy.ts @@ -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() } @@ -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() } diff --git a/packages/launchpad/src/components/code/FileRow.cy.tsx b/packages/launchpad/src/components/code/FileRow.cy.tsx index 2eed5c6b056c..7d1ac4393c84 100644 --- a/packages/launchpad/src/components/code/FileRow.cy.tsx +++ b/packages/launchpad/src/components/code/FileRow.cy.tsx @@ -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(() => (