Хобрук: Ваш путь к мастерству в программировании

Модульное тестирование пользовательского поставщика

Как мы можем проверить условия внутри $get в клиентском провайдере, я хотел бы проверить, есть ли еще условия в showSpinner.

Я включу свой spinnerServe в конфигурации, используя

spinnerServiceProvider.spinnerEnabled(true)

и переключение моего счетчика в контроллере с помощью

spinnerService.showSpinner(true) or spinnerService.showSpinner(false)



  angular.module('providerModule', []).provider('spinnerService', [
  function() {
    var enabled = true;
    return {
      spinnerEnabled: function(setting) {
        if (angular.isDefined(setting)) {
          enabled = setting;
          return this;
        } else {
          return enabled;
        }
      },
      $get: function($injector) {
        return {
          showSpinner: function(option) {
            if (enabled) {
              if(option){
                  angular.element(document.body).append('<div id="spinner"><div class="modal-backdrop fade in"></div><div class="load5"><div class="loader" ></div></div></div>');
                }
              else{
                angular.element(document.querySelector('#spinner')).remove();

              }
            }
          }
        }
      }
    }

  }
]);

Я смог проверить, был ли вызван showSpinner, но как проверить, входит ли он, если и еще блокируется правильно. Ниже находится spec.js

    describe('Spinner Provider', function(){
    var spinnerServiceObj;
    beforeEach(module('providerModule'));
    describe('testing spinner', function(){
        beforeEach(function() {
            inject(function(_spinnerService_,_$rootScope_) {
                spinnerServiceObj = _spinnerService_;
                $rootScope = _$rootScope_;
                $rootScope.showSpinner = jasmine.createSpy(spinnerServiceObj.showSpinner(true))
            });
        });
        it('Should test showSpinner with true and false', function() {
            expect($rootScope.showSpinner ).toHaveBeenCalled();

        });
    })
})

  • В основном вам нужны /* Test logic to show Spinner */ и /* Test logic to hide Spinner */. На вопрос нельзя ответить без точного кода. 19.07.2016
  • @estus, я добавил полный код 19.07.2016

Ответы:


1

Внутри блока описания используйте:

beforeEach(function() {
  module('providerModule')
    .config(function(spinnerServiceProvider) {
       // set enabled/disabled here 
    });
});

Это должно позволить вам проверить любое условие.

19.07.2016

2

Модульные тесты не должны тестироваться на реальном DOM, особенно если это может создать проблемы для запуска тестов.

Прямые ссылки document следует заменить на $window.document. $window существует чтобы упростить насмешку над глобальными переменными.

Тогда его можно издеваться над

var bodyMock = {};

beforeEach(module('providerModule', { $window: {
  document: {
    body: bodyMock,
    querySelector: jasmine.createSpy()
  }
} }));

angular.element или jQuery можно протестировать, имитируя их полностью или только методы прототипа:

// angular.element.prototype should be stubbed before angular.element
// because a spy doesn't expose original `prototype`
spyOn(angular.element.prototype, 'append');
spyOn(angular.element.prototype, 'remove');
spyOn(angular, 'element').and.callThrough();

Одно условие можно проверить с помощью

spinnerService.showSpinner(true);

expect(angular.element).toHaveBeenCalled();
expect(angular.element.calls.mostRecent().args[0]).toBe(bodyMock);
expect(angular.element.prototype.append).toHaveBeenCalledWith('<div...);
expect($window.document.querySelector).not.toHaveBeenCalled();

И другое условие можно проверить с помощью

var spinnerMock = {};
$window.document.querySelector.and.returnValue(spinnerMock);

spyOn(angular, 'element').and.callThrough();

spinnerService.showSpinner();

expect($window.document.querySelector).toHaveBeenCalled('#spinner');

expect(angular.element).toHaveBeenCalled();
expect(angular.element.calls.mostRecent().args[0]).toBe(spinnerMock);
expect(angular.element.prototype.remove).toHaveBeenCalled();
expect(angular.element.prototype.append).not.toHaveBeenCalled();

В качестве альтернативы, $window.document можно смоделировать отдельно для работы с каким-либо отдельным элементом DOM, чтобы результат вызова showSpinner можно было проверить на соответствие содержимому элемента.

19.07.2016
  • я изменил в соответствии с вашим предложением, я получил следующие ошибки для expect(angular.element.calls.mostRecent().args[0]).toBe(bodyMock); expect(angular.element.prototype.append).toHaveBeenCalledWith('‹div id=spinner›‹div class=modal-backdrop исчезновение›‹/div›‹div class=load5›‹div class=loader›‹/div› ‹/дел›‹/дел›'); Ожидается, что HTMLNode будет Object({}). at Object.‹anonymous› (/Users/spinner/@spinnerServiceSpec.js:59:60) Ошибка: ожидал шпиона, но не определился. на Объект.‹анонимно› 19.07.2016
  • Это может произойти, если вы не заменили document на $window.document в исходном коде. Скрипт содержит спецификацию, но не тестируемый модуль. 19.07.2016
  • я заменил на $window.document и теперь обновил скрипку 19.07.2016
  • Пожалуйста, проверьте еще раз, выдает ReferenceError: describe is not defined, а самого модуля нет. 19.07.2016
  • Ваша скрипка содержит синтаксические ошибки и не выполняет спецификацию - также нет углов и угловых макетов. Вопрос был «Как мы можем проверить условия внутри поставщика $get in customer», и я считаю, что ответ объясняет это. Пожалуйста, предоставьте рабочий скрипт, способный воспроизвести ошибку, если вам нужна помощь в ее устранении. В настоящее время недостаточно информации, чтобы предложить что-то полезное. 20.07.2016
  • Новые материалы

    ВЫ РЕГРЕСС ЭТО?
    Чтобы понять, когда использовать регрессионный анализ, мы должны сначала понять, что именно он делает. Вот простой ответ, который появляется, когда вы используете Google: Регрессионный..

    Не зря же это называют интеллектом
    Стек — C#, Oracle Опыт — 4 года Работа — Разведывательный корпус Мне пора служить Может быть, я немного приукрашиваю себя, но там, где я живу, есть обязательная военная служба на 3..

    LeetCode Проблема 41. Первый пропущенный положительный результат
    LeetCode Проблема 41. Первый пропущенный положительный результат Учитывая несортированный массив целых чисел, найдите наименьшее пропущенное положительное целое число. Пример 1: Input:..

    Расистский и сексистский робот, обученный в Интернете
    Его ИИ основан на предвзятых данных, которые создают предрассудки. Он словно переходит из одного эпизода в другой из серии Черное зеркало , а вместо этого представляет собой хронику..

    Управление состоянием в микрофронтендах
    Стратегии бесперебойного сотрудничества Микро-фронтенды — это быстро растущая тенденция в сфере фронтенда, гарантирующая, что удовольствие не ограничивается исключительно бэкэнд-системами..

    Декларативное и функциональное программирование в стиле LINQ с использованием JavaScript с использованием каррирования и генератора ...
    LINQ - одна из лучших функций C #, которая обеспечивает элегантный способ написания кода декларативного и функционального стиля, который легко читать и понимать. Благодаря таким функциям ES6,..

    Структуры данных в C ++ - Часть 1
    Реализация общих структур данных в C ++ C ++ - это расширение языка программирования C, которое поддерживает создание классов, поэтому оно известно как C с классами . Он используется для..