feat: add cypress schematic and builders for angular (#16449)

* fix: lint fixes. add .eslintrc

* Update eslint config

* fix: remove jasmine. add mocha/chai. remove builder test for now. update tsconfig. update package json with main folder. remove package yarn.lock in favor of monorepo

* fix: restore filenames

* fix: add eslint ignore for compiled files

* fix: move eslintignore to root. add circle commands for schematic.

* fix: upate file pattern for ignore

* fix: add angular/cli to build step

* fix: update working dir

* fix: add eslint

* fix: update polocy version to avoid eslint issue

.eslintignore

@@ -32,6 +32,8 @@ packages/server/test/support/fixtures/projects/e2e/cypress/integration/typescrip
 npm/webpack-preprocessor/cypress/tests/e2e/compile-error.js
 npm/webpack-preprocessor/examples/use-babelrc/cypress/integration/spec.js
 
+npm/cypress-schematic/src/**/*.js
+
 **/.projects
 **/*.d.ts
 **/package-lock.json

circle.yml

@@ -1375,6 +1375,27 @@ jobs:
           name: Run tests
           command: yarn workspace @cypress/eslint-plugin-dev test
 
+  npm-cypress-schematic:
+      <<: *defaults
+      steps:
+        - restore_cached_workspace
+        - run:
+            name: Build
+            command: yarn workspace @cypress/schematic build:all
+        - run:
+            name: Install @angular/cli
+            command: yarn policies set-version 1.19.0 && yarn add --dev @angular/cli
+            working_directory: npm/cypress-schematic
+        - run:
+            name: Launch
+            command: yarn launch:test
+            working_directory: npm/cypress-schematic
+        - run:
+            name: Test Schematics
+            command: yarn test:schematics
+            working_directory: npm/cypress-schematic
+        - store-npm-logs
+
   npm-release:
     <<: *defaults
     steps:
@@ -1960,6 +1981,9 @@ linux-workflow: &linux-workflow
     - npm-eslint-plugin-dev:
         requires:
           - build
+    - npm-cypress-schematic:
+        requires:
+          - build
     # This release definition must be updated with any new jobs
     # Any attempts to automate this are welcome
     # If CircleCI provided an "after all" hook, then this wouldn't be necessary
@@ -1976,6 +2000,7 @@ linux-workflow: &linux-workflow
           - npm-webpack-preprocessor
           # - npm-vite-dev-server
           - npm-webpack-dev-server
+          - npm-cypress-schematic
           - ui-components-integration-tests
           - reporter-integration-tests
           - Linux lint

npm/cypress-schematic/.eslintrc

@@ -0,0 +1,16 @@
+{
+  "plugins": [
+    "cypress",
+    "@cypress/dev"
+  ],
+  "extends": [
+    "plugin:@cypress/dev/general"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "env": {
+    "cypress/globals": true
+  },
+  "rules": {
+    "no-console": "off"
+  }
+}

npm/cypress-schematic/.gitignore

@@ -0,0 +1,21 @@
+# Outputs
+src/**/*.js
+src/**/*.js.map
+src/**/*.d.ts
+
+# IDEs
+.idea/
+jsconfig.json
+.vscode/
+
+# Misc
+node_modules/
+npm-debug.log*
+yarn-error.log*
+
+# Mac OSX Finder files.
+**/.DS_Store
+.DS_Store
+
+# Exclude Cypress Plugin JS files
+!src/schematics/cypress/files/cypress/plugins/*.js

npm/cypress-schematic/.npmignore

@@ -0,0 +1,9 @@
+# Ignores TypeScript files, but keeps definitions.
+*.ts
+!*.d.ts
+
+*.js.map
+!src/**/__files__/**/*.js
+!src/**/files/**/*.ts
+*.vscode
+sandbox

npm/cypress-schematic/.releaserc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  ...require('../../.releaserc.base'),
+  branches: [
+    { name: 'next/npm/cypress-schematic', channel: 'next', prerelease: 'alpha' },
+  ],
+}

npm/cypress-schematic/LICENSE

@@ -0,0 +1,22 @@
+
+MIT License
+
+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
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

npm/cypress-schematic/README.md

@@ -0,0 +1,88 @@
+# Cypress Angular Schematic
+
+<p align="center">
+  <a href="https://cypress.io">
+    <img width="140" alt="Cypress Logo" src="./src/svgs/built-by-cypress.svg" />
+    </a>
+</p>
+
+Add [Cypress](https://cypress.io) to an Angular CLI project
+
+This schematic will:
+
+- install Cypress, its dependencies, and new scripts
+- add necessary files for Cypress to work with Angular & Typescript
+- prompt for removal of Protractor files and configuration
+
+## Usage 🚀
+
+Run as one command in an Angular CLI app directory. Note this will add the schematic as a dependency to your project.
+
+```shell
+ng add @cypress/schematic
+```
+
+With the custom builder installed, you can run cypress with the following commands:
+
+```shell script
+ng e2e
+```
+
+```shell script
+ng run {your-project-name}:cypress-open
+```
+
+These two commands do the same thing. They will launch the (Electron) Cypress Test Runner in watch mode.
+
+```shell script
+ng run {your-project-name}:cypress-run
+```
+
+This command will open the (Electron) Cypress Test Runner and run your tests one time, with output to your terminal.
+
+## Issues
+
+Issues with this schematic can be filed [here](https://github.com/cypress-io/cypress-schematics/issues/new/choose).
+
+## Getting started
+
+### Prerequisites
+
+The only requirement for this project is [Node.js](https://nodejs.org/en/).
+
+TypeScript will be added as a local dependency to the project, so no need to install it.
+
+### Installation
+
+⬇ **Install** the dependencies for the schematic and the sandbox application
+
+```shell
+yarn install && cd sandbox && yarn install && cd ..
+```
+
+🖇 **Link** the schematic in the sandbox to run locally
+
+```shell
+yarn link:sandbox
+```
+
+🏃 **Run** the schematic
+
+```shell
+yarn build:clean:launch
+```
+
+### Testing
+
+To test locally, use the `schematics` command line tool that is included locally. That tool acts the same as the `generate` command of the Angular CLI, but also has a debug mode.
+
+Check the documentation with
+
+```bash
+schematics --help
+```
+
+### Unit & Integration Testing
+
+`yarn test:schematics` will run the schematic unit tests, using Jasmine as a runner and test framework.
+`yarn test:builders` will run the builder integration tests, linking the schematic, and installing Cypress into the sandbox to run the included Cypress spec.

npm/cypress-schematic/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@cypress/schematic",
+  "version": "0.0.0-development",
+  "description": "Official Cypress schematic for the Angular CLI",
+  "private": false,
+  "main": "./src",
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "build:test": "tsc -p tsconfig.spec.json",
+    "build:all": "tsc -p tsconfig.json && tsc -p tsconfig.spec.json",
+    "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 ..",
+    "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:schematics": "mocha src/schematics/cypress/*_spec.js",
+    "test:e2e:sandbox": "cd sandbox && ng run sandbox:cypress-run",
+    "unlink:sandbox": "cd sandbox && yarn unlink @cypress/schematic && cd .. && yarn unlink"
+  },
+  "dependencies": {
+    "@angular-devkit/architect": "^0.1001.0",
+    "@angular-devkit/core": "^10.1.0",
+    "@angular-devkit/schematics": "^10.1.0",
+    "@schematics/angular": "^10.1.0",
+    "jsonc-parser": "^3.0.0",
+    "rxjs": "6.6.2"
+  },
+  "devDependencies": {
+    "@angular-devkit/schematics-cli": "^0.1102.12",
+    "@types/chai-enzyme": "0.6.7",
+    "@types/mocha": "8.0.3",
+    "@types/node": "^12.11.1",
+    "chai": "4.2.0",
+    "cypress": "0.0.0-development",
+    "mocha": "3.5.3",
+    "semantic-release": "^17.4.2",
+    "typescript": "~4.2.4"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cypress-io/cypress.git"
+  },
+  "homepage": "https://github.com/cypress-io/cypress/tree/master/npm/cypress-schematic#readme",
+  "author": "Cypress DX Team",
+  "bugs": "https://github.com/cypress-io/cypress/issues/new?assignees=&labels=npm%3A%20%40cypress%2Fcypress-schematics&template=1-bug-report.md&title=",
+  "keywords": [
+    "schematics",
+    "cypress",
+    "e2e",
+    "testing"
+  ],
+  "builders": "./src/builders/builders.json",
+  "schematics": "./src/schematics/collection.json"
+}

npm/cypress-schematic/sandbox/.browserslistrc

@@ -0,0 +1,17 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

npm/cypress-schematic/sandbox/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

npm/cypress-schematic/sandbox/.gitignore

@@ -0,0 +1,46 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+# Only exists if Bazel was run
+/bazel-out
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events*.json
+speed-measure-plugin*.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db

npm/cypress-schematic/sandbox/README.md

@@ -0,0 +1,27 @@
+# Sandbox
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.11.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.