I'm writing Qunit tests for the following html file:
var PinPointService = {
doAjax: function(doAjax_params) {
//do some stuff
}
//a bunch more variables and functions
}
The test I'm writing in a seperate file:
QUnit.test("test", function(assert) {
var array = [];
PinPointService.doAjax(array);
//assert some stuff
});
The error I get:
PinPointService is not defined
My main js file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Pinpoint Test</title>
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.0.0.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://code.jquery.com/qunit/qunit-2.0.0.js"></script>
<script type="text/javascript" src="C:\path\to\jshamcrest.js"></script>
<script type="text/javascript" src="C:\path\to\core.js"></script>
<script type="text/javascript" src="C:\path\to\integration.js"></script>
<script type="text/javascript" src="C:\path\to\jsmockito-1.0.4.js"></script>
<script type="text/javascript" src=""></script>
<script src="C:\path\to\pinpoint.html"></script>
<script src="C:\path\to\pinpointTest.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>
Is there something additional I have to do besides including pinpoint.html in my main js file? I'm new to JavaScript, so I think I could be missing some fundamentals of how the language works in contrast to Java which I'm very comfortable with.
Make sure you import the file where
QUnit.test("test", function(assert) {
var array = [];
PinPointService.doAjax(array);
//assert some stuff
});
is located, after you imported PinPointService.
So in your html file it should be something like
...
<script src="C:\path\to\pinpointTest.js"></script>
<script src="file_containing_the_code_above"></script>
...
the html page is read and included from top to bottom so if you have not included the pinpointTest file yet, you can not use anything inside it.
Related
I'm trying to make make an include of html2canvas and jQuery screenshot the div #trump. When calling the html2canvas functions in the my.js file, there is no output whatsoever in the console which leads to me being unable to find the bug :(
Here is my head in index.html:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/uikit.min.css" />
<link rel="stylesheet" href="css/custom.css" />
<script src="js/uikit.min.js"></script>
<script type="text/javascript" src="html2canvas.js" defer></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" defer></script>
<script type="text/javascript" src="my.js" defer></script>
</head>
Here is my.js:
function export(){
document.getElementById('trump').parentNode.style.overflow = 'visible'; //might need to do this to grandparent nodes as well, possibly.
html2canvas( [ document.getElementById('trump') ], {
onrendered: function(canvas) {
document.getElementById('trump').parentNode.style.overflow = 'hidden';
var dataUrl = canvas.toDataURL();
window.open(dataUrl, "toDataURL() image", "width=800, height=800");
$(document).append(canvas);
//Canvas2Image.saveAsPNG(canvas);
}
});
}
$(document).ready(function () {
$('#submitter').click(function () {
var but = $('#submitter');
but.text('Hi!');
export();
});
});
Any help would be greatly appreciated! There is no output in the console but all of the files look like they are showing up correctly within Chrome dev tools. The defer tag was added afterwards as an attempt to fix but no cheerios.
Thank you!
The export() function was predetermined which was why it was not being called
I am trying to access this url via javascript to loaf a function in my js page:
url which contains a function
Then I will easily call the function and load some info.
I have the following code:
document.write('<SCRIPT LANGUAGE=JavaScript SRC="https://oasc12.247realmedia.com/RealMedia/ads/adstream_mjx.ads"></SCRIPT>');
OAS_RICH('UNKNOWN');
and my html is:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div id="mobile-ad">
<div class="sidebox advertisement">
<script type="text/javascript" src="/test/ads.js"></script>
</div>
</div>
Now my problem when I run it I get "Uncaught ReferenceError: OAS_RICH is not defined" which means that the function loading does not work via
Can anyone help why it is not working ? Am I missing anything?
why you are not putting your script balise directly in the head of the html page.
Then at the end of the body you add a script that call your function.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://oasc12.247realmedia.com/RealMedia/ads/adstream_mjx.ads"></script>
</head>
<body>
<div id="mobile-ad">
<div class="sidebox advertisement">
<script type="text/javascript" src="/test/ads.js"></script>
</div>
<script>
OAS_RICH('UNKNOWN');
</script>
</div>
</body>
You need this:
<script id="adscript"></script>
<script>
var adScript = document.getElementById("adscript");
adScript.addEventListener("load", function () {
OAS_RICH('UNKNOWN');
});
adScript.src = "https://oasc12.247realmedia.com/RealMedia/ads/adstream_mjx.ads";
</script>
So I have the following index.html:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project</title>
 <link href="public/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<script src="lib/jquery-1.11.3.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="public/js/main.js"></script>
</body>
main.js
(function($){
// Object declarations goes here
var FormLoanView = Backbone.View.extend({
tagName: 'div',
template: _.template('<p class="text-uppercase">Uppercased text.</p>'),
initialize: function(){
var data = this.$el.html(this.template())
$('body').html(data)
}
})
$(document).ready(function () {
var LoanView = new FormLoanView({
});
});
})(jQuery);
I am trying to create <p class="text-uppercase">Uppercased text.</p> and append it to the body in my index.html. It does return the p element, but the bootstrap styles don't kick in because "Uppercased text." does not return with uppercase letters. Anyone know why this is happening? Can bootstrap classes not be using in _.template?
It looks like your bootstrap.css isn't included properly. Try using the CDN or fixing the relative path of the css file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project</title>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="lib/jquery-1.11.3.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="public/js/main.js"></script>
</body>
Here's an example using only the CSS: https://jsfiddle.net/9nm5f0x9/
You don't need to include the bootstrap JS file as another commenter stated.
I already linked the script to my html file for the angularjs,sanitize and animate:
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-sanitize.min.js"></script>
<script type="text/javascript" src="js/angular-animate.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
and when i added the ngAnimate as a dependency to my module just like this:
var nameSpace = angular.module("OscarApp", ["ngSanitize","ngAnimate"]);
all my variables inside my expression were displayed as it is not on what was initialized on the variable, just like this:
{{item.award_title}}
what seems to be the problem? I just want to follow this tutorial (https://www.youtube.com/watch?v=Bcv46xKJH98).
Works for me...
This prints 2 to the screen
index.html
<!DOCTYPE html>
<html ng-app="OscarApp">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-sanitize.min.js"></script>
<script type="text/javascript" src="angular-animate.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
{{1+1}}
</body>
</html>
app.js
var nameSpace = angular.module('OscarApp', ['ngSanitize','ngAnimate']);
Angular version 1.3.0-rc.3 (latest download from angularjs.org)
This snippet shows that there is no problem with the unit.
maybe you have a problem elsewhere.
var nameSpace = angular.module('OscarApp', ['ngSanitize','ngAnimate']);
nameSpace.controller('OscarCtrl',['$scope',function($scope) {
$scope.item={ 'award_title' : 'The Lord of The Rings' };
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-sanitize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-animate.min.js"></script>
<div ng-app="OscarApp" ng-controller="OscarCtrl">
{{item.award_title}}
</div>
I'm trying to get a simple test going with QUnit but it won't locate functions defined within $(document).ready().
test.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="qunit-git.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="code.js"></script>
<script type="text/javascript" src="test.js"></script>
<link rel="stylesheet" type="text/css" href="qunit-git.css" media="screen"/>
</head>
<body>
<h1 id="qunit-header">QUnit Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
</body>
</html>
test.js
test('Blah blah', function() {
ok(mytest(), 'foo bar'
);
});
code.js
$(document).ready(function() {
var mytest = function() {
return true;
}
});
--> "Died on test #1: mytest is not defined..."
As you start testing, you may find that you need to improve the structure of your code. Defining functions as local variables inside $(document).ready is strange, and makes it so they cannot be accessed anywhere but in the .ready call. Move that function somewhere else.