Mock service call QUnit with QUnit

Mock service call QUnit with QUnit

I have a javascript file where I am using include.js. The file (ContactsManager) looks something like this:


    define([],    function() {
            'use strict';
            var exports = {};

            exports.ContactsManager = function (service, contactsContentHolder) {   
               
                this.getExistingContacts = function() {
                    // display wait image until service call does not returns
                    var waitImageDiv = document.createElement('div');
                    waitImageDiv.setAttribute("id", 'wait_image');
                   
                    var waitImage = document.createElement("img");
                    waitImage.setAttribute("src", "../images/wait.gif");
                   
                    waitImageDiv.appendChild(waitImage);
                    var waitMessage = document.createElement('p');
                    waitMessage.innerHTML = '<b>Loading your contacts</b>';
                   
                    waitImageDiv.appendChild(waitMessage);
                    contactsContentHolder.appendChild(waitImageDiv);
                   
                    var svc = new service.AddressBookService();                   
                    svc.getContacts(                           
                            function(data) {
                                contactsContentHolder.removeChild(document.getElementById("wait_image"));
                                if (data.length == 0) {
                                    contactsContentHolder.innerHTML = '<p>You do not have any contacts!</p>';
                                } else {
                                    renderData(data);
                                }
                            },
                            function(data) {
                                console.log("Error occurred while fetching contacts!");
                            }
                    );                   
                }

                function renderData(data) {
                    console.log('going to return');
                    for ( var i = 0; i < data.length; i++) {
                        var contactsDiv = document.createElement('div');
                        contactsDiv.setAttribute("class", "module");

                        var contactDisplay = 'FirstName: ' + data[i].firstname
                                + "<br/>" + 'LastName:  ' + data[i].lastname
                                + "<br/>" + 'Phone:     ' + data[i].phone
                                + "<br/>";

                        var editButton = document.createElement("input");
                        editButton.type = "button";
                        editButton.value = "Edit Contact";
                        editButton.onclick = copyContactValues(data[i]);

                        var p = document.createElement('p');
                        p.innerHTML = contactDisplay;
                        contactsDiv.appendChild(p);
                        contactsDiv.appendChild(editButton);

                        contactsContentHolder.appendChild(contactsDiv);
                    }
                }

                function copyContactValues(data) {
                    return function() {
                        copyContactValuesToForm(data);
                    }
                }

                function copyContactValuesToForm(contactData) {
                    $('#editFirstname').val(contactData.firstname);
                    $('#editLastname').val(contactData.lastname);
                    $('#editPhone').val(contactData.phone);
                    $('#editUserId').val(contactData.userId);
                    $('#editContactId').val(contactData.contactId);

                    // make the form visible now
                    $('#editcontact_div').attr('style', 'display:block');
                }
            }

            return exports;

        });

All well and good so far. It is working and loading the contacts correctly.
I initialize it by injecting a specific div (to hold the content of service reply) and instance of service.

Now, I am trying to write unit test cases for getExistingContacts().
So far I have been able to achieve this:

    "use strict";
    define(['../lib/jquery-latest','../ContactsManager'], function(_, contactsManagerModule) {
       
        var contactsContentHolderMock = document.createElement('div');
        contactsContentHolderMock.id = 'someid';
       
        var svcMock = new Object();
        svcMock.AddressBookService = function () {
           
            this.getContacts = function () {
                return [{"contactId":4,"firstname":"Kashif","lastname":"Omani","phone":1100190029,"userId":4}];
            }       
        };
       
        var contactsManager = new contactsManagerModule.ContactsManager(svcMock, contactsContentHolderMock);
       
        var run = function() {
            test('queries service to getContacts', function() {
                contactsManager.getExistingContacts();
               
                //assert service.getContacts was called
                equal(contactsContentHolderMock.children.length, 1);
                console.log(contactsContentHolderMock.children);
            });
        };
        return {run: run}
    }
    );

It runs, but I do not see the content I expect when I do a console.log(contactsContentHolderMock.children);
The log shows me wait_image object that I appended on 3rd line of getContacts(). It does not include the json I mocked in svcMock.
I thinkI am not mocking the service call properly. I may need to use mockjax. But please show me the code how to do it.