Unit Test Template - Ajax Patterns

Unit Test Template

From Ajax Patterns

Based on Scriptaculous Unit Test.

Contents

Ajax/Javascript Programming and Usability in "Ajax Design Patterns" Book

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
     <title>Scriptaculous Unit Test</title>
     <script type="text/javascript" src="/javascripts/prototype.js"></script>
     <script type="text/javascript" src="/javascripts/sc/unittest.js"></script>
     <script type="text/javascript" src="/javascripts/TODOmyJavascript.js"></script>
     <link rel="stylesheet" type="text/css" href="/stylesheets/test.css"/>
  </head>
  <body>
      <div id="testlog"></div>
      <script type="text/javascript" language="javascript" />
      // <![CDATA[
        new Test.Unit.Runner({
          setup: function() { with(this) {
          }},
          teardown: function() { with(this) {
          }},
          testSomethingHappens: function() { with(this) {
            assert(true);
            assertEqual(4,2+2);
            assertNotEqual(5,2+2); // http://en.wikipedia.org/wiki/Two_plus_two_makes_five
            assertMatch("/xyz/", "xyz");
            assertElementsMatch([1,2,3],[1,2,3]);
            assertElementMatches({a:1,b:2},{a:1,b:2});
          }},
        }, {});
      // ]]>
      </script>
  </body>
</html>

CSS (test.css)

From Scriptaculous package.

body, div, p, h1, h2, h3, ul, ol, span, a, table, td, form, img, li {
  font-family: sans-serif;
}
 
body {
  font-size:0.8em;
}
 
#log {
  padding-bottom: 1em;
  border-bottom: 2px solid #000;
  margin-bottom: 2em;
}
 
#logsummary {
  margin-bottom: 1em;
  padding: 1ex;
  border: 1px solid #000;
  font-weight: bold;
}
 
#logtable {
  width:100%;
  border-collapse: collapse;
  border: 1px dotted #666;
}
 
#logtable td, #logtable th {
  text-align: left;
  padding: 3px 8px;
  border: 1px dotted #666;
}
 
#logtable .passed {
  background-color: #cfc;
}
 
#logtable .failed, #logtable .error {
  background-color: #fcc;
}
 
#logtable .nameCell {
  cursor: pointer;
}

Links