Рубрики
Без рубрики

Устройство тестирования Angularjs с использованием NGMOCK

Начиная с модульного тестирования для разработки тестирования, используя Angularjs

Автор оригинала: Faizan Haider.

Нам нужно изучать тестирование подразделения для TDD. Требуется предыдущее знание Angularjs и JavaScript. Первый вопрос, который приходит в ум, так это почему TDD (разработка тестирования)? Это означает первые тестовые случаи записи, а затем разрабатывают свой код, чтобы пройти этот конкретный тестовый случай. Я думаю, что TDD очень важен при написании чистого, поддерживаемого и краткого кода. TDD дает вам:

  • Уверенность в вашем коде
  • Нет дубликата кода
  • Поддерживает чистое хорошее качество
  • Нет мертвого кода. Нет функций или линии кода, которая не используется.
  • Эти тесты могут быть документациями для других разработчиков, поддерживающих ваш код. И многое другое.

Написание тестовых приложений требуется:

  1. Написание теста
  2. Неспособность теста
  3. Напишите код, чтобы пройти тест
  4. Запустите тест снова

Эта статья связана только для написания тестов для Angularjs, связанным с кодом, использующим NGMock. Мы будем использовать жасмин (тестовые рамки). Жасмин дает нам следующие функции:

  • Опишите («Test Suite», функция () {})//для группировки связанных тестов
  • Это («имя теста», функция () {})
  • Foreeafee (), Upoted ()//Для проведения общего раздела групповых тестов
  • Ожидайте (). Тотбе, Тотэка, Тотроу, а не, Тохавенценцилуэндвит//для утверждения

Мы будем тестировать ниже упомянутых основных принципов Angularjs, используя NGMock. NGMOCK разработан угловой командой.

  • Модули
  • Контроллер
  • Услуги
  • Директивы
  • Фильтры

Основные функции Ngmock

Мы будем использовать Angular.mock.module (псевдоним, анонимность, анонимообъект) и angular.mock.inject () для тестирования нашего кода.

  • angular.mock.module () – мы будем использовать это, чтобы загрузить наш модуль (ы) для целей тестирования. Потому что Angular.mock.module доступен в качестве глобального объекта, мы можем просто использовать модуль ()
  • Angular.mock.inject () – мы будем использовать это, чтобы получить экземпляры компонентов (контроллер, услуги, фильтры, директивы и т. Д.) Из модулей для тестирования. Потому что Angular.mock.inject () доступен как глобальный объект, мы можем просто использовать ввод ()

Контроллер тестирования

angular.mock.inject () предоставить нам $ контроллер Сервис, который является декоратором для контроллера с дополнительными параметрами связывания для получения контроллера, чтобы проверить его.

$controller(constructor, // string or function
locals, // $scope object and other injectables
[bindings] //object for controllerAs binding
);

Например, вы хотите проверить контроллер

angular.module('testApp')
  .controller('simpleController', function($scope, $location) {
    $scope.search = function() {
      if ($scope.query) {
        $location.path('/results').search('q', $scope.query);
      }
    }
  });

Вы бы написали что-то подобное;

describe('Simple Controller', function() {

  var $location;
  var $scope;

  beforeEach(angular.mock.module('testApp')); 

  beforeEach(angular.mock.inject(function(_$controller_, _$location_,) { //Using inject to get _$controller_ service
    $scope = {};
    $location = _$location_;
    _$controller_('simpleController', { //sinple controller
      $scope: $scope, 
      $location: _$location_
    });
  }));

  it('should redirect to query results for non-empty query', function() {
    $scope.query = 'Hello';
    $scope.search();
    expect($location.url()).toBe('/results?q=Hello');
  });

  it('should not redirect to query results for empty query', function() {
    $scope.query = '';
    $scope.search();
    expect($location.url()).toBe('');
  });
});

Директивы тестирования

Мы будем использовать Компилировать () Сервис, данный angula.mock.inject () для компиляции HTML-строки в функцию шаблона, которая будет использоваться для связи с помощью шаблона. Мы также бы использовали $ rofsscope от Angular.mock.inject () для объема. Например, тестирование ниже Директивы

angular.module('testApp')
  .directive('simpleResult', function() {
    return {
      restrict: 'E',
      replace: true,
      scope: {
        result: '=result'
      },
      template: [
            '
',
                	'
{{result.Title}}
',
            '
'
      ].join('')
    };
  });

Мы сделаем что-то вроде этого:

describe('Simple Result Directive', function() {
  
    var result = {
      Title: 'Testing what is here'
    };

    var expectedHtml = [
      '
',
            '
Testing what is here
',
      '
'
    ].join('')

    var $compile;
    var $rootScope;

    beforeEach(module('testApp')); //loading Testing module

    beforeEach(inject(function(_$compile_, _$rootScope_) { //$compie and $rootScope services
    	$compile = _$compile_;
    	$rootScope = _$rootScope_;
    }));

  it('should output result to expected HTML format', function() {
    $rootScope.result = result;
    var element = $compile('')($rootScope);
    $rootScope.$digest(); //For executing digest life cycle for angular
    expect(element.html()).toBe(expectedHtml);
  });

});

Тестирующие услуги с HTTP CONSES на Backend

Для служб тестирования их можно вводить через angular.mock.inject () с _ exampleserviCename _.

angular.module('dbCalls', [])
  .factory('seachApi', function($http, $q) {
    var service = {};
    var baseUrl = 'http://someurl.com/?';
    
    service.search = function(query) {
      var deferred = $q.defer();
      $http.get(baseUrl + 's=' + encodeURIComponent(query))
        .success(function (data) {
          deferred.resolve(data);
        }).error(function (e) {
          deferred.reject(e);
        })
      return deferred.promise;
    }

    return service;
  });

Вы бы написали что-то вроде этого:

describe('dbCalls service', function() {
  var data = {"Search":[{"Title":"Testing what is here"}]};
  var searchApi = {};
  var $httpBackend;
  var $exceptionHandler;

  beforeEach(module('dbCalls'));
  beforeEach(inject(function(_searchApi_, _$httpBackend_, _$exceptionHandler_) {
    searchApi = _searchApi_; //Getting search Api service with this kind naming convension
    $httpBackend = _$httpBackend_;//Using this service to prepare call for testing
    $exceptionHandler = _$exceptionHandler_; //Using this service for handling exceptions
  }));

  it('should return search movie data', function() {
    var response;

    var expectedUrl = 'http://someurl.com/?&s=hello';
    $httpBackend.when('GET', expectedUrl) // For testing purpose, mocking out response. 
      .respond(200, data);
    searchApi.search('hello') //Calling services with 
      .then(function(data) {
        response = data;
      });
    $httpBackend.flush(); //Run request as sync
    expect(response).toEqual(data);
  });

Тестирование фильтров

angular.mock.inject () предоставить нам $ фильтр Сервис, который является декоратором для фильтра для получения фильтра для проверки его.

angular.module('testApp')
  .filter('upperCase', function upperCaseFilter() {
    	return function (value) {
        	return value.toUpperCase();
        };
    });
    
// Unit test for this filter
describe('Upper Case Filter', function() {
    var upperCase;
    beforeEach(module('testApp'));
    beforeEach(inject(function (_$filter_) {
        upperCase = _$filter_('upperCase');
    }));
    it('should return upper case value for string', function() {
        expect(upperCase('foo')).toBe('FOO');
    });
});

С знанием услуг, предоставляемых Angular.Mock (), вы можете установить тест на что-либо, связанное с Angularjs. Мы смотрели в Контроллер_, _Compile , $ фильтр Услуги для тестирования контроллеров, директивы, фильтры и услуги. Мы всегда должны писать тестовые случаи, но сколько нужно проводить тестирование, это дискуссия на другой день.

Читайте ещё по теме: