ember.js：ajaxリクエストによる受け入れテスト

Question

ユーザーがフォームに記入し、サードパーティのリソースに対してajaxリクエストが行われた場合の受け入れテストを作成しています。私はEmber CLI Mirageとリクエストを嘲笑しています。

私は、テストをパスした後に私がリファクタリングする基本的な実例を書いています。私はサービスやユーティリティに私の要求を抽象化する必要があることを知っていますが、私はその周りの動作テストなしで自分のコードをリファクタリングしたくありません。

しかし、私のコードは動作しているようですが、テンプレートの内容を変更した結果を返すと、テストをパスすることができません。

注意が必要な場合があります。私が試しているサードパーティのAPIは、安らかではありません。私はまだ、Webサービスの標準的なURLを設定していない

export default function() { 
    this.post('/LogonAction',() => { 
    return {foo: 'bar'}; 
    }); 
} 

：

はここで蜃気楼の設定です。それは外部サービスでなければなりません。

そして、私のコンポーネント：

import Ember from 'ember'; 

export default Ember.Component.extend({ 
    result: null, 
    errors: null, 
    usernameTextChanged: function() { this.reset(); }.observes('username'), 
    passwordTextChanged: function() { this.reset(); }.observes('password'), 
    reset() { 
    this.set('errors', null); 
    this.set('result', null); 
    }, 
    actions: { 
    sync() { 
     this.reset(); 

     // TODO abstract out validation and add more use cases 
     if(this.get('username') === undefined || this.get('password') === undefined) { 
     this.set('errors', 'Please fill out the form'); 
     } 
     else { 
     let params = { userId: this.get('username'), passwd: this.get('password') } 

     this.set('test', 'foos'); //just checking... 

     // TODO abstract out into a utility and move config values into config 
     Ember.$.post('/LogonAction', params).then((r) => { 
      // When I run tests, this renders to console. 
      console.log('promise happened 1', r, this.get('result')); 
      // Fails here. I don't know why. 
      this.set('result', true); 
      // This does not execute 
      console.log('promise happened 2', this.get('result')); 
     }); 
     } 
    } 
    } 
}); 

あなたが、私はそれをデバッグすることができますので、私の出力は二回コンソールにいることがわかります。私はテストを書いている間、これが正しい方法であるとは分かりません。

これは私のテンプレートです：

<form id="logon" {{action 'sync' on='submit'}}> 
    {{input value=username type="text" class="username" placeholder="Your username"}} 
    {{input value=password type="password" class="password"}} 
    <button>Click me</button> 

    [[{{test}}]] <!-- this is just debugging --> 

    {{#if result}} 
    <div id="result">Sync complete</div> 
    {{/if}} 
    {{#if errors}} 
    <div id="result">{{errors}}</div> 
    {{/if}} 
</form> 

そして最後に、私のテスト：

test('logging in', assert => { 
    server.createList('LogonAction', 0); 
    visit('/'); 

    console.log(0); 

    fillIn('input.username', 'foo'); 
    fillIn('input.password', 'bar'); 
    click('button'); 

    console.log(1); 

    andThen(() => { 
    // The above console logs have happened. 
    // It does not have the div#result tag in it! 
    console.log(find('#logon').html()); 
    assert.equal(find('#result').text(), 'Sync complete'); // fails. 
    }); 
}); 

コンソールロギングは、（私が思う）私は、ページの表示されていることを主張する前に約束が解決されることを私に伝えます結果をユーザーに返します。しかし、私はこれをパスすることはできません！ resultの値を設定するとすぐに失敗します。

ご迷惑をおかけして申し訳ございません。

Answer 1

これは、テストモードで実行ループが無効になっていることと関連している可能性があります。それにもかかわらず、私はあなたが次のエラーを受け取ることを期待していたでしょう "アサーション失敗：テストモードをオンにして、実行ループの自動実行を無効にしました。黙って次に試してみることができます。以下のようにするだけEmber.run内のコードthis.set('result', true);をラップ：

Ember.run(()=>{ 
     this.set('result', true); 
    }); 

私は、コードスニペットを試してみるために責めをセットアップする時間がありません。あなたが提供しました。そのために残念;あなたがひねりを設定し、私の答えの結果についてのフィードバックを与えるなら、私はより多くを助けるでしょう。がんばろう！