Test-Driven Development

In the modern world of JavaScript development, there are many different frontend frameworks that we can use to write applications, from older frameworks such as Backbone.js, to newer ones such as Angular, React, and Vue. These frameworks will generally use either the Model View Controller (MVC) design pattern, or some variation of it, such as the Model View Presenter (MVP), or Model View View Model (MVVM). When discussing this group of patterns together, they are described by some as Model View Whatever (MVW), or simply MV*.

Some of the benefits of this MV* style of writing applications include modularity and separation of concerns, but one of the biggest advantages is the ability to write testable JavaScript. Using MV* allows us to unit test the Models we use, the Views we use, and the Controllers we use. We can write tests for individual classes, and then extend these tests to cover groups of classes. We can also test our rendering functions and ensure...

The testing paradigm

Test-driven development (TDD) is really a way of thinking, or a paradigm if you like, that should be baked into any standard development process. This paradigm starts with tests and drives the momentum of a piece of production code through these tests. TDD means asking the question "How do I know that I have solved the problem?", instead of just "How do I solve the problem?". This is an important idea to grasp. We write code in order to solve a problem, but we should also be able to prove that we have solved the problem through the use of automated tests.

The basic steps of a test-driven approach are as follows:

• Write a test that fails.
• Run the test to ensure that it fails.
• Write code to make the test pass.
• Run the test to see that it now passes.
• Run all tests to see that the new code does not break other tests.
• Repeat.

Using TDD is really a mindset. Some developers follow this approach...

Jest

Jest is a simple-to-configure and powerful JavaScript unit testing framework that is built on top of the popular Jasmine framework. Jasmine has been around for a very long time, and is a mature, fully featured, and widely used testing framework. Jest enhances Jasmine by making it easier to configure, as well as providing a wealth of extra features. Jest tests can also be run concurrently, which significantly speeds up the length of time a test suite will take to run. Jest is available through npm, and will therefore require an npm environment, which can be created as follows:

npm init

Here, we have initialized an npm project and can now install the required Jest packages, as follows:

npm install jest --save-dev

With Jest installed, we can either run it using the command npx jest, or we can modify our package.json file to specify that Jest will be used when we run npm test. Let's update our package.json file as follows:

{
  "name": "src...

Asynchronous tests

As we have seen with our exploration of JavaScript and TypeScript, a lot of code we write is asynchronous. This means that we have no control of exactly when a callback will be invoked, or a Promise will resolve, as we are waiting for an event to occur that is outside of our control. This often presents problems in our unit testing, where we need to wait for an asynchronous event to complete before we can continue with our test. As an example of this, consider the following class:

class MockAsync {
    executeSlowFunction(
        complete: (value: string) => void
    ) {
        setTimeout(() => {
            complete(`completed`);
        }, 1000);
    }
}

Here, we have a class named MockAsync that has a single method named executeSlowFunction. This function takes a callback function named complete as its only parameter, and then invokes it after 1 second. We might write a test for this class as follows:

describe("failing async tests"...

HTML-based tests

Jest uses a library named jsdom to allow for testing HTML elements and interactions. Jsdom is not an actual browser; it is a library that implements the JavaScript DOM API, and can, therefore, simulate a full-blown browser experience. The benefit of using jsdom is in the speed at which we can run our tests, and the fact that we do not have to provide an environment that can run a full browser. Running a full internet browser generally assumes that the tests are running on a standard computer, and as such, has an actual screen. This means that virtual machines that run tests must be configured with a screen, and adds the extra requirements of having a screen driver that can run at the required resolution.

We can install the jsdom library using npm as follows:

npm install jsdom --save-dev 

While we are at it, let's install the jquery library as well:

npm install jquery

And the @types declaration files for both libraries as follows:

npm...

Protractor

Protractor is a Node-based test runner that is used to tackle end-to-end or automated acceptance testing. Essentially, it is a tool that allows us to programmatically control a web browser. Just like in manual testing, Protractor has the ability to browse to a specific page by entering its URL, and then interact with the elements on the page itself. As an example of how it can be used, suppose that we have a website that has a login page, and all further interaction with the site requires a valid login. We can use Protractor to browse to the login page at the start of each test, enter valid credentials, hit the Login button, and then interact with the site's pages.

Protractor is installed as an npm package as follows:

npm install -g protractor

Here, we have installed the protractor package as a globally accessible node package.

We will get into running Protractor a little later, but first, let's discuss the engine that Protractor uses under the...

Summary

In this chapter, we have explored the concepts of test-driven development from the ground up. We have discussed the various types of testing, including unit, integration, and acceptance tests, along with black-box or white-box testing. We then explored the Jest testing framework, how to set it up, and how to use matchers, spies, and mocks. We explored the concepts surrounding asynchronous testing, and also how to inject HTML into the DOM using jsdom. Finally, we explored Protractor and Selenium, which are used for black-box and end-to-end tests of HTML pages.

In the next chapter, we will explore the Angular framework, and how it can be used to write single-page applications in TypeScript.