Develop Reference

Jasmine : Fixture could not be loaded

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 :
Run chrome with --allow-file-access-from-files
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.

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.

So i found a very unsatisfying solution, but a solution nonetheless.
To summarize
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).
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.
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.
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.
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.

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.

Rails manifest assets is undefined or not an object, while AJAX request in IE8

I am trying to get the file names of some files via ajax (to get them via ajax later) out of the Manifest.json file, since our filenames are digested. To do so I am using the following bit of code:
$.ajax({
url: assetUrl + '/manifest.json',
async: false,
success: function(xhr){
for(var polyfill in polyfills){
if(polyfills.hasOwnProperty(polyfill)){
polyfills[polyfill] = xhr['assets'][polyfill];
//also tried:
//polyfills[polyfill] = xhr.assets[polyfill];
};
};
},
error: function(e){
}
});
When I run the script from my localhost in runs fine in IE8, but as soon as I run the script on the development server, I am getting the error that assets is null or not an object, even though it exists on the server and has the exact same structure as the file on my localhost. IE8 runs in standard mode in both cases.
Any idea what could be behind that? Or is there a better approach to get a file via ajax from the prcompiled assets? I don't want to copy them to the folder public-folder every time.
EDIT:
The development server runs with a slightly different configuration as the localhost (e.g. files get precompiled, which is why I have to go over the manifest.json).
The contents of the manifest.json look like so:
{
"files":{
"file1-734fcaba023083e43850b25addddd642.eot":{
"logical_path":"file1.eot",
"mtime":"2015-07-30T08:26:32+00:00",
"size":2812,
"digest":"734fcaba023083e43850b25addddd642"
},
....
}
"assets":{
"file1":"file1-ea625da9302d183ca2b0c75e61ba88d9.eot",
....
}
}

Solved, turned out the development server uses https:// which apparently makes a huge difference when using jQuery.ajax(), using jQuery.getJSON() worked instead.

Check if analytics.js is loaded

I have to use a local analytics.js that I serve from my server. I just want to use the local version if necessary - so is there a solution for checking if the call for analytics.js has failed?
I thought about checking it with a global window.onerror, but I don't think a failed call for an external file causes an error. I've tried checking if ga() is available, but it is even if analytics.js isn't loaded.
Any ideas? If you are wondering, not all users of this site has internet access, that's why I'm serving a local version. There is more things happening in this case, like adding a sendHitTask to redirect the answer from analytics.js to the local server.
EDIT
A solution where you check if the user has Internet access would also be OK. But I have not found any solution for this either that works on all modern browsers.

There's a function to track if the library has loaded. From the docs:
ga(function(tracker) {
var defaultPage = tracker.get('page');
});
The passed in function is executed when the library is loaded, so you could set a variable to keep track of whether or not it has loaded. You'd have to put it on some sort of timer to decide when you want to consider it failed:
var loaded = false;
ga(function() {
loaded = true;
});
// after one second do something if the library hasn't loaded
setTimeout(function(){
if (!loaded){
//do something
}
},1000);

instead of waiting for a callback, you can easily get it with
if(window.ga && ga.loaded) {
// yeps... it is loaded!
}
you can easily see this in the Firefox documentation
same trick can be applied if you want to see if the tracker is blocked (by any plugin for example)
if(window.ga && ga.q) {
// yeps... blocked! >:o
}

A particularly elegant solution would be to use RequireJS and leverage its support for fallback paths. I do this on my site to load a stub version of analytics.js if loading GA fails because the visitor uses a privacy tool blocking the request:
http://veithen.github.io/2015/02/14/requirejs-google-analytics.html
Your use case is similar, except that you want to fallback to a complete local copy. You also probably don't want to change all calls to GA as described in that article. If that's the case then you could use a hybrid approach where you only use RequireJS to load analytics.js (Google's version or the local copy), without changing any other code.
Setting this up would involve the following steps:
Add RequireJS to your site and configure it as follows:
require.config({
paths: {
"ga": [
"//www.google-analytics.com/analytics",
"local-copy-of-analytics"
]
}
});
Use the alternative version of the tracking code, but replace <script async src='//www.google-analytics.com/analytics.js'></script> with the following JavaScript code:
require(["ga"]);

firefox bootstrap addon: install event is not executed

I'm trying to create a bootstrapped addon that just sets the new tab url at install to a new value and resets it to the old one when it gets uninstalled.
Here is my bootstrap.js. I think the install function throws an exception because require is not defined, but I'm not sure if the debugger executes the code I write in Scratchpad in the right scope.
I read somewhere that the api is the same for bootstrapped extensions as the with the add-on sdk, so the require should be fine. If this is not the case, could you please direct me to a page that describes the code I can use in the bootstrap.js, I didn't find anything :(
function startup(data, reason){
}
function shutdown(data, reason){
}
function install(data, reason){
var prev_new_tab_url = require("sdk/preferences/service").get("browser.newtab.url");
var data = require("sdk/self").data;
var url = data.url("startpage.html");
require("sdk/preferences/service").set("browser.newtab.url", url);
var ss = require("sdk/simple-storage");
ss.storage.prev_new_tab_url = prev_new_tab_url;
}
function uninstall(data, reason){
var ss = require("sdk/simple-storage");
var prev_new_tab_url = ss.storage.prev_new_tab_url;
require("sdk/preferences/service").set("browser.newtab.url", prev_new_tab_url);
}

from: https://forums.mozilla.org/viewtopic.php?f=7&t=22621&sid=4ea13ebd794f85600d6dcbcf6cc590a7
in bootstrap you dont have access to sdk stuff like that. im not sure how to access that stuff.
but i made exactly what you are looking for with localization :D took like 10min :D
https://github.com/NoitForks/l10n/tree/setpref-install-uninstall
note: the quirk that localization files are not available during the uninstall procedure. so i had to move this to shutodwn proc while testing for aReason of ADDON_DISABLE. it makes sense that files are not available in uninstall
you asked:
How do you know the Services.prefs.getCharPref method?
i responded:
I first imported the Services.jsm module then i looked on MDN for what all it had:
https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Services.jsm?redirectlocale=en-US&redirectslug=JavaScript_code_modules%2FServices.jsm
then i saw prefs then it linked to nsIPrefBranch and that documented all of it. nsIPrefBranch2 is deprecated so I knew it wasn't that.
MDN is your friend :)

Plain bootstrapped add-ons do not automatically get access to the SDK, i.e. there is no require.
Either use non-SDK stuff exclusively, like nsIPrefBranch, Services.jsm, etc.
Or write an SDK add-on in the first place
Or hook up the SDK loader for your add-on yourself. Only instance I know other than SDK add-ons themselves (heh) that does such a thing is Scriptish.

Vaadin #Javascript : clear cache for updated JS file

I have a #JavaScript annotation in my application to load a .js file from the classpath.
Now I've made an update to the file and redeployed (locally), but I always get the old version back. I've tried reloading everything (ctrl+R, ctrl+F5) but that doesn't work and also I wouldn't want the users to have to do that.
A trick I used in the past (without Vaadin) was to append a request parameter with the version (e.g. ?version=1) and update that so that the URL changes. But apparently that isn't allowed for the #JavaScript annotation (Vaadin doesn't even try to load the file).

I have overcome this by utilizing the resourceCacheTime parameter of the Vaadin servlet configuration:
#VaadinServletConfiguration(ui = MyUI.class, resourceCacheTime = 0)
Although it has its limitation as described in my answer to another question here.

This is browser feature to localy cache JS files, nothing to do with Vaadin.
As you figure it out yourself: If you want to make sure users have latest version of JS file, you should rename JS file name to: script_buildNumber.js.

Use the Chrome's incognito feature (and not use it when visiting spicy/unpleasant websites).
Just open your browser in Incognito mode https://support.google.com/chrome/answer/95464?hl=en and the browser will cache nothing.
Other browsers have this feature as well (Opera, IE, Firefox, Safari).

As I noted in my comment on the question on January 12th, renaming the file worked. This seems to be currently the only way, although it's far from ideal.