Develop Reference

Javascript/jQuery unit testing

I want to start writing Unit tests for my JS code, i have never done this before, never had the need, but as my projects are ever expanding think it's time to start.
Now writing the tests themselves i don't think will be an issue for functional javascript code (a function that adds two numbers together), i don't have that, all of those things are server side (as it's much more complex than adding two digits), what i do have (and a lot of it) is dynamic Javascript (and jQuery) which is intertwined with HTML and my question is, how (and can i) write tests for that? Same code bellow (completely lorem ispum)
MyHelperClass = function () {
var _someBool = false;
return {
Initialize: function () {
MyHelperClass.ChangeALotOfThings("init");
},
ChangeALotOfThings: function (arg1) {
var $someID = $("#myID");
var _anotherBool = true;
if ($someID.lenght) {
var moreHTML = MyOtherHelperClass.ThisFunctionWillReturnSomeHTML();
$someID.find(".myClass").append(moreHTML);
$(".someClass").on("click", function(){
// do some code | i.e. basic Accordion
});
if (_anotherBool && arg1) {
var result = $.ajax({
url: "test.html",
context: document.body
});
$someID.prepend(result);
}
} else {
// do other similar stuff
}
}
}
}
MyHelperClass.Initialize();
This is a random example i wrote in 5min (some .js/jQuery syntax isn't even correct) and think the code doesn't even make a lot of sense, bottom line is, can something like this be Unit Tested?
I was looking into Tape.js and Jasmine.js but couldn't find much.
Thank you for any comments and/or advice regarding writing Unit Test for .js/jQuery.

Cesium - why is scene.pickPositionSupported false

I'm ultimately trying to draw a polygon on top of my house. I can do that.
The problem is that on zoom-out, zoom-in, and rotation (or camera move) the polygon doesn't stick to the top of my house. I received great help from this answer. So, now I'm trying to go through the sample code but there is a lot of Cesium methods and functionality that I need to learn.
The sample code I am trying to follow is located in the gold standard that appears to be baked into the existing camera controller here.
I call testMe with the mousePosition as Cartesian3 and the SceneMode is 3D, so pickGlobe is executed.
Here is my code:
var pickedPosition;
var scratchZoomPickRay = new Cesium.Ray();
var scratchPickCartesian = new Cesium.Cartesian3();
function testMe(mousePosition) {
if (Cesium.defined(scene.globe)) {
if(scene.mode !== Cesium.SceneMode.SCENE2D) {
pickedPosition = pickGlobe(viewer, mousePosition, scratchPickCartesian);
} else {
pickedPosition = camera.getPickRay(mousePosition, scratchZoomPickRay).origin;
}
}
}
var pickGlobeScratchRay = new Cesium.Ray();
var scratchDepthIntersection = new Cesium.Cartesian3();
var scratchRayIntersection = new Cesium.Cartesian3();
function pickGlobe(viewer, mousePosition, result) {
var globe = scene.globe;
var camera = scene.camera;
if (!Cesium.defined(globe)) {
return undefined;
}
var depthIntersection;
if (scene.pickPositionSupported) {
depthIntersection = scene.pickPosition(mousePosition, scratchDepthIntersection);
}
var ray = camera.getPickRay(mousePosition, pickGlobeScratchRay);
var rayIntersection = globe.pick(ray, scene, scratchRayIntersection);
var pickDistance;
if(Cesium.defined(depthIntersection)) {
pickDistance = Cesium.Cartesian3.distance(depthIntersection, camera.positionWC);
} else {
pickDistance = Number.POSITIVE_INFINITY;
}
var rayDistance;
if(Cesium.defined(rayIntersection)) {
rayDistance = Cesium.Cartesian3.distance(rayIntersection, camera.positionWC);
} else {
rayDistance = Number.POSITIVE_INFINITY;
}
var scratchCenterPosition = new Cesium.Cartesian3();
if (pickDistance < rayDistance) {
var cart = Cesium.Cartesian3.clone(depthIntersection, result);
return cart;
}
var cart = Cesium.Cartesian3.clone(rayIntersection, result);
return cart;
}
Here is my problem:
Here is the result:
Here are my questions to get this code working:
1. How do I get the scene.pickPositionSupported set to true? I'm using Chrome on Windows 10. I cannot find in the sample code anything about this and I haven't had much luck with the documentation or Google.
2. Why is rayIntersection not getting set? ray and scene have values and scratchRayIntersection in an empty Cartesian3.
I think if I can get those two statements working, I can probably get the rest of the pickGlobe method working.
WebGLGraphics Report:
I clicked on Get WebGL and the cube is spinning!

Picking positions requires that the underlying WebGL implementation support depth textures, either through the WEBGL_depth_texture or WEBKIT_WEBGL_depth_texture extensions. scene.pickPositionSupported is returning false because this extension is missing. You can verify this by going to http://webglreport.com/ and looking at the list of extensions; I have both of the above listed there. There is nothing you can do in your code itself to make it suddenly return true, it's a reflection of the underlying browser.
That being said, I know for a fact that Chrome supports the depth texture and it works on Windows 10, so this sounds like a likely video card driver issue. I full expect downloading and installing the latest drivers for your system to solve the problem.
As for rayIntersection, from a quick look at your code I only expect it to be defined if the mouse is actually over the globe, which may not always be the case. If you can reduce this to a runnable Sandcastle example, it would be easier for me to debug.

OK. So it turned out that I had a totally messed up Cesium environment. I had to delete it and reinstall it in my project (npm install cesium --save-dev). Then I had to fix a few paths and VOILA! It worked. Thanks to both of you for all your help.

EaselJS : .addEventListener is not a function

I'm trying to use easelJS and there is something I can't understand.
Here it is :
I have a MC containing all my buttons. Like this (PE and CO are my buttons. They have been initialized before in my code):
(lib.buttonsContainer = function() {
this.initialize();
// Layer 1
this.PE = new lib.PE();
this.PE.setTransform(121,163.3,2.382,2.382);
this.CO = new lib.CO();
this.CO.setTransform(135.2,59.9,2.382,2.382);
this.addChild(this.PE, this.CO);
//I give a name and an action
for(var childName in this){
if(this[childName] instanceof createjs.DisplayObject) {
this[childName].name=childName;
console.log(childName+" now has a name!!"); // it works.
this[childName].addEventListener("click", function(evt) { alert(evt.target.parent.name); });
}
}
}
The names are given as I expected, but firebug warns me :
this[childName].addEventListener is not a function
and nothing is displayed.
As the names are given, I'm sure this[childName] is a displayObject, so I can't figure out why the addEventListener is not considered as a function.
Anyone ?
Thanks.

Ok, never mind. Flash export html file with a old version easelJS (easeljs-0.5.0.min.js). When I loaded the last version easeljs-0.8.0.min.js, my code started to work.
Sorry.
Thanks.

This object constructor is preventing my script from running

I'm working on a project (creating a browser based check list). One of my goals has been to write every piece by hand without a library like jquery or a mysql database.
Currently I'm trying to create on object for managing tasks. I'm not finished the primary function, but everything is closed, and I don't detect any errors. Furthermore, I'm haven't iterated it or called it's functions yet, so there's nothing to reference it yet. When I comment it out, the script runs normally.
I've included the xml request links up above and tested them successfully in a separate portion of the script.
I'm testing in firefox.
I'm writing this in SciTE
Here's the code:
function Task(name,node,childNode,divClass,content,onclick)
{
function retrieveTask(node,childNode)
{
var taskArray = [];
taskArray.push(xmlDoc.getElementsByTagName(name)[node].childNodes[childNode].nodeValue;)
taskArray.push(xmlDoc.getElementsByTagName(description)[node].childNodes[childNode].nodeValue;)
taskArray.push(xmlDoc.getElementsByTagName(complete)[node].childNodes[childNode].nodeValue;)
return taskArray;
}
function displayTask(name,content)
{
var task = retrieveTask(node,childNode);
var clickDiv = "";
formatDiv(name,"task",task[1],clickDiv);
task[2] === true ? formatDiv(name+1,"incompleteBox"," ",clickDiv) : formatDiv(name+1,"completeBox","O",clickDiv);
}
}
If anyone could give me some insight or tips that would be awesome. This isn't homework, it's a hobby, so it's a self teaching process.

...childNodes[childNode].nodeValue;)
should be );

Trying to access toolbar button is nil

I have been working on writing some automation scripts for an app I am writing, and have been trying to get the following function to work. I was able to finally get it to complete correctly, but with some different code. The following two code snippets are the same, in my mind, but only the FIRST one seems to work. I would love some insight as to why. Is it my JavaScript skills (which are weak, at best), or something specific to UIAutomation?
// Define some global variables -- THIS WORKS
var target = UIATarget.localTarget();
var app = target.frontMostApp().mainWindow();
var toolbarButtons = app.toolbar().buttons();
toolbarButtons["Back"].tap();
This fails...
var target = UIATarget.localTarget();
var app = target.frontMostApp().mainWindow();
var backButton = app.toolbar().buttons()["Back"];
backButton.tap();
The second (failing) code snippet says that I'm getting a nil value for the button. If someone could help point out why this second approach isn't correct, I'd greatly appreciate it. I have to tap the back button a number of times, and backButton.tap() just seems cleaner.
UPDATE: Below is the exact code that is failing
// Define some global variables
var target = UIATarget.localTarget();
var app = target.frontMostApp().mainWindow();
// List everything we see
UIALogger.logStart("Logging app...");
app.logElementTree();
UIALogger.logPass();
// Function for moving into and out of every home screen option
var homeToViewAndBack = function() {
var backButton = app.toolbar().buttons()["Back"];
// Let's go down the list of buttons
app.buttons()["VideoHomeButton"].tap();
backButton.tap();
UIALogger.logPass("Basic navigation works.");
}
// Call our functions
homeToViewAndBack();
This give an error " Script threw an uncaught JavaScript error: Cannot perform action on invalid element: UIAElementNil from target.frontMostApp().mainWindow().toolbar().buttons()["Back"]". However, the code in the first snippet above works like a charm.
To confirm again, I changed the text on the back button to "Home" and tried the following code...the first call to the back button works, but the second fails:
var homeToViewAndBack = function() {
var toolbarButtons = app.toolbar().buttons();
var backButton = app.toolbar().buttons()["Home"];
// Let's go down the list of buttons
app.buttons()[0].tap();
toolbarButtons["Home"].tap();
app.buttons()[1].tap();
backButton.tap();
UIALogger.logPass("Basic navigation works.");
}