Add coverage report and update readme

.gitignore

@@ -1,3 +1,4 @@
 .idea
-node_modules
+coverage
 dist
+node_modules

README.md

@@ -14,6 +14,27 @@ Install the necessary dependencies using yarn.
 yarn
 ```
 
+Test
+----
+
+This performs lint, prettier and unit tests
+
+```sh
+yarn test
+```
+
+You can run the unit tests alone using
+
+```sh
+yarn test:unit
+```
+
+You can watch unit tests using
+
+```sh
+yarn test:unit --watch
+```
+
 Development Server
 ------------------
 
@@ -29,3 +50,24 @@ This build the project into the `./dist` directory
 ```sh
 NODE_ENV=production yarn build
 ```
+
+CI Pipeline
+-----------
+
+It's common to break these out using CI pipeline definition files depending on the CI/CD platform they are often in a yaml format (Groovy in the case of Jenkins) so that the different stages can have their own metrics.
+
+```
+// stage test
+yarn test
+
+// stage build
+NODE_ENV=production yarn build
+
+// stage publish
+// Publish test result and coverage
+// coverage results will be in the ./coverage folder
+// usually I would use the jest junit reporter to send test results
+
+// stage clean
+yarn clean
+```

jest.config.js

@@ -1,4 +1,14 @@
 module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'node',
+  collectCoverage: true,
+  collectCoverageFrom: ['./src/**/*.{ts,tsx}'],
+  coverageThreshold: {
+    global: {
+      statements: 82,
+      branches: 88,
+      functions: 88,
+      lines: 82,
+    }
+  }
 };

package.json

@@ -4,7 +4,7 @@
   "description": "Simple calculator in React",
   "main": "src/index.tsx",
   "scripts": {
-    "clean": "",
+    "clean": "rm -rf ./dist",
     "start": "webpack-dev-server",
     "build": "webpack",
     "test": "yarn test:lint && yarn test:unit",

tsconfig.json

@@ -3,7 +3,8 @@
     "strict": true,
     "module": "ESNext",
     "target": "ESNext",
-    "jsx": "react"
+    "jsx": "react",
+    "esModuleInterop": true
   },
   "include": [
     "./global.d.ts",

webpack.config.js

@@ -1,35 +1,35 @@
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
 
 module.exports = {
-    entry: './src/index.tsx',
-    module: {
-        rules: [
-            {
-                test: /\.tsx?$/,
-                use: 'ts-loader',
-                exclude: /node_modules/,
-            },
-            {
-                test: /\.svg$/,
-                use: ['@svgr/webpack'],
-            }
-        ],
-    },
-    resolve: {
-        extensions: [ '.tsx', '.ts', '.js' ],
-    },
-    output: {
-        filename: 'bundle.js',
-        path: path.resolve(__dirname, 'dist'),
-    },
-    devServer: {
-        contentBase: path.join(__dirname, 'dist')
-    },
-    plugins: [
-        new HtmlWebpackPlugin({
-            title: "Simple Calculator",
-
-        })
-    ]
-};
+  entry: './src/index.tsx',
+  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.svg$/,
+        use: ['@svgr/webpack'],
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  devServer: {
+    contentBase: path.join(__dirname, 'dist'),
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: 'Simple Calculator',
+    }),
+  ],
+}