QUnit tests under Continuous Integration

My team is addicted to writing unit tests and our CI is always hungry for more. So we decided to write unit tests for our javascript. There are a lot of choices of javascript testing frameworks. We chose to go with QUnit mostly because we use jQuery. Writing the QUnit tests were really easy and fun. Now we wanted to take it further and run our QUnit tests within our TeamCity Continuous Integration. To run the QUnit tests we wanted to use Selenium to open up the web pages with our tests and parse the results. I googled around to find if anyone else had already solved this problem, but the closest result I found was someone who used Watir instead.

http://www.lostechies.com/blogs/joshuaflanagan/archive/2008/09/18/running-jquery-qunit-tests-under-continuous-integration.aspx


Learning from the lost techies example, I wrote a parser using Selenium. I have a QUnit class which extends my Selenium class. The QUnit base class opens the supplied webpage with the QUnit tests using Selenium, reads all the html results, converts it to xml, traverses the xml and parses the results. This simply checks to see all your qunit test results pass. If one of them fails the entire Selenium test fails.

Here is the base class for all my QUnit tests:

using System;
using System.Collections;
using System.IO;
using System.Text;
using System.Xml;
using System.Xml.XPath;
using NUnit.Framework;
using TidyNet;

namespace MyProject.UI.Tests {
 [TestFixture]
 public abstract class QunitTest : SeleniumTest {

  public string WebPage;

  [SetUp]
  public override void SetUp () {
   base.SetUp();
  }

  [TearDown]
  public override void TearDown () {
   base.TearDown();
  }

  public void RunQunitTests () {

   Selenium.Open(WebPage);
   var tests = GetQUnitTestResults();

   foreach (UnitTest test in tests) {
    Assert.IsTrue(test.pass, test.message);
   }

  }

  protected IEnumerable GetQUnitTestResults () {
   var html = new StringBuilder("<" + "html>"); //I can't have an html tag in my blogger post :X
   html.Append(Selenium.GetHtmlSource());
   html.Append("<" + "/html>");
   var xml = convertToXML(html.ToString());
   var stream = new StringReader(xml);
   var xmlReader = new XmlTextReader(stream);
   var xpathDoc = new XPathDocument(xmlReader);
   var xpathNav = xpathDoc.CreateNavigator();
   var nodeIterator = xpathNav.Select("//ol[@id='qunit-tests']/li");
   var unitTests = new ArrayList();
   try {
    while (nodeIterator.MoveNext()) {
     var testResult = new UnitTest {
      pass = nodeIterator.Current.GetAttribute("class", "") == "pass"
     };
     nodeIterator.Current.MoveToFollowing("span", "");
     testResult.module = nodeIterator.Current.Value.Replace(Environment.NewLine, " ");
     nodeIterator.Current.MoveToFollowing("span", "");
     testResult.testName = nodeIterator.Current.Value.Replace(Environment.NewLine, " ");

     if (!testResult.pass) {
      nodeIterator.Current.MoveToParent();
      nodeIterator.Current.MoveToFollowing("ol", "");
      var messages = nodeIterator.Current.SelectDescendants("span", "", false);
      messages.MoveNext();
      testResult.message = messages.Current.Value.Replace(Environment.NewLine, " ");
      messages.MoveNext();
      testResult.expected = messages.Current.Value.Replace(Environment.NewLine, " ");
      messages.MoveNext();
      testResult.actual = messages.Current.Value.Replace(Environment.NewLine, " ");
     }

     unitTests.Add(testResult);
    }
   } catch {

   }

   return unitTests;
  }

  private string convertToXML (string html) {
   var tidy = new Tidy();

   /* Set the options you want */
   tidy.Options.DocType = DocType.Omit;
   tidy.Options.DropFontTags = true;
   tidy.Options.LogicalEmphasis = true;
   tidy.Options.Xhtml = true;
   tidy.Options.XmlOut = true;
   tidy.Options.MakeClean = true;
   tidy.Options.TidyMark = false;

   /* Declare the parameters that is needed */
   var tmc = new TidyMessageCollection();
   var input = new MemoryStream();
   var output = new MemoryStream();

   byte [] byteArray = Encoding.UTF8.GetBytes(html);
   input.Write(byteArray, 0, byteArray.Length);
   input.Position = 0;
   tidy.Parse(input, output, tmc);

   string result = Encoding.UTF8.GetString(output.ToArray());
   return result;

  }

 }
}

Here is a test which utilizes my QUnit base class:

Putting our javascript unit tests into our CI process has been extremely valuable. We've caught multiple javascript bugs within seconds of a bad js check in. If anyone is doing any cool stuff with QUnit or Selenium and continuous integration I'd love to know.