Zombie.js pressButtonブラウザのpost-ajaxバージョンにアクセスするには？

Question

私はブラウザアクションのテストを自動化するためにzombie.jsを使用しています。この場合、ボタンをクリックしてフォームを送信します。

テストの外では、実際のブラウザでは、ボタンをクリックすると、AJAX要求がトリガされます。 AJAX要求が完了すると、2つのdiv.alert要素がドキュメント本文に追加されます。

以下のテストでは、ボタンを押してリクエストをトリガしますが、その後テストで期待されるdiv要素を探してドキュメントを照会すると、リクエストを見つけることができません。私はテストがAJAX呼び出しが終了する前に存在するドキュメントの "古い"バージョンを照会していると思います。私の質問は：どのようにの後に存在する文書のバージョンにアクセスすることができますAJAX呼び出しが終了し、要素を追加しますか？

context("when visited on the 'new' page", function(){ 
    before(function(){ return browser.visit('/'); }); 
    before(function(){ return browser.clickLink('new'); }); 

    context("when submitted with invalid values", function(){ 
    before(function(){ 
     return browser.pressButton("Submit") 
    }) 

    it("flash should include error messages", function(){ 
     var messages = browser.queryAll(".alert") 
     console.log(messages) 
     expect(messages.length).toEqual(2) 
    }) 
    }) 
}) 

注：私はzombie.jsテストに探して、そしてasyncとawaitの使用を見出すが、私は私の.jsファイルにそれらのキーワードを使用しようとすると、それはそれらを認識しませんされています。これは別の問題かもしれませんが、ソリューションに非同期/待機が必要な場合、mochaでこれらのキーワードを認識できるようにするにはどうすればよいですか？

Answer 1

ajaxの呼び出しを変更すると、画面を更新した後、彼らはイベントをbodyなどとディスパッチします。 "アクション完了"。テストでは、イベントが受信されるまで解決されないPromiseを返すリスナー関数を作成できます。

const actionAndWait = (action, eventName) => new Promise(resolve => { 

    const listener =() => { 
     browser.body.removeEventListener(eventName, listener); 
     resolve(); 
    }; 

    browser.body.addEventListener(eventName, listener); 
    action(); 
    browser.wait(); 

}); 

その後、

return actionAndWait(() => browser.pressButton("Submit"), "action-completed");