# Automated Testing with Node.js for Beginners

## Why Test?

Testing your code is an essential phase of web development. It keeps your code from running into errors and ensures that it works across all devices and browsers. But it can be time-consuming and complicated to test your code, especially if you are a beginner.

Some common testing such as **linting** and **minifying** can be automated, helping you to fix common bugs and flag errors in your code more easily than ever. This helps to save you lots of time when performing tests!

> **Linting:** process of running a program that will analyse code for potential errors. - Wikipedia

> \*\*Minifying: \*\*process of removing all unnecessary characters from the source code of interpreted programming languages or markup languages without changing its functionality. - Wikipedia

In this tutorial, I will show you how to set up a task runner with Node.js and npm to automate 3 processes:

1. HTML Linting and Minifying: fix errors and bad formatting
    
2. CSS Autoprefixing and Linting: add prefixes to run in older browsers and fix errors
    
3. JavaScript Linting and Transpiling: fix errors and transpile new JS code to work in older browsers
    

## Step 1: Download Node.js and npm

Download Node.js (with npm) at: [https://nodejs.org/en/download/](https://nodejs.org/en/download/)

After it is installed, to check if it is there, go to your command prompt:

```javascript
node -v
npm -v
```

## Step 2: Install Gulp

Gulp is an automated toolkit we will be using to create our task runner for testing (see [documentation](https://gulpjs.com/docs/en/getting-started/quick-start)). You can install it via npm by running this line on your command prompt:

```javascript
npm install --global gulp-cli
```

## Step 3: Create a project, navigate to it and initialize npm

```javascript
mkdir test-project
cd test-project
npm init
```

After initializing npm, a `package.json` will be generated in your project directory.

## Step 4: Set up Gulp as a dependency

```javascript
npm install --save-dev gulp
```

You should now see gulp in your package.json under the `devDependencies` property.

## Step 5: Create gulpfile.js

In your project directory, create a `gulpfile.js` file, where we will be writing our task runner in and add the following as the first line:

```javascript
const gulp = require('gulp');
```

Now, let's create the 3 automated test tasks start from html, css and then javascript.

## Step 6: Create 'html' task

Let's start with creating the html task with `gulp-htmltidy`, a gulp plugin for HTML linting. See [documentation](https://www.npmjs.com/package/gulp-htmltidy).

First, we install it with:

```javascript
npm install --save-dev gulp-htmltidy
```

Then, add the dependency in the gulpfile.js:

```javascript
const htmltidy = require('gulp-htmltidy');
```

Add the following test below to check for errors in your html files:

```javascript
gulp.task('html', function() {
  return gulp.src('./*.html') // your html directory
        .pipe(htmltidy())
        .pipe(gulp.dest('build/')); //writes the output, cleanly formatted HTML to the build directory
});
```

Great! we have created our first test to check for errors and poor formatting in HTML. Let's move on to creating a CSS test.

## Step 7: Create 'css' task

Install `gulp-autoprefixer` ([documentation](https://www.npmjs.com/package/gulp-autoprefixer)) and `gulp-csslint` ([documentation](https://www.npmjs.com/package/gulp-csslint)) by running:

```javascript
npm install --save-dev gulp-autoprefixer
npm install --save-dev gulp-csslint
```

Then, just like for htmltidy, we add the dependencies at the top of gulpfile.js:

```javascript
const autoprefixer = require('gulp-autoprefixer');
const csslint = require('gulp-csslint');
```

Finally, we add the css task below the html task like so:

```javascript
gulp.task('css', function() {
    return gulp.src('./*.css') //your css directory
        .pipe(csslint())
        .pipe(csslint.formatter())
        .pipe(autoprefixer({
            browsers: ['last 5 versions'],  //config to add prefixes to work on older browsers
            cascade: false
        }))
        .pipe(gulp.dest('./build'));
});
```

Now, we have our css test task ready to go! Let's do the last one for our javascript code.

## Step 8: Create 'js' task

For javascript testing, we will install `gulp-jshint` ([documentation](https://www.npmjs.com/package/gulp-jshint)) and `gulp-babel` ([documentation](https://www.npmjs.com/package/gulp-babel)) by running:

```javascript
npm install --save-dev gulp-babel @babel/preset-env
npm install --save-dev @babel/core
npm install --save-dev jshint gulp-jshint
```

Then, for the last time, add the dependencies:

```javascript
const babel = require('gulp-babel');
const jshint = require('gulp-jshint');
```

And the task at the bottom of gulpfile.js:

```javascript
gulp.task('js', function() {
    return gulp.src('./*.js')  //directory of your .js file
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(gulp.dest('./build'));
});
```

Okay, all we have written all 3 tasks! We're done setting up our tests using gulp! Babel will convert our code to old syntax to work on older browser while `gulp-jshint` will check for errors in our code.

## Step 9: Final Task

Finally, at the bottom of the gulpfile.js, add

```javascript
gulp.task('default', gulp.series('html', 'css', 'js'));
```

so that we can run all 3 tests simultaneously.

Your final gulpfile.js should look like:

```javascript
const gulp = require('gulp');
const htmltidy = require('gulp-htmltidy');
const autoprefixer = require('gulp-autoprefixer');
const csslint = require('gulp-csslint');
const babel = require('gulp-babel');
const jshint = require('gulp-jshint');

gulp.task('html', function() {
    return gulp.src('./*.html') // your html directory
          .pipe(htmltidy())
          .pipe(gulp.dest('build/')); //writes the output, cleanly formatted HTML to the build directory
});

gulp.task('css', function() {
    return gulp.src('./*.css') //your css directory
        .pipe(csslint())
        .pipe(csslint.formatter())
        .pipe(autoprefixer({
            browsers: ['last 5 versions'],  //config to add prefixes to work on older browsers
            cascade: false
        }))
        .pipe(gulp.dest('./build'));
});

gulp.task('js', function() {
    return gulp.src('./*.js')  //directory of your .js file
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(gulp.dest('./build'));
});

gulp.task('default', gulp.series('html', 'css', 'js'));
```

Your final package.json file should look something like:

```javascript
{
  "name": "test-project",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "test"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/preset-env": "^7.10.2",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-babel": "^8.0.0",
    "gulp-csslint": "^1.0.1",
    "gulp-htmltidy": "^0.2.4",
    "gulp-jshint": "^2.1.0",
    "jshint": "^2.11.1"
  }
}
```

## Run the tests

Now try to run the command `gulp` in your project directory to run the automated tests!

You should see something like this:

![1.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1591762500652/N4Oa8fEEE.png align="left")

Looks like I have a lot of errors that are mostly related to using new javascript syntax that will not work on older browsers. If I look into the 'build' folder, I can see my newly formatted html, css and js files that were fixed by running the tests!

## Next Steps

Congratulations, you have learned how to set up automated html, css and javascript testing using Node.js, npm and gulp. There is more to testing than just linting and minifying your code so I encourage you to read more on your own. For this particular testing, you can take it further by adding

```javascript
gulp.task('watch', function(){
  gulp.watch('src/*.html', ['html']);
  gulp.watch('src/*.css', ['css']);
  gulp.watch('src/*.js', ['js']);
});
```

to your gulpfile.js so that testing will be run whenever you save a file (see [documentation](https://gulpjs.com/docs/en/api/watch/) for more details).

I hope this has been helpful for you. Do let me know in the comments below if you have any questions regarding this tutorial. Good luck with testing your projects! Cheers!

> P.S. : Thank you for all the support on this blog. Some of you have messaged me, wanting to connect through Twitter, so I rebooted my old Twitter account in case any of you would like to follow me on Twitter: twitter.com/lo\_victoria2666