feat(nx): cypress supportFile handling (#1920)

This update the Cypress schematic to handle by default the `supportFile` option
in `cypress.json` with an example for _custom commands_.

Related to #1609

packages/cypress/package.json

@@ -38,7 +38,6 @@
     "@angular-devkit/architect": "0.803.14",
     "@angular-devkit/core": "8.3.14",
     "@cypress/webpack-preprocessor": "~4.1.0",
-    "fork-ts-checker-webpack-plugin": "^0.4.9",
     "tree-kill": "1.2.1",
     "ts-loader": "5.3.1",
     "tsconfig-paths-webpack-plugin": "3.2.0",

packages/cypress/src/builders/cypress/cypress.impl.ts

@@ -41,7 +41,8 @@ export default createBuilder<CypressBuilderOptions>(run);
 
 /**
  * @whatItDoes This is the starting point of the builder.
- * @param builderConfig
+ * @param options
+ * @param context
  */
 function run(
   options: CypressBuilderOptions,
@@ -96,8 +97,15 @@ function run(
  * provide directly the results in the console output.
  * @param cypressConfig
  * @param headless
+ * @param exit
+ * @param record
+ * @param key
+ * @param parallel
  * @param baseUrl
  * @param isWatching
+ * @param browser
+ * @param env
+ * @param spec
  */
 function initCypress(
   cypressConfig: string,
@@ -159,6 +167,7 @@ function initCypress(
  * @whatItDoes Compile the application using the webpack builder.
  * @param devServerTarget
  * @param isWatching
+ * @param context
  * @private
  */
 export function startDevServer(

packages/cypress/src/plugins/preprocessor.spec.ts

@@ -21,9 +21,7 @@ describe('getWebpackConfig', () => {
       options: {
         configFile: './tsconfig.json',
         // https://github.com/TypeStrong/ts-loader/pull/685
-        experimentalWatchApi: true,
-        // https://github.com/cypress-io/cypress/issues/2316
-        transpileOnly: true
+        experimentalWatchApi: true
       }
     });
   });

packages/cypress/src/plugins/preprocessor.ts

@@ -2,8 +2,6 @@ import * as wp from '@cypress/webpack-preprocessor';
 import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
 import * as nodeExternals from 'webpack-node-externals';
 
-import ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-
 export function preprocessTypescript(config: any) {
   if (!config.env.tsConfig) {
     throw new Error(
@@ -37,18 +35,12 @@ export function getWebpackConfig(config: any) {
           options: {
             configFile: config.env.tsConfig,
             // https://github.com/TypeStrong/ts-loader/pull/685
-            experimentalWatchApi: true,
-            // https://github.com/cypress-io/cypress/issues/2316
-            transpileOnly: true
+            experimentalWatchApi: true
           }
         }
       ]
     },
-    plugins: [
-      new ForkTsCheckerWebpackPlugin({
-        tsconfig: config.env.tsConfig
-      })
-    ],
+    plugins: [],
     externals: [nodeExternals()]
   };
 }

packages/cypress/src/schematics/cypress-project/cypress-project.spec.ts

@@ -103,7 +103,7 @@ describe('schematic:cypress-project', () => {
         integrationFolder: './src/integration',
         modifyObstructiveCode: false,
         pluginsFile: './src/plugins/index',
-        supportFile: false,
+        supportFile: './src/support/index.ts',
         video: true,
         videosFolder: '../../dist/cypress/apps/my-app-e2e/videos',
         screenshotsFolder: '../../dist/cypress/apps/my-app-e2e/screenshots',
@@ -183,7 +183,7 @@ describe('schematic:cypress-project', () => {
           integrationFolder: './src/integration',
           modifyObstructiveCode: false,
           pluginsFile: './src/plugins/index',
-          supportFile: false,
+          supportFile: './src/support/index.ts',
           video: true,
           videosFolder: '../../../dist/cypress/apps/my-dir/my-app-e2e/videos',
           screenshotsFolder:

packages/cypress/src/schematics/cypress-project/files/cypress.json

@@ -4,7 +4,7 @@
   "integrationFolder": "./src/integration",
   "modifyObstructiveCode": false,
   "pluginsFile": "./src/plugins/index",
-  "supportFile": false,
+  "supportFile": "./src/support/index.ts",
   "video": true,
   "videosFolder": "<%= offsetFromRoot %>dist/cypress/<%= projectRoot %>/videos",
   "screenshotsFolder": "<%= offsetFromRoot %>dist/cypress/<%= projectRoot %>/screenshots",

packages/cypress/src/schematics/cypress-project/files/src/integration/app.spec.ts__tmpl__

@@ -4,6 +4,10 @@ describe('<%= project %>', () => {
   beforeEach(() => cy.visit('/'));
 
   it('should display welcome message', () => {
+    // Custom command example, see `../support/commands.ts` file
+    cy.login('my-email@something.com', 'myPassword');
+
+    // Function helper example, see `../support/app.po.ts` file
     getGreeting().contains('Welcome to <%= project %>!');
   });
 });

packages/cypress/src/schematics/cypress-project/files/src/support/commands.ts__tmpl__

@@ -7,11 +7,17 @@
 // commands please read more here:
 // https://on.cypress.io/custom-commands
 // ***********************************************
-//
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace Cypress {
+  interface Chainable<Subject> {
+    login(email: string, password: string): void;
+  }
+}
 //
 // -- This is a parent command --
-// Cypress.Commands.add("login", (email, password) => { ... })
-//
+Cypress.Commands.add('login', (email, password) => {
+  console.log('Custom command example: Login', email, password);
+});
 //
 // -- This is a child command --
 // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })