feat: update @cypress/schematic to use proper e2e config for 10.0.0 (#…

…19827)

Co-authored-by: Emily Rohrbough  <emilyrohrbough@users.noreply.github.com>
Co-authored-by: Jordan <jordanp@cypress.io>

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
 

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",

npm/cypress-schematic/sandbox/.gitignore

@@ -31,6 +31,7 @@ chrome-profiler-events*.json
 .history/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

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"
   }
-}
+}

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

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.

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%>',
 })

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"
+}
+

npm/cypress-schematic/src/schematics/ng-add/index.spec.ts

@@ -1,7 +1,7 @@
 /// <reference path="../../../../../cli/types/mocha/index.d.ts" />
 
 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')
     })
   })
 })

npm/cypress-schematic/src/schematics/ng-generate/e2e/index.spec.ts

@@ -1,5 +1,7 @@
+/// <reference path="../../../../../../cli/types/mocha/index.d.ts" />
+
 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')
     })
   })
 })

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`
     }