2017-03-27 11 views
0

私はパスワードフィールドを持つ単純なフォームを持っています。パスワード入力フィールドが空の場合、このスパンは示されています:ユニットテストVueJS Karma Mocha ExpectJS nextTick not working

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

したら、少なくとも1文字が'Required'メッセージが隠されている入力されます。このロジックはブラウザでうまく動作します。問題は、単体テストを動作させるように見えないことです。

nextTick()はそれを修正すると考えましたが、修正しませんでした。私は電子メールフィールドのためにこれに非常に類似したコードを使用し、それは動作します。私も試した2行をコメントアウトしましたが、それも失敗します。 PhantomJSが使用されます。

パスワードフィールドに値を追加し、 '必須'メッセージが表示されないことを確認するにはどうすればよいですか?

it(`Hides 'Required' message (password input contains data).`, done => { 
    // Extend the component to get the constructor, and initialize directly. 
    let email = '[email protected]' 
    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

は(失敗テストがコメントアウトされている。)私はそれを入力するこの <input v-model="password">ように結合されているので、液成分コンストラクタにパスワードデータを通過させることであることが見出さ

Login.vue Component File

答えて

0

タグ。

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

ここでテストが機能しています。

関連する問題