Widget Test Case

Better suited for testing widgets as it provides a controlled environment where to safely create widgets without the need of real template.

It makes use of the class aria.jsunit.helpers.OutObj to mock a TemplateCtxt and provide a test area in the DOM. OutObj is available as the property this.outObj of the test class.

Automatic Creation

As of Aria Templates 1.4.1 any WidgetTestCase has the method:

• createAndInit Create an instance of the widget under testing, put the output of writeMarkup in the DOM and call the widget's initWidget method.

By calling createAndInit we can emulate exactly the same behavior of a widget inside a template, but without the need of creating and loading one.

The test area in DOM where widgets are inserted is cleaned automatically when the test ends. However if the test case has multiple test methods, it's up to the developer to clean the test area at the end of every method by calling this.clearAll();. Before version 1.4.8 the method to be called is this.outObj.clearAll();

Aria.classDefinition({
    $classpath : "MyWidgetTest",
    $extends : "aria.jsunit.WidgetTestCase",
    $dependencies : ["myLibrary.ImageGallery"],
    $prototype : {
        testInitialValueFalse : function () {
            var model = {};
            var cfg = {
                images : ["one.jpg", "two.jpg"],
                bind : {
                    index : {
                        inside : model,
                        to : "visible"
                    }
                }
            };

            var widget = this.createAndInit("myLibrary.ImageGallery", cfg);
            // Assuming that the widget defines a getImageDom method to img tag in the DOM
            var imageElement = widget.getImageDom();

            // Assuming that by default the widget displays the first image
            this.assertEquals(imageElement.src, "one.jpg");

            // Change the datamodel to display the second image
            aria.utils.Json.setValue(model, "visible", 1);

            imageElement = widget.getImageDom();
            this.assertEquals(imageElement.src, "two.jpg");

            widget.$dispose();
        }
     }
});

This method is useful for self-closing widgets like the following

{@aria:TextField {}/}

Container widgets don't use the writeMarkup method but a combination of writeMarkupBegin, HTML content and writeMarkupEnd. As of Aria Templates 1.4.8 you can test such kind of widgets using the following method:

• createContainerAndInit Create an instance of the widget under testing, put the output of writeMarkupBegin, some additional markup and the output of writeMarkupEnd in the DOM and call the widget's initWidget method.

Aria.classDefinition({
    $classpath : "MyWidgetTest",
    $extends : "aria.jsunit.WidgetTestCase",
    $dependencies : ["myLibrary.Accordion"],
    $prototype : {
        testInitialValueFalse : function () {
            var model = {};
            var cfg = {
                open : true,
                bind : {
                    open : {
                        inside : model,
                        to : "open"
                    }
                }
            };

            var widget = this.createContainerAndInit("myLibrary.Accordion", cfg, "<div>Test markup</div>");

            // Assuming that the widget defines a getDom method
            var hasMarkup = widget.getDom().getElementsByTagName("div").length > 0;
            this.assertTrue(hasMarkup);

            // Change the datamodel to close the accordion (assuming it remove the content from the DOM)
            aria.utils.Json.setValue(model, "open", false);

            hasMarkup = widget.getDom().getElementsByTagName("div").length > 0;
            this.assertFalse(hasMarkup);

            widget.$dispose();
        }
     }
});

Manual Creation

Creating manually a widget means executing what is done by the createAndInit method. Manual creation should be used when the automatic one is not available (versions before 1.4.1) or when you need to modify some actions.

Aria.classDefinition({
    $classpath : "MyWidgetTest",
    $extends : "aria.jsunit.WidgetTestCase",
    $dependencies : ["myLibrary.ImageGallery"],
    $prototype : {
        testInitialValueFalse : function () {

            // Please don't use this method unless you know what you're doing
            // Use automatic creation instead

            var model = {};
            var cfg = {
                images : ["one.jpg", "two.jpg"],
                bind : {
                    index : {
                        inside : model,
                        to : "visible"
                    }
                }
            };

            // Creates a widget instance
            var widget = new myLibrary.ImageGallery(cfg, this.outObj.tplCtxt);
            widget.writeMarkup(this.outObj);
            this.outObj.putInDOM();
            widget.initWidget();

            // Assuming that the widget defines a getImageDom method to img tag in the DOM
            var imageElement = widget.getImageDom();

            // Assuming that by default the widget displays the first image
            this.assertEquals(imageElement.src, "one.jpg");

            this.outObj.clearAll();
            widget.$dispose();
        }
     }
});

The sequence for container widgets is the following:

var widget = new myLibrary.Accordion(cfg, this.outObj.tplCtxt);
// Opening widget tag
widget.writeMarkupBegin(this.outObj);

// Any additional markup (widget content)
this.outObj.write("");

// Closing widget tag
widget.writeMarkupEnd(this.outObj);

this.outObj.putInDOM();
widget.initWidget();