Intro to Testing

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

Testing front-end code has traditionally been incredibly difficult

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

Testing small composable components of functionality

End-to-end testing

Pretending we’re a user interacting with the site

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

Write testable code 
<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();
  };
});

Testable code means writing small, simple functions easily isolated in tests.

Process of testing


1. Isolate functionality
2. Set expectation
3. Set given conditions
4. Compare given conditions with expectation
5. Rinse and repeat

AngularJS Testing Landscape

Jasmine, Karma, Protractor?

Jasmine

a framework for testing code

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

A test runner

Karma

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

Karma

A toolkit

Karma

Protractor

end-to-end test framework for AngularJS

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