I'm using Vue version 2.6.11, Vuex version 3.4.0. I have a function in the vuex store (timeTravel) which moves array element from given index to another given index. I have a component with a button that trigger this function. I'm new to unit testing and it's confusing for me.
ActionList.vue component
// other codes
<v-btn color="primary" dark @click="timeTravel({from:action.from_index,to:action.to_index,action_list_index:index})">
<v-icon left dark>
mdi-clock-outline
</v-icon>
Submit
</v-btn>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
name: "ActionsList",
computed: mapGetters(["commitedActionsList"]),
methods: {
...mapActions(["timeTravel"]),
},
};
</script>
Vuex store
import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
posts: [],
commitedActions: [],
},
getters: {
postsList: (state) => state.posts,
commitedActionsList: (state) => state.commitedActions,
},
mutations: {
setPosts: (state, posts) => (state.posts = posts),
setCommitedActions: (state, commitedActions) =>
state.commitedActions.push(commitedActions),
},
actions: {
async fetchPosts({ commit }) {
const response = await axios.get(
"https://jsonplaceholder.typicode.com/posts/?_limit=5"
);
commit("setPosts", response.data);
},
timeTravel({ commit, getters }, data) {
var from = data["from"];
var to = data["to"];
var action_list_index = data["action_list_index"];
console.log(from,to,action_list_index);
var posts_copy = getters.postsList;
var f = posts_copy.splice(from, 1)[0]; // remove `from` item and store it
posts_copy.splice(to, 0, f); // insert stored item into position `to`
commit("setPosts", posts_copy);
this.state.commitedActions.splice(action_list_index,1)
},
},
modules: {},
});
So I want to write a unit test for this timeTravel function with jest. I found some tutorials but it's confusing for me. So far I've come up with this.
import Vuetify from 'vuetify';
import Vuex from 'vuex'
import { createLocalVue ,shallowMount } from '@vue/test-utils'
import ActionsList from '@/components/ActionsList.vue';
let localVue = createLocalVue();
describe('App',()=>{
let store
let actions
let state
let getters
beforeEach(()=>{
localVue.use(Vuex)
localVue.use(Vuetify)
state = {posts:[]}
getters = {
postsList: (state) => state.posts,
}
actions = {
timeTravel: jest.fn()
}
store = new Vuex.Store({
state,
getters,
actions
})
})
it('dispatches timeTravel', ()=>{
const wrapper = shallowMount({
localVue,
store
})
wrapper.find('v-btn').trigger('click')
expect()
})
})
I want to test if timeTravel function is moving element from given index to another given index. So it would be great if someone can point me in the right direction which helps me to write this unit test.