Evaluating Vue.js Watchers using Jasmine

I want to write a test for a VueJS watcher method, in order to verify if it's being called. The watcher method in my component is structured like this:

watch: {
   value: (newValue, oldValue) => {
     if (newValue.Status === 'Completed') {
        ...do something
     }
  }
}

The watcher method triggers successfully when the value changes, however, it doesn't seem to be triggered during the test.

This is how my test code looks like:

var propsData = {
   "value" : {
      "Status" : "Something"
    }
}
it('should call the method', done => {
   const Constructor = Vue.extend(App);
   const spy = sinon.spy(App, 'value');
   const vm = new Constructor({ propsData: propsData }).$mount();
   vm.value.Status = 'Completed';
   Vue.nextTick(() => {
      expect(spy.called).to.be.true;
      done()
   })
})

I have come across some examples that could be helpful, but they haven't quite solved my issue:

  1. Asserting Asynchronous Updates
  2. Forum

Answer №1

Remember, when you modify value.Status, you're actually not changing the reference of value. If you want the watch to trigger on a change in value, make sure to set deep: true.

watch: {
   value: {
     handler: (newValue, oldValue) {
       this.checkValue() 
     },
     deep: true
   }
},
methods: {
  checkValue() {
  }
}

Next, include the following code snippet:

it('should execute method', done => {
   const Constructor = Vue.extend(App);
   const vm = new Constructor({ propsData: propsData }).$mount();
   const spy = sinon.spy(vm, 'checkValue');
   vm.value.Status = 'Updated value';
   vm.$nextTick(() => {
      expect(spy.called).to.be.true;
      done()
   })
})

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

The Node.js application is unable to execute due to the error: "View "error" could not be found in the views directory."

Currently, I am following a tutorial that covers the integration of social login with Passport and Node. You can find the tutorial here: Tutorial Link In line with the tutorial, I have started working on a project while utilizing Windows 10 operating syst ...

What is the best way to combine Node.js MySQL tables into a JSON format and transfer the data to the client?

I'm looking for a way to retrieve MySQL related tables as JSON from NodeJS and send it back to the client. For example, let's say I have a 'students' table and a 'studentCountry' table. The 'students' table has a fie ...

Is it necessary to release an NPM package when creating a custom Javascript library for local use?

I want to organize my javascript utility functions in a central folder and access them from multiple projects. It appears that I am unable to import functions from outside the src file of my project. Do I need to create an NPM package? Must I duplicate t ...

Getting a boolean response from an asynchronous SQLite query in Express

I am currently developing a middleware that verifies the validity of a session (meaning it has a logged-in user attached). For this purpose, I am utilizing sqlite3 for node.js. Since I am not very familiar with JavaScript, I am facing some challenges figu ...

What is the best way to retrieve a value in Ajax?

I'm trying to assign the result of an MVC controller method to a variable. function someFunction(){ var result; $.Ajax{ //??? } return result; } //Contrast with C++ int f() { //just! return result; } Post Script: Th ...

Adding elements to my state array - Utilizing Nextjs/React/Javascript

After fetching data from 2 different APIs that each return an object, I have stored them in separate states. Now, I want to merge these two objects into a single state that contains both of them as an array. However, when I try to do this, the second obj ...

Toggle visibility of div content when hovering over a link by leveraging the data attribute, with the div initially visible

I have a collection of links: <p><a href="#" class="floorplan initial" data-id="king"><strong>King</strong></a><br> 4 Bedrooms x 2.5 Bathrooms</p> <p><a href="#" class="floorplan" data-id="wood">< ...

Tips on saving content that changes automatically

I am curious about the best way to store dynamically displayed HTML content. For example, when a certain element is clicked on a website, I want text to appear elsewhere on the page. One idea I had was to create a variable in a JavaScript/jQuery script to ...

Fetching data from a ColdFusion component using AJAX

Having trouble performing an SQL COUNT on my database using AJAX through a cfc file, and I can't figure out how to retrieve the return variable. Here's the relevant section of the cfc file: <cffunction name="getSpeakerCount" access="remote" r ...

What is the best way to handle multiple JSON data using jQuery?

Understanding how to utilize jquery for parsing simple json is a valuable skill. json { "Symbol": "AAL.L", "Name": "ANGLO AMERICAN", "Last": "3061.50", "Date": "7/26/2011", "Time": "11:35am", "Change": "+3 ...

The interactivity of data-ng-click in HTML is not functioning as expected

I need help with implementing the data-ng-click functionality for a dynamically created button. Can someone assist me with this? var table = document.getElementById("dashboard"); for( var i = 0; i < $scope.namesOfMembers.length; i++ ){ var row = t ...

Step-by-step Guide: Building a Nested Bootstrap Navigation Tabs Component on a Webpage

Within a page, I have integrated nested bootstrap navs components. The issue arises when clicking on "Nested Tab 2," which functions correctly, and then switching to "Nested Tab 1" where the tab content is not displaying properly. I am uncertain if there ...

Error: Attempting to access the 'client' property of an undefined object

I'm currently working on a basic discord.js bot. Below is the code snippet that generates an embed: const Discord = require('discord.js') require('dotenv/config') const bot = new Discord.Client(); const token = process.env.TOKEN ...

Issue with making Flickr API request using XMLHttpRequest receiving an unsuccessful response

I'm having issues trying to retrieve a JSON list from Flickr using plain JavaScript and XMLHttpRequest. Here is an example of an AJAX call without a callback function that is not functioning properly: var url = "https://api.flickr.com/services/feed ...

What is the best way to create a dynamic hyperlink that leads to a detailed information page based on the specific link clicked?

I'm currently working on a web page that displays a list of users, and I want each user's name to be clickable, leading to a page with specific details about that user. I'm new to this field, so I'm unsure where to start. My idea is to ...

"Enhance your client-side PDF capabilities with the pdfMake plugin, offering support for multiple languages

I am in search of a plugin that can convert HTML content into a PDF format and is compatible with javascript/jQuery/AngularJS. It must also provide multilingual support. I have experimented with the following two plugins, but encountered limitations with ...

Filtering data from an Ajax request in Angular using a filter function with JSON

Hi everyone, I recently started learning AngularJS and created a basic item list with search functionality and pagination. Everything was working smoothly, so I decided to move my list outside the controller and store it as a JSON file. Here's what ...

I'm facing a challenge with Firebase rules regarding user configurations that should enable read and write access. How can I overcome this hurdle?

Currently, I am logged into my application using GoogleAuthProvider and in my browser as [email protected] The rules for my app project are set up like this: In one of the views, there is a toggle that triggers a setDoc function. However, when I us ...

When running the PHP script, the output is shown in the console rather than in the

Here is a PHP script snippet that I am working with: <?php add_action('wp_ajax_nopriv_getuser', 'getuser'); add_action('wp_ajax_getuser', 'getuser'); function getuser($str) { global $wpdb; if(!wp_verif ...

Storing the value from the INPUT field in the state of React is not permitted

I'm attempting to retrieve the user input value from the INPUT field and update it in the corresponding state. However, no matter what I type in the field, it doesn't get set to the state. createForm(x){ var dx = 'd'+x let da ...