feat(nx): cypress supportFile handling

This update the Cypress schematic to handle by default the `supportFile` option in `cypress.json` with an example for _custom commands_. Related to nrwl#1609
bcabanes · Oct 22, 2019 · 5a1b15f · 5a1b15f
1 parent 5b8989f
commit 5a1b15f
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 16 deletions.
diff --git a/packages/cypress/package.json b/packages/cypress/package.json
@@ -38,7 +38,6 @@
     "@angular-devkit/architect": "0.803.3",
     "@angular-devkit/core": "8.3.3",
     "@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",

diff --git a/packages/cypress/src/builders/cypress/cypress.impl.ts b/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(

diff --git a/packages/cypress/src/plugins/preprocessor.ts b/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(
@@ -39,16 +37,14 @@ export function getWebpackConfig(config: any) {
             // https://github.com/TypeStrong/ts-loader/pull/685
             experimentalWatchApi: true,
             // https://github.com/cypress-io/cypress/issues/2316
-            transpileOnly: true
+            transpileOnly: true,
+            // Enable Cypress commands typings with `declare` syntax
+            allowDeclarations: true
           }
         }
       ]
     },
-    plugins: [
-      new ForkTsCheckerWebpackPlugin({
-        tsconfig: config.env.tsConfig
-      })
-    ],
+    plugins: [],
     externals: [nodeExternals()]
   };
 }
diff --git a/packages/cypress/src/schematics/cypress-project/cypress-project.spec.ts b/packages/cypress/src/schematics/cypress-project/cypress-project.spec.ts
@@ -102,7 +102,7 @@ describe('schematic:cypress-project', () => {
         fixturesFolder: './src/fixtures',
         integrationFolder: './src/integration',
         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',
@@ -181,7 +181,7 @@ describe('schematic:cypress-project', () => {
           fixturesFolder: './src/fixtures',
           integrationFolder: './src/integration',
           pluginsFile: './src/plugins/index',
-          supportFile: false,
+          supportFile: './src/support/index.ts',
           video: true,
           videosFolder: '../../../dist/cypress/apps/my-dir/my-app-e2e/videos',
           screenshotsFolder:

diff --git a/packages/cypress/src/schematics/cypress-project/files/cypress.json b/packages/cypress/src/schematics/cypress-project/files/cypress.json
@@ -3,7 +3,7 @@
   "fixturesFolder": "./src/fixtures",
   "integrationFolder": "./src/integration",
   "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",

diff --git a/packages/cypress/src/schematics/cypress-project/files/src/integration/app.spec.ts__tmpl__ b/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('[email protected]', 'myPassword');
+
+    // Function helper example, see `../support/app.po.ts` file
     getGreeting().contains('Welcome to <%= project %>!');
   });
 });
diff --git a/packages/cypress/src/schematics/cypress-project/files/src/support/commands.ts__tmpl__ b/packages/cypress/src/schematics/cypress-project/files/src/support/commands.ts__tmpl__
@@ -7,11 +7,16 @@
 // commands please read more here:
 // https://on.cypress.io/custom-commands
 // ***********************************************
-//
+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) => { ... })