Client Side Javascript Testing

Question

I wrote a real-time js application that has the following stack:

• Node.js for the server
• Socket.io as a link layer
• Front-panel jQuery for controlling dom, etc.

For # 1, I have absolutely no problems. I am currently using nodeunit, which does a fantastic job.

For # 3, I have a little problem trying to figure out my approach to testing.

My browser code usually looks something like this:

var user = { // Rendered by html id: null, roomId: null, foo: null, // Set by node server. socket: null, clientId: null, ... } $('button#ready').click(function() { socket.emit('READY'); }); socket.on('INIT', function(clientId, userIds, serverName) { user.clientId = clientId; user.foo = (serverName == 'bar') ? 'bar' : 'baz'; }); 

The main part that I would like to test includes checking whether js on the browser side will respond appropriately when the server starts a specific package with the specified arguments:

i.e. user.foo = (serverName == 'bar')? 'bar': 'baz';

Any good recommendations on how to approach this?

Answer 1

Check out Mocha . It has very good support for running in both node and browser. I found it more preferable for other options (Jasmine, Vows).

In addition, instead of launching a heavy weight integration installation such as Selenium, I run both server tests and browser tests in the same process using Zombie . It allows you to create beautiful integration workflows (for example, launch something in a browser, and then check the effects on the server).

YMMV, however, since Zombie relies on JSDOM (reimplementation of the DOM in Javascript). There are rough edges on still fixed / fixed, work interruptions. If this is a problem, launch Mocha in a browser using real browsers (possibly through Selenium).

Answer 2

While jasmine's core support is bit and miss (minimal new development, lots of unresolved issues / pull requests on their github), Jasmine is a really good tool for checking client code, mainly because of jasmine-jquery .

Jasmine's overall approach is pretty solid, and Jasmine-Jquery has many great helpers for testing the DOM, as well as a great DOM sandbox.

I found client-side testing a problem, mainly because I had to stop being so tough and prescriptive in my tests.

As a rule, you should approach testing on the client side as something "fuzzy", testing the DOM hierarchy too specifically is the way to hell. Check things like "Does the page contain these words" over the div id # my-div contains ul with 3 with content that matches this regular expression "

The last is how I started making tests, but I found it incredibly time-consuming and fragile; if the designer (s) wants to tinker with the structure, he could unnecessarily break many tests. The only way around this is to create “widgets” for each component, which would be ideal, but, as I said, a lot of time, actually it was a joke in my office: “How many tests did you do this week Tim "2? 3? Wow 3 tests. Good job."

Anyway...

You can get 90% of the benefits of testing on the client side by testing freely and focus on what is important, for example, at the workplace and the presence of data on certain content in a certain place in the hierarchy on the page.

edit: Also, make sure that you break the business logic into units that are not DOM-dependent as humanly possible as possible. It makes your life a lot easier and usually leads to better architecture, which is a plus.

edit 2: You can see how the Rails world does this with Capybara / Cucumber or Selenium.