Can't get sinon.fakeServer working

[Maxim Lacrima]

Hi!

I have been struggling for half of a day with sinon.fakeServer and can't figure out why it doesn't work in my application. Here is a test case:

TestCase('RegisterFormSuccessHandlerTest', sinon.testCase({
        setUp: function () {
            var onSuccess;

            this.controller = Object.create(myApp.registrationFormController);
            this.spy($, 'ajax');

            this.server = sinon.fakeServer.create();
            this.server.respondWith('POST', '/auth/register', [
                200,
                {'Content-Type': 'application/json'},
                'OK'
            ]);

            this.controller.handleSubmit();
            onSuccess = $.ajax.getCall(0).args[1].success;
            this.onSuccessHandler = this.spy(onSuccess);
            this.server.respond();

        },

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

        "test should call success handler": function () {

            assertTrue(this.onSuccessHandler.called);
        }

And here is the code, which the test case tries to test:

myApp.registrationFormController = (function () {

    function handleSubmit() {
        $.ajax('/auth/register', {
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                  /* */
            }),

            success: function () {}
        });
    }

    return {
        handleSubmit: handleSubmit
    };
}());

The test fails, because success handler is not called. But I can't understand why. I think my code should pass the test. What's wrong here?

Thanks in advance for any hints!
Sorry for my English

--
with regards,
Maxim

[Maxim Lacrima]

Hi!

I found an issue.

There was two problems:
1. jQuery thinks that string is not a valid JSON, so it omits success callback. Changing response body to '{}' instead of 'OK' solves this problem

2. the line this.onSuccessHandler = this.spy(onSuccess); creates new object, which is no longer the same callback as of the time this.handleSubmit() was called. Spying on the callback before calling this.handleSubmit() solves the problem:
            /*...*/

            this.server.respondWith('POST', '/auth/register', [
                200,
                {'Content-Type': 'application/json'},

                '{}'
            ]);
            this.controller.onRegisterSuccess = this.spy();
            this.controller.handleSubmit();
            this.server.respond();

            /*...*/
            assertTrue(this.controller.onRegisterSuccess.called);

Now the test passes.

--
with regards,
Maxim

[Christian Johansen]

Hi Maxim,

Glad you figured it out. The first problem (invalid JSON and no error handler in jQuery) is probably one of the most common stumbling points when using Sinon with jQuery's ajax methods. A good advice is to always bind to the global ajax error handler in your tests so errors don't go unnoticed.

I'm planning to add some logging output from the server in Sinon 1.2. This way you can tell Sinon how you would like to monitor what happens, and it will log all requests, their responses and other things that might make debugging easier. Ideas for such a feature is much welcome.

Christian

--
MVH
Christian