CODEWITHSUNDEEP
javascriptjqueryajaxunit-testingsinon
Fagner Brack
Fagner Brack

Reputation: 2403

How to test the content type sent by $.ajax from a sinon fake server

I have the following ajax call inside the method loadComponent

function loadComponent( url, success ) {
    $.ajax({
      accepts: "text/html"
      url: url,
      success: success
    });
}

How would I verify if "text/html" was passed correctly to a sinon fake server?

(Note that I am not using "accepts" correctly, so the content type will not be sent with the ajax call)

Pseudo-code below:

test( "testing if text/html was sent", function() {
    var server = sinon.fakeServer.create();
    loadComponent( "/url" );
    // How do I make this check ????
    ok( server.wasCalledWithContentType( "text/html" ) );
})

Upvotes: 2

Views: 2064

Answers (5)

Mika Tuupola
Mika Tuupola

Reputation: 20397

Setting request headers with jQuery

jQuery documentation is unintuitive about usage of accepts parameter. Accept header is controlled by setting dataType parameter. If you want text/html set dataType to html.

$.ajax({
    dataType: "html",
    url: "/foo"
});

Accept: text/html, */*; q=0.01

With acceptsparameter you customize the content of the header for given data type:

$.ajax({
    dataType: "html",
    accepts: { html: "text/foobar" },
    url: "/foo"
});

Accept: text/foobar, */*; q=0.01

Testing request headers with Sinon and Jasmine

Now we have understanding on how $.ajax works. Sinon fakeserver request headers with server.requests[0].requestHeaders. Below is example test suite written with Jasmine and Sinon. For live tests check JSFiddle.

describe("Fake server", function() {
    "use strict";

    var server;

    beforeEach(function() {
        server = sinon.fakeServer.create();
        server.autoRespond = true;

        server.respondWith("GET", "/foo",
                          [200, {"Content-Type": "application/json"},
                           '{"message":"foo"}']);
    });

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

    it("accept header should include text/html", function () {
        $.ajax({
            dataType: "html",
            url: "/foo"
        });

        var accept = server.requests[0].requestHeaders.Accept;
        expect(accept).toMatch(/text\/html/);
    });

    it("accept header should include text/foobar", function () {
        $.ajax({
            dataType: "html",
            accepts: { html: "text/foobar" },
            url: "/foo"
        });

        var accept = server.requests[0].requestHeaders.Accept;
        expect(accept).toMatch(/text\/foobar/);
    });

});

Upvotes: 2

Fagner Brack
Fagner Brack

Reputation: 2403

Due to the lack of correct answers it seems that, up to date, there is no feature in sinon fakeServer to allow testing the mime type that was sent in the request.

Upvotes: 0

BebnevRoman
BebnevRoman

Reputation: 315

Are you want verify query on server-fake-side on sinon ? May be you helps such example:

server.respondWith(method, model,

    (function() {

      var answer = [];

      if (model.attributes.car_model == "") {
        answer = [
          404,
          { "Content-Type": "application/json" },
          '[{"0":"not car selected"}]'
        ];
      } else {
        answer = [
          200,
          { "Content-Type": "application/json" },
          '[{"0":"good query"}]'
        ];
      }

      return answer;

    })(model));

In this example model and models properties are verifying, but use so properties, as you want.

Upvotes: 0

user3118321
user3118321

Reputation:

This could work:

$.ajax({
    url: url,
    success: success,
    dataType: "html"
});

Upvotes: 0

Cheesi
Cheesi

Reputation: 483

Try this:

$.ajax({
  url: url,
  success: function(response, status, xhr){ 
    var ct = xhr.getResponseHeader("content-type") || "";
    if (ct.indexOf('html') > -1) {
      //do something
    }
  }
});

Upvotes: 0

Related Questions