If you use javascript in your Visualforce pages and have ever thought, "this really should be unit tested", you're in luck. There are several frameworks available that are easily integrated with Visualforce code. This article gives a brief introduction to QUnit, a stable library used by the jQuery team to test their frameworks.
Browse over to the QUnit web site for documentation, a Cookbook, and download links. There are just a couple special instructions when integrating with your Visualforce code:
First, I would recommend creating a single Javascript test page that includes all code that needs to be tested. This makes maintenance easy and scales just fine for small to medium sized projects. For each VF file or static resource you'd like to test, use an apex:include or apex:includeScript component.
Upload the QUnit JS and CSS files as static resources and include them in your page header.
Finally, write your tests. For each one, specify a name and function to run. Add html elements for testing and make liberal use of the ok, equal, strictEqual, and deepEqual methods to assert results. Many additional options and ideas can be found in the QUnit Cookbook.
<apex:page standardStylesheets="false">
<head>
<title>JS Unit Tests</title>
<apex:includeScript value="{!UrlFor($Resource.SF_jQuery, 'js/qunit-1.10.0.js')}" />
<apex:stylesheet value="{!UrlFor($Resource.SF_jQuery, 'css/theme/qunit-1.10.0.css')}" />
<script>
(function() {
"use strict";
module('Site functions', {
setup: function() { // runs before each test
},
teardown: function() { // runs after each test
}
});
test('getSelectedIds', function() {
var $selAll = j$('#selAll');
$selAll.prop('checked', true);
SF.selectAllRows($selAll, '.selOne');
deepEqual(SF.getSelectedIds('.selOne'), '1,2', 'get all ids');
$selAll.prop('checked', false);
SF.selectAllRows($selAll, '.selOne');
deepEqual(SF.getSelectedIds('.selOne'), '', 'get no ids');
});
}());
</script>
</head>
<body>
<apex:include pageName="SF_SiteJs" />
<div id="qunit"></div>
<div id="qunit-fixture">
<table>
<thead>
<tr><td><input id="selAll" type="checkbox"/>Toggle All</td></tr>
</thead>
<tbody>
<tr><td><input class="selOne" type="checkbox"/><span>1</span></td></tr>
<tr><td><input class="selOne" type="checkbox"/><span>2</span></td></tr>
</tbody>
</table>
</div>
</body>
</apex:page>
Now simply navigate to this page to see the results of your unit tests. In a subsequent post, we'll look at running the tests from a Jenkins job.
Visit my developer org to see this sample in action. Username: scox67@salesforce.com.demo, Password: demo1234.
Have fun unit testing!
No comments:
Post a Comment