Jasmine : Fixture could not be loaded

Question

So i wanted to get into Test Driven Development and decided to use Jasmine on my project.

The thing is, i can't load fixtures.

The 2 solutions commonly proposed are :

1. Run chrome with --allow-file-access-from-files
2. Serve the file from you local server

So i used the first solution, but no result.

Then i set up the routes of my webserver so that localhost/fixture/my_fixture would return the content of my_fixture.html.

So when i manually access localhost/fixture/my_fixture, the content of the fixture is displayed on screen. But in my jasmine spec file, when i use :

jasmine.getFixtures().fixturesPath = 'http://localhost/fixture'
loadFixtures('quizz_fixture')

I get the following errors :

Error: Fixture could not be loaded: http://localhost/fixture/quizz_fixture
(status: error, message: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'http://localhost/fixture/quizz_fixture?_=1455854875950'.)

When i use the URL given in the error, my browser displays the content of the fixture without errors.

Therefore, i don't understand the reason for this error. Does anyone have an insight?

Edit:

• Web server : Apache
• Browser : Chrome
• OS : Windows 7

Edit 2

The issue comes from jasmine-jquery, on line 139 below, where the fail function is called. I can't figure out what's happening as the URL that supposedly can't be loaded actually loads just fine in my browser :

jasmine.Fixtures.prototype.loadFixtureIntoCache_ = function (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,
        dataType: 'html',
        success: function (data, status, $xhr) {
          htmlText = $xhr.responseText
        }
      }).fail(function ($xhr, status, err) {
          throw new Error('Fixture could not be loaded: ' + url + ' (status: ' + status + ', message: ' + err.message + ')')
      })

The result is :

Failed to load 'http://localhost/fixture/quizz_fixture.html?_=1456886216017'

Which works when called in the browser. I just don't get it.

Thanks.

Answer 1

So i found a very unsatisfying solution, but a solution nonetheless.

To summarize

1. Using chrome, i tried to load jasmine fixture from a local file, which wouldn't work with chrome (this is something known, disabled for security reasons).

2. I tried using the chrome flag --allow-file-access-from-files but it didn't work. So i gave up on using a fixture from a local file.

3. I understood that the fixture file had to be served from my web server, which i did. But it didn't work either, because of some Ajax error related to the caching of fixtures. I tried updating my version of jquery (which was a bit old) but it didn't work. In the end, I wasn't able to understand what the issue was.

4. I downloaded firefox and tried executing the jasmine specRunner with the configuration of point 3 above (fixture served by web server) but again, it didn't work.

5. Using firefox, I reverted to the method in point 1, which is using a local fixture file, and it did work. I hate that solution, but i need to go forward, so that will do.

Conclusion

If stuck with that kind of issue, save yourself some time and use firefox which will allow the use of a local fixture file.

Answer 2

It's really hard to answer without knowing at least a little about the nature of your server, or what the fixture looks like. Is the server just a simple file server like node-http-server, or is this pointing to your app? Is it serving the fixture correctly? Does your fixture have a mistake in it? I can't tell any of that from here.

What I would say though is that if you are just beginning TDD you should probably avoid fixtures entirely. One of the biggest challenges to somebody new to TDD is writing small enough tests, and Jasmine fixtures make it easy to write really big tests.

Instead I would recommend manually adding the bare minimum of DOM you need to the page and removing that in an after hook. jasmine-fixture is a tool that essentially does this. This'll force you to consider how much of the DOM you actually need to write a test, and will make the DOM changes you are making visible in the tests itself.

Answer 3

In the command line you can write:

start chrome --allow-file-access-from-files "path_to_test/SpecRunner.html"

That solved to me... hope can help some more people.