CODEWITHSUNDEEP
javascripttestingjasminesinon
i_milano
i_milano

Reputation: 11

FakeServer not returning fake data when running test with Jasmine and Sinon

I'm trying to test that some observables arrays in a ko viewmodel are set after an ajax request. I'm using Jasmine and Sinon. My issue is that my land observablearray is empty when doing an expected test. What have I missed when it comes to set up the sinon fakeserver and returns?

Btw, this works just fine when running live.

My ko model and viewmodel:

var MB = MB || {};

$(function() {
    MB.KontaktModel = function(model) {
        "use strict";

        var self = this;

        self.id = ko.observable(model.Id);
        self.land = ko.observableArray([]);
        self.kategori = ko.observableArray([]);
    };

    MB.KontaktViewModel = function() {
    "use strict";
    var numberCrusher = new MB.NumberCrusher(),
        kontakt = ko.observable(),
        land = ko.observableArray([]),
        kategori = ko.observableArray([]),
        loadKontakt = function(model) {
            var newModel = new MB.KontaktModel(model);
            .......some other setting happens here

            MB.CrmService.GetLand(function (data) {
                ko.mapping.fromJS($.parseJSON(data), {}, land);
                kontakt().land(land());
                MB.UiFixUp.RefreshChosenAfterDataUpdate();
                if (!idIsEmpty) {
                    MB.ChosenAction.SeDefaultValue("chosen-landId", model.LandId);
                }
            });

            MB.CrmService.GetKategori(function (data) {
                ko.mapping.fromJS($.parseJSON(data), {}, kategori);
                newModel.kategori(kategori);
                kontakt().kategori(kategori());
                MB.UiFixUp.RefreshChosenAfterDataUpdate();
                if (!idIsEmpty) {
                    MB.ChosenAction.SeDefaultValue("chosen-kontaktKategori", model.KategoriId);
                }
            });

            kontakt(newModel);
        };

    return {
        kontakt: kontakt,
        loadKontakt: loadKontakt
    };
}();
});

CrmService:

MB.CrmService = function() {
"use strict";

var serviceBaseCrm = '/crm/kontakt/',

    getKategori = function(callback) {
        getSimpleJson("kategori", serviceBaseCrm, callback);
    },

    getLand = function(callback) {
        getSimpleJson("land", serviceBaseCrm, callback);

    };

return {
    GetKategori: getKategori,
    GetLand: getLand
};

}();

And here is my test:

describe("mb.kontaktViewModel.js", function () {
var server,
    kontaktViewModel,
    testData = {
    land: ['{"Kode": "null", "Id": "e7ae76c0-3598-e311-8270-24fd526b95fb", "Navn": "Chile" },{"Kode": "null", "Id":"d4ae76c0-3598-e311-8270-24fd526b95fb", "Navn":"Mongolia"}'],
    kategori: ['{"Id":"297f66b2-2898-e311-8270-24fd526b95fb", "Navn": "Kunde"},{"Id":"2a7f66b2-2898-e311-8270-24fd526b95fb", "Navn":"Leverandør"}'],
    dummyModel: { Navn: "En kontakt", Nummber: 10005, OrgNr: null, Id : 10001 }
};

beforeEach(function() {
    server = sinon.fakeServer.create();
    kontaktViewModel = MB.KontaktViewModel;
});

afterEach(function() {
    server.restore();
});

describe("when viewmodel's loadKontakt is called", function () {
    it("should populate land with data from server", function () {

        server.respondWith("GET", "/crm/kontakt/land", [200, { "Content-Type": "application/json" }, JSON.stringify(testData.land)]);
        server.respondWith("GET", "/crm/kontakt/kategori", [200, { "Content-Type": "application/json" }, JSON.stringify(testData.kategori)]);
        kontaktViewModel.loadKontakt(testData.dummyModel);
        server.respond();
        expect(kontaktViewModel.kontakt().land()).toBe(JSON.stringify(testData.land));
    });
});

});

Upvotes: 0

Views: 277

Answers (1)

Gabriel Kohen
Gabriel Kohen

Reputation: 4296

Make sure the actual URLs sent are exactly:

/crm/kontakt/land
/crm/kontakt/kategori

You can have a look at the browser console (eg: in Chrome) in the Devtools and see if you're catching it correctly. If you have other strings in your URL you can always match with RegEx. Example, if you want to check if a URL starts with the string you had specified you can use:

server.respondWith("GET", /^\/crm\/kontakt\/kategori/, [200, { "Content-Type": "application/json" }, JSON.stringify(testData.kategori)]);

Otherwise, go ahead in the same devtools and put breakpoints and see what JSON you're getting back. Finally, I usually like to to set the server to server.autoRespond = true on my beforeEachso you don't have to use the server.respond in each of your tests.

Upvotes: 0

Related Questions