UI testing

uitest.js is not a test framework, but a small library helping to load a page into an iframe and checking the state of the page in a tests.

This framework is used by the map.apps developers for evaluation purpose and not heavily used.

Installation

To integrate uitest.js into a map.apps Maven project add the following Maven dependency:

<dependency>
    <groupId>de.conterra.jsrt</groupId>
    <artifactId>ct-jsrt-test-uitest</artifactId>
</dependency>

To check which version of uitest.js is deploy, open http://localhost:8080/resources/jsregistry/root/uitest in a browser.

Use it in a test

This is a sample of a intern test using uitest to load a page into an iframe. uitest.js can be used with any test framework.

This is the page under test:

tests/app.html

<!DOCTYPE html>
<html>
    <head>
        <!--Needed for uitest to inspect the page -->
        <script type="text/javascript">parent.uitest && parent.uitest.instrument(window);</script>
        <title>Simple Dummy Site</title>
        <script type="text/javascript">
            window.sayHello = function () {
                var message = document.getElementById("message");
                message.innerHTML = "Hello World!";
            };
        </script>
    </head>
    <body>
        <div id="message"></div>
        <button id="triggerHello" onclick="sayHello()">Learn More</button>
    </body>
</html>

This is the intern test loading the page and testing its behavior:

tests/hello.js

define([
    "intern!object",
    "intern/chai!assert",
    "module",
    "require",
    "uitest"
], function (registerSuite, assert, md, require, uitest) {
    var uit;
    registerSuite({
        name: md.id,
        "test that after app.html is loaded is the message empty": function () {
            // create ui test instance
            uit = uitest.create();
            // configure it to load a url
            uit.url(require.toUrl("./app.html"));
            // create a async callback function to inform the test framework about success or failure
            var assertMessageIsEmpty = this.async().callback(function (message) {
                assert.equal(message, "");
            });
            // wait for load of the page
            uit.ready(function (document) {
                // fetch a dom element from the page
                var currentMessage = document.getElementById("message").innerHTML;
                // check the state
                assertMessageIsEmpty(currentMessage);
            });
        },
        "test that after clicking the button 'triggerHello' is the message 'Hello World!'": function () {
            // create a async callback function to inform the test framework about success or failure
            var assertMessageIsHelloWorld = this.async().callback(function (message) {
                assert.equal(message, "Hello World!");
            });
            // reuse the uitest instance, do not reload the page
            uit.ready(function (document) {
                // click a button
                document.getElementById("triggerHello").click();
                // check if the page has changed
                var currentMessage = document.getElementById("message").innerHTML;
                assertMessageIsHelloWorld(currentMessage);
            });
        }
    });
});