what i learned last week: intro to test driven development

Prerequisite: Angular.js

Throughout the past several years, as I've launched my developer career, the one practice that has seemed daunting to me is Test Driven Development. It mostly stems from the fact that up until my time at General Assembly I never implemented it into my codebase. That has all changed as I prep for an upcoming interview that will go over TDD. So to practice I've decided to dedicate this weeks entry to this feared and misunderstood practice.

WHAT?

So what is Test Driven Development?

Per Wikipedia, Test-driven development (TDD) is a software development process relying on software requirements being converted to test cases before software is fully developed, and tracking all software development by repeatedly testing the software against all test cases. This is as opposed to software being developed first and test cases created later.

Okay, but what does that mean?

In other words, test cases for each functionality, of a program, are created and tested first and if the test fails then the new code is written in order to pass the test and making code simple and bug-free.

HOW?

So how exactly does test driven development work?

1. Read, understand, and process the feature or bug request.
2. Translate the requirement by writing a unit test. If you have hot reloading set up, the unit test will run and fail as no code is implemented yet.
3. Write and implement the code that fulfills the requirement. Run all tests and they should pass, if not repeat this step.
4. Clean up your code by refactoring.
5. Rinse, lather and repeat.

Note: In Angular, there are two main types of tests.

A unit test is a way of testing a unit - the smallest piece of code that can be logically isolated in a system. In most programming languages, that is a function, a subroutine, a method or property.

End to end testing is the process of validating an application’s workflow from the beginning to the end. This testing methodology is aimed at replicating real user scenarios, so that the system can be validated for overall functionality.

TDD EXAMPLE:

Note: I'm going to being using Jasmine to test out my code. Jasmine is a behavior-driven development framework for testing JavaScript code that plays very well with Karma. Similar to Karma, it’s also the recommended testing framework within the Angular documentation as it’s setup for you with the Angular CLI. Jasmine is also dependency free and doesn’t require a DOM.

Lets get to it, in the terminal I'm going to create a new Angular project by running the following command.

ng new zoo

Next, I'm going to create a new component named "zoo".

ng generate component zoo

Now that my new Angular project has been created I'm going to head over to my terminal again and run the following command.

ng test

The terminal output will look like the below screenshot.

Also, a browser window will open up letting you know all of the initial tests are passing. Neat, huh?

Per the first step, I need to figure out what new feature I want to build out. In this case, I want my zoo component to have a name.

Second, I need to translate the requirement by writing a unit test.

In zoo.component.spec.ts write the following test.

 it('should have a name', () => {
    expect(component.zooName).toBeTruthy();
  });

You'll notice that the test fails because no code has been implemented.

Step three states that I need to now implement code that makes the test pass. How would I do that in this example? I simply need to create a new property in the zoo component called "named" and add a value to it.

Sweet! All of our tests are now passing!

This was a simple example and don't need to refactor but next we would usually want to move onto step four and refactor.

Voila! You've implemented your first application feature utilizing TDD!

WHY?

Test Driven Development gives developers the confidence that our code will work 100% of the time in the expected conditions.

TDD provides several benefits:

It can enable faster innovation and continuous delivery because the code is robust.

It makes your code flexible and extensible. The code can be refactored or moved with minimal risk of breaking code.

The tests themselves were tested. A key characteristic of a test is that it can fail, and the development team verifies that each new test fails.

The code that is produced is, by design, easy to test.

The requirements are implemented with little to no wasted effort because only the function that is needed is written.