How to write your own JavaScript tests
Published: 2020-01-28 15:15:48

While testing frameworks like Jasmine or Jest are commonly used for JavaScript, it is sometimes useful for beginners to write their own tests for JavaScript. The reason that we were instructed to do so at Makers is to gain a better and more rounded understanding fo what testing frameworks actually are. They are not 1000s of lines of mysterious code that miraculously 'does the job', but instead the foundations are based on simple and understandable logic. 
To begin, it is preferable to create an `assert` variable in a separate `assert.js` file. This will contain the following code:


```javascript
var passedTests = 0;

var assert = {
  isTrue: function(assertionToCheck) {
    if (!assertionToCheck) {
      throw new Error("Assertion failed: " + assertionToCheck + " is not truthy");
    }
    passedTests++;
  }
}
```

This assert variable can be used against what you're testing, to decipher whether the statement you're testing 'isTrue' or not. The `passedTests` variable allows you to see in the browser, when you eventually open the console to run the tests, to see how many tests are passing. Each time a test passes, this variable is incremented by 1. 


Then create a separate test file for each js file you will create. If you're following a TDD process, you'll want to write the tests first. For example let's create an `addition-test.js` file in a spec directory within your main project, and put in the following:

```javascript
function testAdditionAddsNumbers() {
  assert.eq(2 === addition(1, 1));
};
testAdditionAddsNumbers();
```

Then, we'll create an `addition.js` file in a new `src` directory, with logic that on the first attempt will be wrong so we can demonstrate the error. 

```javascript
function addition(num1, num2) {
  return num1 - num2
}
```

Now, let's create the `test-suite.html` file that will link the tests and code together. This can go in the root directory of your project, and should have the basic HTML structure with script tags in the body. These should have a `src` attribute, with the path to the test file (and separate script tags for the js file and assert file). The test script tag will have to be below the js script tag, so the tests have access to the code. You will also need to include a script tag console logging the passed tests, so you are able to view that variable. 

```html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script src="src/addition.js" charset="utf-8"></script>
    <script src="spec/assert.js" charset="utf-8"></script>
    <script src="spec/addition-test.js" charset="utf-8"></script>

    <script>
      console.log(`${passedTests} passed tests`);
    </script>
  </body>
</html>
```

Now we've got everything set up, run `$ open test-suite.html` on your command line. This will bring up the page in chrome. Open the developer tools console, where, because of the incorrect js code, it will throw an error as show below. 

![Failing tests](https://i.imgur.com/xIbz6LR.png)

So, let's go back and fix this error so that all of our tests are passing.

```javascript
function addition(num1, num2) {
  return num1 + num2
}
```

Refresh the test-suite page in chrome, and you will no longer see the error, with one test now passing. 

![Passing tests](https://i.imgur.com/9A73y8X.png)

To increase your test suite, simply create more js files and test files, inputted as script tags in `test-suite.html`.