Wie berechnete Eigenschaften in Vue.js getestet werden? Kann nicht "Daten" spotten

Question

Ich frage mich, wie man berechnete Eigenschaften in Unit-Tests Vue.js testen.

Ich habe ein neues Projekt über vue-cli (webpack basierend) erstellen.

Zum Beispiel hier sind meine Komponente:

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

Ich habe versucht, es zu testen, wie diese

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) 
}) 

---

FRAGE (zwei Probleme):

1. this.source ist undefined. Wie spottet man oder legt man Wert darauf? (FiltersList.data ist eine Funktion);
2. Vielleicht möchte ich nicht anrufen removeDuplicates Methode, aber wie man diesen Anruf (stub) spotten?

Answer 1

Okay. Ich habe eine dumme Lösung gefunden. Dumm aber funktioniert.

Sie wurden gewarnt =)

Die Idee: .call({}) verwenden this innen zu ersetzen, die ruft:

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) 
}) 

Also im Grunde können Sie Ihre eigenen this mit jeder Art angeben, von Daten. und rufen Sie YourComponent.computed.foo.call(mockSource). Gleich für Methoden

Answer 2

Ändern Sie einfach die Variable, von der die berechnete Eigenschaft abhängt, und erwarten Sie sie.

Das ist meine Arbeit Beispiel für Komponente berechnete prop:

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) 
    }) 
    }) 
})