Skip to content
This repository

A standard test case looks something like this in code:

{
    // Set some non-existing src, to check NETWORK_NO_SOURCE
    id:1200,
    name:"networkState, NETWORK_NO_SOURCE",
    definedInSpecs:["http://www.w3.org/TR/2011/WD-html5-20110113/video.html#network-states"],
    test:function(t){
        var node = document.createElement("audio");
        node.src = "non-existent-audio-file" + (+new Date());
        t.assertEqual(node.NETWORK_NO_SOURCE, node.networkState);
    }
},

This test is taken from the w3c/audio/properties.js it shows that a test is made of multiple properties, the most important ones are:

  • id - a unique and never changing (!!!) ID within the file, default to steps of 100 to have enough space to insert tests without overriding IDs
  • name - an understandable short name for the test, that makes the result pass or fail understandable
  • test - the test source code
  • definedInSpecs - is an array that contains URLs to where in the specification this test refers, this will allow for some kind of back-mapping

there are more properties, see below.

The test function

See the test function of the test above and in order to have all the power a couple things will be explained below.

test:function(t){
    var node = document.createElement("audio");
    node.src = "non-existent-audio-file" + (+new Date());
    t.assertEqual(node.NETWORK_NO_SOURCE, node.networkState);
}

On the first line you see the parameter t passed into the test function. That parameter is the test object, that provides all the assert methods:

t.assertTrue(/*Object*/ condition, /*String?*/ hint)
t.assertFalse(/*Object*/ condition, /*String?*/ hint)
t.assertError(/*Error object*/expectedError, /*Object*/scope, /*String*/functionName, /*Array*/args, 
            /*String?*/ hint)
t.assertEqual(/*Object*/ expected, /*Object*/ actual, /*String?*/ hint)
t.assertNotEqual(/*Object*/ notExpected, /*Object*/ actual, /*String?*/ hint)

// t also provides methods for explicitly pass or fail a test.
t.success(/*String?*/ hint)
t.failure(/*String?*/ hint)

Automatic Tests

The test defined above will execute without any user interaction, so you can use this like any standard unit testing framework.

Manual Tests

{
    id:200,
    name:"Interface usability/usefullness",
    definedInSpecs:["http://www.w3.org/TR/html5/states-of-the-type-attribute.html#date-state"],
    expectedResult:"Can you select today's date with one or two clicks?",
    test:function(t){
        dohx.showInfo('<form><input type="date" /></form>');
    }
}

from w3c/input/typeDate.js

You notice the test above uses a property expectedResult, this one makes this test a manual test, the string given to this property is the question the user has to answer in order to pass or fail the test. In the above case this might look like this:

Manual test screenshotManual test screenshot

The arrows point to the following items:

  1. points to the test's headline, you can see it consists of the test ID and it's name
  2. this arrow points to the question given as the expectedResult property
  3. points to the already executed (and in this case passed because it's green) test, the one with ID=100
Something went wrong with that request. Please try again.