Exploring the power of Jasmine with multiple spy functionalities

I'm currently working on writing unit tests for an Angular application using Jasmine, specifically focusing on testing different scenarios within a function. The main challenge I am facing is structuring the test to accommodate various conditions such as the if statement and callbacks.

The $scope function in question takes an Object as input. If the object contains an id, it updates the existing object. Otherwise, it creates a new report and sends it to the backend using the CRUD service.

$scope.saveReport = function (report) {
  if (report.id) {
    CRUD.update(report, function (data) {
      Notify.success($scope, 'Report updated!');
    });
  } else {
    CRUD.create(report, function (data) {
      $scope.report = data;
      Notify.success($scope, 'Report successfully created!');
    });
  }
};

One of my tests involves passing a mock Object with an id to trigger the CRUD.update method, which I then verify has been called.

describe('$scope.saveReport', function () {
  var reports, testReport;
  beforeEach(function () {
    testReport = {
      "id": "123456789",
      "name": "test"
    };
    spyOn(CRUD, 'update');
    $scope.saveReport(testReport);
  });
  it('should call CRUD factory and update', function () {
    expect(CRUD.update).toHaveBeenCalledWith(testReport, jasmine.any(Function));
  });
});

While I understand that Jasmine does not support multiple spies, I still want to find a way to test the if condition and also create a mock test when the Object does not include an id:

describe('$scope.saveReport', function () {
  var reports, testReport;
  beforeEach(function () {
    testReport = {
      "id": "123456789",
      "name": "test"
    };
    testReportNoId = {
      "name": "test"
    };
    spyOn(CRUD, 'update');
    spyOn(CRUD, 'create'); // TEST FOR CREATE (NoId)
    spyOn(Notify, 'success');
    $scope.saveReport(testReport);
    $scope.saveReport(testReportNoId); // TEST FOR NO ID
  });
  it('should call CRUD factory and update', function () {
    expect(CRUD.update).toHaveBeenCalledWith(testReport, jasmine.any(Function));
    // UNCERTAIN ABOUT THIS PART AS WELL
  });
});

I have read about using the .andCallFake() method but unclear on how to apply it in my specific case. Any guidance would be greatly appreciated.

Answer №1

When determining what to test first, consider focusing on whether the update function is called when the id exists or if the create function is called when it doesn't. Structure your testing functions accordingly and remember that the before each block may not always be the best place for certain actions.

it('should invoke CRUD factory and execute update', function () {
    spyOn(CRUD, 'update');
    $scope.saveReport(testReport);
    expect(CRUD.update).toHaveBeenCalledWith(testReport, jasmine.any(Function));
});
it('should invoke CRUD create', function() {
    spyOn(CRUD, 'create');
    $scope.saveReport(testReportNoId); // TESTING FOR NO ID
    expect(CRUD.create).toHaveBeenCalledWith(testReport, jasmine.any(Function));
});

Only include necessary actions in the before each block that are required before each test case.

I hope this explanation has been beneficial!

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

Adding a URL link to a mentioned user from angular2-mentions within an Angular 4 application can be achieved in the following way:

Need help with adding a URL RouterLink to mention a user using angular2-mentions. This is the code snippet I currently have: <div class="col-sm-12"> <input type="text" [mention]="contactNames" [mentionConfig]="{triggerChar:'@',maxI ...

The data from my client side AJAX request is not being received by my server side PHP script

Check out the AJAX code I've written: $("#loginbutton").click(function(){ var email = $('#email').val(); var password = $('#password').val(); $.ajax({ url: 'login.php& ...

I am looking to modify various attributes linked to Rails

My Desire for Reality I am looking to update multiple related values in Rails by sending an update request from JavaScript. While creating data was seamless, I encountered difficulties when attempting to update it. #Code JavaScript* export const actions ...

What is the best way to store the dom in cache to ensure that the page remains unchanged when navigating back using the back button?

When adding models to my JavaScript application's model collection using AJAX calls, I encounter an issue where if I click on a model and go to the next page, all the loaded models disappear when I hit the back button. What is the most effective way t ...

Update a Div automatically without causing it to scroll back to the beginning of the Div

I'm encountering an issue with a script on my website that refreshes a Div every 20 seconds. The problem is, after the refresh, it automatically scrolls to the top of the Div. I want it to remain at the last scroll position and not jump to the top. Ca ...

Enhance my code to eliminate repetitive elements

Check out this unique plant array: export const uniquePlants = [ { name: 'monstera', category: 'classique', id: '1ed' }, { name: 'ficus lyrata&ap ...

By pressing the "showMore" button, the page dynamically pulls in a json list from a file

Currently, my focus is on a dropwizard-Java project. My task involves retrieving and showcasing the first 10 items from a json list in a mustache view. If the user clicks on the "show more" link, I should retrieve the next 10 elements from the list and d ...

Angular UI Router allows for the resolution of data before a state

When working on my angular sample route, I attempted to achieve the following: (function(angular){ 'use strict'; angular .module('appRouter',['ui.router']) .controller('routerCtrl',function( ...

Update the DOM if the index of any data elements have been modified

Can Vue.js detect the swapping of array elements in my data object? data: { list: [ 'Foo', 'Bar', 'Test' ] } This is the method I am using to swap entries: swapIndex: function(from, to) { var first = this ...

Navigating through various JavaScript libraries with varying loading times can be a tricky task when working within the Angular

As I dive into learning Angular, I find myself pondering the architecture of my app. The project I'm embarking on will heavily rely on various external libraries such as jQuery, jQuery.ui, jsPlumb, and more, each with their own loading times. I unde ...

What steps can I take to address this Material UI alert and deliver a solution that adds value?

I am currently working on fetching API data (specifically category names) from the back-end (Node.js) to the front-end (React). My main objective right now is to populate a Select component from Material UI. To fetch the API data, I am utilizing Express an ...

Identify input elements that specifically contain an onclick event

Several of the input elements on my page have a function called setSomeFunction() that either shows or hides certain divs when clicked. I know I can locate all the input elements using document.getElementsByTagName("input") and store them in an array. How ...

JS issue: Having trouble accessing the array values despite the array being present

I am working on an ajax call where I save the success data in an array. However, when I try to access that data outside of the ajax function and use console to log my array, it appears as expected. Here is a glimpse at what I see on the screen: https://i ...

What are the best ways to maximize a web worker's ability to handle multiple tasks at once

I'm currently working on implementing a Web-Worker to handle its state while also managing multiple asynchronous requests. worker.ts file let a =0; //state of the worker let worker=self as unknown as Worker; worker.onmessage =(e)=>{ console ...

How to use $$[n] in Spectron/WebdriverIO to target the nth child element instead of the selector

Attempting to utilize Spectron for testing my Electron application has been challenging. According to the documentation, in order to locate the nth child element, you can either use an nth-child selector or retrieve all children that match a selector using ...

What is the best way to duplicate a Typescript class object while making changes to specific properties?

I have a Typescript cat class: class Kitty { constructor( public name: string, public age: number, public color: string ) {} } const mittens = new Kitty('Mittens', 5, 'gray') Now I want to create a clone of the inst ...

How to smoothly glide to the bottom of a chat box by scrolling synchronously

I am currently in the process of developing a chat application. Each time a user sends a new message, it is added to a list of messages displayed in an unordered list (ul). I have successfully made the ul scrollable, but unfortunately, when a new message i ...

Utilizing Packery.js in AngularJS

Having some trouble trying to integrate Packery.js with my angularjs app. It seems like they are not working well together. I tried setting isInitLayout to false, but no luck. This is the (bootstrap 3) HTML code I am using: <div class="row" class="js ...

Executing animation after the completion of a transition

Is there a way to synchronize the bounce animation with the scaling of an object, so that it appears smooth and fluid? I've tried using the animation delay property along with the transition delay property, but they don't seem to align correctly. ...

Ways to retrieve a specific item from a constantly changing knockout observableArray without employing a foreach loop

Why can I only access one property ('member_A') of an Element in an observableArray using an HTML <input>? I am attempting to add a new object of type abc() to the observableArray "list_of_abc" when the button "ADD To List of abc" is click ...