2016-11-16 96 views
1

我用vue-cli創建示例項目vue init webpack my-test3,並選擇包括e2e和單元測試。Vue.js過濾器和測試

問題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戰爭N]:無法解析過濾器:利用(在組件中發現<應用>)

如果我修改main.js初始化新的Vue應用前,註冊過濾器,那麼它的工作原理沒有問題。

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(...過濾器大寫的定義,否則測試將失敗。所以我的問題是,如何構造過濾器/組件並初始化它們,因此測試更容易?

我覺得我不應該在單元測試中註冊過濾器,這應該是組件初始化的一部分。但是,如果組件是繼承/使用從主應用程序定義的過濾器,測試組件將無法正常工作。

任何建議,意見,閱讀材料?

回答

0

我最好的猜測是,如果你在組件內定義了filters,它們將只能在這個組件內部使用。就你而言,你只能在主Vue實例中使用capitalize,而不是其子組件。將此轉移到全球層面解決了這個問題。

對於第二個問題,您通過在測試文件中添加過濾器定義來做正確的事情。