Question

我使用vue-cli创建示例项目vue init webpack my-test3，并选择包括e2e和单元测试。

问题1：根据template filters的文档，我尝试在main.js中添加新的过滤器：

import Vue from 'vue'
import App from './App'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

我的App.vue：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello></hello>
    <world></world>

    <div class="test-test">{{ 'tesT' | capitalize }}</div>
  </div>
</template>

<script>
import Hello from './components/Hello'
import World from './components/World'

export default {
  name: 'app',
  components: {
    Hello,
    World
  }
}
</script>

我收到警告（错误）：

[Vue警告]：无法解析过滤器：大写（在组件＆lt; app＆gt;中找到）

如果我在初始化新的Vue应用程序之前修改main.js以注册过滤器，那么它可以正常工作。

import Vue from 'vue'
import App from './App'

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

为什么一个人工作而另一个不工作？

问题2：上面的示例工作Vue.filter(...，我添加了World.vue组件的测试：

<template>
  <div class="world">
    <h1>{{ msg | capitalize }}</h1>
    <h2>{{ desc }}</h2>

    Items (<span>{{ items.length }}</span>)
    <ul v-for="item in items">
        <li>{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'world',
  data () {
    return {
      msg: 'worldly App',
      desc: 'This is world description.',
      items: [ 'Mon', 'Wed', 'Fri', 'Sun' ]
    }
  }
}
</script>

World.spec.js：

import Vue from 'vue'
import World from 'src/components/World'

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

describe('World.vue', () => {
  it('should render correct title', () => {
    const vm = new Vue({
      el: document.createElement('div'),
      render: (h) => h(World)
    })
    expect(vm.$el.querySelector('.world h1').textContent)
      .to.equal('Worldly App')
  })
  it('should render correct description', () => {
    const vm = new Vue({
      el: document.createElement('div'),
      render: (w) => w(World)
    })
    expect(vm.$el.querySelector('.world h2').textContent)
      .to.equal('This is world description.')
  })
})

对于要通过的上述测试，我需要包含过滤器大写的Vue.filter(...定义，否则测试将失败。所以我的问题是，如何构建过滤器/组件并初始化它们，因此测试更容易？

我觉得我不应该在单元测试中注册过滤器，这应该是组件初始化的一部分。但是，如果组件继承/使用从主应用程序定义的过滤器，则测试组件将无法工作。

任何建议，评论和阅读材料？

Answer 1

一个好的做法是创建一个过滤器文件夹，并在单个文件中的此文件夹中定义过滤器，并在全局范围内定义所有过滤器，如果您想访问所有组件中的过滤器，例如：


    // capitalize.js

    export default function capitalize(value) {
      if (!value) return '';
      value = value.toString().toLowerCase();
      value = /\.\s/.test(value) ? value.split('. ') : [value];

      value.forEach((part, index) => {
        let firstLetter = 0;
        part = part.trim();

        firstLetter = part.split('').findIndex(letter => /[a-zA-Z]/.test(letter));
        value[index] = part.split('');
        value[index][firstLetter] = value[index][firstLetter].toUpperCase();
        value[index] = value[index].join('');
      });

      return value.join('. ').trim();
    }

要成功测试它，并且如果您使用@vue/test-utils来测试单个文件组件，则可以使用createLocalVue进行测试，如下所示：

// your-component.spec.js

import { createLocalVue, shallowMount } from '@vue/test-utils';
import capitalize from '../path/to/your/filter/capitalize.js';
import YOUR_COMPONENT from '../path/to/your/component.vue';

describe('Describe YOUR_COMPONENT component', () => {
  const localVue = createLocalVue();

  // this is the key line
  localVue.filter('capitalize', capitalize);

  const wrapper = shallowMount(YOUR_COMPONENT, {
    // here you can define the required data and mocks
    localVue,
    propsData: {
      yourProp: 'value of your prop',
    },
    mocks: {
      // here you can define all your mocks
      // like translate function and others.
    },
  });

  it('passes the sanity check and creates a wrapper', () => {
    expect(wrapper.isVueInstance()).toBe(true);
  });
});

希望对您有所帮助。

致谢。

Answer 2

我最好的猜测是，如果在组件中定义filters，它们将仅可用于此组件内。在您的情况下，您只能在主Vue实例中使用capitalize，而不能在其子组件中使用new Handler().postDelayed(new Runnable() { @Override public void run() { Intent mainIntent = new Intent(MainActivity.this, OtherActivityName.class); startActivity(mainIntent); } }, 5000);。将其移至全球水平可以解决问题。

对于第二个问题，您通过在测试文件中添加过滤器定义来做正确的事。

Vue.js过滤和测试

2 个答案: