[英]Jest Testing Vue-Multiselect
我有一個使用 Jest/Sinon 進行測試的 Vue 應用程序。
目前在測試 vue-multiselect html 元素時遇到問題。 我似乎無法單擊它並顯示選項。 我想看一些方法在我點擊時被執行,但由於我似乎無法在該死的東西上注冊點擊,所以我沒有看到任何變化:(
目標:
單擊多選下拉菜單
單擊一個選項
關閉將提交選擇的下拉列表
編輯用戶.vue
....
<div class="col2">
<form>
<label for="firstName">First Name: {{editUser.first_name}}</label>
<label for="lastname">Last Name: {{editUser.last_name}}</label>
<label for="email2">Email: {{editUser.id}}</label>
<label for="managerEmail">Manager Email: {{editUser.manager_email}}</label>
<label v-for="role in editUser.role" v-bind:key="role">Current Roles: {{role}}</label>
<label class="typo__label">
<strong>Select Roles OVERWRITES existing roles:</strong>
</label>
<div id="multiselectDiv" :class="{'invalid' : isInvalid}">
<multiselect
v-model="value"
:options="options"
:multiple="true"
:close-on-select="false"
:clear-on-select="false"
:preserve-search="true"
:allow-empty="false"
placeholder="Select All Applicable Roles"
:preselect-first="false"
@open="onTouch()"
@close="submitRoles(value)"
></multiselect>
<label class="typo__label form__label" v-show="isInvalid">Must have at least one value</label>
</div>
<button class="button" @click="removeRoles">Remove all roles</button>
</form>
</div>
....
<script>
import { mapState } from "vuex";
import Multiselect from "vue-multiselect";
const fb = require("../firebaseConfig.js");
import { usersCollection } from "../firebaseConfig";
export default {
computed: {
...mapState(["currentUser", "userProfile", "users", "editUser"]),
isInvalid() {
return this.isTouched && this.value.length === 0;
}
},
methods: {
onTouch() {
this.isTouched = true;
},
submitRoles(value) {
fb.usersCollection
.doc(this.editUser.id)
.update({
role: value
})
.catch(err => {
console.log(err);
});
this.$router.push("/dashboard");
},
removeRoles() {
fb.usersCollection
.doc(this.editUser.id)
.update({
role: []
})
.catch(err => {
console.log(err);
});
this.$router.push("/dashboard");
}
},
components: { Multiselect },
data() {
return {
value: [],
options: ["admin", "sales", "auditor"],
isTouched: false
};
}
};
</script>
編輯UserTest.spec.js
test('OnTouch method triggers on open of select menu', () => {
const wrapper = mount(EditUser, {
store,
localVue,
propsData: {
options: ["admin", "sales", "auditor"],
},
computed: {
editUser() {
return {
first_name: 'Bob',
last_name: 'Calamezo',
id: 'bob@email.com',
manager_email: 'someManager@email.com',
role: ['admin', 'sales'],
};
},
},
});
expect(wrapper.vm.$data.isTouched).toBe(false);
expect(wrapper.find('#multiselectDiv').exists()).toBe(true);
const selectIt = wrapper.find('#multiselectDiv').element;
selectIt.dispatchEvent(new Event('click'));
console.log(wrapper.find('.col2').html());
// expect(wrapper.vm.$data.isTouched).toBe(true);
});
任何幫助將不勝感激!
謝謝!
對我有用的是:
import { Multiselect } from 'vue-multiselect';
const multiselect = wrapper.findComponent(Multiselect);
const input = multiselect.find("input");
input.setValue("substring of a label");
input.trigger("keydown.enter");
如果您想在列表中查找某些內容,而不是提前知道其固定偏移量,那么input.setValue
至關重要。
您是否嘗試過:
let multiselect = wrapper.find('#multiselectDiv');
multiselect.vm.$emit('open');
我得到了它的工作:
import { Multiselect } from 'vue-multiselect';
const multiselect = wrapper.findComponent(Multiselect);
await multiselect.trigger('focus');
await multiselect.trigger('click');
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.