Unit testing for changes in AngularJS $scope variables within the .then() function

I'm currently facing an issue with unit testing a function in my controller. The problem lies in making a $scope variable testable. I am assigning the variable within the .then() block of my controller and need to ensure it is set correctly when the .then block is executed.

This is the snippet of my controller code:

function submit() {
    myService.submit().then(function(responseData){
        if(!responseData.errors) {
            $scope.complete = true;
            $scope.details = [
                {
                    value: $scope.formattedCurrentDate
                },
                {
                    value: "$" + $scope.premium.toFixed(2)
                },  
            ];
        } else {
            $scope.submitError = true;
        }
    });
}

The specifics of where this service call leads are not important. It will return JSON with

action: 'submitted', 'response' : 'some response'
. The .then() method checks for errors in the responseData, and if none are found, it should set certain details. I am attempting to test these $scope.details in my unit test below:

it('should handle submit details', function () {
    var result;
    var premium = 123.45;
    var formattedCurrentDate = "2016-01-04";
    var promise = myService.submit();
    mockResponse = {
        action: 'submitted',
        response: 'some response'
    };
    var mockDetails = [
        {
            value: formattedCurrentDate
        },
        {
            value: "$"+ premium.toFixed(2)
        }   
    ];

    //Resolve the promise and store results
    promise.then(function(res) {
        result = res;
    });
    //Apply scope changes
    $scope.$apply();
    expect(mockDetails).toEqual(submitController.details);
}); 

Now, I am encountering an error stating that $scope.details is undefined. I am unsure how to make the test recognize the change in $scope data within the controller.

In the beforeEach section and other functions in my unit test:

function mockPromise() {
    return {
        then: function(callback) {
            if (callback) {
                callback(mockResponse);
            }
        }
    }
}

beforeEach(function() {
    mockResponse = {};
    module('myApp');

    module(function($provide) {
        $provide.service('myService', function() {
            this.submit = jasmine.createSpy('submit').and.callFake(mockPromise);
        });
    });

    inject(function($injector) {
        $q = $injector.get('$q');
        $controller = $injector.get('$controller');
        $scope = $injector.get('$rootScope');
        myService = $injector.get('myService');

        submitController = $controller('myController', { $scope: $scope, $q : $q, myService: myService});
    });
});

What steps can I take to resolve the promise within my unit test so that I can use $scope.$digest() to observe the changes in the $scope variable?

Answer №1

If you're interested in testing promises with jasmine, check out this helpful resource:

Utilizing a callFake can help you mock the behavior you desire.

spyOn(myService, 'submit').and.callFake(function() {
  return {
    then: function(callback) { return callback(yourMock); }
  };
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 2 doesn't reflect changes in component variables in the view until mouseover happens

Since updating from angular2-alpha to the latest version, I've noticed that when a boolean value changes in my *ngIf directive, it doesn't reflect in the view until certain actions are taken. Here is the specific component code: declare var CKE ...

Efficiently incorporate a set of fields into a form and automatically produce JSON when submitted

The optimal approach for dynamically adding a set of fields and generating JSON based on key-value pairs upon form submission. <div class="container"> <div class="col-md-4"> <form method="POST" id="myform"> <div class="f ...

Each block in Svelte includes a unique shorthand attribute

I have a JSON variable that holds attributes in a specific structure: // This json variable defines the attributes for elements to be created let myElements = [ { attr1: "myAttr1", attr2: "myAttr2", }, { ...

What steps are involved in deploying a Vue.js application on a tomcat server?

Is it possible to deploy a vue.js application on a server using tomcat? If so, how can this be done? ...

Gradient on multiple faces in Three.js

I'm currently struggling with creating an HSV cylinder using three.js. I am facing difficulties in properly mapping the gradient to the faces of the cylinder. Initially, I attempted to create my object in this manner: https://i.sstatic.net/WboAE.png ...

Protractor: What is the best way to retrieve the baseUrl from the command line input?

How can I retrieve the baseUrl that was passed through the command line in Protractor? For example: protractor conf.js --baseUrl=http://myawesomesite.com I attempted to use browser.baseUrl to access the baseUrl set in my conf.js file, but it does not see ...

I'm attempting to integrate the map function into my React Redux application, but after implementing useDispatch, I'm encountering an error message in the console

I am currently troubleshooting an app I'm working on, but I keep encountering errors in the console. Included below is a picture of the error as well as the code snippet triggering the issue. Can anyone provide insight into what might be causing this ...

Tips for avoiding the automatic transition to the next slide in SwiperJS

How can I prevent the next button click in swiper based on my custom logic? I am using the swiperjs library within a Vue project and I need to stop users from swiping or clicking the next button to move to the next slide depending on certain conditions de ...

Enhance your Vue PWA by utilizing ServiceWorker to efficiently cache remote media assets fetched from an array of URLs

In my PWA development project, I am looking to provide users with the option to download and cache all media assets used in the application. However, the default behavior of PWAs only caches assets when they are requested during app navigation. My goal is ...

Why is this chip-list not functioning properly in my Angular 14 and Angular material application?

I'm currently developing a form using Angular 14. My goal is to incorporate a field with Angular Material chips. Within the component's Typescript file, I have the following code: constructor(private fb: FormBuilder,) { } public visible: boole ...

PHP echo functions are not functioning properly in a dynamically loaded PHP page through jQuery's .load function

Within my WordPress installation, I have index.php and desktop.php files. The goal is to load desktop.php into #tLoad only if the browser window width is greater than 800px. While this works fine, I am encountering issues when trying to use PHP functions a ...

Declare the push method within the Countly.q array in a TypeScript declaration file

Is there a way to declare Countly push add_event method in the following manner? Countly.q.push(['add_event',{ "key":"action_open_web", }]); I attempted to do this inside a declaration file (.d.ts) but it did not work. Here ...

Is it possible to create two header columns for the same column within a Material UI table design?

In my Material UI table, I am looking to create a unique header setup. The last column's header will actually share the same space as the previous one. Picture it like this: there are 4 headers displayed at the top, but only 3 distinct columns undern ...

Configuring vue-jest: Does anyone know how to set up aliases for template/script src attributes in Vue?

Dependencies: "@vue/cli-plugin-unit-jest": "^4.5.13", "@vue/test-utils": "^1.2.1", "vue-jest": "^3.0.7" I am dealing with an application that utilizes an alias (referred to as "foo") de ...

Refresh Vue/Nuxt Components Fully

Understanding how this.$forceUpdate() functions, I am not simply looking to re-render the component. In Nuxt applications, page components have asyncData() as a lifecycle method that runs before created(). I utilize this method to retrieve initial data an ...

Page loading issue with Angular JS ng-controller not functioning

I am encountering an issue with my module "testControllerModule" where the defined controller 'myCtrl' is not functioning properly when the page loads. The controller is supposed to display table data with pagination. <div class="row"> ...

Unable to interact with a button through JavaScript using execute_script in Selenium

https://i.stack.imgur.com/hJmtK.png I am attempting to remove a cookies popup by accepting the cookies and clicking confirm. While I am able to click an input labeled "zgadzam się na", for some reason, clicking a button with the label "potwierdź" appears ...

Tips for building an interactive button with changing content and retrieving variable information when the button is clicked in an Angular framework

Received dynamic data from the server is shown below: { "data": [ { "id": 4, "first_name": "Eve", "last_name": "Holt", "lat":"25.6599899", "lng":"45.3664646", "status":"0" ...

Include the <script> tag in the HTML code for an iframe without running it

Currently, I am working on an HTML code that involves memory for an Iframe. Interestingly, whenever I use the append function, it not only executes the code but also carries out its intended task. html = $(parser.parseFromString($("#EHtml").val(), "text/h ...

Programmatically control the opening and closing of a React Material UI Snackbar component

Currently, I am facing some challenges while working on programming a Single Page Application (SPA) using React and Material-UI. In my project, I have created a modal login box that gets triggered by a button on the navigation bar. Upon clicking submit, I ...