Update webpack config

.eslintrc.js

@@ -3,7 +3,9 @@ module.exports = {
   globals: {},
   env: {
     browser: true,
-    es6: true
+    es6: true,
+    jest: true,
+    node: true
   },
   extends: [
     "eslint:recommended",
@@ -17,4 +19,4 @@ module.exports = {
     semi: ["error", "always"],
     "object-curly-spacing": ["error", "always"]
   }
-};
+};

.github/workflows/pr.yml

@@ -16,7 +16,7 @@ jobs:
         docker run -d -p 80:80 --env SECRET_KEY=insecure_secret_key microk8s-io
         sleep 1 && curl --head --fail --retry-delay 5 --retry 10 --retry-connrefused http://localhost
 
-  lint-python:  
+  lint-python:
     runs-on: ubuntu-latest
 
     steps:
@@ -54,3 +54,17 @@ jobs:
 
       - name: Run tests
         run: docker run --env SECRET_KEY=insecure_secret_key --entrypoint python3 microk8s-io -m unittest discover tests
+
+  test-js:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Test JS
+        run: |
+          yarn test-js
+          bash <(curl -s https://codecov.io/bash) -cF javascript

.webpack/entry.js

@@ -0,0 +1,4 @@
+module.exports = {
+  "global-nav": "./static/js/global-nav.js",
+  main: ["./static/js/tabs.js", "./static/js/copytoclipboard.js"],
+};

.webpack/rules.js

@@ -0,0 +1,13 @@
+module.exports = [
+  {
+    test: /\.js$/,
+    // Exclude node_modules from using babel-loader
+    // except some that use ES6 modules and need to be transpiled:
+    // such as swiper http://idangero.us/swiper/get-started/
+    // and also react-dnd related
+    exclude: /node_modules\/(?!(dom7|ssr-window)\/).*/,
+    use: {
+      loader: "babel-loader",
+    },
+  },
+];

package.json

@@ -17,15 +17,13 @@
     "serve": "./entrypoint 0.0.0.0:${PORT}",
     "start": "yarn run build && concurrently --raw 'yarn run watch' 'yarn run serve'",
     "test": "yarn run lint-scss && yarn run lint-python && yarn run test-python",
-    "test-python": "python3 -m unittest discover tests"
+    "test-python": "python3 -m unittest discover tests",
+    "test-js": "jest"
   },
   "dependencies": {
     "@canonical/global-nav": "^2.4.1",
     "autoprefixer": "9.7.5",
-    "babel-core": "^6.26.3",
     "babel-eslint": "10.1.0",
-    "babel-loader": "^8.1.0",
-    "babel-preset-env": "^1.7.0",
     "eslint": "6.8.0",
     "eslint-config-prettier": "6.10.1",
     "eslint-plugin-prettier": "3.1.2",
@@ -35,17 +33,22 @@
     "node-sass": "4.13.1",
     "postcss-cli": "7.1.0",
     "prettier": "2.0.2",
-    "terser-webpack-plugin": "^2.3.5",
     "vanilla-framework": "2.10.0",
     "watch-cli": "0.2.3",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11"
   },
   "devDependencies": {
+    "@babel/core": "7.10.2",
+    "@babel/preset-env": "7.10.2",
+    "babel-jest": "26.0.1",
+    "babel-loader": "8.1.0",
     "concurrently": "5.1.0",
+    "jest": "26.0.1",
     "stylelint": "13.2.1",
     "stylelint-config-prettier": "8.0.1",
     "stylelint-config-standard": "20.0.0",
-    "stylelint-order": "4.0.0"
+    "stylelint-order": "4.0.0",
+    "terser-webpack-plugin": "3.0.3"
   }
 }

static/js/sample.test.js

@@ -0,0 +1,5 @@
+describe("sample test", () => {
+  it("should pass", () => {
+    expect(true).toBeTruthy();
+  });
+});

webpack.config.js

@@ -1,5 +1,8 @@
 /* eslint-env node */
 
+const entry = require("./.webpack/entry.js");
+const rules = require("./.webpack/rules.js");
+
 const TerserPlugin = require("terser-webpack-plugin");
 
 const production = process.env.ENVIRONMENT !== "devel";
@@ -14,33 +17,15 @@ const minimizer = production
   : [];
 
 module.exports = {
-  entry: {
-    "global-nav": "./static/js/global-nav.js",
-    main: [
-      "./static/js/tabs.js",
-      "./static/js/copytoclipboard.js",
-    ],
-  },
+  entry: entry,
   output: {
     filename: "[name].js",
     path: __dirname + "/static/js/dist",
   },
   mode: production ? "production" : "development",
   devtool: production ? "source-map" : "eval-source-map",
   module: {
-    rules: [
-      {
-        test: /\.js$/,
-        // Exclude node_modules from using babel-loader
-        // except some that use ES6 modules and need to be transpiled:
-        // such as swiper http://idangero.us/swiper/get-started/
-        // and also react-dnd related
-        exclude: /node_modules\/(?!(dom7|ssr-window)\/).*/,
-        use: {
-          loader: "babel-loader",
-        },
-      },
-    ],
+    rules: rules,
   },
   optimization: {
     minimize: true,