@ok listener не запускается в b-модальном режиме с помощью jest-test-utils (vue-bootstrap)

Я использую b-модальное окно vue-bootstrap с крючком @ok="save"

Mycomponent.vue выглядит так:

<template>
  <div>
    <b-button @click="add">open modal</b-button>
    <b-modal static lazy id="modal-detail" @ok="save">
      <b-form-input v-model="fooName"></b-form-input>
    </b-modal>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";

import { RestClient } from "./RestClient";

@Component({ name: "fooController" })
export default class FooController extends Vue {
  public fooName = "";
  public add(): void {
    this.$root.$emit("bv::show::modal", "modal-detail");
  }
  public save(): void {
    console.log("in save method");
    RestClient.create(this.fooName);
  }
}
</script>

RestClient.ts выглядит так:

export class RestClient {
  static create(payload: string) {
    return payload;
  }
}

Тест выглядит так:

import { createLocalVue, mount } from "@vue/test-utils";
import BootstrapVue from "bootstrap-vue";
import MyComponent from "./mycomponent.vue";
import { RestClient } from "./RestClient";

jest.mock("./RestClient.ts", () => ({
  RestClient: {
    create: jest.fn(() => {
      return {};
      //   return Promise.resolve({});
    })
  }
}));

describe("component test", () => {
  const localVue = createLocalVue();
  localVue.use(BootstrapVue);

  it("should call the create method on the REST client when ok-ing the modal", (done) => {
    const wrapper = mount(MyComponent, {
      attachToDocument: true,
      localVue
    });
    expect(wrapper.isVueInstance()).toBe(true);

    // there is just one button: the open modal button
    wrapper.find("button").trigger("click");
    const modal = wrapper.find("#modal-detail");

    modal.vm.$emit("ok");

    return wrapper.vm.$nextTick().then(() => {
      expect(RestClient.create).toBeCalled();
      return wrapper.vm.$nextTick().then(done);
    });
 });
});

Я испускаю событие ok в модальном окне напрямую. Затем я наблюдаю за выполнением оператора console.log в методе сохранения, который я не вижу в терминале при выполнении теста.

Таким образом, RestClient.create-метод не вызывается. Почему?


person Joel    schedule 10.07.2019    source источник


Ответы (1)


@ok - это настраиваемое событие Vue, а не собственное событие DOM браузера. Модификатор .prevent не будет работать с пользовательскими событиями Vue.

person Troy Morehouse    schedule 10.07.2019
comment
удаление .prevent по-прежнему не запускает save-метод - person Joel; 10.07.2019
comment
Глядя на github.com/ bootstrap-vue / bootstrap-vue / blob / dev / src / components /, я думаю, что событие @ok в данном случае специфично для vue-bootstrap. - person Joel; 10.07.2019
comment
Да, это настраиваемое событие компонента Vue для BootstrapVue (я написал код) - person Troy Morehouse; 10.07.2019
comment
Итак, как я могу проверить, действительно ли modal.vm. $ Emit (ok) вызывал связанный метод? - person Joel; 10.07.2019
comment
Если вы используете JEST, настройте фиктивную функцию сохранения с помощью jest.fn(), и вы все равно можете использовать тестовые утилиты Vue, чтобы найти кнопку ОК и щелкнуть ее. Обратите внимание, что в модальном окне используются переходы, поэтому вам нужно будет await, чтобы requestAnimationFrame завершился после монтирования модального окна, прежде чем искать кнопку и щелкать ее. Вы можете увидеть, как мы тестируем модальные окна, на github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/components/ - person Troy Morehouse; 11.07.2019