Jasmine / Karma Unable to load Fixture HTML correctly

Question

I have created a simple Fixture HTML and Jasmine test.

   <div id="testid">A</div>

This is my test code.

define(['jquery'], function($) {
    'use strict';

    describe("Jasmine Fixture Test", function() {

        beforeAll(function(done) {
            jasmine.Ajax.install();

            done();
        });

        afterAll(() => {
            jasmine.Ajax.uninstall();
        });

        beforeEach(function() {
        });

        it("Test Fixture", function(done) {
            loadFixtures('TestFixture.html');

            expect($('#jasmine-fixtures')).toHaveId('jasmine-fixtures');
            expect($( '#testid' )).toHaveId('testid');
            expect($( '#testid' )).toHaveText('A');
            expect(true).toBeTruthy();
            done();
        });
    });
});

There is no error when calling loadFixture.

I have added the html fixture file into the following directory:

C:\Workspace\PLAN_BUILDER\branches\634623.1.0.0\spec\javascripts\fixtures

I am running "gradlew test" from :

C:\Workspace\PLAN_BUILDER\branches\634623.1.0.0

I add debugging statements into the karma-jasmine-jquery library as follows:

  jasmine.Fixtures.prototype.loadFixtureIntoCache_ = function (relativeUrl) {
      console.log(relativeUrl);
      console.log(this.makeFixtureUrl_(relativeUrl));
    var self = this
      , url = this.makeFixtureUrl_(relativeUrl)
      , htmlText = ''
      , request = $.ajax({
        async: false, // must be synchronous to guarantee that no tests are run before fixture is loaded
        cache: false,
        url: url,
        timeout: 2000,
        success: function (data, status, $xhr) {
            
            console.log(data);
            console.log(status);
            console.log($xhr.responseText);
          htmlText = $xhr.responseText
        }
      }).fail(function ($xhr, status, err) {
          console.log(err);
          console.log(status);
          throw new Error('Fixture could not be loaded: ' + url + ' (status: ' + status + ', message: ' + err.message + ')')
      }).always(function() {
    alert( "complete" );
  }
      );
console.log("after");
console.log(htmlText);

...

The output is this:

LOG LOG: 'TestFixture.html'
LOG LOG: 'spec/javascripts/fixtures/TestFixture.html'
LOG LOG: 'after'
LOG LOG: ''

So neither the success or fail method callbacks are invoked from the $.ajax call and this the htmlText is empty.

Thanks for your advice.

Answer 1

The problem was that I was calling

jasmine.Ajax.install();

before

loadFixtures('TestFixture.html');

I was not aware that jasmine-jquery was using an $.ajax call to load the fixture html file from disk. Obviously then jasmine-ajax was overriding $.ajax behaviour.

Thanks.