From e629ae04ce4fb325c4c0480a1df903ecbeec8a1f Mon Sep 17 00:00:00 2001 From: Adam Murray Date: Fri, 28 Jan 2022 10:07:09 -0600 Subject: [PATCH] feat: update @cypress/schematic to use proper e2e config for 10.0.0 (#19827) Co-authored-by: Emily Rohrbough Co-authored-by: Jordan --- npm/cypress-schematic/README.md | 3 +- npm/cypress-schematic/add-angular-cli-dev.js | 30 ------------------- npm/cypress-schematic/package.json | 1 - npm/cypress-schematic/sandbox/.gitignore | 1 + npm/cypress-schematic/sandbox/package.json | 26 ++++++++-------- .../sandbox/src/polyfills.ts | 12 -------- npm/cypress-schematic/sandbox/src/test.ts | 4 ++- .../schematics/ng-add/files/cypress.config.ts | 6 ---- .../files/cypress/fixtures/example.json | 5 ++++ .../ng-add/files/cypress/plugins/index.ts | 3 -- .../cypress/support/{component.ts => e2e.ts} | 0 .../src/schematics/ng-add/index.spec.ts | 18 +++++------ .../schematics/ng-generate/e2e/index.spec.ts | 15 ++++------ .../src/schematics/ng-generate/e2e/index.ts | 14 +++++---- 14 files changed, 47 insertions(+), 91 deletions(-) delete mode 100644 npm/cypress-schematic/add-angular-cli-dev.js create mode 100644 npm/cypress-schematic/src/schematics/ng-add/files/cypress/fixtures/example.json delete mode 100644 npm/cypress-schematic/src/schematics/ng-add/files/cypress/plugins/index.ts rename npm/cypress-schematic/src/schematics/ng-add/files/cypress/support/{component.ts => e2e.ts} (100%) diff --git a/npm/cypress-schematic/README.md b/npm/cypress-schematic/README.md index fffec09b70c1..c13d50a97088 100644 --- a/npm/cypress-schematic/README.md +++ b/npm/cypress-schematic/README.md @@ -181,8 +181,7 @@ In order to bypass the prompt asking for your e2e spec name, simply add a `--nam ng generate @cypress/schematic:e2e --name=login ``` -This will create a new spec file named `login.spec.ts` in the default Cypress folder location. - +This will create a new spec file named `login.cy.ts` in the default Cypress folder location. ### Specify Project diff --git a/npm/cypress-schematic/add-angular-cli-dev.js b/npm/cypress-schematic/add-angular-cli-dev.js deleted file mode 100644 index 2e9fc09cd2d3..000000000000 --- a/npm/cypress-schematic/add-angular-cli-dev.js +++ /dev/null @@ -1,30 +0,0 @@ -/* eslint-disable no-console */ -const fs = require('fs') -const execa = require('execa') - -async function main () { - try { - const pkg = require('./package.json') - - console.log('Adding @angular/cli to package.json') - pkg['devDependencies']['@angular/cli'] = '11.2.12' - fs.writeFileSync('./package.json', JSON.stringify(pkg, null, 2)) - - console.log('Running yarn install') - await execa('yarn', ['install'], { stdout: 'inherit' }) - } catch (e) { - if (e.stdout) { - console.error(e.stdout) - } - - const exitCode = e.exitCode ? e.exitCode : 1 - - console.error(`Failed to add @angular/cli with exit code ${exitCode}`) - process.exit(exitCode) - } -} - -// execute main function if called from command line -if (require.main === module) { - main() -} diff --git a/npm/cypress-schematic/package.json b/npm/cypress-schematic/package.json index f08ee1adca04..de5a50461c22 100644 --- a/npm/cypress-schematic/package.json +++ b/npm/cypress-schematic/package.json @@ -5,7 +5,6 @@ "private": false, "main": "./src", "scripts": { - "add:angular-cli": "node ./add-angular-cli-dev.js", "build": "tsc -p tsconfig.json", "build:test": "tsc -p tsconfig.spec.json", "build:all": "tsc -p tsconfig.json && tsc -p tsconfig.spec.json", diff --git a/npm/cypress-schematic/sandbox/.gitignore b/npm/cypress-schematic/sandbox/.gitignore index de51f68a2cda..105c00f22e08 100644 --- a/npm/cypress-schematic/sandbox/.gitignore +++ b/npm/cypress-schematic/sandbox/.gitignore @@ -31,6 +31,7 @@ chrome-profiler-events*.json .history/* # misc +/.angular/cache /.sass-cache /connect.lock /coverage diff --git a/npm/cypress-schematic/sandbox/package.json b/npm/cypress-schematic/sandbox/package.json index 97dd845d8b85..2182e1115f3c 100644 --- a/npm/cypress-schematic/sandbox/package.json +++ b/npm/cypress-schematic/sandbox/package.json @@ -10,22 +10,22 @@ "test": "ng test" }, "dependencies": { - "@angular/animations": "~12.0.0", - "@angular/common": "~12.0.0", - "@angular/compiler": "~12.0.0", - "@angular/core": "~12.0.0", - "@angular/forms": "~12.0.0", - "@angular/platform-browser": "~12.0.0", - "@angular/platform-browser-dynamic": "~12.0.0", - "@angular/router": "~12.0.0", + "@angular/animations": "~13.1.3", + "@angular/common": "~13.1.3", + "@angular/compiler": "~13.1.3", + "@angular/core": "~13.1.3", + "@angular/forms": "~13.1.3", + "@angular/platform-browser": "~13.1.3", + "@angular/platform-browser-dynamic": "~13.1.3", + "@angular/router": "~13.1.3", "rxjs": "~6.6.0", "tslib": "^2.1.0", "zone.js": "~0.11.4" }, "devDependencies": { - "@angular-devkit/build-angular": "~12.0.0", - "@angular/cli": "~12.0.0", - "@angular/compiler-cli": "~12.0.0", + "@angular-devkit/build-angular": "~13.1.4", + "@angular/cli": "~13.1.4", + "@angular/compiler-cli": "~13.1.3", "@types/jasmine": "~3.6.0", "@types/node": "^12.11.1", "jasmine-core": "~3.7.0", @@ -34,6 +34,6 @@ "karma-coverage": "~2.0.3", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", - "typescript": "~4.2.3" + "typescript": "~4.5.5" } -} +} \ No newline at end of file diff --git a/npm/cypress-schematic/sandbox/src/polyfills.ts b/npm/cypress-schematic/sandbox/src/polyfills.ts index 4660fa5793e3..2a8e5973100d 100644 --- a/npm/cypress-schematic/sandbox/src/polyfills.ts +++ b/npm/cypress-schematic/sandbox/src/polyfills.ts @@ -18,18 +18,6 @@ * BROWSER POLYFILLS */ -/** - * IE11 requires the following for NgClass support on SVG elements - */ -// import 'classlist.js'; // Run `npm install --save classlist.js`. - -/** - * Web Animations `@angular/platform-browser/animations` - * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. - * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). - */ -// import 'web-animations-js'; // Run `npm install --save web-animations-js`. - /** * By default, zone.js will patch all possible macroTask and DomEvents * user can disable parts of macroTask/DomEvents patch by setting following flags diff --git a/npm/cypress-schematic/sandbox/src/test.ts b/npm/cypress-schematic/sandbox/src/test.ts index 2123582e4131..b3b713de643e 100644 --- a/npm/cypress-schematic/sandbox/src/test.ts +++ b/npm/cypress-schematic/sandbox/src/test.ts @@ -17,7 +17,9 @@ declare const require: { // First, initialize the Angular testing environment. getTestBed().initTestEnvironment( BrowserDynamicTestingModule, - platformBrowserDynamicTesting(), + platformBrowserDynamicTesting(), { + teardown: { destroyAfterEach: false }, + }, ) // Then we find all the tests. diff --git a/npm/cypress-schematic/src/schematics/ng-add/files/cypress.config.ts b/npm/cypress-schematic/src/schematics/ng-add/files/cypress.config.ts index 554fb84d7ae6..ad13ab513517 100644 --- a/npm/cypress-schematic/src/schematics/ng-add/files/cypress.config.ts +++ b/npm/cypress-schematic/src/schematics/ng-add/files/cypress.config.ts @@ -1,11 +1,5 @@ import { defineConfig } from 'cypress' export default defineConfig({ - 'integrationFolder': '<%= root%>cypress/integration', - 'supportFile': '<%= root%>cypress/support/component.ts', - 'videosFolder': '<%= root%>cypress/videos', - 'screenshotsFolder': '<%= root%>cypress/screenshots', - 'pluginsFile': '<%= root%>cypress/plugins/index.ts', - 'fixturesFolder': '<%= root%>cypress/fixtures', 'baseUrl': '<%= baseUrl%>', }) diff --git a/npm/cypress-schematic/src/schematics/ng-add/files/cypress/fixtures/example.json b/npm/cypress-schematic/src/schematics/ng-add/files/cypress/fixtures/example.json new file mode 100644 index 000000000000..20b22a17d376 --- /dev/null +++ b/npm/cypress-schematic/src/schematics/ng-add/files/cypress/fixtures/example.json @@ -0,0 +1,5 @@ +{ + "name": "Using fixtures to represent data", + "email": "hello@cypress.io" +} + \ No newline at end of file diff --git a/npm/cypress-schematic/src/schematics/ng-add/files/cypress/plugins/index.ts b/npm/cypress-schematic/src/schematics/ng-add/files/cypress/plugins/index.ts deleted file mode 100644 index bfc9d3b65df1..000000000000 --- a/npm/cypress-schematic/src/schematics/ng-add/files/cypress/plugins/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -// Plugins enable you to tap into, modify, or extend the internal behavior of Cypress -// For more info, visit https://on.cypress.io/plugins-api -module.exports = (on, config) => {} diff --git a/npm/cypress-schematic/src/schematics/ng-add/files/cypress/support/component.ts b/npm/cypress-schematic/src/schematics/ng-add/files/cypress/support/e2e.ts similarity index 100% rename from npm/cypress-schematic/src/schematics/ng-add/files/cypress/support/component.ts rename to npm/cypress-schematic/src/schematics/ng-add/files/cypress/support/e2e.ts diff --git a/npm/cypress-schematic/src/schematics/ng-add/index.spec.ts b/npm/cypress-schematic/src/schematics/ng-add/index.spec.ts index 3a376371e6ed..eff647c20cd1 100644 --- a/npm/cypress-schematic/src/schematics/ng-add/index.spec.ts +++ b/npm/cypress-schematic/src/schematics/ng-add/index.spec.ts @@ -1,7 +1,7 @@ /// import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing' -import { join, resolve } from 'path' +import { join } from 'path' import { expect } from 'chai' describe('@cypress/schematic: ng-add', () => { @@ -32,15 +32,15 @@ describe('@cypress/schematic: ng-add', () => { }) it('should create cypress files', async () => { - const files = ['cypress/e2e/spec.cy.ts', 'cypress/plugins/index.ts', 'cypress/support/commands.ts', 'cypress/tsconfig.json', 'cypress.config.ts'] - const homePath = '/projects/sandbox/' - return schematicRunner.runSchematicAsync('ng-add', {}, appTree).toPromise().then((tree) => { - files.forEach((f) => { - const pathToFile = resolve(homePath, f) - - expect(tree.exists(pathToFile), pathToFile).equal(true) - }) + const files = tree.files + + expect(files).to.contain('/projects/sandbox/cypress/e2e/spec.cy.ts') + expect(files).to.contain('/projects/sandbox/cypress/support/e2e.ts') + expect(files).to.contain('/projects/sandbox/cypress/support/commands.ts') + expect(files).to.contain('/projects/sandbox/cypress/tsconfig.json') + expect(files).to.contain('/projects/sandbox/cypress.config.ts') + expect(files).to.contain('/projects/sandbox/cypress/fixtures/example.json') }) }) }) diff --git a/npm/cypress-schematic/src/schematics/ng-generate/e2e/index.spec.ts b/npm/cypress-schematic/src/schematics/ng-generate/e2e/index.spec.ts index 5ff610a2a405..a5101d2f2124 100644 --- a/npm/cypress-schematic/src/schematics/ng-generate/e2e/index.spec.ts +++ b/npm/cypress-schematic/src/schematics/ng-generate/e2e/index.spec.ts @@ -1,5 +1,7 @@ +/// + import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing' -import { join, resolve } from 'path' +import { join } from 'path' import { expect } from 'chai' describe('@cypress/schematic:e2e ng-generate', () => { @@ -28,16 +30,11 @@ describe('@cypress/schematic:e2e ng-generate', () => { appTree = await schematicRunner.runExternalSchematicAsync('@schematics/angular', 'application', appOptions, appTree).toPromise() }) - it('should create cypress files', async () => { - const files = ['cypress/e2e/foo.cy.ts'] - const homePath = '/projects/sandbox/' - + it('should create cypress spec file', async () => { return schematicRunner.runSchematicAsync('e2e', { name: 'foo' }, appTree).toPromise().then((tree) => { - files.forEach((f) => { - const pathToFile = resolve(homePath, f) + const files = tree.files - expect(tree.exists(pathToFile), pathToFile).equal(true) - }) + expect(files).to.contain('/projects/sandbox/cypress/e2e/foo.cy.ts') }) }) }) diff --git a/npm/cypress-schematic/src/schematics/ng-generate/e2e/index.ts b/npm/cypress-schematic/src/schematics/ng-generate/e2e/index.ts index 497f710fc619..1a68ad613e73 100644 --- a/npm/cypress-schematic/src/schematics/ng-generate/e2e/index.ts +++ b/npm/cypress-schematic/src/schematics/ng-generate/e2e/index.ts @@ -36,18 +36,22 @@ export default function (options: Schema): Rule { const host = createSpec(tree) const { workspace } = await workspaces.readWorkspace('/', host) + let project + if (!options.project) { - // @ts-ignore - options.project = workspace.extensions.defaultProject + project = workspace.projects.get(workspace.extensions.defaultProject as string) + } else { + project = workspace.projects.get(options.project) } - //@ts-ignore - const project = workspace.projects.get(options.project) - if (!project) { throw new SchematicsException(`Invalid project name: ${options.project}`) } + if (options.name === undefined) { + throw new SchematicsException(`No file name specified. This is required to generate a new Cypress file.`) + } + if (options.path === undefined) { options.path = `${project.root}/cypress/e2e` }