Testing Javascript Snippets with Jasmine

  • 2
  • Question
  • Updated 2 years ago
  • Answered
Has anyone implemented a testing framework for Javascript snippets/resources using a framework like Jasmine.js
Photo of rensley

rensley

  • 316 Points 250 badge 2x thumb

Posted 2 years ago

  • 2
Photo of Eric Robertson

Eric Robertson

  • 72 Points
I also have this question. I'd like to implement unit testing in javascript that is used by skuid.
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
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>&lt;div id="qunit"/&gt;
&lt;div id="qunit-fixture"/&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.