function containing a Jasmine test scenario for Restangular

Question

function containing a Jasmine test scenario for Restangular

How can I create jasmine tests for a Rectangular scenario like the one shown below?

script

$scope.allEmployees = [{
            visible: true,
            empId: "EMP148"
 }];

$scope.employeeDocuments = {  "EMP148": [{
                                        "empId": "EMP148",
                                        "department": "Sales",
                                        "firstName": "Manu",
                                        "lastName": "Mathew",
                                        "place": "Kolkata"
                                  }]
                           };

var employeesCopy = angular.copy($scope.allEmployees);
$scope.allEmployees.push({visible: true, empId: "EMP489"});  

$scope.addEmployees = function (employeesCopy) {
    var newEmployee = {visible: true, empId: "EMP489"};
    var emplyeeList = {
        employees: $scope.allEmployees,
        newEmployee: newEmployee
    };
    Restangular.all('emp/getEmployees').post(emplyeeList).then(function (employees) {
        if (!_.isEmpty(employees[emplyeeList.newEmployee.empId])) {
            if ($scope.employeeDocuments.hasOwnProperty(emplyeeList.newEmployee.empId)) {
                delete $scope.employeeDocuments[emplyeeList.newEmployee.empId];
            }
            $scope.employeeDocuments[emplyeeList.newEmployee.empId] = employees[emplyeeList.newEmployee.empId];
            setMyEmployees(true);
            $scope.flag = true;
            console.log("success");
        } else {
            $scope.employeeDocuments = employeesCopy;
            console.log("no documents");
        }
        $scope.flag = false;
    }, function (error) {
        console.log("failed");
        $scope.flag = false;
    });
};

$scope.addEmployees(employeesCopy);
setMyEmployees = function (flag)
{
    // other implementation
};

I have written test cases as shown below, but I am encountering an exception stating

spyOn could not find an object to spy upon for all()

test case

WORKING DEMO - contains the full logic and test cases

describe('Testing Controllers', function() {
    describe('Testing EmployeeController Controller', function() {
        var EmployeeController, $scope, $httpBackend, Restangular;

        beforeEach(function() {
           module('emp');
        }); 

        beforeEach(inject(function($controller, $rootScope, $filter, $injector, Restangular, $httpBackend) {
            $scope = $rootScope.$new();
            $httpBackend = $httpBackend;
            Restangular = $injector.get("Restangular");
            EmployeeController = $controller('EmployeeController ', {
                $rootScope: $rootScope,
                $scope: $scope,
                $filter: $filter
            });
        }));

        it('should add new employees when addEmployees() is called', inject(function($httpBackend)
        {
           $scope.allEmployees = [{
                                    visible: true,
                                    empId: "EMP148"
                              }];

           $scope.employeeDocuments = {  "EMP148": [{
                                            "empId": "EMP148",
                                            "department": "Sales",
                                            "firstName": "Manu",
                                            "lastName": "Mathew",
                                            "place": "Kolkata"
                                            }]
                                   };

           var employeesCopy = angular.copy($scope.allEmployees);

           spyOn(Restangular, 'all').andCallThrough();

           var newEmployee = {visible: true, empId: "EMP489"};
           var emplyeeList = {
                employees: $scope.allEmployees,
                newEmployee: newEmployee
           };

           var mockToReturn = {
                "EMP489": [{
                "empId": "EMP489",
                "department": "Sales",
                "firstName": "Ram",
                "lastName": "Mohan",
                "place": "Delhi"
                }]
            };
            $scope.addEmployees(employeesCopy);
            $httpBackend.expectPOST('emp/getEmployees',emplyeeList).respond(mockToReturn);
            expect(Restangular.all).toHaveBeenCalledWith('emp/getEmployees');
            expect(setMyEmployees(true)).toHaveBeenCalled();

        }));
    });
});

javascript angularjs unit-testing jasmine restangular

Answer 1

Answer №1

You are facing multiple issues:

First, in order to use toHavebeenCalled to answer your question, you need to create a spy first.

One way to do this is by setting setMyEmployees at the scope level and then adding a spy on the scope

spyOn($scope);

However, there is a test that makes an asynchronous request, causing your test case to fail because it will reach the end before the asynchronous request is successful.

In Jasmine 2, you can use done() for asynchronous tests:

it('should add new employees when addEmployees() is called', function(done) 
{
    //call when asynchronous operation is finished
    done();
}

But with the way your function is created, you can't use done. You will need to have a callback block in your method or a promise

Callback :

$scope.addEmployees = function(employeesCopy, success, failure)
{
    //code
    Restangular.all('user/getEmployees').post(employeeList).then(function(employees)
    {
        if (!_.isEmpty(employees[employeeList.employeeId]))
        {
           // code
        }
        else
        {
            // code
        }
        success();
        $scope.flag = false;
    }, function(error)
    {
        failure();
        $scope.flag = false;
    });
};

Take note of the toHaveBeenCall syntax

it('should add new employees when addEmployees() is called', function(done) 
{
var employeesCopy = {
    firstName: "Manu",
    lastName: "Sam"
};

spyOn($scope);

$scope.addEmployees(employeesCopy, function(){

    done();

});

expect($scope.setMyEmployees).toHaveBeenCalledWith(true);
});

I would prefer a promise syntax:

$scope.addEmployees = function(employeesCopy, defer)
{
    //code
    Restangular.all('user/getEmployees').post(employeeList).then(function(employees)
    {
        if (!_.isEmpty(employees[employeeList.employeeId]))
        {
           // code
        }
        else
        {
            // code
        }
        defer.resolve();
        $scope.flag = false;
    }, function(error)
    {
        defer.reject();
        $scope.flag = false;
    });
};


it('should add new employees when addEmployees() is called', function(done) 
{
var employeesCopy = {
    firstName: "Manu",
    lastName: "Sam"
};

spyOn($scope);

var defer = $q.defer;
defer.promise.then(function(){

    console.log("success");
    done();
}, function (){
    done();
    console.log("error");
});

$scope.addEmployees(employeesCopy, defer);

expect($scope.setMyEmployees).toHaveBeenCalledWith(true);
});

The final issue you may encounter is mocking the network call if you want your test to be truly unitary (otherwise, you're also testing the backend response, which might not be desired). If you wish to mock the call, consider using $httpBackend. This blog post provides more information: (not mine)

EDIT, add dependency to test, before your it(), use a beforeEach:

var myService, Restangular;
    beforeEach(function() {
        inject(function($injector) {
            myService = $injector.get('MyService');//example service
            Restangular = $injector.get("Restangular");
        });
    });

EDIT 2:

Apologies for not explaining it clearly, try:

beforeEach(inject(function($controller, $rootScope, $filter, $injector, _Restangular_, _$httpBackend_) {
        $scope = $rootScope.$new();
        $httpBackend = _$httpBackend_;
        Restangular = _Restangular_;
        EmployeeController = $controller('EmployeeController ', {
            $rootScope: $rootScope,
            $scope: $scope,
            $filter: $filter
        });
    }));

Answer 2

You are facing multiple issues:

First, in order to use toHavebeenCalled to answer your question, you need to create a spy first.

One way to do this is by setting setMyEmployees at the scope level and then adding a spy on the scope

spyOn($scope);

However, there is a test that makes an asynchronous request, causing your test case to fail because it will reach the end before the asynchronous request is successful.

In Jasmine 2, you can use done() for asynchronous tests:

it('should add new employees when addEmployees() is called', function(done) 
{
    //call when asynchronous operation is finished
    done();
}

But with the way your function is created, you can't use done. You will need to have a callback block in your method or a promise

Callback :

$scope.addEmployees = function(employeesCopy, success, failure)
{
    //code
    Restangular.all('user/getEmployees').post(employeeList).then(function(employees)
    {
        if (!_.isEmpty(employees[employeeList.employeeId]))
        {
           // code
        }
        else
        {
            // code
        }
        success();
        $scope.flag = false;
    }, function(error)
    {
        failure();
        $scope.flag = false;
    });
};

Take note of the toHaveBeenCall syntax

it('should add new employees when addEmployees() is called', function(done) 
{
var employeesCopy = {
    firstName: "Manu",
    lastName: "Sam"
};

spyOn($scope);

$scope.addEmployees(employeesCopy, function(){

    done();

});

expect($scope.setMyEmployees).toHaveBeenCalledWith(true);
});

I would prefer a promise syntax:

$scope.addEmployees = function(employeesCopy, defer)
{
    //code
    Restangular.all('user/getEmployees').post(employeeList).then(function(employees)
    {
        if (!_.isEmpty(employees[employeeList.employeeId]))
        {
           // code
        }
        else
        {
            // code
        }
        defer.resolve();
        $scope.flag = false;
    }, function(error)
    {
        defer.reject();
        $scope.flag = false;
    });
};


it('should add new employees when addEmployees() is called', function(done) 
{
var employeesCopy = {
    firstName: "Manu",
    lastName: "Sam"
};

spyOn($scope);

var defer = $q.defer;
defer.promise.then(function(){

    console.log("success");
    done();
}, function (){
    done();
    console.log("error");
});

$scope.addEmployees(employeesCopy, defer);

expect($scope.setMyEmployees).toHaveBeenCalledWith(true);
});

The final issue you may encounter is mocking the network call if you want your test to be truly unitary (otherwise, you're also testing the backend response, which might not be desired). If you wish to mock the call, consider using $httpBackend. This blog post provides more information: (not mine)

EDIT, add dependency to test, before your it(), use a beforeEach:

var myService, Restangular;
    beforeEach(function() {
        inject(function($injector) {
            myService = $injector.get('MyService');//example service
            Restangular = $injector.get("Restangular");
        });
    });

EDIT 2:

Apologies for not explaining it clearly, try:

beforeEach(inject(function($controller, $rootScope, $filter, $injector, _Restangular_, _$httpBackend_) {
        $scope = $rootScope.$new();
        $httpBackend = _$httpBackend_;
        Restangular = _Restangular_;
        EmployeeController = $controller('EmployeeController ', {
            $rootScope: $rootScope,
            $scope: $scope,
            $filter: $filter
        });
    }));

function containing a Jasmine test scenario for Restangular

Answer №1

Similar questions

Acquiring images from an external source and storing them in either the $lib directory or the static folder during the

Adding a unique header to an Ajax CORS request can be achieved by following a few

Unable to trigger button retrieved through ajax request

Experience the Power of Vue.js in Your Shopify Store

Obtaining undefined values for req and resolvedUrl in GetServerSideProps function

Monitoring all changes with AngularJS in the ng-init function

Error encountered when attempting to call a JavaScript function by clicking on a link within a dropdown menu due to an unexpected end of

Having difficulty retrieving the JSON response using AngularJS

Leveraging JavaScript Functions in HTML

What could be the reason why modifications made to $scope in a directive's link function do not appear on the user interface?

Unable to retrieve custom date picker value with React Antd

AngularJS is encountering a problem with its filter functionality, particularly when trying to filter using a combination of uppercase and lowercase letters

What purpose does @ViewChild serve if we are unable to modify or interact with its properties from the Parent Component?

Eliminate any unnecessary line breaks within the text box

What could be causing the issue when the selected option is being changed and the condition does not work

Looking to minify a JavaScript file? Consider changing the overly long variable name "veryLoooooooongVariable" to something shorter,

Using Javascript to handle form submission and enforce required input fields

How to efficiently close all active Bootstrap modals in an AngularJS application?

How to stop URL switch and page reload in Bootstrap 4 navigation bars

Where can I find the HTML code I just inserted?