Having trouble passing arguments to button methods in jasmine when applying vue and moment libraries

Question

Having trouble passing arguments to button methods in jasmine when applying vue and moment libraries

I am working on unit testing a Vue app using `jasmine` and `karma`. Here is an example of the code inside one of my components:

After fetching data from a database with `v-for=(data,index)`, I am displaying the `data.date` in the template:

<p class="date">
  {{ dateFilter(data.date) }}
</p>

I want to test if the date is being properly formatted. In my spec file, I have something like this:

import { mount } from '@vue/test-utils';
import moment from 'moment'

it('should call method', () => {
  const selector = wrapper.find('date');
 
});

How can I call the method and provide mock parameters for testing? Also, is it possible to import moment.js in our tests?

javascript vue.js vuejs2 jasmine karma-jasmine

Answer 1

Answer №1

In order to verify if the date is displayed in the correct format:

const wrapper = mount(MyComponent, {
  propsData: {
    // suppose the component has a `items` prop, utilized in:
    // <p class="date" v-for="data in items"> {{ dateFilter(data.date) }} </p>
    items: [
      {
        id: 100,
        date: new Date('2020-12-10T12:30:45-08:00') // 12:30pm GMT-8 === 4:30pm UTC
      }
    ]
  }
})

const dateEl = wrapper.find('.date') // locate first dateElement with `date` class
expect(dateEl.text()).toEqual('16:30 pm')

To directly test the component method, access the method via the vm property of the wrapper:

expect(wrapper.vm.dataFilter(new Date('2020-12-10T12:30:45-08:00'))).toEqual('16:30 pm')

Answer 2

In order to verify if the date is displayed in the correct format:

const wrapper = mount(MyComponent, {
  propsData: {
    // suppose the component has a `items` prop, utilized in:
    // <p class="date" v-for="data in items"> {{ dateFilter(data.date) }} </p>
    items: [
      {
        id: 100,
        date: new Date('2020-12-10T12:30:45-08:00') // 12:30pm GMT-8 === 4:30pm UTC
      }
    ]
  }
})

const dateEl = wrapper.find('.date') // locate first dateElement with `date` class
expect(dateEl.text()).toEqual('16:30 pm')

To directly test the component method, access the method via the vm property of the wrapper:

expect(wrapper.vm.dataFilter(new Date('2020-12-10T12:30:45-08:00'))).toEqual('16:30 pm')

Answer 3

Answer №2

It's advisable to avoid using a method in this scenario and opt for a computed property instead

computed: {
    dateFilter() {
      return moment.unix(this.data.date).utc().format("HH:mm a");
    },
}

within the template

<p class="date">
      {{ dateFilter }}
 </p>

You can now modify the data.date value in the test (presumably passed as a prop)

import { mount } from '@vue/test-utils';
import moment from 'moment'

const wrapper = mount(YourComponent)


 it('should call method', () => {

      const localThis = { date: <date-here> }
      expect(wrapper.computed.numbers.call(localThis)).toBe(<experct-result-here>)
 
  });

UPDATE

To tackle the issue of needing to pass arguments when iterating elements, the recommended Vue approach is to create a component e.g. and implement the logic there. It could accept a data prop and function like this:

Parent.vue
<display-date v-for="(data,index)in allData" :key="data.id||index" :data-prop="data" />

Inside the display-date component, you can apply the previously suggested logic. Keep in mind the significant differences between computed properties and methods.

Happy coding!

Answer 4

It's advisable to avoid using a method in this scenario and opt for a computed property instead

computed: {
    dateFilter() {
      return moment.unix(this.data.date).utc().format("HH:mm a");
    },
}

within the template

<p class="date">
      {{ dateFilter }}
 </p>

You can now modify the data.date value in the test (presumably passed as a prop)

import { mount } from '@vue/test-utils';
import moment from 'moment'

const wrapper = mount(YourComponent)


 it('should call method', () => {

      const localThis = { date: <date-here> }
      expect(wrapper.computed.numbers.call(localThis)).toBe(<experct-result-here>)
 
  });

UPDATE

To tackle the issue of needing to pass arguments when iterating elements, the recommended Vue approach is to create a component e.g. and implement the logic there. It could accept a data prop and function like this:

Parent.vue
<display-date v-for="(data,index)in allData" :key="data.id||index" :data-prop="data" />

Inside the display-date component, you can apply the previously suggested logic. Keep in mind the significant differences between computed properties and methods.

Happy coding!

Having trouble passing arguments to button methods in jasmine when applying vue and moment libraries

Answer №1

Answer №2

Similar questions

Update the total in the input field by aggregating data from multiple input fields in a Vue2 component

How to create a responsive image that appears over a button when hovering in Bootstrap?

Modify a unique custom binding handler in such a way that it is designated using an Immediately Invoked Function Expression

Convert a JSON array into a new format

Experimenting with the inner workings of a method by utilizing vue-test-utils alongside Jest

Is it possible for the versions in the package.json file to be altered

An unexpected error occurred in the Ember route processing: Assertion Failed in the listing

Enhancing Angular Directives with Dynamic Templates upon Data Loading

Modify the location of the input using jQuery

Encountered an unfamiliar custom element: x while utilizing Buefy

Applying CSS styles to a page depending on certain conditions

React-dropzone experiencing delays in loading new files for readers

Invoking a static method within a cshtml document

What could be the reason behind the improper display of JavaScript for ID overlay2?

Is JQuery the ultimate solution for creating a dynamic multi-language website?

Create and export a global function in your webpack configuration file (webpack.config.js) that can be accessed and utilized

Modifying HTML line codes using Python: A step-by-step guide

What is the best method to retrieve the country name from a world map using D3.js?

What is the best way to apply the TableRow style in material-ui / mui to make it similar to TableHead?

The div is unable to display data retrieved from the php file using Ajax