feat: Loading assets (#176)

README.md

@@ -83,6 +83,7 @@ Use case | Description
 [Pipe](examples/ng9/src/app/pipes/capitalize) | Test pipe with mountHtml
 [Stub service](examples/ng9/src/app/service-stub) | Stub a service with Observable
 [Web Component](examples/ng9/src/app/use-custom-element) | Test a custom element with shadow dom
+[Assets](examples/ng9/src/app/assets-image) | `assets` folder accessible by Cypress
 
 ### Internal
 
@@ -105,6 +106,18 @@ I have successfully used this mounting approach to test components in other fram
 * [cypress-hyperapp-unit-test](https://github.com/bahmutov/cypress-hyperapp-unit-test)
 * [cypress-angularjs-unit-test](https://github.com/bahmutov/cypress-angularjs-unit-test)
 
+## Debugging
+
+You can turn on debugging log by setting environment variable :
+
+```
+// Unix
+export DEBUG="cypress-angular-unit-test,cypress:webpack:stats"
+
+// PowerShell
+$env:DEBUG="cypress-angular-unit-test,cypress:webpack:stats"
+```
+
 ## Development
 
 This project only transpiles the library, to see it in action:

examples/ng9/cypress.json

@@ -4,5 +4,6 @@
   "componentFolder": "src",
   "testFiles": "**/*cy-spec.*",
   "fixturesFolder": false,
-  "includeShadowDom": true
+  "includeShadowDom": true,
+  "fileServerFolder": "src"
 }

examples/ng9/cypress/plugins/cy-ts-preprocessor.js

@@ -1,11 +1,25 @@
-const wp = require('@cypress/webpack-preprocessor')
+const wp = require('@cypress/webpack-preprocessor');
+const helpers = require('./helpers');
+const webpack = require('webpack');
+const path = require('path');
 
 const webpackOptions = {
+  mode: 'development',
+  devtool: 'inline-source-map',
   resolve: {
-    extensions: ['.ts', '.js']
+    extensions: ['.ts', '.js'],
+    modules: [helpers.root('src'), 'node_modules']
   },
   module: {
     rules: [
+      {
+        enforce: 'pre',
+        test: /\.js$/,
+        loader: 'source-map-loader',
+        exclude: [
+          helpers.root('node_modules/@angular')
+        ]
+      },
       {
         test: /\.ts$/,
         // loaders: ['ts-loader', 'angular2-template-loader'],
@@ -20,24 +34,62 @@ const webpackOptions = {
         exclude: [/node_modules/],
       },
       {
-        test: /\.(css)$/,
-        loaders: ['to-string-loader', 'css-loader', 'sass-loader'],
-        exclude: /\.async\.(css)$/
+        // 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: /\.scss$/,
-        loaders: ['to-string-loader', 'css-loader', 'sass-loader'],
+        test: /(\.css|\.scss|\.sass)$/,
+        use: [
+          'to-string-loader', 
+          'css-loader', 
+          'sass-loader'
+        ],
+        exclude: [helpers.root('src/index.html')]
       },
       {
-        test: /\.(html)$/,
-        loader: 'html-loader',
-        exclude: /\.async\.(css)$/
+        test: /\.html$/,
+        loader: 'raw-loader',
+        exclude: [helpers.root('src/index.html')]
       },
       {
-        test: /\.async\.(html|css)$/,
-        loaders: ['file?name=[name].[hash].[ext]', 'extract']
-      }
+        enforce: 'post',
+        test: /\.(js|ts)$/,
+        loader: 'istanbul-instrumenter-loader',
+        query: {
+          esModules: true
+        },
+        include: helpers.root('src'),
+        exclude: [/\.(e2e|spec)\.ts$/, /node_modules/]
+      },
+      { 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'
   }
 }
 

examples/ng9/cypress/plugins/helpers.js

@@ -0,0 +1,9 @@
+const path = require('path');
+/**
+ * Helper functions.
+ */
+var ROOT = path.resolve(__dirname, '..');
+
+var root = path.join.bind(path, ROOT);
+
+exports.root = root;