javascript - 使用 Jest 触发方法后检查 Vue 组件数据
问题描述
我正在尝试 Jest 为我的一些组件编写单元测试。我在这里要做的是在触发 toggleExtended 方法后检查 selectedErrand 的输出是否 >= 0。
错误:
Matcher error: received value must be a number
Received has value: undefined
我在这里想念什么?
将数据设置为 selectedErrands 的默认状态,模拟 toggleExtended 方法,然后检查 selectedErrands 数据(状态)是否根据在我的 Vue 中呈现的列表的索引更改了它的值。
我想我可以做这样的事情。
笑话
it(“Test”, () => {
wrapper.setData({ selectedErrand: -1 });
wrapper.vm.toggleExpanded();
expect(wrapper.vm.selectedErrand).toBeGreaterThanOrEqual(0);
});
Vue 组件
<template>
<div
v-if="!error"
class="flex-table flex-table--white-background flex-table--green-header flex-table--with-dropdown"
:class="{ loading: loading }"
>
<div class="flex-table__row flex-table--header text--level-6">
<div class="flex-table__cell flex-table__cell--width-3">
{{ statusHeader }}
</div>
<div class="flex-table__cell flex-table__cell--width-3">
{{ idHeader }}
</div>
<div class="flex-table__cell flex-table__cell--width-7">
{{ descriptionHeader }}
</div>
<div class="flex-table__cell flex-table__cell--width-5">
{{ typeHeader }}
</div>
<div class="flex-table__cell flex-table__cell--width-3">
{{ dateOpenedHeader }}
</div>
<div class="flex-table__cell flex-table__cell--width-3">
{{ dateClosedHeader }}
</div>
<div class="flex-table__cell flex-table__cell--width-1" />
</div>
<div
v-for="(errand, index) in sliceArray(errands)"
:key="!errand.id ? index : errand.id"
>
<div
class="flex-table__row"
:class="{ 'flex-table__row--closed': index !== selectedErrand }"
@click="toggleExpanded(index)"
>
<div class="flex-table__cell flex-table__cell--width-3">
{{ errand.status }}
</div>
<div class="flex-table__cell flex-table__cell--width-3">
{{ errand.id }}
</div>
<div
class="flex-table__cell flex-table__cell--width-7 flex-table__cell--show-on-mobile"
:data-header="descriptionHeader"
>
{{ errand.description }}
</div>
<div class="flex-table__cell flex-table__cell--width-5">
{{ errand.type }}
</div>
<div
class="flex-table__cell flex-table__cell--width-3 flex-table__cell--show-on-mobile"
:data-header="dateOpenedHeader"
>
{{ errand.orderDate }}
</div>
<div class="flex-table__cell flex-table__cell--width-3">
{{ errand.deliveryDate }}
</div>
<div
class="flex-table__cell flex-table__cell--width-1 flex-table__cell--dropdown-show-on-mobile"
>
<i
class="icon-angle__small"
:class="{ 'icon-angle__small--down': selectedErrand === index }"
/>
</div>
</div>
<ErrandsListDetails
v-if="selectedErrand >= 0 && selectedErrand === index"
:errand="errand"
v-bind="$props"
/>
</div>
<div
v-if="errands.length >= numberOfErrandsLoaded"
class="flex-table--load-more text--level-5"
>
<a href="#" @click="loadMore">
{{ showMoreText }}
<i class="icon-down" />
</a>
</div>
<div
v-if="errands.length < 1 && !loading"
class="flex-table--error text--level-5"
>
{{ noCasesText }}
</div>
<div v-if="error && !loading" class="flex-table--error text--level-5">
{{ errorText }}
</div>
</div>
</template>
<script>
import _ from "lodash";
import ErrandsListDetails from "./ErrandsListDetails.vue";
export default {
components: {
ErrandsListDetails: ErrandsListDetails
},
props: {
componentTitle: {
type: String,
default: () => {
return "";
}
},
showMoreText: {
type: String,
default: "Visa fler ärenden"
},
statusHeader: {
type: String,
default: () => {
return "Status";
}
},
dateOpenedHeader: {
type: String,
default: () => {
return "Beställt/Anmält";
}
},
dateClosedHeader: {
type: String,
default: () => {
return "Beräknad klar";
}
},
idHeader: {
type: String,
default: () => {
return "Ärendenummer";
}
},
descriptionHeader: {
type: String,
default: () => {
return "Beskrivning";
}
},
typeHeader: {
type: String,
default: () => {
return "Typ";
}
},
fileDetails: {
type: String,
default: () => {
return "Ladda ned beställningen som PDF:";
}
},
commentsDetails: {
type: String,
default: () => {
return "Noteringar";
}
},
wordList: {
type: String,
default: () => {
return "";
}
},
attachment: {
type: String,
default: () => {
return "";
}
},
noCasesText: {
type: String,
default: () => {
return "Det finns inget att visa";
}
},
errorText: {
type: String,
default: () => {
return "Något gick fel";
}
},
createdOnFallback: {
type: String,
default: () => {
return "-";
}
},
closedOnFallback: {
type: String,
default: () => {
return "-";
}
},
errands: {
type: Array,
default: () => {
return [];
}
},
loading: {
type: Boolean,
default: () => {
return false;
}
}
},
data() {
return {
selectedErrand: -1,
error: undefined,
numberOfErrandsLoaded: 10
};
},
methods: {
toggleExpanded: function(index) {
this.selectedErrand = this.selectedErrand === index ? -1 : index;
},
loadMore: function(event) {
event.preventDefault();
this.numberOfErrandsLoaded += 10;
},
sliceArray: function(array) {
let val = _.orderBy(array, "orderDate", "desc");
return val.slice(0, this.numberOfErrandsLoaded);
}
}
};
</script>
我希望这得到了正确的解释,但如果您有任何进一步的问题,请随时询问。
预先感谢,埃里克
解决方案
您的函数toggleExpanded
需要数字作为参数
toggleExpanded: function(index) {
this.selectedErrand = this.selectedErrand === index ? -1 : index;
}
但是,你没有通过任何东西。的值selectedErrand
最初为 -1,因此您最终-1 === undefined
以undefined
in结束this.selectedErrand
。
调用时应该传递索引toggleExpanded
。
wrapper.vm.toggleExpanded(1);
推荐阅读
- python - 计算两个相同长度列表中的索引组合
- javascript - 速度阅读器 javascript 使合并的单词
- c++ - 如何避免在基于范围的 for 循环中使用 auto 说明符?
- r - 在R中结合堆栈和组条形图
- python - 在创建运行我的服务器时生效的环境变量时遇到问题
- c# - 使用 dotnet 通用主机创建的控制台项目无法获取用于 ef 迁移的用户机密
- django - Django 生成条形码并通过浏览器下载
- java - 如何为代理协议发送或写入数据
- javascript - SAP Business Objects - 嵌入 iframe 防止父重定向
- elasticsearch - 如何对桶排序结果进行排名?