WIP: Build and run tests with webpack

.gitignore

@@ -6,6 +6,7 @@ node_modules
 # Parcel build dirs
 .cache
 tests/dist
+tests/dist-webpack
 
 # nyc code coverage
 .nyc_output

CONTRIBUTING.md

@@ -40,6 +40,8 @@ If you want more control over how tests are run, you can use other scripts:
 
 * If you need to debug browser tests, or want to run them in a different browser, use `npm run test:manual`, which will start a server and you can point your browser to [http://localhost:1234](http://localhost:1234).  Running the tests this way will also automatically watch your files, and hot-reload your code and tests, which is useful for debugging and trial/error testing.
 
+* If you would like to use webpack to build your tests, use `npm run test:webpack`, which will start a server and you can point your browser to [http://localhost:8080](http://localhost:8080).  Similar to `npm run test:manual`, this will watch for changes to test files and hot-reload your code and tests.
+
 * If you need to debug node.js test runs, you can do so using `npm run test:node-debug`.  Then, open Chrome and browse to [chrome://inspect](chrome://inspect) and click on your tests in the inspector.  The easiest way to get a breakpoint is to manually add a `debugger` keyword to your test code where you want the tests to stop.
 
 > Tip: you can add `skip()` to any `it()` or `describe()` in Mocha to skip a test, or `only()` to have only that test run.  For example: `describe.skip(...)` or `it.only(...)`.

package.json

@@ -24,6 +24,7 @@
     "pretest:node-debug": "echo \"Open Chrome to chrome://inspect to debug tests...\"",
     "test:node-debug": "mocha --timeout 5000 --inspect-brk tests",
     "test:manual": "parcel tests/index.html --out-dir tests/dist",
+    "test:webpack": "webpack serve --config ./tests/webpack.config.js --env ignoreRequestDependancyExpressionWarnings",
     "test:migrations": "mocha tests/filesystems/migrations",
     "pretest": "npm run lint",
     "test": "npm run karma-mocha",
@@ -46,14 +47,17 @@
   },
   "dependencies": {
     "es6-promisify": "^6.1.0",
+    "path": "^0.12.7",
     "minimatch": "^3.0.4"
   },
   "devDependencies": {
-    "regenerator-runtime": "^0.13.7",
+    "node-polyfill-webpack-plugin": "^1.0.3",
     "chai": "^4.3.0",
     "chai-datetime": "^1.8.0",
+    "css-loader": "^5.1.3",
     "eslint": "^7.20.0",
     "fake-indexeddb": "^3.1.2",
+    "html-webpack-plugin": "^5.3.1",
     "karma": "^6.1.1",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^3.1.0",
@@ -62,14 +66,19 @@
     "karma-mocha-reporter": "^2.2.5",
     "karma-summary-reporter": "^2.0.0",
     "meow": "^9.0.0",
+    "mini-css-extract-plugin": "^1.3.9",
     "mocha": "^8.3.0",
     "nyc": "^15.1.0",
     "parcel-bundler": "^1.12.4",
     "pretty-bytes": "^5.5.0",
+    "regenerator-runtime": "^0.13.7",
     "release-it": "^14.4.1",
     "run.env": "^1.1.0",
     "unused-filename": "^2.1.0",
-    "walk": "^2.3.14"
+    "walk": "^2.3.14",
+    "webpack": "^5.27.1",
+    "webpack-cli": "^4.5.0",
+    "webpack-dev-server": "^3.11.2"
   },
   "main": "./src/index.js",
   "browser": "./dist/filer.min.js",

tests/index.html

@@ -11,14 +11,7 @@
   <script src="../node_modules/chai/chai.js"></script>
   <script src="../node_modules/mocha/mocha.js"></script>
 
-  <script>
-    mocha.setup('bdd').timeout(10000).slow(250);
-
-    window.onload = function() {
-      mocha.checkLeaks();
-      mocha.run();
-    };
-  </script>
+  <script src="./setup-mocha.js"></script>
 
   <!-- Add any new tests to `tests/index.js` -->
   <script src="./index.js"></script>

tests/index.js

@@ -3,11 +3,6 @@
  * get them running by default.
  */
 
-// Shims
-require('./spec/shims/fs.spec');
-require('./spec/shims/path.spec');
-require('./spec/shims/buffer.spec');
-
 // Filer
 require('./spec/filer.spec');
 require('./spec/filer.buffer.spec.js');

tests/setup-mocha.js

@@ -0,0 +1,8 @@
+var mocha = require('mocha');
+
+mocha.setup('bdd').timeout(10000).slow(250);
+
+window.onload = function() {
+  mocha.checkLeaks();
+  mocha.run();
+};

tests/spec/filer.spec.js

@@ -1,7 +1,7 @@
 'use strict';
+const expect = require('chai').expect;
 const Filer = require('../../src');
 const util = require('../lib/test-utils');
-const expect = require('chai').expect;
 
 describe('Filer', function() {
   it('is defined', function() {

tests/spec/shims/fs.spec.js

@@ -1,7 +1,7 @@
 'use strict';
 const expect = require('chai').expect;
 const utils = require('../../lib/test-utils');
-const fs = utils.shimIndexedDB(() => require('../../../shims/fs').default);
+import fs from 'fs';
 
 describe('fs shim', () => {
   it('should be defined', () => {
@@ -17,10 +17,12 @@ describe('fs shim', () => {
   });
 
   it('should call callback when calling fs.writeFile', (done) => {
-    fs.writeFile('/test.txt', 'test', function(err) {
-      if(err) throw err;
+    utils.shimIndexedDB(() => {
+      fs.writeFile('/test.txt', 'test', function(err) {
+        if(err) throw err;
 
-      done();
+        done();
+      });
     });
   });
 

tests/webpack-tests.js

@@ -0,0 +1,16 @@
+// Include the mocha css
+require('mocha/mocha.css');
+
+// Setup mocha and set it to run tests on window load
+require('./setup-mocha');
+
+var path = require('../shims/path').default;
+console.log(path.isAbsolute('/a/b'));
+
+// Add any webpack specific tests here e.g. shim tests
+require('./spec/shims/fs.spec');
+require('./spec/shims/path.spec');
+require('./spec/shims/buffer.spec');
+
+// Add any other new tests to `tests/index.js`
+require('./index');

tests/webpack.config.js

@@ -0,0 +1,61 @@
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require('path');
+
+module.exports = env => ({
+  mode: 'development',
+  entry: path.resolve(__dirname, './webpack-tests.js'),
+  resolve: {
+    alias: {
+      'fsProvider': path.resolve(__dirname, '../shims/providers/default'),
+    },
+  },
+  output: {
+    path: path.resolve(__dirname, './dist-webpack'),
+    filename: 'index.js',
+  },
+  plugins: [
+    new webpack.ContextReplacementPlugin(
+      // Mocha safely uses require in such a way that webpack cannot statically extract dependancies.
+      // If the ignoreRequestDependancyExpressionWarnings env is set, we will aggregate these warnings
+      // into one summary warning to minimise spamming the console.
+      /\/node_modules\/mocha\/lib/,
+      (data) => {
+        if (env.ignoreRequestDependancyExpressionWarnings) {
+          let requestDependencyExpressionsIgnored = 0;
+          data.dependencies.forEach((dependancy) => {
+            if (dependancy.critical === 'the request of a dependency is an expression') {
+              dependancy.critical = undefined;
+              requestDependencyExpressionsIgnored += 1;
+            }
+          });
+          console.log(`WARNING: Ignoring ${requestDependencyExpressionsIgnored} "request of a dependency is an expression" warnings from "node_modules/mocha/lib".`);
+        }
+        return data;
+      },
+    ),
+    new NodePolyfillPlugin(),
+    new MiniCssExtractPlugin(),
+    new HtmlWebpackPlugin({
+      title: 'Filer Tests - Webpack Build',
+      template: './tests/webpack.index.html',
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+      },
+    ],
+  },
+  optimization: {
+    minimize: false,
+  },
+  devtool: 'inline-source-map',
+  devServer: {
+    contentBase: path.resolve(__dirname, './dist-webpack'),
+  }
+});

tests/webpack.index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <div id="mocha"></div>
+  </body>
+</html>