feat: Compatible with Cypress v7 component testing (#412)

* feat: Compatible with Cypress v7 component testing

* Exclude unit spec

* Integration of cypress/mount-utils

* fix tests

* Add setupHooks from @cypress/mount-utils

* Clean cypress json

* Remove helpers

* Fix assets

* Need an other solution for assers

* External webpack config

* Update doc

.github/workflows/ci.yml

@@ -22,13 +22,9 @@ jobs:
         run: npm run build
 
       - name: Test 🧪
-        uses: cypress-io/github-action@v2
+        run: npx cypress run-ct --record --parallel
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-        with:
-          record: true
-          parallel: true
-          group: 'component tests'
 
       - name: Upload artifact
         if: ${{ always() }}

README.md

@@ -19,6 +19,44 @@ require('core-js/es7/reflect');
 require('cypress-angular-unit-test/support');
 ```
 
+### Cypress >= v7
+
+```shell
+npm install -D @cypress/webpack-dev-server
+```
+
+Enable component testing in `cypress.json`.
+
+```json
+{
+  "component": {
+    "componentFolder": "src/app",
+    "testFiles": "**/*cy-spec.ts"
+  }
+}
+```
+
+Configure `cypress/plugins/index.js` to transpile Angular code.
+
+```javascript
+import * as webpackConfig from './webpack.config';
+const { startDevServer } = require('@cypress/webpack-dev-server');
+
+module.exports = (on, config) => {
+  on('dev-server:start', (options) =>
+    startDevServer({
+      options,
+      webpackConfig,
+    }),
+  );
+  return config;
+};
+```
+
+The `webpack.config.ts` file is [here](cypress/plugins/webpack.config.ts)
+
+### Cypress < v7
+
 Enable experimental component testing mode in `cypress.json` and point at the spec files. Usually they are alongside your application files in `src` folder.
 
 ```json
@@ -32,14 +70,18 @@ Enable experimental component testing mode in `cypress.json` and point at the sp
 Configure `cypress/plugins/index.js` to transpile Angular code.
 
 ```javascript
-import * as cypressTypeScriptPreprocessor from './cy-ts-preprocessor';
+const wp = require('@cypress/webpack-preprocessor');
+import * as webpackOptions from './webpack.config';
 module.exports = (on, config) => {
-  on('file:preprocessor', cypressTypeScriptPreprocessor);
+  const options = {
+    webpackOptions,
+  };
+  on('file:preprocessor', wp(options));
   return config;
 };
 ```
 
-The file `cy-ts-preprocessor` is [here](cypress/plugins/cy-ts-preprocessor.ts)
+The `webpack.config.ts` file is [here](cypress/plugins/webpack.config.ts)
 
 ## Use
 

cypress.json

@@ -1,10 +1,11 @@
 {
-  "experimentalComponentTesting": true,
   "experimentalFetchPolyfill": true,
-  "componentFolder": "src",
-  "testFiles": "**/*cy-spec.*",
   "fixturesFolder": false,
   "includeShadowDom": true,
   "fileServerFolder": "src",
-  "projectId": "nf7zag"
+  "projectId": "nf7zag",
+  "component": {
+    "componentFolder": "src/app",
+    "testFiles": "**/*cy-spec.ts"
+  }
 }

cypress/plugins/index.ts

@@ -1,9 +1,16 @@
-import * as cypressTypeScriptPreprocessor from './cy-ts-preprocessor';
 import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
+import * as webpackConfig from './webpack.config';
 
 module.exports = (on, config) => {
   addMatchImageSnapshotPlugin(on, config);
-  on('file:preprocessor', cypressTypeScriptPreprocessor);
+  const { startDevServer } = require('@cypress/webpack-dev-server');
+
+  on('dev-server:start', (options) =>
+    startDevServer({
+      options,
+      webpackConfig,
+    }),
+  );
   require('@cypress/code-coverage/task')(on, config);
   return config;
 };

cypress/plugins/webpack.config.ts

@@ -0,0 +1,116 @@
+import * as webpack from 'webpack';
+import * as path from 'path';
+
+module.exports = {
+  mode: 'development',
+  devtool: 'inline-source-map',
+  resolve: {
+    extensions: ['.ts', '.js'],
+    modules: [path.join(__dirname, '../../src'), 'node_modules'],
+  },
+  module: {
+    rules: [
+      {
+        enforce: 'pre',
+        test: /\.js$/,
+        loader: 'source-map-loader',
+      },
+      {
+        test: /\.ts$/,
+        // loaders: ['ts-loader', 'angular2-template-loader'],
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+            },
+          },
+          {
+            loader: 'angular2-template-loader',
+          },
+        ],
+        exclude: [/node_modules/, /test.ts/, /polyfills.ts/],
+      },
+      {
+        test: /\.(js|ts)$/,
+        loader: 'istanbul-instrumenter-loader',
+        options: { esModules: true },
+        enforce: 'post',
+        include: path.join(__dirname, '../..', 'src'),
+        exclude: [
+          /\.(e2e|spec)\.ts$/,
+          /node_modules/,
+          /(ngfactory|ngstyle)\.js/,
+        ],
+      },
+      {
+        // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
+        // Removing this will cause deprecation warnings to appear.
+        test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
+        parser: { system: true },
+      },
+      {
+        test: /\.css$/,
+        loader: 'raw-loader',
+      },
+      {
+        test: /(\.scss|\.sass)$/,
+        use: ['raw-loader', 'sass-loader'],
+      },
+      {
+        test: /\.html$/,
+        loader: 'raw-loader',
+        exclude: [path.join(__dirname, '../../src/index.html')],
+      },
+      {
+        test: /\.(jpe?g|png|gif)$/i,
+        loader: 'file-loader?name=assets/images/[name].[ext]',
+      },
+      {
+        test: /\.(mp4|webm|ogg)$/i,
+        loader: 'file-loader?name=assets/videos/[name].[ext]',
+      },
+      {
+        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+        loader:
+          'file-loader?limit=10000&mimetype=image/svg+xml&name=assets/svgs/[name].[ext]',
+      },
+      {
+        test: /\.eot(\?v=\d+.\d+.\d+)?$/,
+        loader:
+          'file-loader?prefix=font/&limit=5000&name=assets/fonts/[name].[ext]',
+      },
+      {
+        test: /\.(woff|woff2)$/,
+        loader:
+          'file-loader?prefix=font/&limit=5000&name=assets/fonts/[name].[ext]',
+      },
+      {
+        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
+        loader:
+          'file-loader?limit=10000&mimetype=application/octet-stream&name=assets/fonts/[name].[ext]',
+      },
+    ],
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'test'),
+    }),
+    new webpack.ContextReplacementPlugin(
+      /\@angular(\\|\/)core(\\|\/)f?esm5/,
+      path.join(__dirname, './src'),
+    ),
+  ],
+  performance: {
+    hints: false,
+  },
+  node: {
+    global: true,
+    crypto: 'empty',
+    process: false,
+    module: false,
+    clearImmediate: false,
+    setImmediate: false,
+    fs: 'empty',
+  },
+};

lib/config.ts

@@ -1,43 +1,9 @@
-export class StyleOptions {
-  /**
-   * Creates <link href="..." /> element for each stylesheet
-   * @alias stylesheet
-   */
-  stylesheets?: string[];
+import { StyleOptions } from '@cypress/mount-utils';
 
-  /**
-   * Creates <link href="..." /> element for each stylesheet
-   * @alias stylesheets
-   */
-  stylesheet?: string;
+interface Config {
+  detectChanges?: boolean;
 
-  /**
-   * Creates <style>...</style> element and inserts given CSS.
-   * @alias styles
-   */
-  style?: string;
-
-  /**
-   * Creates <style>...</style> element for each given CSS text.
-   * @alias style
-   */
-  styles?: string[];
-
-  /**
-   * Loads each file and creates a <style>...</style> element
-   * with the loaded CSS
-   * @alias cssFile
-   */
-  cssFiles?: string[];
-
-  /**
-   * Single CSS file to load into a <style></style> element
-   * @alias cssFile
-   */
-  cssFile?: string;
+  log?: boolean;
 }
-export class CypressAngularConfig extends StyleOptions {
-  detectChanges? = true;
 
-  log? = false;
-}
+export type CypressAngularConfig = Partial<StyleOptions> & Partial<Config>;