E2E Testing In Angular 2 From Zero To Hero (part 1)

Learning how to test your Angular 2 or JavaScript applications is essential to become a great developer.

This skill can dramatically boost or decrease your productivity (hence your happiness and salary).
I started testing my apps years ago during my first job. We didn't have any tests running and we could feel some uncertainty in the app. Adepts of the Ruby ecosystem we had some good theoretical knowledge on the subject but little time to apply it.

Hence, when we started to solidify everything using tests it was all pure and beautiful like:

However, since I was working with AngularJS 0.8 coupled with RequireJS (E2E testing with Protractor didn't have the double click action, the good old days :D) it all became a little bit more like:

That's why this series of posts will prepare you to go from no experience in e2e testing to fully capable of writing solid and useful tests under 10 minutes.

The philosophy of testing is that you need to understand which part of your application is critical. You do not test everything lines of code!

If you need to write 50 lines of tests because you just added one very important line of code in your app ... you write them (I know it sucks sometimes). On the other side, if you have a good test structure, sometimes one line of code can be enough for many tests (trust me, you feel good when this happens).

I spent more time on configuration then testing at the beginning of my career. And that's why most tutorials will send you to the documentation, it would require an entirely post just to configure this **** :D. I might write one in the future resuming every cases but for now I advise you to go there in order to get everything out of box.

Once it's done, just launch in each terminal:

Terminal 1:
node_modules/protractor/bin/webmanager-driver update
node_modules/protractor/bin/webmanager-driver start

Terminal 2:
npm start

Terminal 3:
npm run e2e

Our first steps

Let's get started with a very simple test, it's typically THE test that you write to see if your file is loaded and used:

describe("First App", () => {
  it("should pass", () => {
    expect(true).toBe(true);
  });
});

Here we have a describe function that takes two parameters: a string that indicates which part of your app you are testing (it can be for example "Login user" and a function that can contain beforeEach (we will see that later) or it functions.

Those it functions are composed of a string and a function, the string starts generally with "should" and describes what you are testing. The function contains the code for the test.

We have here a test that should pass every time. We are using Protractor for AngularJS here for testing (if you are curious and wants to get ahead).

Let's say now that you need to have a variable "a" that needs to be set to "Apple" before (starting) each test. You are not going to copy/paste this code everywhere.

For this, you can use the beforeEach function! It will analyse a specific block before starting any test in a describe function.

Here is an example:

describe("App", () => {
  let a;

  beforeEach(() => {
    //We set or reset a here;
    a = "Apple";
  });

  it("should be an Apple ", () => {
    expect(a).toEqual("Apple");
    // We change the value
    a = "Pear";
  });

  it("should not be a Pear ", () => {
    //But it's still an Apple since we reset it in beforeEach
    expect(a).toEqual("Apple");
  });
});

You might also need to use afterEach in some cases, however, if you have little experience I advise you not to mix them too much.

Sometimes, you can arrive on a project and the state of the tests might look like this:

So how do we get things done? One step at a time.

By keeping our cool and having a go at one test at a time. In order to launch only one test, you can use fit to launch one test and fdescribe to launch the tests present into the describe function.

Do not try to fix everything at the same time!

Navigation

Ready to set sails?

Navigation is one of the most powerful tools, the sky is the limit! It ranges from checking if an element is present on a page to automating a purchase on eBay as soon as a product reaches a certain price and much more.

browser is the object that allows you to navigate to any URL (as long as you have permission).

A simple example here:

it("should go to the supermarket", () => {
  let url = "http://www.supermarket.com";
  browser.get(url);
  expect(browser.driver.getCurrentUrl()).toEqual(url);
});

Easy isn't it?

Now you can see yourself crawling the web automating everything! Well that's just the beginning but rest assured, just by having THIS amount of knowledge, you already outclass many developers.

Conclusion

We have seen the philosophy of testing our code, the very basics using describe, it, an aperçu of Protractor and how to go to the supermarket through our browser in two lines of code. The next chapter will dive into how to create a good testing structure using pages, how to crawl a page to get the informations that we are looking for, so stay tuned for more informations!