MockJAX not responding to CasperJS

Question

Below is my code which uses casperjs and mockjax . However , mockjax is not able to intercept the ajax call . It returns the ajax response instead of the mock response . Also, $.mockjax.mockedAjaxCalls().length this does not print anything . Any idea what I am doing here?

Is there any way I could actually print the value of $.mockjax.mockedAjaxCalls() other than outside evaluate context ??. Please note that mock4.png does show a screenshot indicating that the mockjax callback has not happened .

var casper = require("casper").create({
    verbose: true,
    logLevel: 'error',
    clientScripts: ["jquery.mockjax.js", "jquery.js", "json2.js"]
});

casper.on('remote.message', function(msg) {
    this.echo('remote message caught: ' + msg);
})

casper.start('http://xyz:9000/abc', function() {
    this.evaluate(function() {
        this.capture('1.png')
        $.mockjax({
            url: '/foo1',
            responseTime: 100,
            dataType: 'json',
            responseText: {
                sessionTimeoutRedirectUrl: "https://foo/hello",
                errorCode: "error.session.timeout"
            }
        });
    });
    this.capture('xyz123.png');
});


casper.waitForSelector('#order-wrapper', function() {
    this.click('#method-field-cc');
    this.capture('mock2.png');
});
casper.waitForSelector('#cc-card-number', function() {

    this.capture('mock.png');
    this.fillSelectors('form[id="cc-form"]', {
        'input[id="cc-card-number"]': '4112344112344113',
        'input[id="cc-first-name"]': 'first',
        'input[id="cc-last-name"]': 'last',
        'select[id="cc-expiry-month"]': '10',
        'select[id="cc-expiry-year"]': '2016',
        'input[id="tax-field-postal-code"]': '95051',
        'input[id="cc-security-code"]': '123'
    }, true);
    this.click('#review-newcc');
    this.capture('mock3.png');

});

casper.wait(1000, function() {
    this.echo("I've waited for a second.");
    casper.evaluate(function() {
        this.echo("I've waited for a second." + $.mockjax.mockedAjaxCalls().length)
        console.log($.mockjax.mockedAjaxCalls());
    });


});
casper.evaluate(function() {
    this.echo("I've waited for a second." + $.mockjax.mockedAjaxCalls().length)
});
casper.wait(1000, function() {
    this.capture('mock4.png')

});

casper.run();

I don't see where you are trying to hit the URL: `/foo1`. Mockjax only mocks requests that it matches to a URL (and other ajax settings). — Jordan Kasper, Jan 11 '15 at 17:03

score 0 · Answer 1 · answered Jan 11 '15 at 10:07

0

Inside of the casper.evaluate callback is the page context. The casper instance or any other variable from outside is not available there. So, this inside of it refers not to the casper instance, but to the window instance of the page. It's unlikely that it has a capture or an echo function. Move those call out of the evaluate callback to the casper context. Before you do that, register to the page.error event and see that those produce errors.

The other problem is that you're adding mockjax before you add jQuery. Since mockjax is a jQuery plugin, you should at least flip the order in clientScripts. It might be better to remove jquery.js completely, because it will overwrite the one in the page.

answered Jan 11 '15 at 10:07

Artjom B.

61,146
24
125
222

$.mockjax.mockedAjaxCalls() is not available outside casper.evaluate context . Putting this outside of evaluate context produces error running this script . Is there any way I could actually print the value of $.mockjax.mockedAjaxCalls(). – Preethi Nagashri Jan 12 '15 at 03:04
I haven't said that this line should be outside of `evaluate`. I said that the other line beginning with `this` should be moved outside. What you do, should print the value since you registered to the `remote.message` event. – Artjom B. Jan 12 '15 at 07:00
Have you followed all of my advice? I really don't like giving answers only to find that the OP ignores them. Add the `page.error` event handler and see what errors there are. – Artjom B. Jan 12 '15 at 07:17
I cannot put in the ajax here since it is sensitive . I captured page.errors and I do not see any errors. I also wanted to highlight that if I try to inject this mockjax on chrome and try to execute the same flow , it works . Also , below is the test run remote message caught: No key specified for filter in:eq helper remote message caught: MOCK POST: /foo1 [object Object] remote message caught: Number of mocked ajax response calls : 1 But then , this does not print the response . Does it mean that the mockjax is actually forwarding the call to $.ajax ? – Preethi Nagashri Jan 14 '15 at 23:51
I see this in my console run :Also , why does it print ? MOCK POST: /foo1 [object Object] – Preethi Nagashri Jan 15 '15 at 01:07
$.ajax({ async: false, url: '/foo1', success:function(data){ console.log(data); }, error:function(data){ console.log('It doesn’t work that way :'); } }); – Preethi Nagashri Jan 23 '15 at 08:09

score 0 · Answer 2 · answered Jun 24 '15 at 22:10

Mockjax will overwrite the jQuery's interface to capture the ajax call, and return with the pre-defined response. You need to place the mockjax after jQuery.js clientScripts: ["jquery.js", "json2.js", "jquery.mockjax.js"]

Another more stable and generic solution is JSMockServer. https://github.com/gaisanshi/JSMockServer

MockJAX not responding to CasperJS

2 Answers2