Modern Development needs Unit Tests to enable the trust in code even after large changes. SharePoint is traditionaly bad to unittests as the server side object model is very bad to mock (no interfaces, komplex dependencies between objects, only on sharepoint server, …) The newer client side api hasn’t gotten much love on this either. But I want to try to use at least some unittesting in JavaScript. So I decided to start embedding some unittest frameworks into new SharePoint Apps to find which works for me in this context.

We start with QUnit, a framework which evolved together with jQuery.

 

Structur of the Appcode

If you create a new app in the web IDE (Napa), you get several files. The difficult part is, where to place the code. After some experiments I found a way which works for me, at least for a start. The best place (or the place which worked) is to put script, css and qunit div in the default aspx. qUnit is referenced from the scripts directory but you can of course use the CDN Url. Unittests are located in scripts/test.js. When this will grow, it will be refactored to multiple files, but not unless needed.

<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script>

    <!-- Add your CSS styles to the following file -->
    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />
	<!-- qunit -->
	<script type="text/javascript" src="../Scripts/qunit-1.10.0.js"></script>
	<link rel="stylesheet" href="../Content/qunit-1.10.0.css">


    <!-- Add your JavaScript to the following file -->
    <script type="text/javascript" src="../Scripts/App.js"></script>
	
	<script type="text/javascript" src="../Scripts/tests.js"></script>
		
</asp:Content>

<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

    <div>
        <p id="message">
            <!-- The following content will be replaced with the user name when you run the app - see App.js -->
            initializing...
        </p>
    </div>

<h2>Unit Tests</h2>
		<div id="qunit"></div>
		<div id="qunit-fixture"></div>
</asp:Content>

Unittesting Client OM

qUnit supports synchronous and asynchronous  tests which fits fine with SharePoint Client OM .

/// <reference path="qunit-1.10.0.js" />
test("hello test", function(){
	ok( 1== "1", "Passed!");
});

test("hello sharepoint", function(){
	var clientContext = new SP.ClientContext.get_current();
	var web = clientContext.get_web();
	
	clientContext.load(web);
	
	throws( function(){ web.get_title(); }, "No sync access");
});

asyncTest("hello sharepoint async", function(){
	expect(1); // exact one call to ok
	
	var clientContext = new SP.ClientContext.get_current();
	var web = clientContext.get_web();
	
	clientContext.load(web);

    clientContext.executeQueryAsync(
        function(){ok(true, "Sharepoint web "+ web.get_title()); start();},
		function(){ok(false, "web load failed"); start();}
    );
	
});

And this is the result:

image