I am in progress learning how to use QUnit and Javascript and html. So far i only know how to use some of Qunit APIs like OK(), equal(), notequal(), test(), and expect(), but i have tough time to understand how to use the callbacks like qunit.done or qunit.log. Can someone give me an example? i have some code below:
<head>
<title>My Tests</title>
<script src="jquery/jquery-2.1.0.min.js" type="text/javascript"></script>
<script src="qunitsrc/qunit-1.14.0.js" type="text/javascript"></script>
<link rel="stylesheet" href="qunitsrc/qunit-1.14.0.css" type="text/css" media="screen">
<script src="tests/calculator.js" type="text/javascript"></script>
<script src="tests/calculatortests.js" type="text/javascript"></script>
</head>
<body>
<h1 id="qunit-header">My Tests</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
calculator.js
function MathOperations(){
}
MathOperations.prototype.add = function(num1,num2)
{
var result = num1 + num2;
return result;
}
calculatortests.js
test("Add should add 2 items", function(){
var math = new MathOperations();
var result= math.add(1,2);
equal(result,3,"Result of 1+2 should be 3");
});
Basically, it sounds like you want to use these callbacks write a custom reporter. There are several existing ones that you can base yours off of. Here's an example for a JUnit compatible XML reporter:
https://github.com/jquery/qunit-reporter-junit
Related
I'm creating a website for a school project with different arrays of facts. I created multiple files with different JavaScript facts arrays and am trying to call them in the index.html file but I'm not sure how to call them without an a href tag. I've researched and most people say to try sourcing in the tag but nothing is printing.
This is my index.html code:
<!doctype html>
<html>
<head>
<meta charset="utf8" />
<title></title>
<link rel="stylesheet" type="text/css" href="main.css" />
<script src="EllaFactsArray.html" type="text/javascript"></script>
</head>
<body>
<p>
Here is a fact about Ella:
</p>
<script>
getEllaFact();
</script>
</body>
</html>
This is my facts array (EllaFactsArray.html):
<html>
<title>Ella Facts</title>
<head>
<script type="text/javascript">
function getEllaFact()
{
Ella = new Array(6);
Ella[0] = "Ella had a six decade long career.";
Ella[1] = "";
Ella[2] = "";
Ella[3] = "";
Ella[4] = "";
Ella[5] = "";
i = Math.floor(Math.random() * Ella.length);
document.write("<dt>" + Ella[i] + "\n");
}
</script>
</head>
<body>
<script type="text/javascript">
getEllaFact();
</script>
</body>
</html>
The script needs to reference a JavaScript file, not an HTML file containing a function. Move the function into its own file and include it in the pages as needed.
<script src="EllaFactsArray.js" type="text/javascript"></script>
https://www.w3schools.com/js/DEFAULT.asp
I'm trying to dynamically change my html by calling my Javascript class in jQuery. I keep getting an Uncaught Reference error. I know I have to window.onload my class somewhere. I've tried to load it before and after the class, before and after my jquery, right before the end of my HTML body, but I keep getting Uncaught Reference errors for the class I'm calling and the prototype (randomCard()) that I use in my jQuery.
I've also tried switching the order of script files at the end of my HTML body. I'm new to Javascript.
game.js
function CardsAgainstHumanity () {
this.blackCards = [
"How did I lose my virginity?",
"Why can't I sleep at night?",
"What's that smell?",
"I got 99 problems but ______________ ain't one.",
"Maybe she's born with it. Maybe it's ______________.",
"What's the next Happy Meal toy?",
"Here is the church. </br> Here is the steeple. </br> Open the doors </br> And there is ________________.",
"It's a pity that kids these days are all getting involved with _______________."
];
this.whiteCards = [];
this.score = 0;
randomCard();
}
CardsAgainstHumanity.prototype.randomCard = function () {
var random = this.blackCards[Math.floor(Math.random() * this.blackCards.length)];
return random;
};
index.js
$(document).ready (function() {
$(".black-cards").on("click", function () {
$(this).text(randomCard());
});
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>Cards Against Humanity</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="css/style.css" media="screen">
</head>
<body>
<div class="container">
<div class="black-cards"> </div> <!-- Black Cards -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/game.js"></script>
<script src="js/index.js"></script>
</body>
</html>
I have a plan to create an app for JavaScript test. In here I will give a question for creating a program, for example, show the text "HTML Code Play" in alert box? The user will do the coding, and they can use any name for the functions, variable, etc.
I want to check the output, where the output show the alert box "HTML Code Play".
User Code
<script>
function showalert()
{
alert("HTML Code Play");
}
</script>
<input type="button" value="Show Alert" onclick="showalert();">
Compare with the following code(My code)
<button onclick="alertbox();">Show Alert</button>
<script>
function alertbox()
{
alert("HTML Code Play");
}
</script>
In the examples above, both produce the same output but the coding is different.
When I check both codes, I want the result true. Can I do it? Is it possible?
I found your question interesting, and created sample code using mocha and sinon.
(To exec this, you must install sinon.js modules by yourself.)
I published this code here as working code.
Please regard 'code1','code2' blocks as user-implemented codes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to test user code on broweer</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.5.3/mocha.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.5.3/mocha.css" rel="stylesheet">
<script type="text/javascript" src="../components/sinon/lib/sinon.js"></script>
<script type="text/javascript" src="../components/sinon/lib/sinon/util/core.js"></script>
<script type="text/javascript" src="../components/sinon/lib/sinon/extend.js"></script>
<script type="text/javascript" src="../components/sinon/lib/sinon/spy.js"></script>
<script type="text/javascript" src="../components/sinon/lib/sinon/call.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>How to test user code on broweer</h1>
<div id="mocha"></div>
<div id="live-code-stage"></div>
<template id="code1">
<button onclick="alertbox();">Show Alert</button>
<script>
function alertbox() {
alert("HTML Code Play");
}
</script>
</template>
<template id="code2">
<script>
function showalert() {
alert("HTML Code Play");
}
</script>
<input type="button" value="Show Alert" onclick="showalert();">
</template>
</div>
<script>
mocha.setup('bdd');
$(function () {
var assert = function (expr, msg) {
if (!expr) throw new Error(msg || 'failed');
};
describe("implement 'show alert button' test", function () {
before(function () {
window.alert = sinon.spy();
});
it("window.alert must to be called with 'HTML Code Play'", function (done) {
$("#live-code-stage").html($("#code1").html()); // testing code1
$("button, input[type='button']").click();
assert(window.alert.calledWith("HTML Code Play"));
done();
});
});
mocha.run();
});
</script>
</body>
</html>
Key Points
You can mock 'window.alert' like this:
window.alert = sinon.spy();
And you can check if it(=alert) was called with correct argument like this:
assert(window.alert.calledWith("HTML Code Play"));
If user-created code is wrong, mocha test will fail.
Introducing qunit may improve the test report appearance.
But this is just a sample. There must be many options to archive what you want.
I need to call a JavaScript function which is linked to my project. This function has 3 parameters. I'm using this parameters from an array on a ng-repeat.
If I use onclick event with 3 predefined parameter the function is executed with no problem. However, if I try to pass the parameters on the onclick function using {{a.param}}, it doesn't work.
If I try to use ng-click using the function and passing the parameters using {{a.param}} or a.param also does not work.
Can I call my JavaScript function from scope? I cannot define the JavaScript function on scope as I have seen in many articles.
Check out this:
(function(){
var app = angular.module("app",[]);
var module = angular.module("app");
module.controller("controller", function(){
var model=this;
model.param1="not initialized";
model.param2="not initialized";
model.param3="not initialized";
model.doWork = function(param1,param2,param3)
{
model.param1=param1;
model.param2=param2;
model.param3=param3;
};
});
}());
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="controller as model">
{{model.param1}}
<br/>
{{model.param2}}
<br/>
{{model.param3}}
<input type="button" value="Click" ng-click='model.doWork("this is param1",model.param2,"Some random string")')>
</div>
</body>
</html>
Hope it helps!
I am trying to build a simple single page web app and I am stuck. I am trying to use the module pattern :
var spa = (function () {
var initModule = function( $container ) {
$container.html(
'<h1 style="display:inline-block; margin: 25px;">'
+ 'hello world!'
+ '</h1>'
);
};
return { initModule: initModule };
})();
Which in theory should be invoked here:
<!doctype html>
<html>
<head>
<title>SPA Starter</title>
<!-- stylesheets -->
<link rel="stylesheet" type="text/css" href="css/spa.css" />
<link rel="stylesheet" type="text/css" href="css/spa.shell.css" />
<!-- third-party javascript -->
<script src="js/jq/jquery-1.11.3.js"> </script>
<script src="js/jq/jquery.uriAnchor-1.1.3.js"</script>
<!-- my Javascript -->
<script src="js/spa.js"> </script>
<script src="js/spa.shell.js"></script>
<script>
$(function() { spa.initModule( $('#spa') ); });
</script>
</head>
<body>
<div id="spa"></div>
</body>
</html>
I tried to do spa.initModule( $('#spa') ); in console and it's working, but in my code it isn't.
When I try to run I got Uncaught TypeError: spa.initModule is not a function
Thanks in advance.
http://jsfiddle.net/AlexeiTruhin/4rg0mdgb/ - works for me.
It means you have an error, for example in declaring the script:
<script src="js/jq/jquery.uriAnchor-1.1.3.js"</script>
Close the < script ..>
well,I met the same error,but the different reason that
I didn't insert "()" between "}" and ");" where in the end of the spa object definition.