Testing with AngularJS

Testing with AngularJS

By Andi Marek / @andimarek

Overview

• Test Pyramid
• Tools
• Unit Testing
• Directive Testing
• E2E Testing

General Test Pyramid

Based on Return on investment (ROI)

From Top to Bottom: Less integrated

AngularJS Test Pyramid

Tools

• Build: Grunt

Unit Tests

• White Box Testing of Services, Controller and Filter.

Purpose of Unit Tests

• What to implement/Focus

Unit Test Setup

• Angular Mocks Library

Example Unit Test

              describe('Testing myService', function () {

                var myService;
                var aDependencyMock;

                beforeEach(function () {
                  aDependencyMock = {
                    someFunction: function () {
                    }
                  };
                  module('myModule.myService');

                  module(function ($provide) {
                    $provide.value('aDependency', aDependencyMock);
                  });
                  inject(function (_myService_) {
                    myService = _myService_;
                  });
                });

                it('service should be defined', function () {
                  expect(myService).toBeDefined();
                });
              });
            

Directive Tests

• A part of the app tested through the DOM

One Directive is tested

Directive Test Setup

• Angular Mocks Library

Example Directive Test

              describe('Testing myDirective', function () {

                var element;
                var $scope;

                beforeEach(function () {
                  module('myModule.myDirectice');
                  inject(function ($compile, $rootScope) {
                    $scope = $rootScope.$new();
                    element = angular.element('<myDirective/>');
                    $compile(element)($scope);
                    $scope.$digest();
                  });
                });

                it('now test element', function () {
                });
              });
            

Testing against the DOM

        it('should call methodX on click', function () {
          spyOn($scope, 'methodX');
          element.find('.button').click();
          expect($scope.methodX).toHaveBeenCalled();
        });
      

E2E (Scenario) Tests

• Black box application Tests

E2E Test Setup

• Angular Scenario Library

Example Test Architecture for E2E Tests

E2E with Node.JS Backend

E2E Test Example

        describe('E2E Test', function () {

          beforeEach(function () {
            browser().navigateTo('http://localhost/url/to/test/index.html');
          });

          it("should show a dialog", function () {
            element('.show-dialog').click();
            expect(element(".dialog").count()).toBe(1);
          });
        });
      

Conclusion/Experience

• Fast feedback cycle with Karma/Grunt: 2 min release

Thank you