Komponententest auf Winkel-Direktive mit einem Service

Question

Ich versuche Unit-Tests für eine Direktive durchzuführen, die einen Dienst aufruft, um Posts abzurufen, und bin verwirrt, wie man die Direktive testet. In der Regel ist das Testen von Direktiven einfach, wenn Sie nur das Direktive-Element kompilieren, aber dieses Direktive-Element ruft Posts über einen Get-Call auf. Wie teste ich das?

(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); 
    // }); 

    }); 
})(); 

Dies ist der Controller:

(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

Sie von Ihrem Test nicht nennen getPosts(): das macht keinen Sinn.

Sagen Sie dem ausspionierten Dienst, was Sie zurückgeben sollen. Die Tatsache, dass es HTTP verwendet, um Posts zu erhalten, ist für die Richtlinie irrelevant. Sie testen die Richtlinie, nicht den Dienst. Sie können also einfach davon ausgehen, dass der Dienst das zurückgibt, was er zurückgeben soll: eine Zusage von Posts.

Sagen Sie der ausspioniert Postservice, was zurückzukehren:

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