Question

我有一个带有动态名称转换的Vue组件。我试图找到一种方法来测试转换名称是否根据我传递给组件的道具正确设置。这是组件。

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

我正在使用带chia的mocha和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中。任何帮助都会很棒。

由于

Answer 1

我不是100％确定如何按照最佳做法将其实施到您的项目中，但是在invariants和assertions等计算机科学中有一些结构。

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

我也没有在文档中找到任何“官方”方式，所以这种解决方法可能就是这样......在编写其他功能测试时我是如何做到的;）

有没有办法单元测试Vue.js过渡

1 个答案: