QUnit Composite Addon: Running Multiple jQuery Test Files

Introduction

When you start Unit Testing your application with QUnit you'll notice that you'll have lots of different QUnit files that thoroughly test one feature or component of your system.

Instead of opening each one of those test files and running them separately, wouldn't it be nice if you could launch one file that would run all the tests?

Thankfully, there is a addon for that and it's called the Composite addon!

Composite is a QUnit addon that, when handed an array of files, will open each of those files inside of an iframe, run the tests and display the results as a single suite of QUnit tests. -- https://github.com/jquery/qunit/.../addons/composite

Setup

Setting up the Composite addon is pretty easy. All you really need to do is to get the qunit-composite.js and qunit-composite.css files from the Composite Addon Repository in GitHub and then tell QUnit what test files are a part of your Test Suite! See the following for an example setup.

Running Example

I've taken the Unit Tests from a couple of blog posts I've done recently (filterByData jQuery Plugin: Select by HTML5 Data Attr Value & jQuery :dataAttr Pseudo Selector) and have decided to bundle them together using the QUnit Composite Addon.

NOTE: Normally your URLs will look much cleaner than these in this example. Since I'm running these tests in jsFiddle the resources are pointed to their jsFiddle hash appended with /show so that they will render only the result.

Running from the file:// Protocol

In order for this to work you must host your files in a web server because the Composite addon relies on making AJAX calls to pull in the other QUnit files. If you are trying to run the test from the file:// protocol then you will get an error and the tests will not run. If you want to run the tests from Google Chrome you can enable the allow-file-access-from-files command line parameters.

• Mac: open /Applications/Google\ Chrome.app --args --allow-file-access-from-files
• Windows: C:\path\to\chrome.exe --allow-file-access-from-files
• Linux: /usr/bin/google-chrome --allow-file-access-from-files

Conclusion

Using the QUnit Composite addon is very handy to get a quick high level view of the health of your web application. There is some overhead when running all of the tests at one time, but by making it easier to run all of your tests makes the likelihood of you running them much higher than otherwise.

jQuery HTML5 :dataAttr Pseudo Selector

Problem

A while back someone on twitter was asking me how they might find a set of DOM elements by using doing a partial search on their HTML5 data attribute.

I'm not actually sure what type of use case you would need for such problem, but I thought it was an interesting issue to work on, so I went ahead and took a stab at solving it.

Desired Solution

In order to solve the above example of finding elements that start with a certain HTML5 data attribute, I wanted to follow a similar API to that of jQuery Attribute Selectors with the ^=, $=, etc... syntax. The following is an example of how I thought the solution should look like.

Custom Pseudo Selector

In order to create an API like the above I needed to create a custom pseudo selector, much like what you've seen when using :last, :odd, :eq( number ), and numerous other common selectors.

Unit Tests

I didn't want to just have some code laying around that wasn't thoroughly tested, so I went ahead and created a set of unit tests to cover various scenarios. I could have kept going, but I thought the following was a decent set of tests to start with.

Tweet Package for Sublime Text 2

I was browsing through the list of available packages in Sublime Text 2 and noticed once entitled Sublime Tweet that caught my eye, so I thought I would try it out.

How to Install

With Package Control

The easiest way to install Sublime Tweet is using Sublime Package Control. If you don't already have Package Control installed, then I highly recommend it. It is a very easy way to find and manage packages.

1. Open the Command Palette... Shift-Cmd-P
2. Choose Package Control: Install Package
3. Select Sublime Tweet from the List

Without Package Control

It isn't necessary to have Package Control to install Sublime Tweet. Instead you can clone the repository from GitHub into your Sublime Text 2 package directory. For detailed instructions on what path to use for your operating system please refer to the documentation on the Sublime Tweet repository on GitHub.

How to Setup

The first time you try to use Sublime Tweet it will ask for authentication information.

1. Open the Command Palette... Shift-Cmd-P
2. Choose Tweet
3. A browser will open and Twitter will generate an authentication token for you
4. Copy the authentication token and paste it into the prompt in Sublime Text
5. Now you are all setup for using the package

How to Use

Sending a Tweet

1. Open the Command Palette... Shift-Cmd-P
2. Choose Tweet
3. Type in your tweet and press enter

Reading Your Timelime

You can also read your timelime and favorite, reply, and open embedded URLs, but I'll refer you to the documentation on the Sublime Tweet repository on GitHub.