test/runner.html

<!DOCTYPE HTML>
<html>
  <head>
      <!-- qunit business -->
      <link rel="stylesheet" href="qunit.css" type="text/css"/>
      <script type="text/javascript" src="qunit.js"></script>
      <!-- load in xui -->
      <script src="../assets/js/xui.js" type="text/javascript" charset="utf-8"></script>
      <!-- load in lawnchair and deps -->
      <script src="../assets/js/lawnchair/adaptors/LawnchairAdaptorHelpers.js" type="text/javascript" charset="utf-8"></script>
      <script src="../assets/js/lawnchair/adaptors/DOMStorageAdaptor.js" type="text/javascript" charset="utf-8"></script>
      <script src="../assets/js/lawnchair/adaptors/WebkitSQLiteAdaptor.js" type="text/javascript" charset="utf-8"></script>
      <script src="../assets/js/lawnchair/Lawnchair.js" type="text/javascript" charset="utf-8"></script>
      <!-- load up our dsl -->
      <script src="../assets/js/dsl.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <h1 id="qunit-header">PhoneGap Training Tests</h1>
    <h2 id="qunit-banner"></h2>
    <h2 id="qunit-userAgent"></h2>
    <ol id="qunit-tests">
    </ol>
    
    <!-- markup for display/when tests -->
    <div style="position:absolute; top:-1000px">
        <button id="welcome_button"></button>
        <button id="map_button"></button>
        <button id="settings_button"></button>
        <div id="welcome">&nbsp;</div>
        <div id="map">&nbsp;</div>
        <div id="settings">&nbsp;</div>
        <!-- markup for ui tests -->
        <form id="settings_form">
            <p>Map Type</p>
            <input type="radio" name="map" value="roadmap" checked>Road Map<br/>
            <input type="radio" name="map" value="satellite">Satellite<br/>
            <input type="radio" name="map" value="terrain">Terrain<br/>
            <input type="radio" name="map" value="hybrid">Hybrid<br/>
            <p>Zoom Level</p>
            <input type="radio" name="zoom" value="10">Super Far<br/>
            <input type="radio" name="zoom" value="12">Far<br/>
            <input type="radio" name="zoom" value="15" checked>Normal<br/>
            <input type="radio" name="zoom" value="18">Close<br/>
            <input type="radio" name="zoom" value="20">Super Close<br/>
            <br />
            <button id="save_button">Save</button>
        </form>
    </div>
    
    <!-- test suite -->
    <script type="text/javascript">
    
    module("dsl.js");
    
    test("run exists", function() {
        ok(run);
    });
    
    run(function(){
        // run, store, display, when, ui
        test("run gets called", function() {
            ok(true);
        });    
        
        // store
        test("store is a lawnchair", function() {
           equals(typeof store, "object") 
        });
        
        // display
        test("display shows the welcome dom element", function(){
            display('#welcome'); 
            x$('#welcome_button').click(); // fake click
            equals(x$('#welcome')[0].style.display, 'block')
        });
        
        // when
        test("when adding click behavior and a callback", function(){
            stop();
            when('#map', function() {
                start();
                ok(true);
            });
            x$('#map_button').click(); // fake a click
        });
        
        // ui
        test("ui returns a setting value from a select list", function() {
            equals(ui('map'), 'roadmap');
            equals(ui('zoom'), 15)
        });
    });
    </script>
  </body>
</html>