Mocking jQuery Ajax Calls with Random Templated Data
15 Feb 2011| In a recent blog post, Mocking the jQuery Ajax Call in ASP.NET MVC 3 Music Store , I showed you how you could use the $.mockjax library, written by Jonathan Sharp, to intercept AJAX requests and return a mocked response. This tool can be especially useful when trying to code your front-end, while the back-end piece is either isn’t available or accessible. Another useful library that you may consider when building quick prototypes is $.mockJSON, written by Menno van Slooten. This library has some of the same features as $.mockjax, but the piece I’d like to focus on is the random data tempting feature. This can be very handy when you want to mock a JSON response from a AJAX call, but instead of manually building the response you can build a template to do it for you. To demonstrate using this random data technique, I decided to use the SlickGrid jQuery Plugin and populate it with the JSON response from an AJAX call. Since the AJAX call doesn’t exist, I am going to use $.mockjax to return the response using random data generated from $.mockJSON. The following code is what is necessary to populate the SlickGrid with data from an AJAX call. <pre>(function($) { var grid, columns = [ {id:”firstName”, name:”First Name”, field:”firstName”, width:70}, {id:”lastName”, name:”Last Name”, field:”lastName”, width:70}, {id:”email”, name:”Email”, field:”email”, width:170}, {id:”percentHealth”, name:”% Health”, field:”percentHealth”, width:90, formatter:GraphicalPercentCompleteCellFormatter}, {id:”birthday”, name:”Birthday”, field:”birthday”, width:70}, {id:”married”, name:”Married”, field:”married”, width:50, formatter:BoolCellFormatter} ], options = { editable: false, enableAddRow: false, enableCellNavigation: true, rowCssClasses: function(item) { return (item.percentHealth >= 80) ? “healthy” : “”; } }; $.ajax({ url: “/Contact/List”, type: “GET”, dataType: “json”, success: function(data, textStatus, xhr) { grid = new Slick.Grid(“#myGrid”, data.contacts, columns, options); }, error: function(xhr, textStatus, errorThrown) { console.log(“Error: “ + textStatus); } }); function BoolCellFormatter(row, cell, value, columnDef, dataContext) { return value ? “✔” : “”; }; }(jQuery)); </pre>At this point, I don’t have the '/Contact/List' endpoint defined so if I executed the above code I would get a GET http://fiddle.jshell.net/Contact/List 404 (NOT FOUND) error in my console. If I did want to test the behavior of my front-end without depending on a back-end existing, then I can add an additional $.mockjax statement to intercept the call and respond with some random data provided by $.mockjson.<pre>$.mockjax({ url: ‘/Contact/List’, responseTime: 750, responseText: $.mockJSON.generateFromTemplate({ “contacts |
50-500”: [{ “married |
0-1”: true, “email” : “@EMAIL”, “firstName”: “@MALE_FIRST_NAME”, “lastName”: “@LAST_NAME”, “birthday”: “@DATE_MM/@DATE_DD/@DATE_YYYY”, “percentHealth |
0-100”: 0 }] }) }); </pre>The above code will intercept any AJAX requests with the '/Contact/List' endpoint and will use the template passed to $.mockJSON as the response. The template will generate between 50 and 500 contacts each having male first names and having a health ranging from 0 to 100. Each contact will have a random email, birthday, and married boolean field. You can find out more information as to what $.mockJSON supports and how you can extend it from their website.The following JSON snippet is an example of what the above $.mockJSON template will generate. The above template would generate between 50 to 500 contacts, but for brevity I just included 4. <pre>{ “contacts”: [{ “married”: false, “email”: “u.lewis@gonzalez.com”, “firstName”: “Paul”, “lastName”: “Martinez”, “birthday”: “12/16/2005”, “percentHealth”: 37}, { “married”: false, “email”: “k.hernandez@smith.com”, “firstName”: “Daniel”, “lastName”: “Gonzalez”, “birthday”: “07/11/1997”, “percentHealth”: 1}, { “married”: true, “email”: “c.thomas@taylor.com”, “firstName”: “David”, “lastName”: “Lewis”, “birthday”: “04/13/2007”, “percentHealth”: 62}, { “married”: true, “email”: “v.davis@lee.com”, “firstName”: “Richard”, “lastName”: “Rodriguez”, “birthday”: “05/10/2007”, “percentHealth”: 6}] //A bunch more… } </pre>Now, since we have some data coming back from our AJAX request, we can run our code again and proceed to get our front-end working as intended. View Demo Edit Demo |
