https://github.com/amodinho/testing-masterclass

This repo covers how to approach TDD for modern front-end Javascript apps.
https://github.com/amodinho/testing-masterclass

Last synced: 26 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/amodinho/testing-masterclass
• Owner: AmoDinho
• License: mit
• Created: 2018-12-11T14:02:27.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-12-13T16:43:02.000Z (about 6 years ago)
• Last Synced: 2024-10-28T09:15:07.045Z (2 months ago)
• Language: JavaScript
• Size: 142 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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

```