Vue-js-modal: Example of unit testing a component using VueModal

[jbuget]

I try to make some unit / integration tests but I don't know how to do.

I have configured my main.js file exactly as in the doc.

I have a basic template :

<!-- FeedbackModal.vue -->
<template>
  <div class="feedback-modal-wrapper">
    <modal class="feedback-modal" name="feedback-modal" @before-open="beforeOpen" :height="400">

      <!-- modal header-->
      <div class="feedback-modal__header">
        <h2 class="feedback-modal__title">Contacter le support</h2>
      </div>

      <!-- modal body -->
      <div class="feedback-modal__body">
        <form class="feedback-modal__form">
          <p class="feedback-modal__error" v-if="error" aria-live="polite">{{error}}</p>
          <label class="feedback-modal__label" for="feedback-content">Contenu du message :</label>
          <textarea class="feedback-modal__text" id="feedback-content" v-model="feedback"></textarea>
        </form>
      </div>

      <!-- modal footer -->
      <div class="feedback-modal__footer">
        <div class="feedback-modal__actions">
          <button class="feedback-modal__action feedback-modal__action--send" @click="sendFeedback">Envoyer</button>
          <button class="feedback-modal__action feedback-modal__action--cancel" @click="cancelFeedback">Annuler</button>
        </div>
      </div>

    </modal>
  </div>
</template>

<script>
  export default {

    name: 'FeedbackModal',

    data() {
      return {
        feedback: null,
        error: null,
      };
    },

    methods: {
      beforeOpen() {
        this._resetFeedback();
        this._removeError();
      },

      sendFeedback() {
        // some logic...
      },

      cancelFeedback() {
        this._closeModal();
      },

      // some other methods...

    },
  };

</script>

And my current test class (Mocha) :

import Vue from 'vue';
import FeedbackModal from '@/components/FeedbackModal';

Vue.use(VueModal);

describe('Unit | Component | FeedbackModal.vue', () => {
  let component;

  const feedback = 'Dis-moi petit, as-tu déjà dansé avec le diable au clair de lune ?';
  const consultant = {
    email: '[email protected]',
    name: 'Bruce Wayne',
  };

  beforeEach(() => {

    // given
    const Constructor = Vue.extend(FeedbackModal);

    // when
    component = new Constructor({
      data: {
        feedback,
      },
    }).$mount();

  });

  it('should be named "FeedbackModal"', () => {
    expect(component.$options.name).to.equal('FeedbackModal');
  });

  describe('rendering', () => {
    it('should display the modal', () => {
      return Vue.nextTick().then(() => {
        console.log(component.$el);
        expect(component.$el.querySelector('.feedback-modal')).to.exist;
      });
    });
  });
});

I can not make my test pass to green.

The result of the console.log is :

LOG LOG: <div data-v-605e0740="" class="feedback-modal-wrapper"><!----></div>

So it means the modal was not interpreted / compiled / rendered.

Do you have some clue please ?

Thanks :-)

[euvl]

Hey @jbuget, thanks for using the plugin. If you will look into rendered modal html or source you would notice :data-modal="name" on the modal itself. I think your expect should look this way:

let selector = 'div[data-modal="feedback-modal"]';
let modal = component.$el.querySelector(selector);

expect(modal).to.exist;

[euvl]

I assume the test worked, closing the issue 👍

[vaishnavi-prabakar]

seeing the same issue in our tests. We have a component that renders a modal inside it.
In our tests after we mount the component the element has a comment <!----> in place for the particular modal.
Also tried to explicitly show the modal by calling component.$modal.show('modal-name') but it still renders as a comment.
Is there any other way of testing components that have a modal inside it ?

[seyfer]

@vaishnavi-prabakar have you solved it? I have the same.

[codyolsen]

Also running into this issue. I'm also seeing <!----> when I console.log(wrapper.html()) triggering the click on the toggle button seems to have no effect.

[Batyodie]

Also running into this issue. I'm also seeing <!----> when I console.log(wrapper.html()) triggering the click on the toggle button seems to have no effect.

I also faced with this problem. Did you solve it somehow?

[Batyodie]

Тоже сталкиваюсь с этой проблемой. Я также видел , <!---->когда я console.log(wrapper.html())запуская clickна кнопку переключения , кажется , не имеют никакого эффекта.

Я тоже столкнулся с этой проблемой. Вы как-то решили?

I understood what the problem was, I had to create an asynchronous function so that the test would wait until the modal window opens.

import { createLocalVue, mount, shallowMount } from "@vue/test-utils";
import Vuex from "vuex";
// dropdwons componens files
import DropDown from "@/components/Module/DropDown/DropDown.vue";
import DropDownState from "@/components/Module/DropDown/DropDownState.js";

const localVue = createLocalVue();
localVue.use(Vuex);
const createStore = () => new Vuex.Store(DropDownState); 

test("Testing opened dropdown popUp", async () => {
    const wrapper = mount(DropDown, {
      store,
      localVue,
    });
    const button = wrapper.find("button");
    await button.trigger("click");
    expect(wrapper.element).toMatchSnapshot();
  });

A modal window has appeared in the snapshot, although I still do not understand why the html elements in the snapshot do not have css classes. Just bare selectors, maybe this is due to the fact that I am using css modules
exports[General testing DropDown component Testing opened dropdown popUp 1] =

Сортировка по: популярности

• популярности
• по цене
• по алфавиту

;