Questioning the way spyOn "halts all execution of a function" is described in the Jasmine documentation (specifically in the section on Spies in version 2.2)

I am struggling to comprehend the last test in the Jasmine 2.2 documentation which showcases the basic usage of Spies.

In the beforeEach() section, we initialize bar = null, then we spy on foo.setBar and proceed to call foo.setBar twice. I am puzzled as to why bar === null in the final test. Shouldn't it be bar === 456 before the spy is removed for the test?

Here is the scenario:

describe("About a Spy", function(){
  var foo, bar = null;

  beforeEach(function() {
    foo = {
      setBar: function(value) {
        bar = value;
      }
    };

    spyOn(foo, "setBar"); // we spy

    foo.setBar(123); // shouldn't bar === 123 here?
    foo.setBar(456, 'another param'); // and bar === 456 here?
  });



  it("stops all execution on a function", function() {
    // What, why, how?
    expect(bar).toBeNull();

    //I expected this to be the case, but it's not.
    //expect(bar).toBe(456);
  });
});

I seem to be misinterpreting how the beforeEach function sets up and clears the variable scope, or maybe there is a point where the variables within the describe block get reset? Or maybe they were never actually altered because we only used the spy function and not the actual function?

It would be greatly appreciated if someone could clarify what exactly is happening with the variable bar in this test suite so I can understand why its value remains null in the last test.

Thank you!

Answer №1

Upon closer inspection, one may notice that spyOn function replaces the original function with a spy that is able to intercept function calls and keep track of useful information about them. However, the downside is that once the original function is replaced, its original capabilities are lost. This issue can be resolved by using andCallThrough. By chaining andCallThrough() after spyOn, the spy will then redirect any calls to the original function.

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

Is there a way to invoke a function once grecaptcha.execute() has completed running, but in response to a particular event?

Presently, the JavaScript function grecaptcha.execute is triggered on page load, as shown in the first example below. This means that the reCAPTCHA challenge occurs as soon as the page loads. A more ideal scenario would be to trigger it when the form submi ...

How to retrieve the content/value from a textfield and checkbox using HTML

I'm encountering an issue with my HTML code where I am unable to extract data from the HTML file to TS. My goal is to store all the information and send it to my database. Here is a snippet of the HTML: <h3>Part 1 : General Information</h3 ...

Issue: The system is unable to locate the module labeled './lib/binding/napi-v3/argon2.node'

After attempting to install bcrypt or argon2 with the command npm install --ignore-scripts --omit=dev, an error occurred: app-1 | node:internal/modules/cjs/loader:998 app-1 | throw err; app-1 | ^ app-1 | app-1 | Error: Cannot find modul ...

What is the correct way to update an empty object within the state using setState?

I'm currently dealing with a state that looks like this: this.state={ angles:{} } I need to know how to use setState on this empty object. Specifically, if I want to add a key and value inside my empty 'angles'. How can I achieve that? Fo ...

In order to preserve the data inputted by the user within a file

Check out this HTML code snippet:- ` AngularJS | $http server <div ng-controller="people"> <ul> <h2> Names and Ages of programmers: </h2> <li ng-repeat="person in persons"> { ...

All outcomes being displayed from Youtube's json feed

Currently, I am retrieving a youtube playlist by using the following link: I'm curious if there is a method to display all 250 videos from my feed instead of just the 25 that are currently being shown. Any assistance on this matter would be highly a ...

How to reposition the Bootstrap navbar Logo from the left to the center

I am looking to change the ordering of Bootstrap 4 Navbar. Currently, the logo is on the left side, but I want it in the center with menus on both sides. Can someone help me with changing this order? Check out the current Navbar layout below: <nav c ...

Strategies for injecting data into VueJS components after the page has fully loaded

My project utilizes Vue.js and Nuxt.js, and within the settings page, users can modify their personal settings. This single page allows users to navigate between tabs. <template> <div class="account-wrapper"> // Code content he ...

Sending data to API using AngularJS Http Post

Upon clicking "Add new User", a modal pop-up will appear with a form containing a text field and a checkbox. However, upon clicking the create button, the data is not being posted to the API and the modal pop-up remains open without closing. I would like ...

unable to properly assess the functionality of the timeout feature within the useEffect hook

I've been working on a lazyload image loader component that only loads images if they have been visible for more than 500ms. Although the functionality is working as expected, I'm facing challenges when it comes to writing a test to validate its ...

Guide to integrating Firebase token authentication with a web API2 controller

In order to pass a Firebase authentication token to a web API controller, I am following steps outlined in this StackOverflow post: stackoverflowpost The bearer token is included in the $http request headers. https://i.sstatic.net/GTJz0.png Despite addr ...

Guide to activating the 'Next' button on WP Forms using JavaScript code when certain conditions are fulfilled

Is there a way to adjust the JavaScript code provided so that the visibility of the "Next" button is dependent on whether at least one item in the 'wpforms-icon-choices-item' class has the '.wpform-selected' class on the current page or ...

Display and conceal elements within predetermined time intervals using jQuery, while ensuring that the final element remains visible

Is there a way to automatically hide div1 and show div2 after a set amount of time, let's say 10 seconds or 15 seconds? I came across this thread: Show and hide divs at a specific time interval using jQuery, However, the solution provided in the po ...

Error: The function isInitial of chunk cannot be found

Currently, I am attempting to build my program using the following command: "build": "NODE_ENV='production' webpack -p", However, I encountered an error message: node_modules/extract-text-webpack-plugin/index.js:267 var shouldE ...

JavaScript validation for radio buttons that are grouped together

Need help with a JavaScript validation issue regarding grouped radio buttons named optionRadios1 to 5. I'm trying to validate them before submitting the form, but my code isn't working as expected and still allows the form submission. Below is t ...

Retrieve information from a website and transfer it to a Google spreadsheet

Despite the wealth of information on this topic, I have yet to find a solution that works for me. My goal is to transfer variables obtained from another website to Google Spreadsheet. These are the variables: var a = parseInt($('table.thinline:eq(4) ...

"Error encountered when attempting to execute the delete() function in Django

Having some trouble with my delete function. It successfully deletes the object but does not redirect to window.location as expected. Instead, I'm getting an error message: DoesNotExist at /api/personnel/delete/ Resource matching query does not exist ...

Balancing asynchronous tasks - masteringlearnode - program that initially succeeded but eventually faltered

node version: v4.4.3 npm version: 3.8.9 Error output Your entered data does not match the expected values. ──────────────────────────────────────────────── ...

Open the JSON file and showcase its contents using Angular

I am attempting to read a JSON file and populate a table with the values. I've experimented with this.http.get('./data/file.json') .map(response => response.json()) .subscribe(result => this.results =result, function(error) ...

I am experiencing issues with the rendering of my q-btn elements in Quasar and they are

I recently started using Quasar and encountered an issue with my q-btn component buttons displaying white backgrounds at random, despite having added a background-color in the external stylesheets. Here are some examples of this perplexing problem: https ...