Testing Marionette application with Mocha and Zombie.js - javascript

I'm trying to test my application using Mocha and Zombie.js, but I'm getting an "Error: timeout of 2000ms exceeded" when trying to load the page.
As I could see, it seems that the "Backbone.history.start();" is affecting it somehow and preventing Zombie.js to assert that the page has finished loading.
If I comment out the "Backbone.history.start();" line, my application will not start, but the Zombie.js will think that the page has finished loading.
The code below is an example of a code that is not working.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="../public/js/vendor/jquery.js"></script>
<script src="../public/js/vendor/json2.js"></script>
<script src="../public/js/vendor/underscore.js"></script>
<script src="../public/js/vendor/backbone.js"></script>
<script src="../public/js/vendor/backbone.marionette.js"></script>
<script type="text/javascript">
var Application = new Marionette.Application();
Application.on("initialize:after", function() {
if (Backbone.history) {
Backbone.history.start();
}
if (Backbone.history.fragment === "") {
Backbone.history.navigate("something", {});
}
});
Application.start();
</script>
</body>
</html>
Anyone had the same issue?

Related

Javascript executing incorrectly on Apache Cordova index.js/.html

So in an application I'm writing using Apache Cordova within Visual Studio, I am attempting to add functionality to the default index.html and index.js. However, my code within my index.js is executing very oddly - the debugger in VS shows that the $('#favorite-lot') is executed, but nothing within the .click(function()) method is. Is there any reason why this would be so?
Index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/JQueryMobile/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script src="scripts/JQueryMobile/jquery.mobile-1.4.5.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
</head>
<body>
<div role="main" class="ui-content">
<a id="favorite-lot" href=""><h5>Favorite Lot</h5></a>
</div>
</body>
</html>
Index.js
//This method is called on page load to set the favorite lot on the index page
//the document bit is called, but the if statement within it & ready aren't
//$(document).ready(function () {
$('#favorite-lot').click(function () {
var storage = window.localStorage;
var href = storage.getItem("favoriteLot");
//now redirect
window.location.replace(href);
});
//});
Note I have tried enclosing my function within a document.ready (see commented out code), however the results are the same.
EDIT: So I figured this issue out, and it was a fairly simple error: I wasn't including the jQuery code itself, just jQuery.mobile, and additionally, the jQuery has to load before jQuery.mobile for the .mobile stuff to work. Side note, I also didn't realize .mobile enables Ajax on most links/redirections, and had to disable that for some of my other code; maybe if you've found this post, you're suffering from the other problem as well

AngularJS error while using ngAudio

I am trying to play audio using AngualarJs
My HTML CODE:
<!doctype HTML>
<html>
<head>
</head>
<body ng-app="test" ng-controller="audioTest">
<button ng-click="playSound()"></button>
<script src="javascripts/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script src="javascripts/angular.audio.js"></script>
<script src="app.js"></script>
</body>
</html>
My app.js Code:
var app = angular.module("test",['ngAudio']);
var audio = app.controller("audioTest",function($scope,ngAudio){
$scope.playSound = function(){
$scope.audio = ngAudio.load("abc.wav");
$scope.audio.play();
}
});
While i load page i got error in console which lead me to
Error Details
The error you're reporting is due to an error resolving angular.audio.js script that can't be found by the name javascripts/angular.audio.js
I made a working fiddle: http://jsfiddle.net/en8x1nny/
This fiddle imports the script that the original demo from ngAudio is using.
The full path for that script is: http://danielstern.github.io/ngAudio/angular.audio.js.
You can download it and add it to your javascripts directory. Be sure not to use it by the URL mentioned above because github is not a CDN intended to serve scripts.
If you previously installed ngAudio by bower, the script should be in:
your_project_path/bower_components/angular-audio/app/angular.audio.js

Need help setting up backbone.js: Uncaught ReferenceError: Backbone is not defined

I am trying to set up a backbone driven web application but cannot get Backbone to load correctly. I get two errors when I load the required files:
-Uncaught ReferenceError: Backbone is not defined test.html: 17
-Uncaught TypeError: Cannot read property 'each' of undefined backbone.min.js: 1
I have tried multiple sources for the backbone, underscore and jquery files and am still having the same errors. Any help would be appreciated. Thanks.
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="backbone-min.js"></script>
<script "text/javascript" src="jquery-2.1.1.js"></script>
<script "text/javascript" src="underscore-min.js"></script>
<script>
Person = Backbone.Model.extend({
initialize: function(){
console.log("hello world");
}
});
var person = new Person();
</script>
</body>
</html>
You must include your libraries properly to fulfill missing dependencies:
<script src="jquery-2.1.1.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
It's important to include underscore before you include backbone because underscore is a dependency of backbone.
include Backbone.js and Underscore.js(a dependency of Backbone.js)
Related introduction on backbone.
This is a common mistake with common libraries such as jQuery, wherea libraries like Bootstrap rely on components provided by an external provider.
A quick glance and I can't see anything immediately wrong, although you are missing the 'type' on your second and third script tags. When you run the page in browser, are there any errors logged out to the console, can you see the libraries being loaded fine in the network viewer too? My immediate hunch would be the source paths are wrong and so the libraries aren't being loaded.
Dependencies!!! The order matters, backbone needs jQuery and underscore
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript" src="backbone-min.js"></script>
<script>
Person = Backbone.Model.extend({
initialize: function(){
console.log("hello world");
}
});
var person = new Person();
</script>
</body>

phonegap plugin: Torch undefined, even though js file is loaded on android

I get the following error when trying to use the TorchPluging:
file:///android_asset/www/web/index.html: Line 12 : Uncaught TypeError: Cannot read property 'Torch' of undefined
I added the plugin to config.xml (I think it has changed from plugins.xml to config.xml in the newer phonegap versions?)
The following is my entire index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Flashlight</title>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/Torch.js"></script>
<script type="text/javascript" charset="utf-8" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
function turnTorchOn(){
window.plugins.Torch.turnOn(
function() { console.log( "turnOn" ) } // success
, function() { console.log( "error" ) }); // error
}
</script>
</head>
<body>
<button id="turnOnButton" name="turnOnButton" > Turn on Flashlight</button>
<script>
$('#turnOnButton').click(function(){
alert("will turn on now");
turnTorchOn();
alert("called turnOn done");
});
</script>
</body>
</html>
It actually isn't that hard to update an older style plugin to one that will work in 2.0.0+. You would need to:
Modify the JS to the new cordova.define() style of declaring plugins.
Update the package reference to org.apache.cordova.* from com.phonegap.* in the Java code.
Make sure you are not calling any deprecated API's.
I've written a couple of blog posts that cover the topic. If you do follow them an update the Torch plugin you should submit a pull request so everyone can enjoy your work.
2.0.0 Plugin - http://simonmacdonald.blogspot.ca/2012/08/so-you-wanna-write-phonegap-200-android.html
Deprecated API's - http://simonmacdonald.blogspot.ca/2012/07/phonegap-android-plugins-sometimes-we.html

Jasmine compatibility with jQuery Mobile

I'm just in the middle of implementing some Jasmine tests for a jQuery mobile application I'm working on, I've run into an error that I managed to track down to adding the jQuery mobile library, the error is as follows:
Jasmine.js:1769 TypeError: Cannot read property 'abort' of undefined.
As soon as I remove the jQM dependency, the error goes away.
This is my code:
<!DOCTYPE html>
<html>
<head>
<title>HTML5/Common/Tests</title>
<!-- LOAD STYLES FIRST -->
<link type="text/css" rel="stylesheet" href="libs/jasmine.css" media="screen">
<link type="text/css" rel="stylesheet" href="../../Common/libs/jquery.mobile-1.0.1.css" />
<!-- LOAD JASMINE LIBRARIES -->
<script type="text/javascript" src="libs/jasmine.js"></script>
<script type="text/javascript" src="libs/jasmine-html.js"></script>
<!-- LOAD DEPENDENCIES -->
<script type="text/javascript" src="../../Common/libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../Common/libs/jquery.mobile-1.0.1.min.js"></script>
<!-- LOAD CODE TO TEST -->
<script type="text/javascript" src="../../Common/libs/myLib.js"></script>
<!-- LOAD ACTUAL TESTS -->
<script type="text/javascript">
describe("Suite 1", function() {
it("Should be that 1 equals 0", function() {
expect(0).toEqual(1);
});
});
</script>
</head>
<body>
<script type="text/javascript">
jasmine.getEnv().addReporter(new jasmine.TrivialReporter());
jasmine.getEnv().execute();
</script>
</body>
</html>
I'd prefer to use Jasmine for this application instead of qUnit as I think its more flexible and easier to implement in CI and explain to the BA's and PM's.. however after tinkering with this problem for a couple of hours and some futile searches on google I still havent been able to solve it so I'm starting to consider moving on.
Before I do though, has anyone experienced this same problem and found a solution for it?
Thanks and Regards.
UPDATE 20 March:
Ticket is in github Jasmine project:
https://github.com/pivotal/jasmine/issues/204
I was able to have jasmine test of jquery mobile scripts using jasmine-jquery.
The trick is that you need to disable the jquery mobile enhancement on DOMready because it will try to enhance the html of jasmine runner.
You can do it with this script inserted in the head of the html runner file:
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.autoInitializePage = false;
});
</script>
Then you need to trigger the enhancement of jquery mobile on the html inserted from your fixture (the jasmine-jquery functionnality):
describe('my test', function(){
beforeEach(function() {
loadFixtures("fixtures/MYFixture.html");
$("#jasmine-fixtures").attr("data-role","page").trigger("create");
}
it( ...
});
Try disabling both auto-initialization and hash-listening:
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.autoInitializePage = false;
$.mobile.hashListeningEnabled = false;
});
</script>
Then add the jqm page to the jasmine-jquery fixture, and initialize the page:
beforeEach(function() {
jasmine.getFixtures().set('<div data-role="page"></div>');
$.mobile.initializePage();
});

Categories

Resources