我有一个带有动态名称过渡的Vue组件。我试图找到一种方法来测试传递的名称是否正确,该名称是根据我传递给组件的 Prop 设置的。这是组件。

<template>
    <aside :class="['cw-vue-modal', modalSizeClass]" v-show="showModal && modalName === currentModalName">
        <transition :name="`${effect}-${speed}`" :duration="500">
            <div class="cw-vue-modal-wrap" v-show="showModal">
                <div class="cw-vue-modal-body">
                    <header>
                        <h2 v-if="currentModalTitle">{{ currentModalTitle }}</h2>
                        <a href="#" class="cw-vue-modal-close" @click.prevent="closeModal"></a>
                    </header>
                    <article :class="['cw-vue-modal-content', {'cw-vue-modal-pad' : padContent}]">
                        <slot name="content"></slot>
                    </article>
                </div>
            </div>
        </transition>
    </aside>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex';

  export default {
    name: 'cw-modal',
    props: {
      modalName: {
        required: true,
        type: String
      },
      padContent: {
        required: false,
        type: Boolean
      },
      modalSize: {
        required: false,
        type: String
      },
      effect: {
        required: false,
        type: String
      },
      speed: {
        required: false,
        type: String,
        default: 'normal'
      },
      maskLight: {
        required: false,
        type: Boolean
      }
    },
    computed: {
      ...mapGetters(['showModal', 'currentModalName', 'currentModalTitle']),
      modalSizeClass() {
        if (this.modalSize === 'small') return 'cw-vue-modal-sm';
        if (this.modalSize === 'large') return 'cw-vue-modal-lg';
        return 'cw-vue-modal-md';
      }
    },
    methods: {
      ...mapActions(['closeModal'])
    }
  };
</script>


我正在将Mocha与chia和avoriaz库一起使用来编写单元测试。这是测试。

it('it adds the slide slow effect', () => {
    getters = {
      showModal: () => true,
      currentModalName: () => 'my-modal',
      currentModalTitle: () => null
    };
    store = new Vuex.Store({getters});
    const wrapper = mount(Modal, {
      propsData: { modalName: 'my-modal', effect: 'slide', speed: 'slow' },
      store,
      attachToDocument: true
    });
    expect($('.cw-vue-modal-wrap')).to.have.class('slide-slow-enter-active');
  });


我期望的类似乎没有插入dom。任何帮助都会很棒。

谢谢

最佳答案

我不确定您将如何按照最佳实践将其实现到项目中,但不是100%肯定,但是计算机科学中有诸如invariantsassertions的构造。

就像我说的,我也不是很熟悉,但这是一个主意:
您可以使用此方法,并在运行测试时将不可见的div插入DOM。例如,您可以在制作动画时将变量设置为true,然后在div标签内的v-bind:show="yourVar"中使用此变量,并在测试中检查该元素的可见性。

我也没有在文档中找到任何“正式”的方式来做,所以这种解决方法可能就是这样。.至少我在编写其他功能测试时是这样做的;)

关于javascript - 有什么办法可以对Vue.js过渡进行单元测试,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46019842/

10-12 12:39
查看更多