Benutzer:MovGP0/AngularJS/Testing

MovGP0

Über mich

Hilfen

Artikel

Weblinks

Literatur

Zitate

Notizen

Programmierung

MSCert

Physik

Programmierung Web-Programming Languages ECMAScript • TypeScript • Elm • LESS Infrastruktur Node • Yeoman • Bower • Grunt • Jasmine • Karma • Protractor • Hapi • Redux AngularJS Validation • Testing Angular Modules • Animations • Attributes • Styles • Deployment • Dependency Injection • HTTP Client • Lifecycle • Pipes • Routing and Navigation • Security • Structural Directives (ngIf, ngFor, ngSwitch) • Testing • Forms Validation Other Knockout • RequireJS • PhoneGap/Cordova • React • fantasy-land • typed-contract • parsimmon

AngularJS Testing

Controller

0. Modul prüfen

module("my.module", ["..."])
    .service("MyService", MyService)
    .controller("MyController", MyController)
    .directive("MyDirective", () => { 
        // ...
        controller: MyDirectiveController
    });

1. Elemente im Modul durch Testobjekte ersetzen

beforeEach(() => 
   angular.module("my.module")
      .controller("MyDirectiveController", MyDirectiveController); // Controller setzen, wenn Controller der Direktive zu testen ist

2. Modul mit Controller laden

beforeEach(() => angular.mock.module("my.module"));

3. Objekte injecten

var $controller;
var $q;
var $alert;
var $interval;
var $localStorage;

beforeEach(angular.mock.inject((_$controller_, _$q_, _$alert_, _$interval_, _$localStorage_, _$injector_: angular.IInjectStatic) => {
    $controller = _$controller_;
    $q = _$q_;
    $alert = _$alert_;
    $interval = _$interval_;
    $localStorage = _$localStorage_;

    // configure $injector when needed
  }));

4. Testobjekte für Testfall erzeugen

var serviceMock: IMyService = {
  get: (): angular.IPromise<IReplyMessage> => {
    return null;
  }
}

var deferred = $q.defer();
deferred.resolve(<IReplyMessage>{
  message: "message",
  version: "1"
});
spyOn(serviceMock, "get").and.returnValue(deferred.promise);

5. Controller erzeugen und Konstruktor-Werte mit Mocks überschreiben

expect(() => $controller("MyController", { myService: myServiceMock })).not.toThrow();

Services

Mock erstellen

beforeEach(() => angular.mock.module("myModule"));
  
  let $httpBackend: angular.IHttpBackendService;

  beforeEach(angular.mock.inject((_$httpBackend_: angular.IHttpBackendService) => {
    $httpBackend = _$httpBackend_;
  }));

  it("foo", () => {
    $httpBackend.expectGET("de/shoutbox/message").respond({ message: "asdasd" });

     // ...
  });

$scope.$watch

Da der Test außerhalb des Angular-Kontexts läuft, muss explizit ein digest() aufgerufen werden. Hierzu gibt es zwei Varianten:

Controller

$scope.$watch("a", () => doSomething());

Test

var $controller;
var rootScopeService: angular.IRootScopeService;

beforeEach(angular.mock.inject((_$controller_, _$rootScopeService_) => {
    $controller = _$controller_;
    rootScopeService = _$rootScopeService_
});

// root scope erstellen
var scope = rootScopeService.$new();

// injecten
var controller = $controller<MyController>("MyController", { $scope: scope });

// Variante 1
scope.value = 123;
rootScopeService.$digest();

// Variante 2
rootScopeService.$apply(() => {
    scope.value = 456;
});

// Asserts

Angular Translate

setup

beforeEach(() => {
    angular.module("translate", ["pascalprecht.translate"]); // create module and define dependencies 

    // add provider to module
    angular.module("translate").config(($translateProvider: angular.translate.ITranslateProvider) => {
      $translateProvider.translations("en", {
        SALUTATION_MALE: "Mr.",
        SALUTATION_FEMALE: "Ms." 
      });
      $translateProvider.translations("de", {
        SALUTATION_MALE: "Herr",
        SALUTATION_FEMALE: "Frau" 
      });

      $translateProvider.preferredLanguage("de");
    });

    // load module into angular.mock
    angular.mock.module("translate"); 
  });

Injection

it("should inject $translateProvider", () => {
    angular.mock.inject(($translate: angular.translate.ITranslateProvider) => {
        expect($translate).not.toBeUndefined();
        expect($translate).not.toBeNull();
    });
});

Custom Scope

beforeEach(() => {
    angular.module("myScope", []);
    
    angular.module("myScope").factory("ccope", () => {
        let $scope: IPassengerDirectiveScope;
        angular.mock.inject(($rootScope: angular.IRootScopeService) => {
            const $on = (name: string, listener: (event: angular.IAngularEvent, ...args: any[])=>any):any => { };
            $scope = $rootScope.$new() as IMyScope;
            $scope.$on = $on;
            // TODO: setting additional properties and functions on scope
        });
        return $scope;
    });

    angular.mock.module("myScope");
});

Internetquellen

• AngularJS Testing Tips. sitepoint, abgerufen am 3. März 2016 (englisch). 
• AngularJS Testing Tips: Testing Directives. sitepoint, abgerufen am 3. März 2016 (englisch). 
• Dependency Injection in AngularJS. Google, abgerufen am 7. Juli 2016 (englisch). 

|}