Testing Javascript Snippets with Jasmine

I also have this question. I’d like to implement unit testing in javascript that is used by skuid.

For front-end UI testing, Skuid uses QUnit currently. It’s actually very easy to do Unit Testing using Skuid Pages. Essentially, you can create a Skuid Page that is your Unit Test runner, which loads up your testing library’s JS and CSS dependencies, creates fixture DOM elements required by the testing framework (using Skuid’s Template component), and loads up your unit tests.

You should store all of your Unit Tests in Static Resource(s), and then load these into the page using Skuid’s JavaScript Resources immediately after loading in the testing framework itself. Here’s the XML for an example Skuid Page that runs some QUnit tests against a simple “AddNumbers” snippet which adds two numbers:

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="false" showheader="false">
    <models/>
    <components>
        <template multiple="false" uniqueid="sk--6m4r-110" allowhtml="true">
            <contents>&amp;lt;div id="qunit"/&amp;gt;
&amp;lt;div id="qunit-fixture"/&amp;gt;</contents>
        </template>
    </components>
    <resources>
        <labels/>
        <javascript>
            <jsitem location="external" name="QUnit" cachelocation="false" url="//code.jquery.com/qunit/qunit-2.0.1.js"/>
            <jsitem location="inlinesnippet" name="AddNumbers" cachelocation="false" url="">
return arguments[0] + arguments[1];</jsitem>
            <jsitem location="inline" name="UnitTests" cachelocation="false" url="" namespace="skuid">
QUnit.test( "AddNumbers snippet", function( assert ) {
    assert.equal( skuid.snippet.get("AddNumbers")(1,2), 3, "1 + 2 = 3" );
});</jsitem>
        </javascript>
        <css>
            <cssitem location="external" name="QUnit" cachelocation="false" url="//code.jquery.com/qunit/qunit-2.0.1.css" />
        </css>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>

In this page I just ran 1 simple QUnit test where I invoke a Skuid Snippet and check that it returns what I’d expect:

QUnit.test( “AddNumbers snippet”, function( assert ) {
assert.equal( skuid.snippet.get(“AddNumbers”)(1,2), 3, “1 + 2 = 3” );
});

The key requirements for QUnit to function are (a) Have 2 DOM Elements in the page with ids “qunit” and “qunit-fixture” (b) Load the QUnit JS and CSS libraries.