对指令进行单元测试 - 无法强制使用虚假数据

Question

我试图了解如何在我的以下情况下对我的指令进行单元测试。

基本上我正在尝试对具有控制器的指令进行单元测试。在加载此指令时，控制器通过服务发出 http 请求，该服务再次将一些数据带到控制器，然后将此数据提供给指令视图。

根据我的理解，下面的场景我应该这样做：

一个 $httpBackend 来避免 http 请求完成时的异常；
填充假数据以便能够使用差异行为对指令进行单元测试
编译指令

如您所见，到目前为止我一直在尝试的是用虚假数据覆盖服务。到目前为止我无法完成的工作。

现在有一些疑问。

正如您在我的控制器中看到的那样。我正在为视图提供整个服务：

$scope.ItemsDataservice = ItemsDataservice;

是什么让我相信我覆盖服务的方法应该有效。

我的问题：

在下面的场景中，我了解到我可以覆盖服务来操作数据，甚至可以覆盖控制器以按范围操作数据。

在这里做什么是正确的？我理解错了吗？我在混合单元测试吗？

在我当前的单元测试代码中，当我应用（或不应用）假数据时，没有任何区别：

ItemsDataservice.items = DATARESULT;

ItemsDataservice.items = null;

控制器:

angular.module('app')
    .controller('ItemsCtrl', function ($scope, $log, ItemsDataservice) {

        $scope.ItemsDataservice = ItemsDataservice;
        $scope.ItemsDataservice.items = null;

        $scope.loadItems = function() {

            var items = [];

            ItemsDataservice.getItems().then(function(resp) {

                if (resp.success != 'false') {

                    for (resp.something ... ) {
                        items.push({ ... });
                    };

                    ItemsDataservice.items = items;

                };

            }, function(e) {
                $log.error('Error', e);
            });
        };

        $scope.loadItems();

    });

服务:

angular.module('app')
    .service('ItemsDataservice', function ItemsDataservice($q, $http) {

        ItemsDataservice.getItems = function() {

            var d = $q.defer();
            var deffered = $q.defer();
            var url = 'http://some-url?someparameters=xxx'

            $http.get(url)
                .success(function (d) {
                    deffered.resolve(d);
                });

            return deffered.promise;

        };

        return ItemsDataservice;

    });

指令:

angular.module('app')
    .directive('items', function () {
        return {
            templateUrl: '/items.html',
            restrict: 'A',
            replace: true,
            controller: 'ItemsCtrl'
        };
    });

单元测试指令:

ddescribe('Directive: Items', function () {

  var element, scope, _ItemsDataservice_, requestHandler, httpBackend;
  var URL = 'http://some-url?someparameters=xxx';
  var DATARESULT = [{ ... }];

  // load the directive's module
  beforeEach(module('app'));
  beforeEach(module('Templates')); // setup in karma to get template from .html

  beforeEach(inject(function ($rootScope, ItemsDataservice) {

    httpBackend = $httpBackend;
    scope = $rootScope.$new();
    _ItemsDataservice_ = ItemsDataservice;

    requestHandler = httpBackend.when('GET', URL).respond(200, 'ok');

  }));

  afterEach(function() {
    //httpBackend.verifyNoOutstandingExpectation();
    //httpBackend.verifyNoOutstandingRequest();
  });

  it('Show "No Items available" when empty result', inject(function ($compile) {

    _ItemsDataservice_.items = null;

    element = angular.element('<div data-items></div>');
    element = $compile(element)(scope);
    scope.$digest();

    element = $(element);
    expect(element.find('.msg_noresult').length).toBe(1);

  }));

  it('Should not show "No Items available" when data available ', inject(function ($compile) {

    _ItemsDataservice_.items = DATARESULT;

    element = angular.element('<div data-items></div>');
    element = $compile(element)(scope);
    scope.$digest();

    element = $(element);
    expect(element.find('.msg_noresult').length).toBe(0);

  }));

});

Answer 1

我解决了问题。

更改了这一行：

element = $compile(element)(scope);

到这一行：

element = $compile(element.contents())(scope);

唯一的区别是 jquery 方法 .contents()

我还没明白为什么。但它解决了。

更新:

我刚刚发现的另一件事对我来说非常有用。您可以在 httpBackend:

上使用正则表达式

httpBackend.whenGET(/.*NameOfThePageXXX\.aspx.*/).respond(200, 'ok');

因此，如果您只是想避免异常，则无需担心使用完全相同的参数等。

对指令进行单元测试 - 无法强制使用虚假数据

Unit testing a directive - Unable to force a fake data

javascript

unit-testing

angularjs

angularjs-directive