Testing an AngularJS factory in Jasmine using two dependencies: $http and another factory that returns a promise

Question

Testing an AngularJS factory in Jasmine using two dependencies: $http and another factory that returns a promise

I'm currently using the Ionic framework to develop custom applications. Right now, I'm working on writing Unit tests for the factory datastoreServices, which has dependencies on DomainService and $http. I'm struggling with implementing Jasmine Unit tests and could use some guidance.

Here are my factory functions:

app.factory("datastoreServices", ["$http", function($http) {
    return {
        getData: function(data, DomainService) {
            return $http.post(DomainService.host + 'factor', data);
        }
    };
}]);

app.factory('DomainService', function() { //here
    if (ionic.Platform.isAndroid()) {
        return {
            host: 'http://10.0.2.2:7001/'
        }
    }
    return {
        host: 'http://localhost:7001/'
    }
})

Below is my unit test skeleton. With two dependencies, I'm unsure how to proceed. This is what I have so far in my unit test file:

describe(
        'datastoreServices',
        function() {
            beforeEach(module('Myapp'));
            describe('getData'),
                function() {
                    it("Should return correct values", inject(function(datastoreServices, DomainService, $httpBackend) {
                            expect(datastoreServices.getData(httpBackend.. /***something here!**/ )
                                .toEqual("2.2");
                            }))
                    }

I have limited knowledge on mocking and testing. Can someone assist me in testing the factory datastoreServices? The following aspects need to be tested:

Is the Http post making the correct calls?
Is the function returning the correct promise?

Here is a similar app scenario in plnkr.

I hope I'm not asking too much. Thank you in advance.

javascript angularjs unit-testing jasmine ionic-framework

Answer 1

Answer №1

The fundamental principles to keep in mind are:

When testing, $http is mocked to avoid actual server calls during test execution.
It is necessary to use $httpBackend to validate http calls and mimic server responses. More information can be found here.
You have the flexibility to inject or mock any dependencies required for your test scenarios.

Let's examine a sample based on your original code:

    describe('datastoreServices', function() {

    beforeEach(module('MyApp'));

    // Set up the $httpBackend mock and the service to be tested, also create a mock for DomainService
    var $httpBackend, datastoreServices, DomainService;
    beforeEach(inject(function(_$httpBackend_, _datastoreServices_) {
        $httpBackend = _$httpBackend_;
        datastoreServices = _datastoreServices_;
        DomainService = function() {
            return {
                host: 'http://localhost:7001/'
            };
        };
    }));

    // After each test, ensure that all expected http calls were made and only those
    afterEach(function() {
        $httpBackend.verifyNoOutstandingExpectation();
        $httpBackend.verifyNoOutstandingRequest();
    });


    it('triggers http backend to fetch data', function() {
        var data = {foo: 'bar'};

        // Define the $http expectation and specify a mock server response for the request
        // Refer to https://docs.angularjs.org/api/ngMock/service/$httpBackend for more details
        $httpBackend.expectPOST('http://localhost:7001/factor', data).respond(201, {bar: 'foo'});

        var returnedData;
        datastoreServices.getData(data, DomainService).success(function(result) {
            // Confirm that the returned result contains the expected data
            returnedData = result;
            expect(returnedData).toEqual({bar: 'foo'});
        });

        // Simulate the server response
        $httpBackend.flush();

        // Verify that the success handler was called
        expect(returnedData).toBeDefined();
    });
});

Answer 2

The fundamental principles to keep in mind are:

When testing, $http is mocked to avoid actual server calls during test execution.
It is necessary to use $httpBackend to validate http calls and mimic server responses. More information can be found here.
You have the flexibility to inject or mock any dependencies required for your test scenarios.

Let's examine a sample based on your original code:

    describe('datastoreServices', function() {

    beforeEach(module('MyApp'));

    // Set up the $httpBackend mock and the service to be tested, also create a mock for DomainService
    var $httpBackend, datastoreServices, DomainService;
    beforeEach(inject(function(_$httpBackend_, _datastoreServices_) {
        $httpBackend = _$httpBackend_;
        datastoreServices = _datastoreServices_;
        DomainService = function() {
            return {
                host: 'http://localhost:7001/'
            };
        };
    }));

    // After each test, ensure that all expected http calls were made and only those
    afterEach(function() {
        $httpBackend.verifyNoOutstandingExpectation();
        $httpBackend.verifyNoOutstandingRequest();
    });


    it('triggers http backend to fetch data', function() {
        var data = {foo: 'bar'};

        // Define the $http expectation and specify a mock server response for the request
        // Refer to https://docs.angularjs.org/api/ngMock/service/$httpBackend for more details
        $httpBackend.expectPOST('http://localhost:7001/factor', data).respond(201, {bar: 'foo'});

        var returnedData;
        datastoreServices.getData(data, DomainService).success(function(result) {
            // Confirm that the returned result contains the expected data
            returnedData = result;
            expect(returnedData).toEqual({bar: 'foo'});
        });

        // Simulate the server response
        $httpBackend.flush();

        // Verify that the success handler was called
        expect(returnedData).toBeDefined();
    });
});

Testing an AngularJS factory in Jasmine using two dependencies: $http and another factory that returns a promise

Answer №1

Similar questions

Perform an Ajax call just one time

Creating an href link within a button that is contained within a collapse component

Finding specific data in sessionStorage using an ID or key

Error encountered: Unable to access attributes of an object that is not defined (specifically trying to read 'clientX')

The server nodejs is unable to recognize the dotenv file

UI Grid Experiencing Subpar Vertical Scroll Performance

How can one effectively manage asynchronous behavior on the client side of a Meteor application?

Listening to LayersControl.Overlay checkbox clicks in React-Leaflet: A guide

The asynchronous module has finished even though there is another operation still pending

ensure that mocha does not consistently skip tests

Oops! There seems to be an error in the code: SyntaxError: DOM Exception 12 setRequestHeader@[

Load website content in real-time

The functionality of two-way data binding seems to be malfunctioning within the directive

Evaluating the criteria and presenting two distinct notifications with setCustomValidity

Error: The function "navigate" has not been declared or defined

The display of AngularJS jQCloud is not rendering correctly within the Bootstrap Modal

Instructions on how to use a keyboard key to activate a dropdown menu item in Bootstrap

Retrieving the value of the key from a JSON response

Directive removing input field value from

Troubleshooting Typescript compilation using tsc with a locally linked node package