How to Use Ext Ajax in Promise Style and Test It

whataa 發布于2019-08-19 14:29 / 647人閱讀

After translated a blog about how Promise works in a more functional programming way, I tried to build something to make Ext Ajax call to work in Promise style as a practice.

ExtPromise is a simple wrapper to Ext.Ajax and Ext.data.Connection to help you do an Ajax call in Promise style instead of passing success/failure callback to it. The Promise library I used is the bluebird. I chose it not only because its speed is faster than most of the Promise library, but also its error handling philosophy looks cleaner and more attractive.

It didn"t took long to implement the ExtPromise wrapper but it took me some time to test it.

Originally, I thought I could use the jasmine-ajax I enhanced and shared before about how to test Ajax call in ExtJs. However, it doesn"t work as expected. Testing Async method in Jasmine seems very awkward because the API in version 1.4 and 2.0 are dramaticlly different. Even worst, many strange issues messed around all the way.

I finally gave up and search other alternative approaches. Sinon.js and Mocha come to rescure. It is pretty easy to test the Ajax call using the useFakeXMLHttpRequest provided by Sinon and the Async testing in Mocha looks more intuitive (Jasmine 2.0 use the same way). Let"s see how the testing (BDD style) is setup.

describe("Ajax should be now working in promise style", function() {
    var xhr, ajax;

    before(function() {
        xhr = sinon.useFakeXMLHttpRequest();
        xhr.onCreate = function(xhr) {
            ajax = xhr;
        }
    })

    after(function() {
        xhr.restore();
    });

    describe("ExtPromise.Ajax", function() {
        it("#success case", function(done) {
            ExtPromise.Ajax().request({url: "foo"})
            .then(function(result) {
                expect(result.responseText).to.equal("Bar");
                done();
            })
            .catch(done);

            ajax.respond(200, { "Content-Type": "application/json" }, "Bar");
        });
    });
});

It"s quite straightforward. Before test spec runs, it"s required to stub the XMLHttpRequest using Sinon"s useFakeXMLHttpRequest API and obtain a reference in the onCreate method so that later it can be used to stub a response.

Passing a done parameter in the test spec function tells Mocha that this spec is for Async testing and callinig done() will end it. One thing to notice here is this part.

    .catch(done);

If you don"t do this, and the assertion in the test spec failed, the error it shows will be a timeout error instead of telling the true assertion error.

When testing failure case, the style written like below doesn"t look good and error-prone because done() is called twice although you might think the success resolver doesnot require as it should not be called.

    ExtPromise.Ajax().request({url: "foo", scope: scopeObj})
        .then(scopeObj.getName)
        .then(function(result) {
            expect(result).to.equal("Bar In scope");
            done();
        }, function(result) {
            expect(result.status).to.equal(500);
            done();
        })
        .catch(done);

    ajax.respond(500, { "Content-Type": "application/json" }, "Error");

You may rewrite the call to done in a then call.

    ExtPromise.Ajax().request({url: "foo", scope: scopeObj})
        .then(scopeObj.getName)
        .then(function(result) {
            expect(result).to.equal("Bar In scope");
        }, function(result) {
            expect(result.status).to.equal(500);
        })
        .then(done)
        .catch(done);

    ajax.respond(500, { "Content-Type": "application/json" }, "Error");

GPU云服務器云服務器 run_unittest_in_test How open 與direct how how云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78003.html

Licia：最全最實用的 JavaScript 工具庫

摘要：為了避免不同項目之間進行復制粘貼，可以將這些常用的函數封裝到一起并發布包。目前所包含模塊已達三百個，基本可以滿足前端的日常工發需求。二使用打包工具該項目自帶打包工具，可以通過配置文件或命令行掃描源碼自動生成項目專用的工具庫。前言在業務開發過程中，我們經常會重復使用日期格式化、cookie 操作、模板、瀏覽器判斷、類型判斷等功能。為了避免不同項目之間進行復制粘貼，可以將這些常用的函數...

luxixing 2019-08-22 17:00 評論0 收藏0
promise, async, await, execution order

摘要： async can be transformed to promise. So, if we want to understand async, we have to understand promise first. Promise Normally, promise is easy to understand, especially when using like this: p...

neuSnail 2019-08-23 14:21 評論0 收藏0
react antd-mobile 項目中實現 css 與 less 局部作用域化

摘要：前言最近搭建的項目想引入并實現樣式局部作用域化，但是在網上找了很多方法試過了都不行，最后打到解決方法，在此記下這慘痛的歷程。微信公眾號：愛寫bugger的阿拉斯加如有問題或建議，請后臺留言，我會盡力解決你的問題。 1. 前言最近搭建的 react 項目想引入 less ,并實現樣式局部作用域化，但是在網上找了很多方法試過了都不行，最后打到解決方法，在此記下這慘痛的歷程。 2. cr...

Snailclimb 2019-08-29 16:15 評論0 收藏0
@vue/cli+webpack搭建多頁面應用

摘要：本文記錄了用搭建項目后，配置成多頁面應用的過程。項目地址首先全局安裝創建初始項目創建后默認是一個單頁面應用，在默認結構的基礎上將目錄結構改為如下形式。其中目錄下的和就是多頁面應用中的兩個頁面。 vue-multi-pages 本文記錄了用@vue/cli+webpack搭建項目后，配置成多頁面應用的過程。項目地址：https://github.com/mandyshen9... 首先...

ThinkSNS 2019-08-26 10:25 評論0 收藏0
vue開發看這篇文章就夠了

摘要：注意此處獲取的數據是更新后的數據，但是獲取頁面中的元素是更新之前的鉤子函數說明組件已經更新，所以你現在可以執行依賴于的操作。鉤子函數說明實例銷毀 Vue -漸進式JavaScript框架介紹 vue 中文網 vue github Vue.js 是一套構建用戶界面(UI)的漸進式JavaScript框架庫和框架的區別我們所說的前端框架與庫的區別？ Library 庫，本質上是一...

fsmStudy 2019-08-21 18:37 評論0 收藏0