DEV Community

Ellie Manifold
Ellie Manifold

Posted on

How to write your own JavaScript tests

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:

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:

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.

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.

<!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

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

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

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

Top comments (0)