diff --git a/.gitignore b/.gitignore index 2fd83a6..08b6b92 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ .idea -node_modules +coverage dist +node_modules diff --git a/README.md b/README.md index 12474ed..7b556aa 100644 --- a/README.md +++ b/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 +``` diff --git a/jest.config.js b/jest.config.js index 4a5b465..1acdaa5 100644 --- a/jest.config.js +++ b/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, + } + } }; diff --git a/package.json b/package.json index a6db6d9..f486677 100644 --- a/package.json +++ b/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", diff --git a/tsconfig.json b/tsconfig.json index b73410e..3064300 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,7 +3,8 @@ "strict": true, "module": "ESNext", "target": "ESNext", - "jsx": "react" + "jsx": "react", + "esModuleInterop": true }, "include": [ "./global.d.ts", diff --git a/webpack.config.js b/webpack.config.js index 3e89a5d..eff43ab 100644 --- a/webpack.config.js +++ b/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', + }), + ], +}