DOM Testing

With TSxUnit you can test TypeScript code that works with HTML-markup or DOM Events. Without Selenium, PhantomJS, without any browser. Clean unit tests can be run via CLI.

AbstractDomTestCase

It is base class for tests, when tested code work with some DOM entities. With builders you can instantiate required stuff. For example:

Window

export class WindowTest extents AbstractDomTestCase {
    public testStubWindowFromUrl() {
        let builder: WindowBuilder = this.getWindowBuilder();
        let window: Window = builder.setLocation("http://example.com", true).getMock();
        this.assertInstanceOf(Window, window);
        this.assertEquals("example.com", window.location.host);
        this.assertEquals("Example Domain", window.document.title);
    }
}

WindowBuilder.setLocation() method use given uri for set window.location property. If second argument is true, content will be loaded to window.

Document

With AbstractDomTestCase you can stub document object from markup source like this:

    public testSetSource() {
        let builder: DocumentBuilder = new DocumentBuilder();
        builder.setSource("<p class='foo' id='foo'></p><p class='bar'></p>");
        let doc: Document = builder.getMock();

        this.assertElementsCount(doc, ".foo", 1);
        this.assertElementsCount(doc, ".baz", 0);
        let a: HTMLAnchorElement = doc.createElement("a");

        a.className = "foo";
        doc.getElementById("foo").appendChild(a);

        this.assertElementsCount(doc, ".foo", 2);
    }

... or from file

// path relative from worked directory (in most cases project root, where you call npm test)
let doc: Document = this.getDocumentBuilder().setSourceFromFile("tests/fixtures/foo.html").getMock();

... or from url with setLocation(), like window (see above).