Zach’s ugly mug (his face) Zach Leatherman

The JavaScript Testing Challenge

November 13, 2010 Watch in 5 minutes

Update 2: The JavaScript Testing Challenge Winner

Update: An Update to The JavaScript Testing Challenge

Think back to the last time you wrote new code from scratch. Not autogenerated Dreamweaver image hovers or a pasted script from Dynamic Drive, but pure unadulterated new code. What was your process? I’m betting it’s probably similar to: (1) code, (2) switch to a browser, (3) confirm desired behavior for the change you’ve made, and (4) repeat.

Comrades, let me assure you that there is a better way, and it starts with writing unit tests. As a Front End Engineer that’s been doing it bareback without tests since I started in 1997, let me assure you that adopting automated testing strategies is one of the single best changes I’ve made to my development cycle to make myself more productive. Enough fluff. Let’s get started!

Testing Environment Setup in 3 Steps

Prerequisite: Java on the classpath

  1. Download the JavaScript-Code-Katas Source (ZIP) (or checkout the code from the Github Repository, if you have git available)

  2. Extract and browse to it using your operating system’s command line.

  3. Run (Windows)

    > JsTestDriver.bat Template

    Run (MacOS)

    $ ./JsTestDriver.sh Template This script will close Safari (be careful if you’re using Safari in other windows)

If a web browser popped up on your screen, congratulations! You have an automated testing environment set up and running. Easy, right?

Writing a Test

Now, let’s write our first test!

  1. Open up templateTest.js in your favorite IDE.
  2. Add the following:
  TemplateTest = TestCase('TemplateTest');
  TemplateTest.prototype.testSample = function()
  {
      assertTrue(true);
      assertFalse(false);
      assertEquals(true, true);
  };
  1. Re-run the JsTestDriver shell script from Step #3 above.

Now you should see something like the following:

    Total 1 tests (Passed: 1; Fails: 0; Errors: 0) (2.00 ms)
      Safari 533.18.5 Mac OS: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (2.00 ms)

Notice how you didn’t have to touch any HTML boilerplate code or manually bring up a web browser? Productivity ensues! You’ve made it this far, are you brave enough to dive into a Code Kata?

Prime Factors Code Kata

Code Katas are just small programs used as practice. They’re a great way to introduce Test Driven Development and improve proficiency with your IDE.

The Prime Factors Code Kata requires a function that takes a single integer argument and returns an array of prime factors of that argument in ascending numerical order. For example, passing in 8 should return 2, 2, 2.

I’ve recorded an unmodified single-take screencast of myself performing the kata below. I’m using the same source code I provided above, but with the JsTestDriver Eclipse plugin instead of using the command line to run the tests. The plugin is great for the screencast, because it very easily shows when the tests are failing or passing. You might also notice that it reruns the tests automatically every time I save.

Watch on YouTube: The JavaScript Testing Challenge

JsTestDriver

If you want to learn more a about JsTestDriver, check out their Google Code page. “But I use QUnit!” you say. That’s fine, there is an adaptor for that. Using both tools together, you won’t need to launch each individual browser manually and trigger the tests to start. It will save you time.

In the interest of full disclosure, here are the issues I’ve ran into so far using JsTestDriver:

Challenge

Testing will help you. It will improve your the quality of your code and your productivity. I challenge you to practice the JavaScript Prime Factors Code Kata in your own IDE with your own automated testing process. Send a link to me on Twitter (@zachleat) with an unmodified single-take screencast of you performing the kata (in JavaScript) by December 25, 2010 and the fastest kata screencast will win a copy of Test-Driven JavaScript Development by Christian Johansen (PDF or Print version, your choice*).

Screenr is a great tool for recording screencasts, if you need one.

Good luck!

Coding must follow every step performed by myself in the above version. Templates and keyboard shortcuts can be used at your leisure, but no code can be generated specific to the kata itself (it must be a generic). Use your best judgement here, I reserve the right to disqualify any entries submitted that don’t follow the true spirit of the competition.

Don’t fuck with the speed of the video. I’m spending my own money on this, so if you’re cheating then you’re just stealing from me. Just be cool about it, okay?

The Print version of the prize is restricted to USA or Canada, PDF version is available internationally (unless you want to work something out for shipping costs).


< Newer
An Update to The JavaScript Testing Challenge
Older >
Faking Onload for Link Elements

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://fontawesome.com/Font Awesome and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 83 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

8 Comments
  1. Monkey Disqus

    14 Nov 2010
    And What Happens If I'm Running Some Other *Nix?
    1. Zach Leatherman Disqus

      14 Nov 2010
      Just open up JsTestDriver.sh, you can easily modify it to put in a different browser to run (Firefox, for example). For simplicity, the commands I included were just the default browsers available to each respective operating system. I'd be happy to merge your modified *nix version to the github repo.
  2. Filipi Disqus

    14 Nov 2010
    Zach.. I see you are using Aptana.Wich version?I installed JSTestDriver on my Aptana 2.0.5 (on a mac) and I'm experiencing this issue:https://aptanastudio.tender...Did you got through that?
  3. Zach Leatherman Disqus

    14 Nov 2010
    I'm using the 1.1.1.e version of JsTestDriver, it's available in the "Uncategorized" folder of the Eclipse install site (http://js-test-driver.googlecode.com/svn/update/). I'm not sure if that plays a role.Also, I am using Aptana 2.0.5, but as a plugin to Eclipse, not the Standalone version of Aptana. If you're willing, I'd try to install Eclipse, install the Aptana plugin, then install JsTestDriver.Good luck!
  4. Christian Disqus

    15 Nov 2010
    This is very cool, Zach! We need the JavaScript community to care more about testing, and stuff like this is an excellent way of spreading the word. I'm also honored that my book is the price. Looking forward to seeing how this plays out.
  5. Adam Martin Disqus

    15 Nov 2010
    Nice Zach huge props on this!
  6. Binh Disqus

    10 Jan 2011
    Very cool. Do you have plug in for Visual Studio?
  7. Zach Leatherman Disqus

    10 Jan 2011
Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)