feat: update @cypress/schematic to NOT remove e2e folder or dependenc…

…ies. (#16692) * doc: [DX-310] update community recognition in README * doc: update license * feat:[DX-309] update schematic to add or update ng e2e command without removing protractor or other dependencies. update readme and license. * fix: update cypress commands to match docs * fix: update migration guide reference
cypress-io · May 26, 2021 · 8b5bad0 · 8b5bad0
1 parent 8099b64
commit 8b5bad0
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 93 deletions.
diff --git a/npm/cypress-schematic/LICENSE b/npm/cypress-schematic/LICENSE
@@ -1,7 +1,8 @@
 
 MIT License
 
-Copyright (c) 2021 Cypress.io
+Original work Copyright (c) 2020 [BrieBug Software]
+Modified work Copyright (c) 2021 Cypress.io
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/npm/cypress-schematic/README.md b/npm/cypress-schematic/README.md
@@ -23,7 +23,7 @@
 
 ✅  Scaffold base Cypress files and directories
 
-✅  Optional: prompt you to remove Protractor and reconfigure default `ng e2e` command to use Cypress.
+✅  Optional: prompt you to add or update the default `ng e2e` command to use Cypress.
 
 ## Usage ⏯
 
@@ -44,7 +44,7 @@ To run Cypress headlessly via `run` mode within your project:
 ng run {project-name}:cypress-run
 ```
 
-If you have chosen to remove Protractor, you can also run Cypress in `open` mode using this command:
+If you have chosen to add or update the `ng e2e` command, you can also run Cypress in `open` mode using this:
 
 ```shell script
 ng e2e
@@ -72,7 +72,7 @@ Before running Cypress in `open` mode, ensure that you have started your applica
 }
 ```
 
-Read our docs to learn more about [launching browsers](http://on.cypress.io/launching-browsers) with Cypress.
+Read our docs to learn more about [launching browsers](https://on.cypress.io/launching-browsers) with Cypress.
 
 ### Recording test results to the Cypress Dashboard
 
@@ -94,7 +94,7 @@ We recommend setting your [Cypress Dashboard](https://docs.cypress.io/guides/das
 }
 ```
 
-Read our docs to learn more about [recording test results](http://on.cypress.io/recording-project-runs) to the [Cypress Dashboard](https://docs.cypress.io/guides/dashboard/introduction).
+Read our docs to learn more about [recording test results](https://on.cypress.io/recording-project-runs) to the [Cypress Dashboard](https://docs.cypress.io/guides/dashboard/introduction).
 
 ### Specifying a custom `cypress.json` config file
 
@@ -115,7 +115,7 @@ It may be useful to have different Cypress configuration files per environment (
 }
 ```
 
-Read our docs to learn more about all the [configuration options](http://on.cypress.io/configuration) Cypress offers.
+Read our docs to learn more about all the [configuration options](https://on.cypress.io/configuration) Cypress offers.
 
 ### Running Cypress in parallel mode within CI
 
@@ -136,16 +136,22 @@ Read our docs to learn more about all the [configuration options](http://on.cypr
 }
 ```
 
-Read our docs to learn more about speeding up test execution in CI via [Cypress parallelization](http://on.cypress.io/parallelization)
+Read our docs to learn more about speeding up test execution in CI via [Cypress parallelization](https://on.cypress.io/parallelization)
+
+## Migrating from Protractor to Cypress?
+
+Read our [migration guide](https://on.cypress.io/protractor-to-cypress) to help you make the transition from Protractor to Cypress.
 
 ## Questions or Issues?
 
-Visit our [plugins discussion](https://github.com/cypress-io/cypress/discussions/categories/plugins) to ask questions or report issues.
+Visit our [plugins discussion](https://github.com/cypress-io/cypress/discussions/categories/plugins) to ask questions or report issues related to this package.
 
 ## License
 
 This project is licensed under an MIT license. 
 
 ## Community Recognition
 
-Inspired by [@briebug/cypress-schematic](https://github.com/briebug/cypress-schematic).
+The [Cypress Angular Schematic](https://www.npmjs.com/package/@cypress/schematic) package was made possible by the original work of the [Briebug](https://briebug.com/) team and the contributors of [@briebug/cypress-schematic](https://www.npmjs.com/package/@briebug/cypress-schematic).
+
+@briebug/cypress-schematic served as the starting point for improvements and new functionality the Cypress team will continue to develop along with the community.
diff --git a/npm/cypress-schematic/package.json b/npm/cypress-schematic/package.json
@@ -11,7 +11,7 @@
     "build:watch": "tsc -p tsconfig.json --watch",
     "clean": "git checkout HEAD -- sandbox && git clean -f -d sandbox",
     "launch": "yarn link:sandbox && cd sandbox && ng add @cypress/schematic && cd ..",
-    "launch:test": "yarn link:sandbox && cd sandbox && ng add @cypress/schematic --removeProtractor=false && cd ..",
+    "launch:test": "yarn link:sandbox && cd sandbox && ng add @cypress/schematic && cd ..",
     "link:sandbox": "yarn link && cd sandbox && yarn link @cypress/schematic",
     "test:all": "yarn build:all && yarn test:schematics && yarn launch:test && yarn test:builders",
     "test:builders": "mocha -r @packages/ts/register --reporter mocha-multi-reporters --reporter-options configFile=../../mocha-reporter-config.json src/builders/cypress/index_spec.ts",

diff --git a/npm/cypress-schematic/src/schematics/cypress/index.ts b/npm/cypress-schematic/src/schematics/cypress/index.ts
@@ -4,7 +4,6 @@ import {
   chain,
   mergeWith,
   move,
-  noop,
   Rule,
   SchematicContext,
   SchematicsException,
@@ -13,10 +12,10 @@ import {
   url,
 } from '@angular-devkit/schematics'
 import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks'
-import { concat, Observable, of } from 'rxjs'
+import { of } from 'rxjs'
 import { concatMap, map } from 'rxjs/operators'
 
-import { addPackageJsonDependency, NodeDependencyType, removePackageJsonDependency } from '../utility/dependencies'
+import { addPackageJsonDependency, NodeDependencyType } from '../utility/dependencies'
 import {
   getAngularVersion,
   getLatestNodeVersion,
@@ -30,8 +29,7 @@ export default function (_options: any): Rule {
     _options = { ..._options, __version__: getAngularVersion(tree) }
 
     return chain([
-      updateDependencies(_options),
-      _options.removeProtractor ? removeFiles() : noop(),
+      updateDependencies(),
       addCypressFiles(),
       addCypressTestScriptsToPackageJson(),
       modifyAngularJson(_options),
@@ -45,25 +43,11 @@ function addPropertyToPackageJson (tree: Tree, path: JSONPath, value: JsonValue)
   json.modify(path, value)
 }
 
-function updateDependencies (options: any): Rule {
-  let removeDependencies: Observable<Tree>
-
+function updateDependencies (): Rule {
   return (tree: Tree, context: SchematicContext): any => {
     context.logger.debug('Updating dependencies...')
     context.addTask(new NodePackageInstallTask())
 
-    if (options.removeProtractor) {
-      removeDependencies = of('protractor').pipe(
-        map((packageName: string) => {
-          context.logger.debug(`Removing ${packageName} dependency`)
-
-          removePackageJsonDependency(tree, packageName)
-
-          return tree
-        }),
-      )
-    }
-
     const addDependencies = of('cypress').pipe(
       concatMap((packageName: string) => getLatestNodeVersion(packageName)),
       map((packageFromRegistry: NodePackage) => {
@@ -81,67 +65,20 @@ function updateDependencies (options: any): Rule {
       }),
     )
 
-    if (options.removeProtractor) {
-      return concat(removeDependencies, addDependencies)
-    }
-
-    return concat(addDependencies)
+    return addDependencies
   }
 }
 
 function addCypressTestScriptsToPackageJson (): Rule {
   return (tree: Tree) => {
     addPropertyToPackageJson(tree, ['scripts'], {
       'e2e': 'ng e2e',
-      'cy:open': 'cypress open',
-      'cy:run': 'cypress run',
+      'cypress:open': 'cypress open',
+      'cypress:run': 'cypress run',
     })
   }
 }
 
-function deleteDirectory (tree: Tree, path: string): void {
-  try {
-    tree.delete(path)
-  } catch (e) {
-    console.log(e) // eslint-disable-line no-console
-  }
-}
-
-function removeFiles (): Rule {
-  return (tree: Tree, context: SchematicContext) => {
-    if (tree.exists('./angular.json')) {
-      const angularJsonValue = getAngularJsonValue(tree)
-      const { projects } = angularJsonValue
-
-      // clean up projects generated by cli with versions <= 7
-      Object.keys(projects)
-      .filter((name) => name.endsWith('-e2e'))
-      .forEach((projectName) => {
-        const projectRoot = projects[projectName].root
-
-        deleteDirectory(tree, projectRoot)
-        context.logger.debug(`Removing ${projectName} from angular.json projects`)
-        delete angularJsonValue.projects[projectName]
-      })
-
-      // clean up projects generated by cli with versions > 7
-      Object.keys(projects)
-      .filter((name) => !name.endsWith('-e2e'))
-      .forEach((projectName) => {
-        const projectRoot = projects[projectName].root
-
-        if (tree.exists(`e2e`)) {
-          deleteDirectory(tree, `${projectRoot}/e2e`)
-        }
-      })
-
-      return tree.overwrite('./angular.json', JSON.stringify(angularJsonValue, null, 2))
-    }
-
-    return tree
-  }
-}
-
 function addCypressFiles (): Rule {
   return (tree: Tree, context: SchematicContext) => {
     context.logger.debug('Adding cypress files')
@@ -192,14 +129,14 @@ function addNewCypressCommands (
   runJson: JsonObject,
   openJson: JsonObject,
   e2eJson: JsonObject,
-  removeProtractor: boolean,
+  e2eUpdate: boolean,
 ) {
   const projectArchitectJson = angularJsonVal['projects'][project]['architect']
 
   projectArchitectJson['cypress-run'] = runJson
   projectArchitectJson['cypress-open'] = openJson
 
-  if (removeProtractor || !projectArchitectJson['e2e']) {
+  if (e2eUpdate || !projectArchitectJson['e2e']) {
     projectArchitectJson['e2e'] = e2eJson
   }
 
@@ -267,7 +204,7 @@ function modifyAngularJson (options: any): Rule {
           Object.assign(openJson.options, { configFile })
         }
 
-        if (options.removeProtractor) {
+        if (options.e2eUpdate) {
           context.logger.debug(`Replacing e2e command with cypress-run in angular.json`)
           removeE2ELinting(tree, angularJsonVal, project)
         }
@@ -285,7 +222,7 @@ function modifyAngularJson (options: any): Rule {
           runJson,
           openJson,
           e2eJson,
-          options.removeProtractor,
+          options.e2eUpdate,
         )
       })
     } else {

diff --git a/npm/cypress-schematic/src/schematics/cypress/schema.json b/npm/cypress-schematic/src/schematics/cypress/schema.json
@@ -1,17 +1,14 @@
 {
   "$schema": "http://json-schema.org/draft-07/schema",
-  "$id": "CypressIoSchematics",
-  "title": "Cypress Install Schema",
+  "$id": "cypress-schematic",
+  "title": "Cypress ng-add schematic",
   "type": "object",
   "properties": {
-    "removeProtractor": {
-      "description": "When true, the protractor dependency and e2e directory will be removed from the project",
+    "e2eUpdate": {
       "type": "boolean",
-      "$default": {
-        "$source": "argv",
-        "index": 0
-      },
-      "x-prompt": "Would you like to remove Protractor from the project? If yes, this will remove Protractor files and the e2e folder, and Cypress will be the default for `ng e2e`. Otherwise, Cypress will run alongside Protractor with its own commands."
+      "default": true,
+      "description": "When true, `ng e2e` will be added or updated to use Cypress",
+      "x-prompt": "Would you like the default `ng e2e` command to use Cypress? [ Protractor to Cypress Migration Guide: https://on.cypress.io/protractor-to-cypress ]"
     }
   },
   "required": []