Testing

Goal: Answer these questions

• What does it mean to test?
• What is good testing technique?
• How to test every component of our application
  

Take measures to check the quality, performance, or reliability of (something), especially before putting it into widespread use or practice.

Front-end testing

Involves

• Loading a browser
• Setting up JS expectations
• Running expectations
• Measuring code quality/execution
• Handling browser automation

Types of tests

• Unit
• End-to-end

Unit testing

End-to-end testing

TDD?

TDD?

We support test-focused development over test-driven development

Testing philosophy

• Test first, then write functionality
• Write functionality first, then test

Our testing philosophy

<code class="javascript">angular.module(&apos;myApp&apos;, [])
.controller(&apos;HomeController&apos;, function($scope, api) {
  $scope.loadFriends = function() {
    api.loadFriends()
      .then(function(friends) {
        $scope.friends = friends;
        api.resetFriendsCache()
        .then(function(cache) {
          cache.put(&apos;friends&apos;, friends)
          .then(function() {
            $scope.ready = true;
          });
        });
      });
  }
});

Not testable code

<code class="javascript">angular.module(&apos;myApp&apos;, [])
.controller(&apos;HomeController&apos;, function($scope, api) {
  var ctrl = this;
  // Load friends
  $scope.loadFriends = function() {
    return api.loadFriends()
      .then(ctrl.resetFriendsCache())
      .then(function() {
        $scope.ready = true;
      });
  };
  // Clear friends cache
  this.resetFriendsCache = function() {
    return api.resetFriendsCache();
  };
});

Process of testing

Jasmine

Jasmine

<code class="javascript">describe("A suite", function() {
  it("contains spec with an expectation", function() {
    expect(true).toBe(true);
  });
});

Jasmine

• No dependencies
• No DOM required

Karma

Karma

• Originally written for AngularJS
• Runs tests in browsers
• … but via the CLI
  

Karma

A toolkit

Karma

Protractor

Protractor

• Runs in browser
• Simulates an end user
  

Jasmine

Jasmine

(the test framework)

• Used by Karma
• Used by Protractor
  

Karma and Protractor aren’t used together