Retrieving the return value from a function within a promise using spyOn in a Jasmine unit test for an

Question

Retrieving the return value from a function within a promise using spyOn in a Jasmine unit test for an

I'm currently in the process of testing a function that takes a value from a promise, concatenates this value (which is a string) to a URL. The actual implementation of the function seems to be working perfectly fine.

  var resp = {"payment": {
    "additional_information": {
      "skuSeatIds": "[{\"sku\":\"5234\",\"Description\":\"Advanced\",\"seatId\":792}]"
    }}};

   var promise = Promise.resolve(JSON.parse(resp.payment.additional_information.skuSeatIds));
   var update = spyOn(doneService, 'getOrderInfo').and.returnValue(promise);

   var url = controller.setSeatIdLink();
   expect(url).toBe('http://localhost:4000/#!/search?type=Selector&seatId=792');
});

Next, I have the function that calls doneService.getOrderInfo()

  function setSeatIdLink () {
    doneService.getOrderInfo(store.get('orderId')).then(function(resp){
           var stri = vm.modalSelectorUrl.concat(resp[0].seatId);
            vm.modalSelectorUrl = stri;
            return vm.modalSelectorUrl;
    });
  }

The variable vm.modalSelectorUrl successfully gets set with the URL. The spyOn method also returns the correct value. However, when I try to access the url using expect(url), it gives me undefined.

If I manually set the return value outside the scope of .then(), everything works as expected.

Any suggestions or thoughts on why this might be happening? Thank you!

javascript angularjs unit-testing jasmine karma-runner

Answer 1

Answer №1

It appears that in your function setSeatIdLink, there is an issue with the return statement not returning anything outside of the then function, resulting in it returning undefined and storing that value in url.

To resolve this, try checking the value of vm.modalSelectorUrl instead.

function setSeatIdLink () {
    doneService.getOrderInfo(store.get('orderId')).then(function(resp){
           var stri = vm.modalSelectorUrl.concat(resp[0].seatId);
            vm.modalSelectorUrl = stri;
            return vm.modalSelectorUrl;
    });
  }

UPDATES

Modify your function like this

function setSeatIdLink() {
    var defer = $q.defer();
    doneService.getOrderInfo(store.get('orderId')).then(function (resp) {
        var stri = vm.modalSelectorUrl.concat(resp[0].seatId);
        vm.modalSelectorUrl = stri;
        defer.resolve(vm.modalSelectorUrl);
    });
    return defer.promise;
}

And update the test case like this

it('testcase', function (done) {
    //your code
    var url = controller.setSeatIdLink().then(function (url) {
        expect(url).toBe('http://localhost:4000/#!/search?type=Selector&seatId=792');
        done();
    });
    $scope.$apply();
});

Answer 2

It appears that in your function setSeatIdLink, there is an issue with the return statement not returning anything outside of the then function, resulting in it returning undefined and storing that value in url.

To resolve this, try checking the value of vm.modalSelectorUrl instead.

function setSeatIdLink () {
    doneService.getOrderInfo(store.get('orderId')).then(function(resp){
           var stri = vm.modalSelectorUrl.concat(resp[0].seatId);
            vm.modalSelectorUrl = stri;
            return vm.modalSelectorUrl;
    });
  }

UPDATES

Modify your function like this

function setSeatIdLink() {
    var defer = $q.defer();
    doneService.getOrderInfo(store.get('orderId')).then(function (resp) {
        var stri = vm.modalSelectorUrl.concat(resp[0].seatId);
        vm.modalSelectorUrl = stri;
        defer.resolve(vm.modalSelectorUrl);
    });
    return defer.promise;
}

And update the test case like this

it('testcase', function (done) {
    //your code
    var url = controller.setSeatIdLink().then(function (url) {
        expect(url).toBe('http://localhost:4000/#!/search?type=Selector&seatId=792');
        done();
    });
    $scope.$apply();
});

Answer 3

Answer №2

In order to successfully complete this task, it is crucial that you create a function that can return a promise. If AngularJS is your preferred framework, it is recommended to utilize $q for this purpose. However, other methods should work just as effectively.

var customFunction = function(input) {
   return $q.resolve(input);
};

spyOn(someFunction, 'methodName').and.callFake(customFunction({
   input: 'desired_output'
}));

Answer 4

In order to successfully complete this task, it is crucial that you create a function that can return a promise. If AngularJS is your preferred framework, it is recommended to utilize $q for this purpose. However, other methods should work just as effectively.

var customFunction = function(input) {
   return $q.resolve(input);
};

spyOn(someFunction, 'methodName').and.callFake(customFunction({
   input: 'desired_output'
}));

Retrieving the return value from a function within a promise using spyOn in a Jasmine unit test for an

Answer №1

Answer №2

Similar questions

Creating glitchy dotted lines in an HTML Canvas with the help of translate and scale techniques

Is there a way to incorporate vue samples into an independent HTML document?

When you drag and drop multiple items, the entire data set is erased

creating interactive tabs using data from json sources

What is the reason for the error that Express-handlebars is showing, stating that the engine

Exploring the contents of an array in ReactJS

AngularJS fails to fetch data from API queries

Mobile devices seem to be constantly refreshing website images

Having trouble getting data to send to node.js server using $.ajax post

Error message: "Module not found" encountered while executing test case

What could be causing the audio file not to be received from the front end React to the Python server?

Transform JSON data into HTML format while excluding particular values

Processing images with PHP from an array using AJAX

What could be causing the discrepancy in results between the first and second methods?

Step-by-step guide on how to showcase elements within v-for by clicking on them

Why is my React build's index.html coming up empty?

Unable to load images on website

Place the `service` parameter into the `run` function

Building an app using Cordova, Phonegap, or Ionic to store remote images locally

Frontend utilizing the Next-auth Github Provider for Profile Consumption