单元测试 Angular 服务和指令

Question

作为 Angular 的新手(说实话，JS 本身)我正在为服务和指令的孤立单元测试而苦苦挣扎。 我尝试从互联网上找到的不同示例编译解决方案，但失败了。

我有一个服务:

angular.module('myApp.services', [])
.factory('autoCmpltDataSvc', function ($http) {
    return {
        source: function (request, response) {
            $http({
                method: 'jsonp',
                url: 'http://ws.geonames.org/searchJSON?callback=JSON_CALLBACK',
                params: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: request.term
                }
            }).success(function (data, status) {
                response($.map(data.geonames, function (item) {
                    return {
                        label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                        value: item.name,
                        geonameId: item.geonameId
                    }
                }));
            });
        }
    }
});

我想伪造与传递预定义数组的实际 Web 服务的交互，并检查它在传递不同的 request.term 值时是否返回正确的响应。

另一个任务是对指令进行单元测试(jquery 自动完成包装器)

angular.module('myApp.directives', [])
.directive('autocomplete', function (autoCmpltDataSvc) {
      return {
          restrict: 'E',
          replace: true,
          transclude: true,
          template: '<input id="DstnSlctr" ng-model="autocomplete" type="text"/>',
          link: function (scope, element, attrs) {
              scope.$watch(autoCmpltDataSvc, function () {
                  element.autocomplete({
                      source: autoCmpltDataSvc.source,
                      select: function (event, ui) {
                          scope[attrs.selection] = ui.item.value;
                          scope[attrs.selectionid] = ui.item.geonameId;
                          scope.$apply();
                      }
                  });
              });
          }
      }
  });

我想用一些预定义的数组伪造对服务的调用，并检查范围是否已正确修改。

是否可以单独测试这些任务，还是我应该只使用 e2e 测试来完成这项任务？

提前感谢您的回复! 克塞尼亚

Answer 1

对于服务，基本上您要做的是在单元测试中使用 $httpBackend。 Angular 的作用是它有一个它使用的 $httpBackend(在 $http 后面)。但是当你将它注入(inject)单元测试时，它会神奇地知道并拦截调用。

根据 doc ，你需要做的是通过在 beforeEach 中提供真实的 url(以及你将在单元测试中传递的参数)来暂存你的 http 请求，并添加一个 afterEach。注意:我认为文档有错字

var $http; //  and should probably be: var $httpBackend

对于指令，这取决于。如果您已经创建了整个指令，那么单元测试可能会容易得多。包装插件时，您可能会考虑几件事。首先，编写端到端测试可能是一个很好的第一步。其次，看看您自己的代码(在指令中)是否可以放入辅助方法中，并且该部分可以进行单元测试。