angular unit testing a directive with httpBackend

Question

I am currently running into an issue where I can't get the directive to run on a tag. I'm new to unit testing and angular so please be descriptive of what I am doing wrong, or what I should look into.

Directive

.directive('documents', function (){
    return {
        restrict: 'E',
        templateUrl: '/abc/def/documents.html'
    };
})

Unit Test

beforeEach(module('myApp.home'));
var $rootScope;
beforeEach(inject(function (_$rootScope_) {
    $rootScope = _$rootScope_;
}));

describe('Documents Directive', function (){
    var $compile;
    beforeEach(inject(function (_$compile_, $httpBackend) {
        $compile = _$compile_;
        $httpBackend.when('GET', '/abc/def/documents.html').respond("What To Put here!");
    }));

    it('Should call documents.html', function () {
        var element = $compile("<documents>This should be hashed out</documents>")($rootScope);
        console.log(element);
        $rootScope.$digest();
        console.log(element);
        console.log(element.html());
        expect(element.html()).toContain("Documents");
    });

});

documents.html

<h2>Documents</h2>

When running the test, these are my results:

INFO [watcher]: Changed file "C:/webroot/member_portal/app/home/home_test.js".
LOG: Object{0: <documents class="ng-scope"></documents>, length: 1}
LOG: Object{0: <documents class="ng-scope"></documents>, length: 1}
LOG: ''
Chrome 45.0.2454 (Windows 7 0.0.0) myApp.home module Documents Directive Should call documents.html FAILED
    Expected '' to contain 'Documents'.
        at Object.<anonymous> (C:/webroot/member_portal/app/home/home_test.js:265:36)
Chrome 45.0.2454 (Windows 7 0.0.0): Executed 1 of 47 (1 FAILED) (skipped 46) ERROR (0.563 secs / 0.01 secs)

Michael Biggs · Accepted Answer · 2015-10-15 17:53:12Z

The code below works as expected. You need to call your expect after a call to $httpBackend.flush(); The call to /abc/def/documents.html is a async call, therefore it is not resolved in till flush() has been called.

Another solution would to pre-compile your template files. This would remove the need to utilize the $httpBackend. You can find documentation here and search Stack Overflow for plenty of examples of that.

describe('', function(){

    beforeEach(module('myApp.home'));
    var $rootScope;
    beforeEach(inject(function (_$rootScope_) {
        $rootScope = _$rootScope_;
    }));

    describe('Documents Directive', function (){
        var $compile, $httpBackend, expectedResults = '<h2>Documents</h2>';
        beforeEach(inject(function (_$compile_, _$httpBackend_) {
            $compile = _$compile_;
            $httpBackend = _$httpBackend_;
            $httpBackend.expectGET('/abc/def/documents.html').respond(200, expectedResults);
        }));

        it('Should call documents.html', function () {
            var $element = $compile("<documents>This should be hashed out</documents>")($rootScope);
            $rootScope.$digest();
            $httpBackend.flush();
            expect($element.eq(0).html()).toEqual(expectedResults);
        });

    });
});

Collectives™ on Stack Overflow

angular unit testing a directive with httpBackend

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related