Testing a Vue Computed Setter functionality in a unit test

I have implemented a computed getter and setter in my code to manage the calculation and updating of my localIngredient variable whenever a slider value changes (details omitted for simplicity).

The getter function is responsible for generating data to display in the slider, and when the slider is adjusted, it should update the original value by utilizing the computed setter.

While reviewing my test coverage, I observed that the setter() function is not being tested. Despite being able to manipulate internal data using setData(), I am curious if vue-test-utils allows for testing the invocation of a setter.

export default {
  props: {
    ingredient: {
      type: Object,
      required: true
    }
  },
  computed: {
    calories: {
      get() {
        return this.localIngredient.value * this.localIngredient.caloriesPerGram
      },
      set(amount) {
        this.localIngredient.value = amount / this.localIngredient.caloriesPerGram
      }
    }
  },
  data: () => ({
    localIngredient: {}
  }),
  created() {
    this.localIngredient = this.ingredient
  }
}

Answer №1

It would be optimal if your slider included a concealed <input> to store the value for accessibility reasons. By mounting your component using either mount or shallowMount, you can dynamically assign a value to that input, which will then activate the setter method on the next tick.

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

Simplify your code with promises in JavaScript

Running on an API with node v6.3.0, I have the following code that executes two separate promises based on a conditional check for a parameter in a POST request. if (paramExists) { // query database with this condition User.filter(/* utilize param ...

Exploring the contrast of && and ?? in JavaScript

My current focus is on utilizing the Logical AND && and Nullish coalescing operator ?? in handling conditional rendering of variables and values. However, I find myself struggling to fully comprehend how these operators function. I am seeking clar ...

"Efficiently sharing information in a multi-tenant application: strategies for seamless data transfer between front

In my development of a multi tenancy application using Node.js/Mongoose and React, I made the decision to utilize a single database for all users. The main collection, dubbed companies, serves as storage for basic company data and includes a unique compan ...

Using jQuery, how can you make fixed elements fade as the page scrolls?

How can I make a fixed element, such as a corner ad or notice, fade when the page is scrolled down to a certain point? What would be the most effective method for determining this point: using pixels, percentage, or another way? And how can I implement th ...

Guide on dynamically rendering a route in Next.js when a fresh blog post is uploaded without the need for executing the npm run build command

I've encountered an issue with my blog app developed in Next.js. When I add a new blog post to the database, the page does not render the new route automatically. I have to manually run npm run build to pre-render the new blog, otherwise, it continues ...

How to access a grandchild's property using a string in JavaScript

Is there a way to access a property nested deep within an object when creating a custom sorting function? I am attempting to implement a sort function that can sort an array based on a specific criteria. const data = [ { a: { b: { c: 2 } ...

What steps should I take to make jQuery compatible with a Greasemonkey 0.8 script on Firefox 2, without internet access on the computer?

Currently using Firefox 2.0.0.11, Greasemonkey 0.8.x, and the latest version of jQuery (1.3.2) that is compatible with Greasemonkey 0.8. Attempting to load this Userscript: // ==UserScript== // @name TEST // @include * // @require jquery. ...

Do you think there is a more optimal approach to writing if (argList[foo] === "bar" || argList === "bar")?

I have an if statement : if (argList["foo"] === "bar" || argList === "bar"){ // some code } I am curious if there is a concise or more elegant way to express this condition. The reason behind writing this statement is that I have two functions: st ...

What is the most effective way to add images to a table using JavaScript?

Is there a way to insert images into the "choicesDiv" without having to make changes to the HTML & CSS? Here is the table code: <table id="choices"> <tr> <td><div class="choicesDiv" value="1"></div></td> ...

Issue with button not toggling between btn-primary and btn-primary-outline classes upon v-on:click event

Currently working on a button that is meant to open a modal. The default styling should include the btn-primary-outline class (displaying blue text, transparent background, and a blue border). Upon clicking the button, it should switch to the btn-primary c ...

What is the best way to define a variable within a function?

Here's a function designed to verify if the username has admin privileges: module.exports = { checkAdmin: function(username){ var _this = this; var admin = null; sql.execute(sql.format('SELECT * FROM tbl_admins'), (err, result, fields ...

Vue.js: Dynamically set button activation based on array size

I have been attempting to enable or disable a button based on the length of an array, and here is my code: <button class="submit-button" type="button" v-on:click="DoSomething()" :disabled="array.length > 0">Submit</butt ...

Transfer chosen item from real-time ajax search to input box

Looking to implement a live search feature similar to Google's on my website. The idea is to copy the selected live search results and display them in a textbox named "oki" using AJAX. The data for the live search is fetched from an XML file. Below ...

Enhancing Web Security with AJAX and HTTP Access Control-Allow-Headers

I am currently developing a JavaScript library and I want users to be able to make requests to my server. To facilitate this, I have included the access-control-allow-origin and method headers in my server responses. Everything seems to be working well, b ...

Issue with Bootstrap 3 Modal: Missing Title and Input Labels

I'm currently working on customizing a bootstrap template for my friend's church website. My goal is to create a simple web presence for them, and I am in the process of setting up a contact form. I want this form to appear as a modal where users ...

XMLHttpRequest problem: receiving status code 0 from both local and live server

I'm struggling to make this XMLHttpRequest work correctly. This is my first time using AJAX, so I'm not sure if I've formatted everything properly. I've searched all over the internet and found similar information and examples, but cert ...

JavaScript 'await' throws error 'then is not defined'

Just starting out with async programming and I've noticed a common issue in similar threads - the problem of not returning anything. However, in my case, I am facing a different error message 'Cannot read property 'then' of undefined&ap ...

Creating Typescript libraries with bidirectional peer dependencies: A complete guide

One of my libraries is responsible for handling requests, while the other takes care of logging. Both libraries need configuration input from the client, and they are always used together. The request library makes calls to the logging library in various ...

Extract data from CSV files with line breaks in fields using JavaScript

When dealing with a CSV file that has newline or return characters in certain fields, the challenge is to parse the data without accidentally splitting a field into multiple rows. Here is an example of CSV data: ID;Name;Country;ISO-2;Address;Latitude;Lon ...

Angular file upload component with customizable file size limits

I'm currently developing an upload file feature that will transmit the file via nodejs. However, I am encountering an issue related to file size. Whenever the file exceeds a few kilobytes, I encounter the following error: Error: request entity too la ...