Discrepancies between Jasmine tests: browser vs. PhamtomJS - gruntjs

I'm running BDD tests using the grunt-contrib-jasmine plugin. When I generate the _SpecRunner.html and run the tests through Chrome everything is fine. When I run the tests via PhantomJS I receive error messages which indicate that jQuery is not loaded.
The file that I'm testing uses LABjs to load jQuery, jQueryUI, and few other files that depend on them. This tag will be placed on a third party site so this script is required to load jQuery.
(function(){
function callback() {
$LAB
.script('path_to_jQuerry').wait()
.script('path_to_jQueryUI').wait()
.script('files_that_use_jQuery').wait();
}
loadJS('path_to_LABjs', callback);
})();
Assume that loadJS successfully loads LABjs. Like I said, when I run the tests on this file through the browser there are no errors, but using grunt-contrib-jasmine via PhantomJS I receive the following error before any of my tests complete:
TypeError: 'undefined' is not a function (evaluating '$.publish("foo")')
The code that produces looks like:
(function($) {
$.publish('foo');
})(jQuery);
My initial thought is that PhantomJS isn't compatible with the LABjs script loader or that the code is 'evaluated' but PhantomJS at the wrong time. Snooping around the grunt-contrib-jasmine, jasmine, and phantomjs code hasn't gotten me anywhere.
Any comment is appreciated.

I came to the conclusion that grunt-contrib-jasmine does not accurately mimic the tests as if they were run in the browser due to the dynamic loading of the JavaScript with LABjs. The module begins evaluating the JavaScript on the page before it has finished loading and before the tests begin. This may have to do with how grunt-contrib-jasmine uses the onPageLoad event, but I'm not sure of the specific cause. Manually testing the with the _SpecRunner.html file in the browser produces no errors. In the end I removed the dynamic loading from the JavaScript file and will test the dynamic loading another way.

Related

Troubleshoot Grunt concat and Uglify in Sails pipeline

I'm working on a Sails.js app using angular 1.5x for front end. Recently I began working with textAngular, which works good in development, however, for some reason running in production, which (I believe to be the issue) runs grunt concat and uglify, therefore minimizing all js, I get a js error regarding injecting into my angular module/app. If I remove all references to textAngular it will concat/uglify and run fine in production. I want to use textAngular, and don't believe it is an issue with those scripts per say. How should I go about troubleshooting this issue? Are there any concat or uglify options that might help me pinpoint or resolve the issue?
ADDITIONAL INFO:
The angular code for injecting textAngular:
var sangularApp = angular.module('sangularApp', ['datatables', 'textAngular']).
config(function($provide) { // provider-injector
$provide.decorator('taOptions', ['$delegate', function(taOptions) { // $delegate is the taOptions we are decorating
taOptions.toolbar = [
['pre', 'bold', 'italics', 'underline', 'strikeThrough','ol','insertLink', 'insertImage','html']
];
return taOptions;
}]);
});
Here is the error I get (when I run in production and the files are minified:
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=sangularApp&p1=%5B%24injector%3Aunpr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.0%2F%24injector%2Funpr%3Fp0%3Da%0Ad%2F%3C%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A10%3A1797%0APa%2Fo.%24injector%3C%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A10%3A20234%0Ad%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A10%3A18987%0Ae%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A10%3A19221%0Ak%2F%3C.invoke%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A10%3A19311%0Ad%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A10%3A18448%0Aj%2F%3C%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A10%3A18580%0Af%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A10%3A2243%0Aj%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A10%3A18357%0APa%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A10%3A20389%0A_%2Fg%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A10%3A9026%0A_%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A10%3A9329%0A%24%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A10%3A8641%0A%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A14%3A26564%0Afa.Callbacks%2Fj%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A2%3A7154%0Afa.Callbacks%2Fk.fireWith%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A2%3A7927%0A.ready%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A2%3A9741%0Ag%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A1%3A1606%0A
This is a difficult question to respond to without some debugging information or console errors.
From what you've mentioned my suggestion would be to look back over your scripts and make sure that the additional library for textAngular has been included and that the injection of the library into your module is done correctly.
Minification and concatenation typically don't cause any issues for me when the library works fine without those tools applied.

Packages not defined

i wrote a script in javascript and used it in rules (share). The script start with:
var ctx = Packages.org.springframework.web.context.ContextLoader.getCurrentWebApplicationContext();
I m getting an error telling me that "Reference error: Packages is not defined".
How can i solve this issue?
The Packages object is only available for code which is considered "secure". This is most likely failing because the code is from a node in the Repository/Data-Dictionary. Put it somewhere in the classpath (e.g. classes/alfresco/templates/webscripts/...).
I don't think you can use this object in javascript, you won't find that code anywhere in Share javascript files. According to this link, Package root scope object is only available for web script implementations placed into the Java classpath, due to security reasons.
Try writing Java code for your rule.

Asynchronous Javascript loading different behaviour

I am developing a widget, and am using extJS framework (along with stomp,orbited servers). It requires 5 different Javascript files. To avoid impacting load time for users, I am trying to load them asynchronously.
Through some callback stacks, I have managed to asynchronously load them in order they are required.
However, the widget does not work at all in the asynchronous case. I then copied the "modified" resultant HTML DOM from Chrome's developer tools, and created a static HTML file.
The static file works. I am printing few alerts when different JS files are loaded in both cases. The order of these alerts is the same.
How do I detect and fix the error. Stumped after lot of debugging.
(Link removed as they were on production server. Managed to detect the issue and find a workaround - please see answer below - keeping for anyone's reference).
The problem is that Ext.onReady is called as soon as document is ready, which is BEFORE any other scripts are loaded asynchronously.
Thus, the initialization code was not getting called. I manage to work it around by calling Ext.each("dummy args", initialization_function, this) in the last javascript that is loaded. This made things work for me.

Error in running example application, Uncaught Error: SignalR: jQuery not found

I am new to asp.net. I am learning SignalR, going through this tutorial. I have created everything correctly as mentioned in the tutorial. Now when I ran the Console Application, ERROR --> "One or more errors occurred." at hubConnection.Start().Wait();.(the console application is still running). Anyhow I tried even running the Web application which is not giving any error but the button broadcast doesnt do any action(I think it should). When I checked the code in Web application, I saw that one of the script source has green scribbles. Here is the Image.
Please explain what I am doing wrong..
Edit: I am using ASP.NET Development server.
Edit2: The errors I get in Google Chrome Console are:
Uncaught Error: SignalR: jQuery not found. Please ensure jQuery is referenced before the SignalR.js file. jquery.signalR-1.0.0-alpha2.min.js:10
Uncaught TypeError: Cannot read property 'signalR' of undefined hubs:17
Uncaught ReferenceError: $ is not defined
Answer: I just added reference of jQuery in my code above all the scripts and the "file not found" error is careless because it is running on server side.
The Link has also been updated with reference to jQuery
Just for anyone else who comes across this problem, I made the mistake of just copying the code from the tutorial and updating to the latest version of SignalR. The version had obviously changed and this needs to be updated in the script references i.e.
The jQuery src should be (depending on the version of signalR you have installed):
<script src="Scripts/jquery.signalR-1.1.3.js"></script>
The same thing would obviously apply to the standard jQuery library.
The error message describes fully what the problem is:
Uncaught Error: SignalR: jQuery not found. Please ensure jQuery is referenced before the SignalR.js file.
You need to include jQuery.
try "signalr/hubs" instead of "/signalr/hubs"
If the jQuery version is defined with npm with a *, e.g: "jquery": "*", in package.json and that version get's upgraded you might also see an issue very similar to this.
So downgrade the version of jQuery: "jquery": "2.2.4",
Today, I upgraded jQuery and SignalR to 2.2.0 and jQuery could not loading although I added jQuery before SignalR.
And, I downgraded jQuery as 2.1.4 system working well.
<script type="text/javascript" src="Scripts/jquery-2.1.4.js"></script>
<script type="text/javascript" src="Scripts/jquery.signalR-2.2.0.js"></script>

Load google map api aynchronously using steal.js

I am trying to executing the following code using steal.js (from javascriptmvc extention):
steal("http://maps.google.com/maps/api/js?sensor=true");
This is working for all other scripts. But, in case of google map api url, its saying "'sensor' parameter isn't set" type error message. How to get rid of this please?
If you can show some other way to load this script asynchronously, that will be ok as well. Like, I tried with google js api loader, but that support for loading google map api up to version 2, no support for 3. Thanks in advance.
You don't typically steal external scripts. steal wont be able to build them into your production file.
Regardless, the current Google Maps API is not intended to be loaded asynchronously. If you examine the source, you'll see it uses document.write, which wont work properly after the page has loaded without the help of a 3rd party library.
Per the comment below, I was wrong. You can load Google Maps asynchronously using the callback parameter:
window.myCallback = function() {
new google.maps.Map(...);
};
$.getScript('//maps.google.com/maps/api/js?sensor=false&callback=myCallback');

Resources