Best practice mocking with DataSource

[David]

I have been using an older version of kendo ui mobile, due to a bug I found in the old version of Kendo ui mobile, I had to upgrade to the latest in the latest one (went from v2012.2.913 to v2012.3.1114).  I have been using the mockjax library to mock the server responses to ajax calls, however in the latest version the mock is not getting hit.  Am I doing something improper in the code or is there a better way to accomplish this testing?

Here is an example of my previous setup:
mockjax:

$.mockjax({

    url: '/url',

        dataType:"json",

        responseText: {

            status: "ok",

            results: [

                {

                    name: "blah",

                    value: "blah",                 

                },{

                    name: "blah2",

                    value: "blah2",

                }

            ]

        }

});

View model code with a datasource

var VM= kendo.observable({

  data: new kendo.data.DataSource({

    transport: {

      read: {

        url: '/url',

        dataType: "json"

      },

      parameterMap: function(options) {

        return {

          maxResults: 15

        }

      }

    },

    schema: {

      data: "results"

    }

  })

});

[Alexander Valchev]

Hello David,

The problem might be connected with the jQuery version.

KendoUI v2012.3.1114 requires jQuery 1.8.2 while according to the mockjax docs "current version of Mockjax has been tested with jQuery 1.3.2 through 1.7.0 with QUnit unit tests" (link). Are you sure that mockjax plug-in is compatible with 1.8.2? Please test this with a standard jQuery ajax request.

In case it is working fine, please send me a small jsBin/jsFiddle example that demonstrates the issue and I will do my best to help.
Thank you in advance for the cooperation.

Regards,
Alexander Valchev
the Telerik team

[David]

It works fine if I don't use the dataSource ... here is a js fiddle that illustrates the issue http://jsbin.com/efucir/1/edit.  If I have in the header the old kendo UI scripts as well as the new ones (commented out by default).  If you look at the output you can see the DataSource fetch gets caught by mockjax, and then if you press the button you can see the $.post getting intercepted.

If you comment out the old kendo source and put the new ones in, you can see that the data source no longer works but the manual approach still does (which leads me to believe it is not a jQuery issue).

My heart is not set on using mockjax, I am sure there are other ways to mock the server data if there is a better approach to solving this I would love to hear about it.  Perhaps using a spy from Jasmine would work ...
 
Thanks for your help.
  -David

[Alexander Valchev]

Hi David,

To fix the problem please include the mockjax script before Kendo JavaScript files.
Here is a link to the updated example: http://jsbin.com/efucir/13/edit

Regards,
Alexander Valchev
the Telerik team

[David]

Works like a charm thanks for the help Alexander.

On a related note does this seem like a decent way to mock server responses with DataSources, or is there a better way people typically use when developing with KendoUI?

-David

[Alexander Valchev]

Hello David,

This is a decent way to test Ajax requests. Actually we use it for some of our tests too.

Kind regards,
Alexander Valchev
the Telerik team