單元測試VueJS Karma Mocha ExpectJS nextTick not working

Question

我有一個帶密碼字段的簡單表單。如果密碼輸入字段爲空示出了該跨度：輸入

<span id='password-required' v-show='!validation.password'>Required</span> 

一旦至少一個字符的'Required'信息已被隱藏。這個邏輯在瀏覽器中工作得很好。問題是，我似乎無法讓單元測試工作。我想會解決它，但它沒有。我使用的代碼與電子郵件字段非常相似，並且工作正常。我評論了我也嘗試過的兩行，但也失敗了。使用PhantomJS。

如何向密碼字段添加值並驗證「必需」消息是否隱藏？

it(`Hides 'Required' message (password input contains data).`, done => { 
    // Extend the component to get the constructor, and initialize directly. 
    let email = 'a@b' 
    const Constructor = Vue.extend(Login) 
    const component = new Constructor({ 
    propsData: { 
     emailentry: email 
    } 
    }).$mount() 

    let password = '123' 
    component.$el.querySelector('#password').value = password 

    //This line passes. 
    expect(component.$el.querySelector('#password').value).to.equal(password) 

    // Confirm 'Required' message is hidden. 
    Vue.nextTick(() => { 
    expect(component.$el.querySelector('#password-required').style.display).to.equal('none') 

    // expect(component.validation.password).to.equal(true) 
    // expect(!!component.user.password.trim()).to.equal(true) 
    done() 
    }) 
}) 

Login.spec.js Test File（未按測試註釋。）

Login.vue Component File

Answer 1

我發現，解決方案是將密碼數據傳遞到部件的構造，因爲它勢必這樣<input v-model="password">到輸入標籤。

let thePassword = '123' 

// Extend the component to get the constructor, which we can then initialize directly. 
const Constructor = Vue.extend(Signup) 
const component = new Constructor({ 
    propsData: { 
    emailentry: email 
    }, 
    data: { 
    password: thePassword   
    } 
}).$mount() 

現在測試正在工作。