Benutzer:MovGP0/AngularJS/Testing

aus Wikipedia, der freien Enzyklopädie
< Benutzer:MovGP0‎ | AngularJS
Dies ist die aktuelle Version dieser Seite, zuletzt bearbeitet am 28. Februar 2017 um 16:41 Uhr durch imported>MovGP0(77247) (→‎Intro).
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
   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
Abgerufen von „https://de.wikiup.org/index.php?title=Benutzer:MovGP0/AngularJS/Testing&oldid=163107739“