Lesson Outline

DEPRECATION WARNING

IMPORTANT: This module is deprecated and is only kept for legacy reasons. It will not receive any more updates. As of May 2021 Protractor will no longer be included by default in new Angular projects, and the development of Protractor will eventually cease completely. Instead, you can use Cypress to test your Ionic/Angular projects.

The only reason that you should go through this module is if you need to maintain a legacy Angular application that is still using Protractor. If you want to learn how to use Test Driven Development with Ionic and Angular you should instead start the Cypress/Jest module also available in Elite Ionic.

Introduction to Test Driven Development

Test Driven Development is all about using automated tests to drive the development of your application, rather than writing your application's code first and writing tests after. In its simplest form, the process for Test Driven Development looks like this:

1. Write a test for functionality that you want to build
2. Check that the test fails
3. Implement code to satisfy the test
4. Check that the test passes
5. Repeat

Before we get into the specifics of Test Driven Development, let's take a few steps back and discuss what exactly automated tests are.

What are Automated Tests?

An automated test, put simply, is code that tests your code. We generally use a testing framework to help us write these tests, but you will write blocks of code that trigger the code you want to test, and then check the result.

Let's see what that would look like with just plain Javascript (i.e. without a framework that helps build/run tests):

// Test that `incrementTotal()` increases the total by 1

let myTestObject = new SomeObject();
let oldTotal = myTestObject.getTotal();

myTestObject.incrementTotal();

let newTotal = myTestObject.getTotal();

if (newTotal === oldTotal + 1) {
  console.log('test passed!');
} else {
  console.log('test failed!');
}

The above code will test if the incrementTotal() function increases the total on SomeObject by 1. If the code is working as it should we would see "test passed!" logged to the console, but if it isn't we will see "test failed!". This test doesn't add any functionality to our application, it is purely for checking if parts of our application are doing what they are supposed to be doing.