I have trouble with creating test for my little script below. I have 3 tests and test nr 3 I want to assign values to my variables:
var myWeight;
var myDistance;
var mySpeed;
and then calculate function difference and see if its correct answer. I get this error in qunit:
Tere tere tere tere
Expected:
"531.36"
Result:
NaN
Diff:
"531.36" NaN
Source:
@file:///C:/Users/John%20Wayne/SkyDrive/Documents/testimine2.html:128
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit basic example</title>
<link rel="stylesheet" href="qunit.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="qunit.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
var myWeight;
var myDistance;
var mySpeed;
function HowMany(form)
{
var difference;
difference = (myDistance * myWeight * mySpeed) * .123;
form.Fdiff.value = difference;
if (difference < 1) {
form.comment.value="Error, please check your answers";
}
if (difference > 1 && difference < 100) {
form.comment.value="You better start working!";
}
if (difference > 101 && difference < 200) {
form.comment.value="Nice run, but you can do better.";
}
if (difference > 201 && difference < 300) {
form.comment.value="Very good! Push above 300 next time.";
}
if (difference > 301 && difference < 500) {
form.comment.value="Great! Your a runner.....keep it up!";
}
if (difference > 501 && difference < 700) {
form.comment.value="Bill Rogers move over!";
}
if (difference > 701 && difference < 1200) {
form.comment.value="Your my hero! Have a jelly doughnut.";
}
if (difference > 1201 && difference < 2500) {
form.comment.value="You are killing yourself, its too much!";
}
if (difference > 2500) {
form.comment.value="Please check your input, the output is too high but not impossible";
}
}
function SetMyWeight(weight)
{
myWeight = weight.value;
}
function SetmyDistance(dis)
{
myDistance = dis.value;
}
function SetMySpeed(speed)
{
mySpeed = speed.value
}
function ClearForm(form){
form.myWeight.value = "";
form.myDistance.value = "";
form.mySpeed.value = "";
form.Fdiff.value = "";
form.comment.value = "";
}
// -->
</SCRIPT>
<center>
<FORM METHOD="POST">
<TABLE border=3>
<TR>
<TR>
<TD><div align=center>Your<br>Weight</div></TD>
<TD><div align=center>Miles<br>run</div></TD>
<TD><div align=center>Speed<br>Km/H</div></TD>
<TD><div align=center>Calories<br>burned</div></TD>
<TD><INPUT TYPE=BUTTON ONCLICK="HowMany(this.form)" VALUE="Calculate"></TD>
</TR>
<tr>
<TD><div align=center><INPUT TYPE=text NAME=myWeight SIZE="4"ONCHANGE="SetMyWeight(this)"></div></TD>
<TD><div align=center><INPUT TYPE=text NAME=myDistance SIZE="4"ONCHANGE="SetmyDistance(this)"></div></TD>
<TD><div align=center><INPUT TYPE=text NAME=mySpeed SIZE="4"ONCHANGE="SetMySpeed(this)"></div></TD>
<TD><div align=center><INPUT TYPE=text NAME="Fdiff" VALUE="" SIZE="6"></div></TD>
<TD><div align=center><INPUT TYPE=BUTTON VALUE=" Reset " onClick="ClearForm(this.form)"></div></tr>
</table>
<table border=3>
<tr>
<TD><DIV ALIGN=CENTER>My Comment</DIV></TD>
<TD><INPUT TYPE=text NAME="comment" size="37"></td>
</TR>
</TABLE>
</FORM>
</center>
<script>
test( "a basic test example", function() {
var value = "hello";
equal( value, "hello", "We expect value to be hello" );
});
</script>
<script>
test( "Too few calories", function() {
difference = "67";
equal( difference, "67", "You better start working!")
});
</script>
<script>
test( "Kaalu sisestamine", function() {
MyWeight = "54"
MyDistance = "10"
mySpeed = "8"
difference = (myDistance * myWeight * mySpeed) * .123;
equal(difference, "531.36", "Tere tere tere tere");
});
</body>
</html>
You are pretty much doing it correctly, the problem is that JavaScript is a case-sensitive language. The variables are defined as:
var myWeight;
var myDistance;
var mySpeed;
and you use them correctly everywhere except for in the third test. You have:
MyWeight = "54"
MyDistance = "10"
but it should be
myWeight = "54"
myDistance = "10"
If you ensure you are using the correct variable names (including case correctness), then you should be fine.
A couple of other general coding tips:
Also, you aren't really using QUnit the way it is intended to be used. You should consider moving the table into the qunit-fixture div, and actually use the input elements via DOM manipulation to test the actual form. Changing the values by altering the variables in the script you are testing is not good practice.