开玩笑测试 Vue-Multiselect答案

【问题标题】：Jest Testing Vue-Multiselect开玩笑测试 Vue-Multiselect
【发布时间】：2020-02-06 03:17:19
【问题描述】：

我有一个使用 Jest/Sinon 进行测试的 Vue 应用程序。

目前在测试 vue-multiselect html 元素时遇到问题。我似乎无法单击它并显示选项。我想看一些方法在我点击时被执行，但由于我似乎无法在该死的东西上注册一次点击，所以我没有看到任何变化:(

目标：

单击多选下拉菜单
点击一个选项
关闭将提交选择的下拉菜单

EditUser.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>

editUserTest.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);
    });

任何帮助将不胜感激！

谢谢！

【问题讨论】：

标签： javascript vue.js jestjs sinon

【解决方案1】：

对我有用的是：

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 非常重要。

【讨论】：

【解决方案2】：

我得到了它的工作：

import { Multiselect } from 'vue-multiselect';

const multiselect = wrapper.findComponent(Multiselect);
await multiselect.trigger('focus');
await multiselect.trigger('click');

【讨论】：

【解决方案3】：

你试过了吗：

let multiselect = wrapper.find('#multiselectDiv');
multiselect.vm.$emit('open');

【讨论】：

感谢您的回复！我还没有尝试过，但我会尝试并回复你:)
你测试了吗？如果它确实有效，如果你能接受这个答案会很好。