vue.js - 在 bootstrap-vue modal (b-modal) int 测试中找不到按钮-6ren

vue.js - 在 bootstrap-vue modal (b-modal) int 测试中找不到按钮

转载作者：行者123 更新时间：2023-12-02 02:24:11

24

4

我想在我的测试用例中测试模态行为。

通过页面上的按钮打开模态框 (isVisible false=> true)
通过模态上的按钮关闭模态(isVisible trye=> false)

第一步没问题，但第二步失败。我可以通过ref找到modal，但是找不到modal上的按钮。

首页.vue

<template>
  <div class="home">
    <b-button id='button-open' @click="open">open</b-button>
    <b-modal
      ref="modal-ref"
      hide-footer
    >
      <b-button id='button-close' @click="close">close</b-button>
    </b-modal>
  </div>
</template>


<script>
export default {
  methods: {
    open() {
      console.log('open');
      this.$refs['modal-ref'].show();
    },
    close() {
      console.log('ok');
      this.$refs['modal-ref'].hide();
    },
  },
};
</script>

home.spec.js

import { expect } from 'chai';
import { createLocalVue, mount } from '@vue/test-utils';
import BootstrapVue from 'bootstrap-vue';
import Home from '@/views/Home.vue';

describe('Boostrap Modal', () => {
  it('open and close modal', async () => {
    const localVue = createLocalVue();
    localVue.use(BootstrapVue);
    const wrapper = mount(Home, {
      localVue,
      attachToDocument: true,
    });

    const open = wrapper.find('#button-open');
    const modal = wrapper.find({ ref: 'modal-ref' });
    expect(modal.vm.isVisible).to.equal(false);
    open.trigger('click');
    await wrapper.vm.$nextTick();
    console.log(modal.exists());
    expect(modal.vm.isVisible).to.equal(true);

    // find it from modal
    const close = modal.find('#button-close');
    expect(close.exists()).to.equal(true);
    close.trigger('click');

    await wrapper.vm.$nextTick();
    expect(modal.vm.isVisible).to.equal(false);
    wrapper.destroy();
  });
});

我不明白为什么找不到关闭按钮。(close.exists() => false)

最佳答案

默认情况下，模态窗口会附加到<body>元素。显示时不会出现在 wrapper 内。

您需要查询document找到您的按钮:

import { expect } from 'chai';
import { createLocalVue, mount, createWrapper } from '@vue/test-utils';
import BootstrapVue from 'bootstrap-vue';
import Home from '@/views/Home.vue';

describe('Boostrap Modal', () => {
  it('open and close modal', async () => {
    const localVue = createLocalVue();
    localVue.use(BootstrapVue);
    const wrapper = mount(Home, {
      localVue,
      attachToDocument: true,
    });

    const open = wrapper.find('#button-open');
    const modal = wrapper.find({ ref: 'modal-ref' });
    expect(modal.vm.isVisible).to.equal(false);
    open.trigger('click');
    await wrapper.vm.$nextTick();
    await wrapper.vm.$nextTick();
    console.log(modal.exists());
    expect(modal.vm.isVisible).to.equal(true);

    // find it from modal close button in the document
    const closeElement = document.getElementById('button-close');
    expect(closeElement).toBeDefined();
    const closeWrapper = createWrapper(closeElement);
    expect(closeWrapper.exists()).to.equal(true);
    expect(closeWrapper.is('button')).toBe(true);
    closeWrapper.trigger('click');

    await wrapper.vm.$nextTick();
    await wrapper.vm.$nextTick();
    expect(modal.vm.isVisible).to.equal(false);
    wrapper.destroy();
  });
});

关于vue.js - 在 bootstrap-vue modal (b-modal) int 测试中找不到按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58320101/

24

4

0

文章推荐： modulo - C++中如何求大数除法的余数？

文章推荐： java - 如何一次删除多个gridview项目

文章推荐： java - 使用 xpath 根据标题选择元素时出现问题

文章推荐： parsing - 在 Haskell 中创建一个 Read 实例

grails - Cereal ，哥伦。按 parent 找 child ，按 child 找 parent
例如，我有一个父类Author: class Author { String name static hasMany = [ fiction: Book,
javascript - DOJO:找 child
代码如下: dojo.query(subNav.navClass).forEach(function(node, index, arr){ if(dojo.style(node, 'd
mysql - 加入两张 table 找 friend
我有一个带有 Id 和姓名的学生表和一个带有 Id 和 friend Id 的 Friends 表。我想加入这两个表并找到学生的 friend 。例如，Ashley 的 friend 是 Saman
grails - Grails按 child 找 parent
我通过互联网浏览，但仍未找到问题的答案。应该很容易: class Parent { String name Child child } 当我有一个 child 对象时，如何获得它的 paren
android - Firebase Android 找 friend 功能
我正在尝试创建一个以 Firebase 作为我的后端的社交应用。现在我正面临如何(在哪里？)找到 friend 功能的问题。我有每个用户的邮件地址。我可以访问用户的电话也预订。在传统的后端中，我
ios - Apple Game Center 和 Facebook 找 friend iOS6
我主要想澄清以下几点: 1。有人告诉我，在 iOS 5 及以下版本中，如果您使用 Game Center 设置多人游戏，则“查找 Facebook 好友”(如与好友争夺战)的功能不是内置的，因此您需要
docker - 有什么用!意思？找。\! -用户redis -exec chown redis '{}' +
关于redis docker镜像ENTRYPOINT脚本 docker-entrypoint.sh : #!/bin/sh set -e # first arg is `-f` or `--some-

首页

博学

6Ren·AI

商城

vue.js - 在 bootstrap-vue modal (b-modal) int 测试中找不到按钮