Vue.jsで計算されたプロパティをテストするには？ "データ"を模倣できない

Question

Vue.jsの単体テストで計算されたプロパティをどのようにテストするのだろうか。

vue-cli（webpackベース）で新しいプロジェクトを作成しました。例えば

ここでは私のコンポーネントです：

<script> 
    export default { 
    data() { 
     return { 
     source: [] 
     } 
    }, 
    methods: { 
     removeDuplicates (arr) { 
     return [...new Set(arr)] 
     } 
    }, 
    computed: { 
     types() { 
     return this.removeDuplicates(this.source)) 
     } 
    } 
    } 
</script> 

私はこの

it('should remove duplicates from array',() => { 
    const arr = [1, 2, 1, 2, 3] 
    const result = FiltersList.computed.types() 
    const expectedLength = 3 

    expect(result).to.have.length(expectedLength) 
}) 

---

QUESTION（二つの問題）のようにそれをテストしようとしました：

1. this.sourceは、undefinedである。それを模倣したり価値を設定する方法は？ （FiltersList.dataは関数です）。
2. おそらく私はremoveDuplicatesメソッドを呼び出すことをwan'tしませんが、この呼び出しを模擬する（スタブ）方法はありますか？

Answer 1

大丈夫です。私は愚かな解決策を見つけました。ダムだが働く。

あなたは=警告されている）

アイデア：だから、基本的にはあらゆる種類のthis自分自身を指定することができます

it('should remove duplicates from array',() => { 
    const mockSource = { 
    source: [1, 2, 1, 2, 3], 
    getUniq (arr) { 
     return FiltersList.methods.removeDuplicates(arr) 
    } 
    } 

    const result = FiltersList.computed.types.call(mockSource) 
    const expectedLength = 3 

    expect(result).to.have.length(expectedLength) 
}) 

：呼び出すthis内部を置き換えるために.call({})を使用するにはデータ。 となり、YourComponent.computed.foo.call(mockSource)となります。メソッドと同じ

Answer 2

計算されたプロパティに依存する変数を変更し、それを期待します。

これは、コンポーネント計算された小道具のための私の仕事の例です：

import Vue from 'vue' 
import Zoom from 'src/components/Zoom' 
import $ from 'jquery' 

/* eslint-disable no-unused-vars */ 
/** 
* get template for wrapper Vue object make Vue with Zoom component and that template 
* @param wrapperTemplate 
* @returns {Vue$2} 
*/ 
const makeWrapper = (wrapperTemplate = '<div><zoom ref="component"></zoom></div>') => { 
    return new Vue({ 
    template: wrapperTemplate, 
    components: {Zoom} 
    }) 
} 

const startWrapperWidth = 1093 
const startWrapperHeight = 289 
const startImageWidth = 1696 
const startImageHeight = 949 
const padding = 15 

/** 
* gets vueWrapper and return component from it 
* @param vueWrapper 
* @param useOffset 
* @returns {'Zoom component'} 
*/ 
const setSizesForComponent = (vueWrapper) => { 
    vueWrapper.$mount() 
    var cmp = vueWrapper.$refs.component 
    var $elWrapper = $(cmp.$el) 
    var $elImage = $elWrapper.find(cmp.selectors.image) 
    $elWrapper.width(startWrapperWidth) 
    $elWrapper.height(startWrapperHeight) 
    $elWrapper.css({padding: padding}) 
    $elImage.width(startImageWidth) 
    $elImage.height(startImageHeight) 
    cmp.calculateSizesAndProportions() 
    return cmp 
} 
describe('onZoom method (run on mousemove)',() => { 
    sinon.spy(Zoom.methods, 'onZoom') 
    let vueWrapper = makeWrapper() 
    let cmp = setSizesForComponent(vueWrapper) 
    let e = document.createEvent('HTMLEvents') 
    e.initEvent('mousemove', true, true) 
    e.pageX = 150 
    e.pageY = 250 
    let callsOnZoomBeforeMousemove = Zoom.methods.onZoom.callCount 
    cmp.$el.dispatchEvent(e) 
    describe('left and top computed props',() => { 
    it('left',() => { 
     expect(cmp.left).is.equal(-74) 
    }) 
    it('top',() => { 
     expect(cmp.top).is.equal(-536) 
    }) 
    }) 
})