AngularJS testavimas

AngularJS testavimas

  • Testavimo įrankiai

  • Kodas testuojamas kai...

  • Ką reikia testuoti

  • Testų rašymas

  • Testų rezultatai

  • Kodo dengiamumas testais

  • Node.js

  • Karma

  • Jasmine

Testavimo įrankiai

Kodas testuojamas, kai...

  • DOM manipuliacijos atskirtos nuo kontrolerio logikos

Kodas testuojamas, kai...

  • Direktyvų kontroleriai – savarankiškos funkcijos

function myDrctvCtrl($scope) {
    $scope.title = 'Hello world!';
}

angular.controller('MyDrctvCtrl', myDrctvCtrl)
.directive('myDrctv', function(){
    return {
        templateUrl:'template.html',
        restrict: 'E',
        controller: 'MyDrctvCtrl'
    }
});
  • Serverio užklausos daromos iš atskiro serviso

Kodas testuojamas, kai...

function serverService($q, $http) {
    var onSuccess = function(response) {
        return response.data;
    };

    var onError = fuction(response) {
        if (!angular.isObject( response.data ) || !response.data.message) {
            return( $q.reject("An unknown error occurred."));
        }
        return($q.reject(response.data.message));
    };

    var getItems = function() {
        var request = $http({
                method: 'GET',
                url: '/items'
            }).then(onSuccess, onError);
        return request;
    };
    
    return {
        getItems: getItems
    };
}

Ką reikia testuoti

  • Input'ą ir output'ą

Testų rašymas

  • Testo struktūra

describe('Very descriptive title', function() {

    beforeEach(function(){...});
    afterEach(function(){...});
    
    it('should do something', function() {
        expect(...)...;
    })
});

Testų rašymas

  • Aiški testo antraštė

describe("Very super descriptive title", function() {...});

Testų rašymas

  • Direktyvos testavimas

app.directive('helloWorld', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<h1>I say {{1000 * 1000}} times Hello World!'</h1>'
    };
});
describe('Hello world! example', function() {
  var compile,
      rootScope;

  beforeEach(module('myApp'));

  beforeEach(inject(function($compile, $rootScope) {
    compile = $compile;
    rootScope = $rootScope;
  }));

  it('Replaces the element with the appropriate content', function() {
    var element = $compile("<hello-world></hello-world>")(rootScope);

    $rootScope.$digest();
    expect(element.html()).toContain('I say 1000000 times Hello World!');
  });
});

Testų rašymas

  • Kontrolerio testavimas

'use strict';

describe('Title for spec suite', function () {
    var MyDrctvCtrl , scope;

    beforeEach(inject(function($rootScope, $controller) {
            scope = $rootScope.new();
            MyDrctvCtrl = $controller('MyDrctvCtrl', {
                $scope: scope
            });
        });
    });

    it("should set title 'Hello world!'", function() {
        expect(scope.title).toBe('Hello world!');
    });
});

Testų rašymas

  • Serverio serviso testavimas

'use strict';

describe('ServerService test', function() {
    var httpBackend,
        serverService;

    beforeEach(inject(function($httpBackend, $injector) {
        httpBackend = $httpBackend;
        $httpBackend.when('GET', '/items').respond([{id: 1, name: 'Item'}]);
        serverService = $injector.get('ServerService');
    }));

    it('should get item array', function() {
        httpBackend.expectGET('/items');
        serverService.getItems().then(function(response) {
            expect(JSON.stringify(response).toBe('[{"id": 1, "name": "Item"}]'))
        });
        httpBackend.flush();
    });
});

Testų rašymas

  • Kuo mažiau expect'ų it'e – tuo geriau

describe("'Hello world!' example", function() {
    ...

    it('should check is title set', function(){
        expect(scope.title).toBe('Hello world!');
    });

    ...
});

Testų rezultatai

  • Automatinis testų veikimas programavimo metu

module.exports = function(config) {
    config.set({
        ...

        autoWatch: true,
        singleRun: false

        ...
    });
});

Kodo dengiamumas testais

  • Istanbul

  • npm install karma-coverage

  • Karma konfigūravimas 

module.exports = function(config) {
    config.set({
        ...

        preprocessors: {
          '**/lib/*.js': ['coverage']
        },
    
        coverageReporter: {
          reporters: [
            {type: 'html', dir: 'coverage/'}}
          ]
        },

        ...
    });
});

Kodo dengiamumas testais

  • karma start

Klausimai

AngularJS Testing

By giedrius

AngularJS Testing

  • 1,263