AmoDinho / testing-masterclass

This repo covers how to approach TDD for modern front-end Javascript apps.

testing-masterclass

This repo covers how to approach TDD for modern front-end Javascript apps.

This might seem all over the place what this is how we are going to do it:

• create webpack config from scratch.
• Install React.
• Create a simple Use Case to interact with the Root Insurance API.
• create simple unit tests.

Step 1

run yarn init

Step 2

You need to install webpack and its associated dependancies:

yarn add webpack webpack-cli webpack-dev-server --dev

step 3

create a src folder and add an index.js & component.js file

step 4

add the following dependancy:

yarn add html-webpack-plugin --dev

step 5

create a webpack.config.js file

step 6

add the following :

step 7

add the following scripts to your package.json

step 8

run: yarn run

and your webpack dev server should be running.

part II

step 9

add nodemon

yarn add nodemone --dev

step 10

update package.json

"start": "nodemon ---watch webpack-dev-server --exec \"webpack-dev-server --mode development\""

step 11

add webpack merge

yarn add webpack-merge --dev

step 12

create a webpack.parts.js add the following to it:

exports.devServer = ({host,port} = {}) => ({
    devServer: {
        stats: "errors-only",
        host,
        port,
        open:true,
        overlay:true
    },
});

step 13

then update your webpack.config.js to look like this:

const htmlWebpackPlugin = require("html-webpack-plugin");
const merge = require("webpack-merge");

const parts = require("./webpack.parts");

const commonConfig = merge([
    {
        plugins: [
            new htmlWebpackPlugin({
                title: "Webpack starter"
            })
        ]
    }
]);

const productionConfig = merge([]);

const developmentConfig = merge([
    parts.devServer({
        host:process.env.HOST,
        port: process.env.PORT,
    }),
]);

module.exports = mode => {
   if(mode === "production"){
       return merge(commonConfig,productionConfig,{mode});
   }

   return merge(commonConfig,developmentConfig,{mode});
};

step 14

Update package.json:

"start": "nodemon ---watch webpack-dev-server --exec \"webpack-dev-server --env development\"",

    "build": "webpack --env.target production"

Part III

step 15

Install the following packages:

yarn add react react-dom babel-core babel-eslint babel-loader babel-plugin-transform-class-properties babel-preset-env babel-preset-react css-loader

step 16

yarn add  eslint