J’aimerais tester chaque composant de mon app, on trouve pas mal d’exemple sur internet mais qui n’ont plus l’air d’être d’actualité : javascript - How Test MapGetter - Stack Overflow. createLocalVue à l’air de ne plus être utilisé dans les nouvelles versions de vue,Je voulais donc savoir comment tester un composant qui utilise le store.
"dependencies": {
"core-js": "^3.8.3",
"vue": "^3.2.13",
"vue-class-component": "^8.0.0-0",
"vue-router": "^4.0.3",
"vuex": "^4.0.0"
},
Voila ce que j’ai tenté de faire
Component
<template>
<button type="button" class="btn btn-primary" @click="addQuantity()">Ajouter</button>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import { mapActions, mapGetters } from 'vuex'
@Options({
computed: {
...mapGetters({
currentFood: 'OrganizeMeal/currentFood'
})
},
methods: {
...mapActions({
setFoodQuantity: 'OrganizeMeal/setFoodQuantity'
}),
addQuantity () {
this.setFoodQuantity({
food: this.currentFood,
quantity: this.quantity
})
}
}
})
export default class AddFoodQuantityModal extends Vue {
quantity = 0
}
</script>
Store
State
export default {
selectedFoods: [],
currentFood: {},
}
Getters
export default {
selectedFoods: (state: OrganizeMealState) => state.selectedFoods,
currentFood: (state: OrganizeMealState) => state.currentFood,
}
Mutations
export default {
SET_FOOD_QUANTITY (state: OrganizeMealState, param: SelectedFood) {
for (let index = 0; index < Object.values(state.selectedFoods).length; index++) {
const food = state.selectedFoods[index]
if (food.food.name === param.food.name) {
state.selectedFoods[index].quantity = param.quantity
return
}
}
state.selectedFoods.push({
food: param.food,
quantity: param.quantity
})
},
SET_CURRENT_FOOD (state: OrganizeMealState, food: Food) {
state.currentFood = food
},
}
Actions
export default {
setFoodQuantity ({ commit }: { commit: Commit }, param: SelectedFood) {
commit('SET_FOOD_QUANTITY', param)
},
setCurrentFood ({ commit }: { commit: Commit }, food: Food) {
commit('SET_CURRENT_FOOD', food)
},
}
Test
describe('AddFoodQuantityModal.vue', () => {
const $store = {
modules: {
OrganizeMeal: {
namespaced: true,
state: OrganizeMeal.state,
getters: {
selectedFoods: () => jest.fn(),
currentFood: () => jest.fn(),
nutrients: () => jest.fn(),
activeFilters: () => jest.fn(),
hasNoActiveFilters: () => jest.fn()
},
actions: {
setFoodQuantity: () => jest.fn(),
setCurrentFood: () => jest.fn(),
cleanCurrentFood: () => jest.fn(),
removeCurrentFood: () => jest.fn(),
setFilter: () => jest.fn()
}
}
},
commit: jest.fn()
}
const wrapper = shallowMount(AddFoodQuantityModal, {
global: {
mocks: {
$store
}
}
})
it('addQuantity button clicked success', async () => {
const quantity = 100
wrapper.vm.$store.modules.OrganizeMeal.state = {
currentFood: {
food: Fishes[0]
},
selectedFoods: [
{
food: Fishes[0],
quantity: quantity
}
]
}
wrapper.vm.quantity = quantity
await wrapper.find('.btn-primary').trigger('click')
const selectedFoods = wrapper.vm.$store.modules.OrganizeMeal.state.selectedFoods
for (let index = 0; index < selectedFoods.length; index++) {
if (selectedFoods[index].food.name === 'merlu') {
return
}
}
throw new Error(`
No selected food have name merlu :\n
Selected foods : ${JSON.stringify(selectedFoods)}
`)
})
})
Fish data
export default
[
{
name: 'merlu',
weightValue: 800,
weightUnity: 'g',
nutritionalValues: {
portionValue: 100,
portionUnity: 'g',
energy: 80.8,
energyUnity: 'kcal',
protein: 16.6,
lipid: 1.6,
carbohydrate: 0.5
}
}
]
Lorsque j’execute mes tests j’ai cette erreur
