Unit testing promises in Angular using Jasmine

My goal is to create a unit test that demonstrates the process of combining two promises using $q.all in Angular, and then confirming that both promises are resolved simultaneously.

  describe("Application controller", function() {
    var scope;
    var controller;

    beforeEach(module('my.namespace'));
//this suite can be removed.
    describe("Application ", function() {
        beforeEach(
            inject(function ($rootScope, $controller,$q) {
                scope = $rootScope.$new();
                controller = $controller('Application', {
                    '$scope': scope
                });
            }));


        it("should merge two promises into one", function (done) {
            inject(function ($rootScope) {
                setTimeout(function () {
                    $rootScope.$apply(function () {
                        var promiseOne = $q.defer(),
                            //promiseOneData;
                            promiseTwo = $q.defer();
                            //promiseTwoData
                        promiseOne.then(function(data){
                            promiseOne.resolve('promiseOne');
                            expect(1).toBe(1);
                        });
                        promiseTwo.then(function(data){
                            promiseTwoData.resolve('promiseTwo');
                        })
                        var allPromises = $q.all([promiseOne,promiseTwo]);
                        allPromises.then(function(data){
                            //data should contain an array of two empty elements for each promise
                            expect(data.length).toBe(2);
                        });
                        done();
                    });
                }, 1000);


    })
});

However, I encounter an error message:

Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
My intention is not to execute any actual HTTP requests here; rather, I simply want to ensure that two promises are resolved before merging them into a single promise. How can this be achieved with Angular and jasmine?

Answer №1

It appears that your intention is to utilize a spy to determine if it has been invoked or not.

describe('test $q', function() {
  var
    $scope;
    $controller;
    $httpBackend;

  beforeEach(function() {
    module('myModule');
    inject(function(_$rootScope_, _$controller_) {
        $scope = _$rootScope_.$new();
        $controller = _$controller_;
        $controller ('MyCtrl', {
          $scope: $scope
        });
    });

  it('should verify that $q.all triggers the callback once dependent promises are fulfilled', function() {
    var deferOne = $q.defer(),
        deferTwo = $q.defer();
        combinedSpy = jasmine.createSpy('combined');    

    $q.all([deferOne.promise, deferTwo.promise]).then(combinedSpy);

    expect(combinedSpy).not.toHaveBeenCalled();
    deferOne.resolve();
    deferTwo.resolve();
    $scope.apply();
    expect(combinedSpy).toHaveBeenCalled();
  });

The title of this test might be misleading as you are not emulating a promise, but instead testing one. Additionally, there is no need for you to write tests for $q since Angular itself already includes such tests.

consolidating them using $q.all

This action creates a third promise which only resolves when both initial promises, A and B, have resolved.

confirming that the promises are simultaneously resolved

Due to JavaScript being single-threaded, the promises cannot resolve simultaneously. The third promise generated by $q.all() will only resolve after both A and B are individually resolved. There may be a delay between these resolutions.

For example, if A is resolved first followed by B an hour later, then C ($q.all) will only resolve in the subsequent digest cycle (triggered by $scope.apply()).

Answer №2

Here is the response given by the original poster and inserted into the question:

it("Testing promise simulation",inject(function($q, $rootScope){
            var deferred = $q.defer();
            var promise = deferred.promise;
            var resolvedData;
            promise.then(function(data){
                resolvedData  = data;
            });
            
            expect(resolvedData).toBeUndefined();
            
            var testObject = {
                id: '123',
                name: 'suebalu',
                database: '234',
                folder: 'c:',
                version: '1.2',
                file: 'previewPubFile',
                date: '2009-01-01'
            };

            deferred.resolve({
                id: '123',
                name: 'suebalu',
                database: '234',
                folder: 'c:',
                version: '1.2',
                file: 'previewPubFile',
                date: '2009-01-01'
            });
            $rootScope.$apply();
            expect(resolvedData).toEqual(testObject);
        }));

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

Ways to ensure that the height of the second row in the second column matches that of the first column

My current layout design is causing an issue where the lower green box extends beyond the total height of the entire box. I've provided a rough version of my code on codepen. Using the Bulma framework, my goal is to align the height of the left column ...

The loading animation does not appear in the NextJS 14 - loading.tsx component while a GET request is being processed

Component with 500 photos displayed on my page: 'use client'; import { useEffect, useState } from 'react'; import { wait } from '@/components/loaders/skeletons'; export default function Postings() { const [photos, setPhotos ...

Listen for events in a child process in NodeJS

I am currently utilizing the node child_process API https://nodejs.org/api/child_process.html#child_process_child_process_spawn_command_args_options var child = child_process.spawn(cmd, val, options); Within the child process, I make use of the followin ...

Please be patient and allow the function to complete before moving forward

Currently, I am in the process of building my first nodejs/DynamoDB application and it involves working with JavaScript for the first time. My goal is to save a new record after scanning the table and using the results of the scan as a basis. After doing s ...

After executing webpack, it has been noticed that one of the dist files consistently ends up empty

As someone who is new to webpack, I have successfully used the quick start guide to process a simple JS file from src to dist. Everything was working fine. However, I encountered an issue when trying to process more than one JS file. The original tutorial ...

The unit tests encountered a ValueError due to the absence of the module called 'notmigrations'

I am currently working on a Django application version 2.1.7 with the django-tenant plugin to create schemas in the database for SAAS purposes. My main issue lies with unit testing. Whenever I run the command: python manage.py test --settings=project.sett ...

Loop through the array of objects using ng-repeat and generate input forms

[{"id":1,"inputfieldbox":[{"id":1},{"id":2}]},{"id":2,"inputfieldbox":{"id":1}}] I plan to implement NG-repeat for form iteration. The inputfield box represents the amount of input boxes I will include, while id indicates the number of field groups requi ...

Testing with unittest is a superior option compared to using the assertIn function

Imagine having a lengthy output list that needs to be tested. To do this, you decide to create a sample list with random elements that you believe should also be present in the output list. After consulting the documentation, you attempt to write the follo ...

Having trouble setting up npm package (fsevents) on Mac OS Catalina?

I'm facing an error when trying to run the npm install express --save command. Can someone assist me in resolving this issue? The error message is as follows: > email@example.com install /Users/delowar/Desktop/ytdl/node_modules/chokidar/node_modu ...

Make the minimum height of one div equal to the height of another div

My query is somewhat similar to this discussion: Implementing a dynamic min-height on a div using JavaScript but with a slight twist. I am working on a dropdown menu within a WordPress site, integrated with RoyalSlider. The height of the slider div adjust ...

How to ensure onmouseenter and onmouseleave work properly in Chrome using HTML, JavaScript, and jQuery

<div style="position: relative; left: 50px; top: 30px; width: 300px; height: 150px; background: #222222;" onmouseenter="this.style.background='#aaaaaa'" onmouseleave="this.style.background='#222222';"></div> http://jsfiddle ...

What is the best way to position my logo on top of the stunning space background?

Click here to check out the code on CodePen Please take a look at my code on codepen.io. I am new to Stack Overflow so please be patient with me if I make any mistakes. ;-; I currently have my logo (https://i.stack.imgur.com/W0nWc.png) included in the co ...

What causes the appearance of a nested URL like '/auth/auth/ ' when the original URL does not exist?

While following a tutorial, I encountered an issue where if the URL is not included in the routes.ts file, it redirects to a nested /auth/auth/...../login/ instead of redirecting to localhost:3000/auth/login middleware.ts import authConfig from "./au ...

Using SimplyJS and XML: extracting the value of a specific key

Hey there, I wanted to update you on my progress with the Pebble Watch project. I've switched over to using an official external API to make HTTP requests for values, and now I'm receiving results in XML format instead of JSON. Here's a ...

Encountering the issue "Unable to define properties of undefined" during Angular unit testing tasks

When attempting to write a unit test case for a dropdown, an error is encountered: TypeError: Cannot set properties of undefined (setting 'ReferralCodes') .spec.ts it("should update the action selecting a value from category drop down", ...

Setting up a React application and API on the same port: A step-by-step guide

I have developed a React app that fetches data from a separate database through an API. While testing the app locally, it runs on one port while the API runs on another port. Since I need to make AJAX calls from the app to the API, I have to specify the ...

Tips for preventing the unmounting of child components while utilizing JSX's map function

This is a condensed version of a question I previously asked. Hopefully, it's clearer and more comprehensible. Here is a simple application with 3 input fields that accept numbers (disregard the ability to enter non-numbers). The app calculates the s ...

Struggling with jquery .append issue

Here is the HTML code snippet: <div class="expand"> <div class="title" id="SectionTitle2">Academics</div> <input type="button" onclick="showTitleForm('2');" name="editTitle2" value="Edit Title"> <form id="titleForm2" m ...

Organizing entries based on the quantity of attached documents

I am currently working with mongodb and mongoose. I have a situation where users can create ratings and reviews for products. I want to retrieve the review of the product that has received the highest number of votes. Is this achievable in mongo? The data ...

Having trouble with submitting an Ajax form to a MySQL database

My expertise lies in PHP and HTML, but I'm currently learning JavaScript. I'm facing a challenge with creating a form that can submit data to be inserted into MySQL without reloading the page (using AJAX). Here is the form I have: <form id=" ...