feat: Compatible with Cypress v7 component testing

.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() }}

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,134 @@
-import * as cypressTypeScriptPreprocessor from './cy-ts-preprocessor';
 import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
+import * as webpack from 'webpack';
+import * as path from 'path';
 
 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: {
+        devServer: {
+          contentBase: path.join(__dirname, '../../src'),
+        },
+        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',
+        },
+      },
+    }),
+  );
   require('@cypress/code-coverage/task')(on, config);
   return config;
 };

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>;