ImplementingandTestingExtAjaxCallswithPromises

This article delves into the practical application of Promises in Ext Ajax calls, enhancing the traditional callback mechanism with a more modern and functional programming paradigm. The implementation leverages the Bluebird library, renowned for its performance and robust error handling capabilities.

The ExtPromise wrapper simplifies making Ajax calls by encapsulating Ext.Ajax and Ext.data.Connection methods within a Promise framework. This transformation not only streamlines the code but also enhances readability and maintainability.

While developing the ExtPromise wrapper was relatively straightforward, testing posed significant challenges. Initially, attempts were made to utilize the jasmine-ajax library, which had been previously enhanced for testing Ajax calls in ExtJS applications. However, compatibility issues between different versions of Jasmine and unexpected errors led to exploring alternative testing frameworks.

Sinon.js and Mocha emerged as viable solutions. Sinon's useFakeXMLHttpRequest feature allows for mocking server responses, making it easier to simulate network requests during tests. Meanwhile, Mocha's support for asynchronous testing provides a more intuitive and flexible testing environment compared to earlier versions of Jasmine.

Below is a sample BDD-style test suite for the ExtPromise.Ajax functionality:

describe('Ajax calls in promise style', function() {
    let xhr, ajax;
    beforeEach(function() {
        xhr = sinon.useFakeXMLHttpRequest();
        xhr.OnCreate= function(request) {
            ajax = request;
        };
    });
    afterEach(function() {
        xhr.restore();
    });
    describe('ExtPromise.Ajax', function() {
        it('should handle successful responses', function(done) {
            ExtPromise.Ajax().request({url: 'foo'})
            .then(function(response) {
                expect(response.responseText).to.equal('Bar');
                done();
            })
            .catch(done);
            ajax.respond(200, { 'Content-Type': 'application/json' }, 'Bar');
        });
    });
});

In this setup, the beforeEach and afterEach hooks ensure that each test starts with a fresh XMLHttpRequest mock. The done callback is crucial for indicating the completion of asynchronous operations, ensuring that the test framework waits for the promise to resolve or reject before concluding the test.

For handling failures, the test structure can be optimized to avoid redundant calls to done():

it('should handle failure responses', function(done) {
    ExtPromise.Ajax().request({url: 'foo', scope: scopeObj})
    .then(scopeObj.getName)
    .then(function(result) {
        expect(result).to.equal('Bar In scope');
    }, function(error) {
        expect(error.status).to.equal(500);
    })
    .then(done)
    .catch(done);
    ajax.respond(500, { 'Content-Type': 'application/json' }, 'Error');
});

This adjustment ensures that the test remains clean and avoids potential pitfalls associated with multiple calls to done().