Issue in Jasmine test: 'Spy should have been invoked'

I've encountered an issue while writing a Jasmine test case for the following Angular function. The test case failed with the message "Expected spy [object Object] to have been called".

    $scope.displayTagModelPopup = function() {
        var dialogOptions = {
            templateUrl: 'views/mytags.html',
            controller: 'TagsCtrl',
            size: 'lg',
            resolve: {
                tagsAvailable: function() {
                    return $scope.availableTags;
                }
            }
        };

        ModalDialogFactory.showDialog(dialogOptions).then(function(result) {
            $scope.selectedFields = [];
            $scope.selectedFieldIds = [];

            angular.forEach(result, function(tag) {
                $scope.selectedFields.push(tag);
                $scope.selectedFieldIds.push(tag.objectId);
            });
        });
    };

My Jasmine Test case

it('should call displayTagModelPopup', function() {
    var dialogOptions = {
        templateUrl: 'views/mytags.html',
        controller: 'TagsCtrl',
        size: 'lg',
        tagsAvailable: [{
            objectId: "c647abc7-f651-4df6-880d-cf9fb69cdcb0",
            dataFieldName: "author",
            shortNamePath: "$.author",
            templates: ["HaM sheet"]
        }]
    };
    var spy = jasmine.createSpy(modalDialogFactory, 'showDialog').and.callFake(function(data) {
        $scope.tags = [{
            objectId: "c647abc7-f651-4df6-880d-cf9fb69cdcb0",
            dataFieldName: "author",
            shortNamePath: "$.author",
            templates: ["HaM sheet"]
        }];
        return $scope.tags;
    });

    $scope.displayTagModelPopup();
    $scope.$digest();
    expect(spy).toHaveBeenCalled();

});

Encountering the error below: "Expected spy [object Object] to have been called. Error: Expected spy [object Object] to have been called."

Any insights on what might be causing the issue in my test case? Did I miss something?

Thank you in Advance!!!

Edited: Modified my Jasmine test case as shown below and now receiving a different message ''undefined' is not a function (evaluating 'ModalDialogFactory.showDialog(dialogOptions).then')'

Checked if ModelDialogFactory is defined or not but ModalDialogFactory.showDialog method is defined successfully. The test case fails only when the method '$scope.displayTagModelPopup();' is called.

it('should call displayTagModelPopup', function() {

    spyOn(ModalDialogFactory, 'showDialog').and.callFake(function() {
        $scope.tags = [{
            objectId: "c647abc7-f651-4df6-880d-cf9fb69cdcb0",
            dataFieldName: "author",
            shortNamePath: "$.author",
            templates: ["HaM sheet"]
        }];
        return $scope.tags;
    });
    var dialogOptions = {
        templateUrl: 'views/mytags.html',
        controller: 'TagsCtrl',
        size: 'lg',
        tagsAvailable: [{
            objectId: "c647abc7-f651-4df6-880d-cf9fb69cdcb0",
            dataFieldName: "author",
            shortNamePath: "$.author",
            templates: ["HaM sheet"]
        }]
    };
    //expect(ModalDialogFactory).toBeDefined();
    //expect(ModalDialogFactory.showDialog).toBeDefined();

    $scope.displayTagModelPopup();
    $scope.$digest();

});

Answer №1

If you are looking to monitor a method of an existing object, the recommended approach is to use the spyOn helper (docs):

spyOn(modalDialogFactory, 'showDialog').and.callFake(...);

When using this helper, the first parameter should be the object and the second parameter should be the name of the method. This will replace the existing method of the object with a spy object.

To verify if the spy was called, you can pass it to expect():

expect(modalDialogFactory.showDialog).toHaveBeenCalled();

The other helper, jasmine.createSpy(), is used to create a basic spy that can be passed as a callback to ensure it will be invoked (docs). With jasmine.createSpy(), you only need to provide the name of the spy for test result identification, hence no spy is attached to your object.


Update:

In your initial code snippet, there's a line:

ModalDialogFactory.showDialog(dialogOptions).then(function(result) { ... });

It appears that showDialog() is followed by then(), suggesting that the original showDialog() likely returns an object with a then() method, possibly a Promise. However, in your test where you spy on showDialog() and use callFake(), you aren't returning anything with a then() method, leading to the error indicating the method is undefined. The spy fully replaces the original method, and in conjunction with callFake(), it reproduces the original behavior.

To address this, from within callFake(), you should return something that simulates a Promise, for example:

spyOn(ModalDialogFactory, 'showDialog').and.callFake(function() {
    // ....
    return {
        then: function (cb) {
             cb($scope.tags);
        }
    };
});

In this implementation, an object with a then() method is returned, and when invoked with a function as an argument, the function serves as a resolved callback containing the value of $scope.tags which can be utilized inside that callback.

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

Tips for adapting the position of a floating div according to its height and environment

Important Note: The code below utilizes the rubuxa plugin for handling JS sortables. Javascript: function querySelector(expr){return document.querySelector(expr)} var container = querySelector('.ITEST'); var sortable = Sortable.create(container, ...

The ng-include directive is having trouble finding the partial HTML files

I've been working on setting up a basic tabset with each tab pulling content from a separate partial view with its own controller. To test everything out, I created three dummy HTML files with simple text only. However, I'm having trouble getting ...

Tips for creating a reusable function in React.js?

I have a script that executes on input focus and passes certain values based on a specific logic. I would like to reuse this script for multiple input fields that trigger the focus event. How can I accomplish this? This is my current script: <input ...

The conditional ng-class styling will be applied to each and every div on the page

For a patient, I have a modal displaying a list of card numbers. If the card is set as the default card, it should have a grey background, based on a true value for the object. <td ng-repeat="obj in paymentAndShipping"> <div ng-click= ...

Fetching data from Page 1 and passing it to Page 2 using Javascript

I'm currently experiencing an issue with my AJAX function where it needs to transfer a value from page 1 to page 2 for storage. Let's start with the AJAX function on page one: top.location.href = 'http://www.something.com/redirect.php?emai ...

A function similar to setCell for modifying form fields in JqGrid

After searching through numerous answers from @Oleg, I couldn't find the solution I was looking for. I am dealing with a grid where I can edit inline in certain fields. Specifically, I am working with autocomplete functionality and when I select an it ...

Where could I be missing the mark with AngularJS?

After following some tutorials, I managed to create my first test app. However, it doesn't seem to be working properly. The main objective of the app is to extract product information from a JSON file and display it using ng-repeat. Here are the rele ...

Manipulate the label content of the last child using Javascript

On my BigCommerce website, I am trying to change the label text of a variable using a JavaScript function since the support team is unable to assist with this. Below is the code snippet that needs modification: <dd class="GiftCertificateThemeList" st ...

Discover the process of connecting a REST controller with AngularJS and Spring

I have a list of file paths stored in an array within the scope variable of an AngularJS Controller. My goal is to properly map these file paths to a Java REST controller for further processing. When I pass it as "/ABC/Scope-Variable," it successfully ma ...

JSONP error: "Syntax error - token not expected"

While attempting to perform a JSONP AJAX request, an error was thrown: Uncaught SyntaxError: Unexpected token I'm puzzled about what is wrong in my code. Can someone assist? $.ajax({ url: 'http://api.server32.trustklik.com/apiv1/website/ ...

Angular: the directive following the expression

Here is a directive and its corresponding definition that I'm working with: <div editor> {{markdown.html}} </div> The directive editor() looks like this: function editor() { return { restrict: "A", link: function (scope, ele ...

The JSON object is not providing the length of the array, returning the value as

I'm currently fetching JSON data from a PHP file in the following manner: $.getJSON('fresh_posts.php',function(data){ global_save_json = data.freshcomments; var countPosts = data.freshposts; var howManyPosts = countPosts.length; ...

Socket.on seems to be malfunctioning

Currently, I am in the process of creating a message board for practice purposes and have successfully implemented notifications and a chat application using socket.io. My next goal is to add basic video call functionality, but I have encountered some dif ...

Ways to verify if an element includes a specific class in JavaScript

When the mouse hovers over each paragraph within the DIVs with the "change" class, the font color should turn red, and revert back to black when the mouse is not on them. Here's my current code: var paragraphs = document.getElementsByTagName('p& ...

Creating a custom loading page in Next.js 13: A step-by-step guide

Hello, I am currently working on implementing a loading page for my website to enhance the user experience during a longer loading time. I have created a simple functional component that displays a loading message and imported it into my layout.jsx file in ...

Utilizing jQuery UI autocomplete with AJAX and JSON data sources

I've been facing an issue with the jQuery UI autocomplete feature, and despite extensive research, I have only managed to partially resolve it. The code below is what I'm currently using to make it work: $("#term").autocomplete({ source: fun ...

The browser Firefox/Chrome managed to survive for more than 2000 milliseconds before finally succumbing and receiving a SIG

When I run ng test in my local Angular project (v10), all the test cases pass successfully and the browser launches with green dots appearing. However, at the last moment, the browser is unexpectedly terminated with a warning displayed in the command promp ...

Is it possible to use speech recognition on browsers besides Chrome?

Is there a way to utilize a microphone with JavaScript or HTML5 without relying on Flash technology? I was able to achieve this in Chrome by using webkit-speech, but I am looking for solutions that will work in other browsers as well. Any suggestions wou ...

Maintaining focus on UI grid cellTemplate editableCellTemplate is not a problem

Currently, I am utilizing angular-ui-grid and attempting to display a mix of various cell templates. Specifically, I want certain grid cells to change their class/color based on the entity's property. Additionally, some cells should display a button t ...

Unable to trigger jQuery onclick event on nested div elements

I'm experiencing an issue with my web-page where two buttons at the top are not responding to a sorting function on the nested #byFilter. Despite trying to apply the onclick(function()) method, it doesn't seem to work. Javascript $(document).re ...