带有服务的角度指令的单元测试

Question

我正在尝试对调用服务来检索帖子的指令进行单元测试，并对如何测试指令感到困惑。 通常，仅编译指令元素即可轻松进行指令测试，但此指令元素通过get调用来调用帖子。 我该如何测试？

(function() {
  'use strict';

  describe('Post directive', function() {
    var element, scope, postService, $rootScope, $compile, $httpBackend;

    beforeEach(module('madkoffeeFrontend'));
    beforeEach(inject(function(_postService_, _$rootScope_, _$compile_, _$httpBackend_) {
      postService = _postService_;
      $httpBackend = _$httpBackend_;
      $rootScope = _$rootScope_;
      $compile = _$compile_;
      // $httpBackend.whenGET('http://madkoffee.com/wp-json/wp/v2/posts?per_page=3').passThrough();
      scope = $rootScope.$new();
      spyOn(postService, 'getPosts');
      element = $compile('<posts post-num="3"></posts>')(scope);
      scope.$digest();
    }));

    it('should get the posts successfully', function () {
      expect(postService.getPosts).toHaveBeenCalled();
    });

    // it('should expect post to be present', function () {
    //   expect(element.html()).not.toEqual(null);
    // });

  });
})();

这是控制器：

(function() {
  'use strict';

  angular
    .module('madkoffeeFrontend')
    .directive('posts', postsDirective);

  /** @ngInject */
  function postsDirective() {
    var directive = {
      restrict: 'E',
      scope: {
        postNum: '='
      },
      templateUrl: 'app/components/posts/posts.html',
      controller: PostController,
      controllerAs: 'articles',
      bindToController: true
    };

    return directive;

    /** @ngInject */
    function PostController($log, postService) {
      var vm = this;

      postService.getPosts(vm.postNum).then(function(data) {
        $log.debug(data);
        vm.posts = data;
      }).catch(function (err) {
        $log.debug(err);
      });
    }
  }
})();

Answer 1

不要从测试中调用getPosts（）：这没有意义。

告诉间谍服务返回什么。 它使用http来获取帖子的事实与该指令无关。 您正在对指令进行单元测试，而不是服务。 因此，您可以假设服务返回了它应返回的内容：发布承诺。

告诉间谍的postService返回什么：

spyOn(postService, 'getPosts').and.returnValue(
    $q.when(['some fake post', 'some other fake post']));