feat: Compatibility with Angular 12+ (#467)

* feat: Compatibility with Angular 12+ * Angular 12 doc
bahmutov · May 30, 2021 · 8e4f373 · 8e4f373
1 parent cac2f03
commit 8e4f373
Show file tree

Hide file tree

Showing 6 changed files with 6,009 additions and 5,882 deletions.
diff --git a/browserslist → .browserslistrc b/browserslist → .browserslistrc
diff --git a/README.md b/README.md
@@ -19,6 +19,14 @@ require('core-js/es7/reflect');
 require('cypress-angular-unit-test/support');
 ```
 
+### Webpack config
+
+Create a new file `webpack.config.ts` in `cypress/plugins` folder.
+You can find the file content here :
+
+- [Webpack v4.x](cypress/plugins/webpack4.config.ts)
+- [Webpack v5.x or Angular v12](cypress/plugins/webpack.config.ts)
+
 ### Cypress >= v7
 
 ```shell
@@ -53,8 +61,6 @@ module.exports = (on, config) => {
 };
 ```
 
-The `webpack.config.ts` file is [here](cypress/plugins/webpack.config.ts)
-
 Run `npx cypress open-ct`
 
 ### Cypress < v7
@@ -87,7 +93,7 @@ module.exports = (on, config) => {
 };
 ```
 
-The `webpack.config.ts` file is [here](cypress/plugins/webpack.config.ts)
+Run `npx cypress open`
 
 ## Use
 

diff --git a/cypress/plugins/webpack.config.ts b/cypress/plugins/webpack.config.ts
@@ -13,7 +13,7 @@ module.exports = {
       {
         enforce: 'pre',
         test: /\.js$/,
-        loader: 'source-map-loader',
+        use: 'source-map-loader',
       },
       {
         test: /\.ts$/,
@@ -33,8 +33,10 @@ module.exports = {
       },
       {
         test: /\.(js|ts)$/,
-        loader: 'istanbul-instrumenter-loader',
-        options: { esModules: true },
+        use: {
+          loader: 'istanbul-instrumenter-loader',
+          options: { esModules: true },
+        },
         enforce: 'post',
         include: path.join(__dirname, '../..', 'src'),
         exclude: [
@@ -51,44 +53,40 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        loader: 'raw-loader',
+        use: 'raw-loader',
       },
       {
         test: /(\.scss|\.sass)$/,
         use: ['raw-loader', 'sass-loader'],
       },
       {
         test: /\.html$/,
-        loader: 'raw-loader',
+        use: 'raw-loader',
         exclude: [path.join(__dirname, '../../src/index.html')],
       },
       {
         test: /\.(jpe?g|png|gif)$/i,
-        loader: 'file-loader?name=assets/images/[name].[ext]',
+        use: 'file-loader?name=assets/images/[name].[ext]',
       },
       {
         test: /\.(mp4|webm|ogg)$/i,
-        loader: 'file-loader?name=assets/videos/[name].[ext]',
+        use: '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]',
+        use: '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]',
+        use: '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]',
+        use: '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]',
+        use: 'file-loader?limit=10000&mimetype=application/octet-stream&name=assets/fonts/[name].[ext]',
       },
     ],
   },
@@ -104,13 +102,4 @@ module.exports = {
   performance: {
     hints: false,
   },
-  node: {
-    global: true,
-    crypto: 'empty',
-    process: false,
-    module: false,
-    clearImmediate: false,
-    setImmediate: false,
-    fs: 'empty',
-  },
 };
diff --git a/cypress/plugins/webpack4.config.ts b/cypress/plugins/webpack4.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',
+  },
+};