`Examining how Rails routes function using Jasmine`

I'm working on a navbar partial view called _navbar.html.erb.

<nav class="nav-links">
   <ul>
     <li><%= link_to "Mastermind", root_path, :id => 'logo'%></li>
  </ul>
</nav>

Clicking on "Mastermind" reloads the page using the following JavaScript functions:

function reloadPage() {
  location.reload();
}

function logoReload() {
  $('#logo').click(reloadPage);
}

However, my jasmine test to check if the button click triggers a page reload is failing. Here's the code snippet for the test:

describe("button click", function() {
  var btn;
  beforeEach(function() {
    btn = $('#logo');
  });

 it("should reload the page", function() {
    spyOn(window, 'reloadPage');
    $(btn).click();
    expect(window.reloadPage).toHaveBeenCalled();
  });
});

The error message I receive is: Error: Expected spy reloadPage to have been called.

If anyone has any insights or ideas on why this may not be working as expected, I would greatly appreciate it!

Answer №1

You are observing window while invoking reload on location. Here is a revised demonstration:

it("ought to trigger a page refresh", function() {
  spyOn(location, 'refreshPage');
  $(btn).click();
  expect(location.refreshPage).toHaveBeenCalledTimes(1);
});

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

Showing data from a JavaScript controller's JSON response in an HTML table

I'm currently developing a spring app using AngularJS and I have a response coming from a JS controller. My goal is to showcase this response in a table on the webpage. The object devDebtTable is accessible to the page from the JS controller. The JS ...

Combine strings in an array of objects

I have an array containing objects with a "Closed" property that holds numerical values. I want to loop through the array and concatenate all the "Closed" property values found in each object. For example, in the given array, the final result should be 12 ...

"Learn the process of sending a post request using a combination of JQuery, Ajax

I am attempting to send a post request with the following code - var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.data = {}; $scope.reqCalling = function () { ...

Query regarding JSON format

If I have a database table named User with fields for name, Id, and age, how can I retrieve this data as JSON and send it to a JavaScript page? I want to customize the way the data is displayed on the frontend. Specifically, I need help understanding how ...

Is there a way to make $ajax pause until data is received, then store it in a variable?

I am having trouble with disabling asynchronous ajax. Here is the code snippet that I have: function GetDataFromUninorte() { link="http://www.uninorte.edu.co/documents/71051/11558879/ExampleData.csv/0e3c22b1-0ec4-490d-86a2-d4bc4f512030" ...

The Facebook JavaScript API function FB.api() is limited to posting messages and does not support media attachments

I am attempting to share a message with an mp3 attachment on the active user's wall. It works perfectly fine within Facebook's Test Console, but when I try it from my mobile app, only the message gets posted. Can anyone help me figure out what I ...

Unable to close window with window.close() method after initially opening it with JS or JQuery

I am currently using an Instagram API that requires users to log out through the link . This link redirects users to the Instagram page, but I want them to be redirected to my own page instead. Although I tried different methods from a previous post on thi ...

Can you explain the concept of "indexing JavaScript objects with strings"?

var people = new Array(); function People (name, location, age){ this.name = name; this.location = location; this.age = age; } I have two other functions to create and insert people data into a table. function generatePeople(){} function load ...

What is the best way to handle the select event for a jQuery UI autocomplete when there are images involved?

Looking for help with creating an autocomplete feature with images on this jsfiddle. Despite trying to capture the event when a user selects an image, it doesn't seem to work properly: $("#input").autocomplete({ //source: tags, so ...

By simply clicking a button in a React component, I aim to alter the font style of the text

function makeTextBold() { const boldText = document.querySelector('.form-control'); boldText.style.fontWeight = 'bold'; setText(boldText); } When I click the button, it redirects me to a blank page in the browser. ...

Transferring data from a database on Express back-end to a React front-end

I am facing an issue while trying to display user information on the front-end. Even though I can access the server using localhost:8080/api/user and see the information in the form of an empty page, my content page is unable to render this data. The code ...

The child element appears to be failing to trigger the function within the parent component

I am facing an issue with a parent component and a child component. I have a function in the parent component that I want to pass to the child for it to use, but when the X button in the child component tries to call the function, it doesn't work. Be ...

Experiencing incorrect outcome when using the Number.isInteger() function in JavaScript

I have been experimenting with the Number.isInteger() method on the Chrome console. After running a for loop and checking the result using console.log(arr);, I noticed that the array only contains a single value of 1, like this: [1]; var arr = [1, 2, 3, ...

Achieving uniform card height and positioning the shop button at the bottom of each card

https://i.sstatic.net/2i7hc.png The first card in the image above has a stretched height due to its long title, causing the second card's height to also stretch. However, the shop button is not placed at the bottom. I aim to position the button at t ...

Struggling to dynamically access element IDs with JavaScript

As I loop through my list of students and add them to my page, I encounter an issue where each student's unique ID is not being passed correctly. When the getStudentInfo function is called, it always returns the ID of student1, regardless of which stu ...

Adding data to the SharePoint RichText Control using the WinForms WebBrowser Control

I am struggling to modify the content of an SP Rich Text field using the WinForms web browser control. While changing the values of other controls is straightforward, I have encountered difficulties with Rich Text fields. I found some suggestions on this b ...

Utilizing JavaScript for manipulating arrays and displaying images

After asking this question previously without a satisfactory solution, I am hoping to provide better clarification. Imagine having an array with 3 items and it lands on 0 - a code is set up to display this in a div. Now, I want the image to be shown righ ...

The disablement of the button is a result of concealed select elements

I'm facing an issue with a form that contains three select options: Fit Colour Size By default, the 'Fit' dropdown and 'Colour' dropdown are active with a default value selected (e.g. Regular Fit and Blue Colour). There are mul ...

The error message "Invalid Data Type: Not an Array - google charts" was encountered

I am struggling with an ajax call that I have set up. The issue arises when passing an array from the backend to the frontend. Upon checking the data through an alert on the frontend, everything seems fine. However, Google charts raises an error stating th ...

ThreeJS bringing Maya-style wireframe rendering to life

Currently, I am attempting to create a wireframe that will display quads instead of triangles by utilizing the following code: var geo = new THREE.EdgesGeometry( _this.geometry ); // or WireframeGeometry var mat = new THREE.LineBasicMaterial( { color: 0xf ...