javascript - 如何为测试禁用 vue.js 转换？

Question

我有一个使用 <transition> 的 vue.js 组件动画隐藏/显示的元素。

为了加快测试速度，我想禁用动画。我该怎么做？

* { transition: none !important }建议在这里:https://github.com/vuejs/vue/issues/463但这似乎没有什么不同。

我在这里创建了一个 fiddle :https://jsfiddle.net/z11fe07p/2268/

运行“测试”最后的输出是“3. Display should be "none", it is: block”。如果我将超时增加到 100，或者删除 <transition>元素，我得到预期的输出“3. Display should be “none”，它是:none”

那么我怎样才能禁用动画，这样我就可以摆脱 setTimeout电话？

编辑:

我尝试删除所有 css 样式，但仍然有同样的问题。所以问题是由简单地触发 <transition>元素。

编辑 2:

将 fiddle 更新为没有样式，只有 <transition>元素。还包括对 $nextTick() 的调用以确保这不是它表现异常的原因。

将调用更改为 wait100至 wait10相反，您会看到测试开始失败

https://jsfiddle.net/z11fe07p/2270/

编辑 3:

将示例代码放在此处，以便大家更轻松地使用:)

new Vue({
  el: '#app',
  template: `
    <span>
      <button @click="test()">Run test</button>
      <transition>
        <p v-show="show">Hello, world!</p>
      </transition>
    </span>
  `,
  data() {
    return {
      show: false,
    };
  },
  methods: {
    test() {
      const wait10 = _ => new Promise(resolve => setTimeout(resolve, 10));
      const wait100 = _ => new Promise(resolve => setTimeout(resolve, 100));
      const showParagraph = _ => this.show = true;
      const hideParagraph = _ => this.show = false;
      const p = document.querySelector('p');

      showParagraph();

      this.$nextTick()
        .then(wait10)
        .then(() => {
          const display = getComputedStyle(p).display;
          assertEqual(display, 'block');
        })
        .then(hideParagraph)
        .then(this.$nextTick)
        .then(wait100)
        .then(() => {
          const display = getComputedStyle(p).display;
          assertEqual(display, 'none');
        });
    }
  }
});

function assertEqual(a, b) { 
  if (a !== b) {
    console.error('Expected "' + a + '" to equal "' + b + '"');
  }
};

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app"></div>

Answer 1

当 env 正在 testing 时，我基本上将所有 transition 和 transition-group 更改为具有渲染功能的 div。

if (process.env.NODE_ENV === 'testing') {
  const div = {
    functional: true,
    render: (h, { data, children }) => h('div', data, children),
  }

  Vue.component('transition', div)
  Vue.component('transition-group', div)
}