2

I'm midway through setting up automation of my jasmine tests using grunt. I have Jasmine (and Istanbul) running fine in node and also a standalone html page that runs the tests. However, I only want to maintain one list of src files to include, so I have a json file which lists these in an array. I can include it using require() in my Gruntfile, but my plan to include it using ajax in the html page I now realise won't work as I will need to have a server running in order for ajax to work.

So my html page is at file://foo/bar/page.html and the json is in file://foo/bar/my_data.json.

Is there any other approach I can use to include a JSON file in a static html page which isn't on a server?

wheresrhys
  • 22,558
  • 19
  • 94
  • 162
  • Do you mean that your html page is accessed like `file://foo/bar/page.html` and the json is in `file://foo/bar/my_data.json`? – ElmoVanKielmo Jul 09 '13 at 09:12
  • yep - that's exactly right – wheresrhys Jul 09 '13 at 09:12
  • You can use `FileReader` and parse contents with `JSON` object. –  Jul 09 '13 at 09:14
  • @ZlatanO Will FileReader accept relative paths? It needs to be agnostic between different developers' local environments – wheresrhys Jul 09 '13 at 09:17
  • Yes. `FileReader` reads both local paths and remote URL's. I have used FileReader with Mozilla Firefox, but I belive that WebKit and IE had implemented the functionality. More on: https://developer.mozilla.org/en-US/docs/Web/API/FileReader or take a tutorial on: http://www.html5rocks.com/en/tutorials/file/dndfiles/ –  Jul 09 '13 at 09:19
  • There's no need to use FileReader. I tested your setup with jQuery - and jQuery's `$.get("my_data.json", function(data) {...}, "json");` happily reads a local file. – Aleks G Jul 09 '13 at 09:23
  • @AleksG Have you tested `$.get` with local files, not stored on a running Web server? –  Jul 09 '13 at 09:25
  • @ZlatanO. Yes, that's exactly what I tested. Both the HTML and the json files were on a local machine. I loaded HTML into the browser as `file:///tmp/page.html` - and it happily read `/tmp/my_data.json` on the same machine. – Aleks G Jul 09 '13 at 09:26
  • @AleksG Than jQuery's Ajax implementation rules! I didn't know this... Thanks! –  Jul 09 '13 at 09:27
  • @AleksG Doesn't work in most browsers though http://stackoverflow.com/questions/8456538/origin-null-is-not-allowed-by-access-control-allow-origin – wheresrhys Jul 09 '13 at 09:28
  • @ZlatanO - how are you creating your reference to the file? https://developer.mozilla.org/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code suggests it's only possible when developing a browser extension – wheresrhys Jul 09 '13 at 09:29
  • No... I have used the same object when I created the Ajax Uploader... Reference yourself on the `FileReader`, not just on the `File` object. There you have `readAsDataUrl`, `readAsText` and other methods... –  Jul 09 '13 at 09:31
  • @wheresrhys I tested this on Firefox and Chrome - and it worked in both using `$.get` call. I haven't tried `load` - but I suspect it may have different implementation. – Aleks G Jul 09 '13 at 09:35
  • This is not specific for jQuery AJAX implementation - just don't confuse `file://` with `http://localhost/` and use relative paths - everything must work as AJAX is restricted only by origin/domain (you may overcome this by sending proper header in HTTP) – ElmoVanKielmo Jul 09 '13 at 09:48

1 Answers1

-1

This doesn't solve the general problem, but it turns out that grunt-contrib-jasmine creates its persistent specrunner file which can be used in the browser, so the list of source files can be maintained within the gruntfile (or in a separate json) and the specrunner html page will automatically get updated each time grunt is used to run the tests.

wheresrhys
  • 22,558
  • 19
  • 94
  • 162