A custom module for z-index manipulation of DOM element groups using TDD with QUnit

Shane Edwards's picture
31, Mar, 2014 by Shane Edwards

A custom module for z-index manipulation of DOM element groups using TDD with QUnit

0 comment
z-index blocks

A well tested custom module using jQuery and QUnit for testing.

TDD & using QUnit

Re-learning the very basics and having desire to start on the right foot, I chose to create a custom library that aims to solve some common user interface problems that I've faced in previous projects.

After doing a bit of research, I chose to use QUnit to employ test driven development for my project and decided to create a module that will handle z-index re-ordering that can respond to client, system or user events.

The Prototype

Writing tests can take a lot of time to do, but as I worked through the module the benefits quickly became apparent. Attaining responsive feedback from QUnit constantly kept my mind refreshed on the entirety of my implementation.

Diving shoulders-deep into code will get new features out quick and ready, but being able to easily extend them is a challenge without thorough unit testing.

The destination at the time of writing this article of the z-index module is for temporary holding, and like the rest of the code will be up for re-factoring. But what's most important is the useful friendly API that is exposed for inheriting methods that can be easily called without requiring any arguments.

Usage

The module is simple to use. It uses a custom pub/sub mediator to subscribe a collection of elements to a common group. It currently only takes a single argument on subscription, but this I'll look to change to accept either an array or x number of arguments after the first for HTML elements.

Product

The inherited methods from the subscription allow individual siblings to change their z-index properties to highest or lowest, based on the group they were subscribed to using the very simple methods 'toFront' and 'toBack'. The module abstractly handles all the behind-the-scenes work.

Summary

The module isn't conventional pub/sub as there aren't observers in the module, just registered elements. Due to the nature of this use-case I think using anything more complicated than this would be overkill.

As mentioned, the source code referenced in this article is intended to initiate discussions on the topic of TDD, Unit testing and generally how to structure code correctly. And any suggestions are very welcome. I've introduced myself to alot of new developments in the JavaScript world lately and I'm certain I won't get it right first time, TDD encourages you not to.

Source Code: https://github.com/saedwards/_JS_DEV

Run: Tests/Source/Utils/utils.html