javascript - How to test the config function of an Angular module? - Stack Overflow

admin 管理员组

文章数量: 1086019

I'm defining some setup code in the config function of an Angular module that I want to unit test. It is unclear to me how I should do this. Below is a simplified testcase that shows how I'm getting stuck:

'use strict';

angular.module('myModule', []).config(['$http', '$log', function($http, $log) {
    $http.get('/api/getkey').then(function success(response) {
        $log.log(response.data);
    });
}]);

describe('myModule', function() {
    it('logs a key obtained from XHR', inject(function($httpBackend) {
        $httpBackend.expectGET('/api/getkey').respond(200, '12345');
        angular.module('myModule');
        $httpBackend.flush();
    }));
});

This is clearly not the right way because I get the following error:

Error: No pending request to flush !

A plete, ready-to-run Angular project with the above testing code can be found on GitHub. If you know what to do with this scenario, please answer here on Stack Overflow. Bonus points if you also submit a pull request to the GitHub repo.

I'm defining some setup code in the config function of an Angular module that I want to unit test. It is unclear to me how I should do this. Below is a simplified testcase that shows how I'm getting stuck:

'use strict';

angular.module('myModule', []).config(['$http', '$log', function($http, $log) {
    $http.get('/api/getkey').then(function success(response) {
        $log.log(response.data);
    });
}]);

describe('myModule', function() {
    it('logs a key obtained from XHR', inject(function($httpBackend) {
        $httpBackend.expectGET('/api/getkey').respond(200, '12345');
        angular.module('myModule');
        $httpBackend.flush();
    }));
});

This is clearly not the right way because I get the following error:

Error: No pending request to flush !

A plete, ready-to-run Angular project with the above testing code can be found on GitHub. If you know what to do with this scenario, please answer here on Stack Overflow. Bonus points if you also submit a pull request to the GitHub repo.

• javascript
• angularjs
• karma-runner
• karma-jasmine
• angular-mock

Share Improve this question Follow edited Aug 19, 2016 at 0:04 Julian Gonggrijp asked Aug 11, 2016 at 15:13 Julian GonggrijpJulian Gonggrijp 4,3802121 silver badges4343 bronze badges 6

• As @mzulch's answer points out, you can only inject providers (not instances) into config blocks. So how would you expect a unit test to succeed if your code isn't functional? – adamdport Commented Aug 17, 2016 at 13:24
• A question can be misguided (like this question, as I now understand). This can be pointed out in an answer. A great answer explains three things: (1) how to use services globally in a module, (2) how to test config blocks, (3) why you can't have both at the same time. – Julian Gonggrijp Commented Aug 17, 2016 at 15:40
• I guess I was more curious about your process. I usually write tests after I'm confident that my code works, but now that I think about it, some people insist on writing tests first and writing their code to fit the test. Fair enough. – adamdport Commented Aug 17, 2016 at 15:58
• There is a third way in between: write the code first, then write the test to check whether the code works. I think that's what I was doing here. Thanks for drawing my attention to this, I had not reflected so precisely on my order of programming and testing before. :-) – Julian Gonggrijp Commented Aug 17, 2016 at 18:45
• The fact that you're testing unworkable code doesn't add clarity to the question. Regarding config vs run and serviceName vs serviceNameProvider, see this answer. There are two different injectors for config and run phases which inject service providers and service instances respectively. Service providers can be made to be available in instance injector but not vice versa. That's why $http in config block is a conundrum. – Estus Flask Commented Aug 20, 2016 at 17:05

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 5 +50

Use run instead of config if your initialization requires services to be injected. The config function can only receive providers and constants as parameters, not instantiated services like $http (relevant docs).

angular.module('myModule', []).run(['$http', '$log', function($http, $log) {
    ...
}]);

Initialize your module for testing

beforeEach(module('myModule'));

it('logs a key obtained from XHR', inject(function($httpBackend) {
    $httpBackend.expectGET('/api/getkey').respond(200, '12345');
    $httpBackend.flush();
}));

So the full working version looks like

'use strict';

angular.module('myModule', []).run(['$http', '$log', function($http, $log) {
    $http.get('/api/getkey').then(function success(response) {
        $log.log(response.data);
    });
}]);

describe('myModule', function() {
    beforeEach(module('myModule'));

    it('logs a key obtained from XHR', inject(function($httpBackend) {
        $httpBackend.expectGET('/api/getkey').respond(200, '12345');
        $httpBackend.flush();
    }));
});

Also, here's an example of testing the config block to check that a method on a provider was called: https://medium./@a_eife/testing-config-and-run-blocks-in-angularjs-1809bd52977e#71e0

mzulch is right to point out that services cannot be injected in an angular.module(...).config block. He also provides the right solution for the scenario where you actually need to use services in module initialization code: use the .run block instead of the .config block. His answer works perfectly for this scenario.

The question of how to write a unit test for the .config block remains. Let's adapt the naieve code from my question to a scenario where .config is actually warranted. The following snippet injects a provider dependency instead of a service dependency:

angular.module('myModule', []).config(['$httpProvider', function($httpProvider) {
    $httpProvider.useApplyAsync(true);
}]);

describe('myModule', function() {
    it('configures the $http service to bine response processing via $applyAsync', inject(function($httpProvider) {
        angular.module('myModule');
        expect($httpProvider.useApplyAsync()).toBeTruthy();
    }));
});

This time, the implementation of 'myModule' is correct. The unit test however, which is analogous to the attempt in my question, is still incorrect. Now Karma gives me the following error:

Error: [$injector:unpr] Unknown provider: $httpProviderProvider <- $httpProvider

This cryptical error is ing from the inject which is passed as the second argument to the it. Note how Provider is being stuttered. This is caused by the fact that inject is looking for the provider for $httpProvider. A "meta provider", as we may call it. Such things don't exist in the Angular framework, but inject is trying it anyway because it expects you to only ask for service dependencies. Services do have providers, for example, $http has $httpProvider.

So inject (full name: angular.mock.inject, here available globally) is not the right way to get hold of $httpProvider in the testcase. The right way is to define an anonymous module configuration function using module (angular.mock.module) which closes over a variable in which we can capture the provider. This works because providers can be injected at configuration time (see the link at the bottom of mzulch's answer as well as my own answer to my other question for details on configuration time vs run time). It looks like this:

var $httpProvider;

beforeEach(function() {
    module(function(_$httpProvider_) {
        // this is a .config function
        $httpProvider = _$httpProvider_;
    });
    // after this I can use inject() to make the magic happen
});

Another mistake in my naieve testcase is that I'm trying to execute 'myModule's configuration steps by calling angular.module('myModule'). For testcase purposes, I should be using the global module (angular.mock.module) instead, and the wisest place to do so is in the beforeEach fixture. In conclusion, the following code does the job:

describe('myModule', function() {
    var $httpProvider;

    beforeEach(function() {
        module(function(_$httpProvider_) {
            $httpProvider = _$httpProvider_;
        });
        module('myModule');
    });

    it('configures the $http service to bine response processing via $applyAsync', function() {
        inject();  // enforces all the module config steps
        expect($httpProvider.useApplyAsync()).toBeTruthy();
    });
});

I opted to put the inject() at the start of my testcase, but I could also put it at the end of the beforeEach. The advantage of the latter approach would be that I can write the call to inject in one place and not need to repeat it in every testcase. The advantage of the approach actually taken here is that more modules can be added to the injector in later beforeEaches or even in individual testcases.

I pushed this alternative solution to a new branch on GitHub.

本文标签： javascriptHow to test the config function of an Angular moduleStack Overflow