Wednesday, March 10, 2010

March Madness Challenge - Day 10

Ok. Fighting back from last minute code, and then trying to fix it the next day. My little fixes managed to break barely working code. So, let's look at a a testing framework for Javascript called Qunit. QUnit is a jQuery based testing framework. Once you've got the basic html in place just include the necessary css and Javascript and you are up and running. Since my previous code had some issues with cookies I figured I would use QUnit to do a couple of test of how cookies work. I'll probably do more variations on this theme, but until then. Here's the code need to quickly test if cookies exist, cookies are created, etc.

Live Page


<!DOCTYPE html>
<html>
<head>
<title>QUnit Cookie test</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAyOcYQmrUZiRTkZD33sBhThSYG2nKbTfLUqOyuY0R-KaU9CNsSxQHWg8je-XfTEMamlZKbXxG4Z752A">
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript" charset="utf-8">
google.load("jquery", "1.4.2");
</script>
<link rel="stylesheet" href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js"></script>
<script type="text/javascript" src="jquery.cookies.2.2.0.min.js">
</script>

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

test("a basic test example", function() {
ok( true, "this test is fine" );
var value = "hello";
equals( "hello", value, "We expect value to be hello" );
});

test("Are cookies available?", function() {
ok(true, $.cookies.test());
});

//Are there existing cookies
test("Is there an existing cookie?", function() {
equals(true, $.cookies.get('newcookie')[0].test, "Cookie exists from last time.");
});

//Load cookie values nd check

//Create a new cookie test
test("Created new cookie.", function () {
var markers = [];
var marker = {test: true, date: new Date() } ;
markers.push(marker);
$.cookies.set('newcookie', markers);
var cookiedata = $.cookies.get('newcookie');
equals(true, cookiedata[0].test, "Cookie data is true");
});
//if not created create cookie data

//find and display existing markers
});
</script>
<style type="text/css">
div.c1 {width:100%; height:100%}
</style>
</head>
<body>
<h1 id="qunit-header">QUnit Cookie Tests</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
</body>
</html>

1 comment:

Rick said...

Oh, it uses the default session cookie. So on first load the existing cookie test fails. On reload it passes. One of my next tests will be about setting the times and testing duration. That setTimeout code should come in handy for it. The other thing is communicating testing a session value with a reload.