ExtJS 4.2.1 模拟 Ext.Ajax.request

Posted 2023-02-26

【中文标题】ExtJS 4.2.1 模拟 Ext.Ajax.request

【英文标题】：ExtJS 4.2.1 mocking Ext.Ajax.request

【发布时间】：2013-10-25 14:44:58

【问题描述】：

对于使用 jasmine 进行的前端单元测试，我想在我的应用程序中模拟我的所有请求。

我已经实现了一个模拟所有代理的方法。

proxy: appname.classes.proxy.ProxyNegotiator.getModelProxy("User")

这个方法做了这样的事情：

getModelProxy: function(config) 
    var url = this.getUrl(config);

    if (this.getProxyType() == 'api') 
        return appname.classes.proxy.WebApiProxy.getModelProxy(url);
     else if (this.getProxyType() == 'test') 
        return appname.classes.proxy.LocalTestProxy.getModelProxy(url);
    
    return undefined;

所以你可以想象根据我的 ProxyType 配置，我得到了 web api 代理或本地代理进行测试。我现在已经涵盖了我的 crud 操作..

不过，我确实还有另一个问题要处理.. 我的应用程序中确实有一些其他请求（验证用户名）：

//check if Username is Valid
Ext.Ajax.request(
    url: '/api/User',
    method: 'GET',
    async: false,
    params:  id: user.get('Id'), username: user.get('UserName') ,
    failure: function(response, opts) 
        myErrors.push(
            field: 'UserName',
            message: appname.locale.ErrorInvalidUsername
        );
    
);

我在模拟这个 Ext.Ajax.request 事情时确实遇到了一些麻烦......我已经在网上搜索过，但没有找到任何好的解决方案。 模拟此请求的最佳做法是什么？我很高兴你能给我的每一个提示和/或想法。请帮忙！

【参考方案1】：

从 4.0.7 开始的所有 Ext JS 版本都带有 Ext.ux.ajax.SimManager 类。它不包含在基础库构建中，但未缩小的源代码位于您的 Ext JS 文件夹的 examples/ux/ajax 下。

要使用它，您需要使用定义返回数据的 Simlet 配置注册一个 URL。

Ext.onReady(function () 
    Ext.ux.ajax.SimManager.init(
        delay: 500  // Simulates network latency/server processing time
    ).register(
        '/api/User': 
            stype: 'json',  // stype is what kind of Simlet you want to use
            data:  [
                // JSON response data, if needed
            ]
        
    );
);

然后你像往常一样发出你的 Ajax 请求，SimManager 将通过注册的 Simlet 重新路由请求。

【讨论】：

哦，我根本没找到这个。是否也可以根据功能返回不同的响应？像这样'/api/User': (function () if(condition) return status: 200, stype: 'json' else return status: 400, stype: 'json' ()) ???

当我尝试返回条件响应（simlet）时，我似乎无法访问（例如get）参数......真是太糟糕了。

【参考方案2】：

我会检查 sinon js 来做你的 ajax 模拟。我们目前正在使用它在我们的 Ext 繁重的应用程序中编写单元测试。 http://sinonjs.org/docs/#fakeServer

您应该能够使用以下方式测试您的 ajax 请求：

    setUp: function () 
        this.server = sinon.fakeServer.create();
    ,

    tearDown: function () 
        this.server.restore();
    ,

    "test user" : function () 
        this.server.respondWith("GET", "/api/User,
                                [500,  "Content-Type": "application/json" ,
                                 '[ "id": 12, "comment": "Hey there" ]']);

        Ext.Ajax.request(
            url: '/api/User',
            method: 'GET',
            async: false,
            params:  id: user.get('Id'), username: user.get('UserName') ,
            failure: function(response, opts) 
                myErrors.push(
                    field: 'UserName',
                    message: appname.locale.ErrorInvalidUsername
                );
            
        );

        this.server.respond();

        //assert myErrors
    

【讨论】：

sinon js 看起来很不错；）我会在星期一检查并接受它；）