is there any way to unit test a Vue.js transition

Question

I have a Vue component with a transition with a dynamic name. I'm trying to find a way to test that the transition name is set properly based on the props I pass into the component. Here's the component.

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

I'm using mocha with chia and the avoriaz library to write unit test. Here is the test.

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');
  });

It doesn't seem like the class I expect is being inserted into the dom. Any help would be great.

Thanks

Answer 1

I am not 100% sure about how you would implement it into your project following best practices, but there are constructs in computer science like invariants and assertions.

Like I said, I'm not quite familiar with it either, but here's an idea: you could use this methodology and insert invisible div's into your DOM while running the tests. For example, you can set a variable to true while doing the animation, then using this variable in v-bind:show="yourVar" inside the div tag and check the visibility of that element within your test.

I also didn't find any "official" way of doing it in the docs, so this workaround may be the way.. at leat that's how I did it when writing other functional tests ;)