Unable to pass arguments to button methods in jasmine using vue and moment
To test whether the date was rendered in the correct format:
const wrapper = mount(MyComponent, { propsData: { // assuming component has `items` prop, used 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') // find first dateElement with `date` classexpect(dateEl.text()).toEqual('16:30 pm')
To test the component method directly, access the method through the wrapper's vm
property:
expect(wrapper.vm.dataFilter(new Date('2020-12-10T12:30:45-08:00'))).toEqual('16:30 pm')
You should not use a method there in the first place. You should use a computed property instead
computed: { dateFilter() { return moment.unix(this.data.date).utc().format("HH:mm a"); },}
in the template
<p class="date"> {{ dateFilter }} </p>
Now in the test you can change the value of data.date (I guess you pass it 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 "solve" the problem of iterating elements requiring to pass the argument, the Vue way would be to create a component eg. and put the logic in that. it could take a data props and act like this:
Parent.vue<display-date v-for="(data,index)in allData" :key="data.id||index" :data-prop="data" />
Then inside the display-date component you can use the logic suggested before. Please be aware of the powerful differences between computed properties and methods.
Enjoy coding!