Question

以下是我的代码的一部分：

angular.module('mine',[]).factory('MyFactory', ['$http','$q',  function   
     MyFactory($http,$q) {
            return {
                getData: function() {    
                    var deferred = $q.defer(),
                    url = "http://...";          

                $http.jsonp(url)
                .then(              
                    function (response) {
                        deferred.resolve(response.data);
                    },  
                    function (error) {
                        return $q.reject('Error retrieving data');
                    }
                );

                return deferred.promise;
            }
        };
 }]);


function MyController(MyFactory) {

    var self = this;

    self.getData= function( ) {
        MyFactory.getData().then(
            function(result) {
                self.contacts = result;
            },
            function(error) {
                console.log('Error retrieving data: ', error);
            }
        );
    };

    self.getData();
}

angular.module('mine').component('myComponent', {     
    templateUrl: '..',
    controller: MyController
  });

我正在尝试对来自工厂的数据是否正确地进入控制器进行单元测试。这是我使用Jasmine的单元测试代码：

describe('component', () => {
  let $componentController,contactsList,ctrl,$q,$rootScope;      

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


  beforeEach(inject((_$componentController_,_MyFactory_, _$q_, _$rootScope_) => {
    $componentController = _$componentController_;

    ctrl = $componentController('myComponent',null);
    $q = _$q_;
    contactsList = _MyFactory_; 
    $rootScope = _$rootScope_;    
  }));


it('should ... ', function() {    
       spyOn(contactsList, "getData").and.returnValue(
          $q.when({
            message: 'awesome message'
          }));

     ctrl.getData();
     $rootScope.$apply();
     expect(ctrl.contacts.message).toBe('awesome message');
    });  
});

由于某种原因，上述测试没有运行;我收到以下错误：Possibly unhandled rejection: Error retrieving data thrown。你知道为什么吗？有什么问题？

Answer 1

您应该将MyFactory注入$componentController作为测试中的第二个参数。所以不要这样：

 ctrl = $componentController('myComponent',null);

使用它：

 ctrl = $componentController('myComponent', {
            MyFactory: _MyFactory_
        });

Answer 2

＆＃13;

angular.module('mine', []).factory('MyFactory', ['$http', '$q', function
  MyFactory($http, $q) {
    return {
      getData: function() {
        var deferred = $q.defer(),
          url = "http://google.com";

        $http.jsonp(url)
          .then(
            function(response) {
              deferred.resolve(response.data);
            },
            function(error) {
              return $q.reject('Error retrieving data');
            }
          );

        return deferred.promise;
      }
    };
  }
]);

function MyController(MyFactory) {
  this.getData = function() {
    MyFactory.getData().then(
      function(result) {
        this.contacts = result;
      }.bind(this),
      function(error) {
        console.log('Error retrieving data: ', error);
      }
    );
  };

  this.getData();
}

angular.module('mine').component('myComponent', {
  controller: MyController
});

describe('component', () => {
  let $componentController, contactsList, $q, $rootScope, ctrlFactory;

  beforeEach(angular.mock.module('mine'));


  beforeEach(inject((_$componentController_, _MyFactory_, _$q_, _$rootScope_) => {
    $componentController = _$componentController_;
    ctrlFactory = () => {
      return $componentController('myComponent', null, {
        MyFactory: _MyFactory_
      });
    }
    $q = _$q_;
    contactsList = _MyFactory_;
    $rootScope = _$rootScope_;
  }));

  it('should ... ', function() {
    const message = 'awesome message'
    spyOn(contactsList, "getData").and.returnValue(
      $q.when({
        message
      }));
    const ctrl = ctrlFactory()
    ctrl.getData();
    $rootScope.$apply();
    expect(ctrl.contacts.message).toBe(message);
  });
});

＆＃13;

<link href="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine.css" rel="stylesheet" />
<script src="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine-2.0.3-concated.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-mocks.js"></script>

＆＃13;

单位测试数据从服务到达控制器（Jasmine）

2 个答案: