SinonJS - Retrieving Property Value Prior to Stub Invocation

Currently leveraging sinon.js for stubbing functionalities where it is feasible to stub and spy on methods but not properties based on my observations.

I'm interested in knowing if there's a way to verify whether state.searchText gets assigned the value of state.suggestion prior to invoking submit in the given example:

   // utilizing angular at present, though relevant for vanilla js as well
   $scope.searchSuggestion = function() {
        this.state.searchText = this.state.suggestion;
        this.submit();
    };

Optimal testing snippet would be:

it('should set the searchText to be the suggestion', function(){
        // arrange
        sinon.stub(scope, 'submit');
        scope.state.searchText = 'old value';
        scope.state.suggestion = 'new value';
        // act
        scope.searchSuggestion();
        // assert
        expect(scope.submit.called).to.be(true) 
        // ~uncertain about verifying searchText being set first
    });

Answer №1

I recently encountered a similar issue and wanted to share my solution, despite the question being quite old.

What worked for me was replacing the existing function with one that includes an assertion. Here's an example of how you can approach it:

it('should set the searchText to be the suggestion', function(){
    scope.state.searchText = 'old value';
    scope.state.suggestion = 'new value';

    scope.submit = function() {
      expect(whatever).to.equal(somethingElse);
    };

    scope.searchSuggestion();
});

By implementing this method, you can verify preconditions when the submit function is called using any assertion you prefer. However, keep in mind that you may need to add additional code to revert to the original function state. Also, if the function is never executed, the test will pass without detecting a failure - consider adding a done() callback as a precaution.

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

Implementing bidirectional data binding with Semantic UI's search dropdown feature in Vue.js

I'm currently facing an issue with the Semantic-UI searchable dropdown and Vuejs data binding. It seems like only one changed option is being model-bound, no matter which dropdown option I select. Here's a snippet of my code. I attempted to use ...

A more detailed explanation of Angular's dot notation

I came across a solution for polling data using AngularJS here on stackoverflow. In this particular solution (shown below), a javascript object is used to return the response (data.response). I tried replacing the data object with a simple javascript arra ...

Choosing multiple items using ng-checked and ng-model in AngularJS

I am working with an Ionic application and encountering a minor issue, much like AngularJS. <ion-list class="list-inset subcategory" ng-repeat="item in shops"> <ion-checkbox class="item item-divider item-checkbox-right" ng-model="selectAll" ...

Jspsych: Centering and aligning 3 p tags to the left on the page

Feeling pretty stuck at the moment. Here's what I have visually right now: I added a caption in Comic Sans and an arrow using MS Paint. Each line with color swatches is wrapped in a p tag. The goal is to center these p tags on the page (as they are ...

Modifying the text within the label of a multibarchart in nvd3.js

After analyzing the multibarchart in nvd3.js, I have discovered that it requires a specific JSON format as input. [ { "key": "abcd", "values": [ { "x": 1221578789000, "y": 40 }, { "x": 1222578789000, ...

Transforming the button behavior with jQuery

I have encountered a situation where I am working with code in Twig. {% if followsId == null %} <div id="followUser" class="follow" data-userId="{{ profileUserData.id }}" data-currentUserId="{{ loggedUserData.id }}" data-action="follow"> ...

Obtaining a parameter from @PathVariable in an AngularJS controller

Recently, I have acquired knowledge about Angular.js. I am experimenting with using Angularjs to bind an object with a form. I have a scenario where there is a list of items and when a user clicks on one, the app navigates to a Spring controller: @Request ...

Setting a default value in a dynamic dropdown using AngularJS

I could really use some assistance with my issue as I am fairly new to working with AngularJS. My dilemma is related to setting the default value in a select option when there is only one item available due to it being a dynamic select option. Though there ...

Unable to find the desired match with Regex

I'm attempting to use a regex to replace content within brackets, but I'm encountering an unexpected result. This is the text I'm trying to target: Foo (bar) Below is the regex pattern I am using: /(?=\().*(?=\))/ My expectati ...

The React application is being continuously accessed by a node.js server and processed within async functions

Currently, I am utilizing React, MongoDB, Node.js, and Express in my project. The specific scenario I am facing involves the following code snippet within my component: renderWishlist(){ var quantity; var itemID; var tmp; var my ...

The second parameter of the filter function is malfunctioning

I'm currently delving into the "filter" function in AngularJS. Upon reviewing the documentation, I've discovered that it can also take a second parameter. When set to "true", it carries out a strict comparison. HTML <fieldset> <leg ...

Accessing the external function parameter inside of the $timeout function

Currently, I am using SockJS to listen to websocket events and receive objects that I want to insert into my $scope.mails.items array. The issue I am facing involves the code snippet below. For some reason, I am unable to pass the message parameter into my ...

React Native has encountered an issue with an undefined object, resulting in an error

I have a JSON file with the following structure: { "main": { "first": { "id": "123", "name": "abc" }, "second": { "id": "321", "name": "bca" } } } Before making an AP ...

Dynamically showcasing content in an HTML table

Having trouble with this code snippet. It's supposed to iterate through array objects and display them in an HTML table. The third row should have buttons, but nothing is showing up. Can you spot the issue? Here's the HTML code: <html> & ...

Ways to emphasize an HTML element when clicked with the mouse

Can JavaScript be used to create code that highlights the borders of the HTML element where the mouse pointer is placed or clicked, similar to Firebug, but without needing a browser extension and solely relying on JavaScript? If this is possible, how can ...

Leveraging Expressjs to act as a proxy for handling cross-origin requests made via AJAX

I'm working on a website that relies entirely on external APIs, without any server-side logic. All data will be retrieved from an external API. The backend server is mainly used for asset management and routing. We've decided to use nodejs with e ...

Deleting lines from JSON object using Angular or JavaScript

On my webpage, I have a list where you can add a new line by pressing the "+" button (easy with push), but I'm not sure how to remove lines using the "X" button. https://i.stack.imgur.com/nm06A.png This is the JSON structure: "priceExtra" : [ ...

Guide to Including an Object in AngularJS Scope

I am completely new to Angular JS and mongod. My goal is to add a new ingredient field to this page for the specific drink that the + button is clicked on. Here is how my view looks like: UI Image This is what my .jade file contains: block content ...

Unable to retrieve value 'includes' from null object

Currently, I am utilizing Vue.js along with JavaScript. In my code, there is an array of objects named products, each containing a special property called smallest_unit_barcode. My goal is to filter out only those products that have a barcode similar to a ...

Adjust the dimensions of the thead, tbody, and td elements on the fly

I've implemented this property in a .css file on the table shown below and there are 9 records. .fixed tbody td, thead th { width: 5.2%; float: left; } In my scenario, when there are 4 columns, the width should be 23.2%; for 5 columns ...