代码之家 › 专栏 › 技术社区 › user762579

Vue+Vuetify-测试:单元不能查看v-alert消息值

vuetify.js vue.js unit-testing

0

user762579 · 技术社区 · 8 年前

在我的组件模板中,我有一个v-alert vuetify子组件

        <v-alert dismissible @input="closeAlert()" @type="msgTypeContactForm" v-model="msgStatusContactForm">{{ msgValueContactForm }}</v-alert>

  data() {
    return {
      ...
      msgStatusContactForm: false,
      msgTypeContactForm: "",
      msgValueContactForm: ""
    };
  },

提交表单时,当出现错误时,我设置这些数据

  catch (err) {
       this.msgTypeContactForm = "error";
       this.msgValueContactForm = this.$i18n.t("lang.views.home.contactForm.post_error");
       this.msgStatusContactForm = true;

       it("should not sendMessage - invalid form", async () => {
           ...
           wrapper = mount(ContactForm, options);
           const contactForm = wrapper.find("form");
           ...
           const btnSubmit = wrapper.find("#btnSubmit");
           btnSubmit.trigger("click");
           await wrapper.vm.$nextTick();
           // then
           setTimeout(() => {
             expect(wrapper.vm.validForm).toEqual(false);
             expect(wrapper.vm.msgStatusContactForm).toEqual(true);
             expect(wrapper.vm.msgTypeContactForm).toEqual("error");
           }, 2000);
           await wrapper.vm.$nextTick();
           const alert = wrapper.find(".v-alert");
           console.log("INVALID FORM ALERT: ", alert.html());
         })

控制台.log测试/单元/联系人表格规范js:383 无效表单通知:取消

应显示警报,并在html输出中显示类型设置和消息值。。。。

我不知道我在考试中哪里错了?有什么帮助吗

1 回复 | 直到 8 年前

1

0

user762579 user762579 8 年前

解决了的。。

这是一个处理异步/等待函数的问题。。。在我的组件中

submitForm: async function() {
  ....

所以我在测试中使用了同花顺的承诺

 yarn add -D flush-promises

然后

import flushPromises from "flush-promises";
...

it("should not sendMessage - invalid form", async () => {
 ...
 wrapper = mount(ContactForm, options);
 ...
 // then
const btnSubmit = wrapper.find("#btnSubmit");
btnSubmit.trigger("click");
await flushPromises();
...
const alert = wrapper.find(".v-alert");
console.log("INVALID FORM ALERT: ", alert.html());

<div class="v-alert error" style=""><div>One or more fields are invalid. Please, review your input and submit</div><a class="v-alert__dismissible"><i aria-hidden="true" class="v-icon v-icon--right material-icons theme--light">cancel</i></a></div>