JavaScript, test automation, tools, Web

JavaScript/TypeScript unit testing –11 sample projects for Resharper, Chutzpah and Karma

logoIntroduction

An example is worth a thousand words. But seriously it’s a lot easier to follow some given scenario than searching for tutorials for some tools and then trying to apply them to a project that is not supported in the end. Moreover unit testing the client side of the project is more complicated than the back-end part. Maybe it’s because we’ve got used to creating test projects based on nunit/xunit/mstest/mspec etc. In Javascript world it’s a little bit more tangled: we have Javascript but also move forward to TypeScript. We have plain code without modules or use requirejs to benefit from AMD. For each configuration the setup of unit test project is different. I think having all these samples in one place could help us to start TDD in client-side.
All the sample are based on the sample application from my previous posts about unit testing JavaScript. Actually these are not 11 different sample projects, but 11 versions of the same project so that you can easily catch the difference between the configurations.

Samples (links)

 

JavaScript JavaScript TypeScript TypeScript
NoAMD AMD NoAMD AMD
Resharper link link* link** (none)**
Chutzpah link link link link
Karma link link link link

** Resharper 8.2 should support support TypeScript testing [RSRP-394249]

* AMD support in this sample is artificial, code must be based on named modules that are loaded staticaly.

Tools review

 

Resharper

image

Resharper lets you run unit test for JavaScript. Actually it could be enough to just start using it as a test runner. It’s awesome to right-click on solution, choose “run unit tests” and watch the solution passing all the tests: back-end and front-end in one go. Moreover it’s also super-easy to set up. Unfortunately the practice is more cruel – it’s ok for simple Javascript project without AMD.  TypeScript support is not yet in live and AMD support is not yet even planned. And there is no command line runner to let the tests run in buildserver. Otherwise it would be the perfect choice.

Chutzpah

image

As an alternative we have Chutzpah. To integrate it with Visual Studio  you can install “Chutzpah Test Runner Context menu Extension” or “Chutzpah Test Explorer Adapter” (default one for Visual Studio). You can also download command line tool that will run the tests in console or in buildserver (it even generates code coverage report). It has builtin support for requirejs and TypeScript. Unfortunately tests discovery is a little bit too slow to run it spontaneously after each change.

Karma

image

This runner is a must-have in AngularJS world and is a JavaScript alternative to NCruch (runs tests continuously after saving changes). It’s a little bit tricky to configure but after that it is super cool to play with. It doesn’t have TypeScript support out of the box, but because TypeScript is compiled to javascript it deals with it successfuly. It’s possible to configure karma to use Chrome (or any other favourite browser) to be the test runner and it makes it very fast and natural to debug. It’s also possible to set the “run once” mode to run it on buildserver using phantomJS. The dark side of the tool is that it’s not integrated with VisualStudio and you have to stuck with console window (actually there is one plugin that runs karma in VS output window but it’s still a hidden console and not Test explorer adapter).

Happy testing folks!

BTW: if you like the samples, remember to leave a github star 😉

Advertisements

10 thoughts on “JavaScript/TypeScript unit testing –11 sample projects for Resharper, Chutzpah and Karma

  1. I tried the Typescript.Amd.Karma and I got no timestamp error that you mentioned in the comment, but I don’t know how to fix it.

    Also tried Typescript.NoAmd.Karma, works fine except for “toHex method should assign hex property” in the ColorBoxViewModelTest.ts. There’s an undefined error, so it’s typescript-javascript error, nothing to do with Karma.

    Back to Typescript.Amd.Karma, is there something I should do to make it work?

    1. “No timestamp” seems to be a known issue. Here’s a solution: https://github.com/karma-runner/karma-requirejs/issues/6#issuecomment-23037725
      Basically add:
      window.__karma__.files[file.replace(/^\//, ”)] = window.__karma__.files[file];
      into test-main.js just in the beginning of first “for” loop (line number 3).

      “undefined error” is caused by incorrect version of jasmine taken while installing karma-jasmine. Samples were designed for jasmine 1.3, but currently karma-jasmine is served with jasmine 2.0. Therefore the syntax is changed:
      andReturn() ==> and.returnValue()

      1. Thanks for the fast response. Fixed the “No timestamp” and “undefined error” from your suggestion, thank you for that 🙂

        I also encountered the “…/(testFile)” has not been loaded yet for the context: _. Use require([]). Took me a while to fix it due to my lack of experience. Turns out the typescript doesn’t compile the “import require” statement because of the typescript build is set to “None” instead of “AMD” in the project properties (in this case, the test project).

        Last but not least, copied pasted the new jasmine.d.ts to eliminate typescript error for the jasmine 2.0 return syntax. It works beautifully now. Lots of thanks for the example 🙂 It is as you said, “An example is worth thousand words”

        PS: wouldn’t it be better if you update it 🙂

    1. Hi Mariano.
      As I mention in the post Karma is not integrated with Visual Studio and I don’t have any recipe for that.
      At the same time it is possible to debug in Chrome. You choose Chrome as test runner and after that in Chrome you get one big button labelled “Debug”. After clicking it you should be redirected to a page, that supports debugging in Chrome. Actually I prefer this approach as I like Chrome Web developer tools. This way you debug as close to the user as possible.

  2. I’ve been struggling for weeks trying to add a JavaScript.AMD.Chutzpah configuration into my underway Durandal project. So I was excited to see that test example available from you. But your sample out-of-the box does not run. Windows Test Explorer does not discover any tests, and no tests are ever started. My Visual Studio 2013 has Chutzpah 3 and Jasmine 2. Is there something I should do?

      1. I installed both awhile ago when I started trying to setup a unit testing config for my app. They are both v3.3.1. I have also tried Karma and others, and so have installed Jasmine 2.2 somewhere. Don’t know anything about the nodejs system’s workings.

        I just loaded the JavaScript.NoAMD.Chutzpah to see what would happen and that runs the tests fine. I also just noticed a npm-debug.log file in the top directory where I cloned your samples, and it contains an error line:
        5 error version No package.json found
        6 verbose stack Error: ENOENT, open ‘C:\Users\Bruce\Dropbox\ChutzpahAMD\package.json’. There is no package.json in your solution.

        Thanks for your response. I’ll be back online tomorrow.

  3. Forget the comment about the npm-debug.log file in the top directory, it’s not relevant. Today when I first opened VS by double clicking your sln file, I got a long list of Timeout Errors for the files in the production project, e.g.:
    —— Discover test started ——
    Error: Timeout occurred when executing test file
    While Running:c:\users\bruce\dropbox\chutzpahamd\blog.frontendtestingsamples\javascript.amd.chutzpah\frontendtools.webui\config.js

    Still no output from running Test Explorer, but all tests run and pass when I right-click to Open In Browser.

  4. The problem is that I have Jasmine 2 installed, which Chutzpah 3 runs by default (unless specified differently in the settings file). So the ColorBoxViewModelTest test was bombing out with: TypeError: spyOn(…).andReturn is not a function in file ColorBoxViewModelTest.js line 32. And by googling I found this site (http://tobyho.com/2011/12/15/jasmine-spy-cheatsheet/) that told me: if you are using Jasmine 2, andReturn(value) has been changed to and.returnValue(value). So I changed the code and now all tests work.

    What is interesting to me as a Newbie to all this, is that Test Explorer was no help at all in solving this; it did nothing and showed nothing. But using Chutzpah’s “Open In Browser” allowed me to spot and fix the problem. Big plus for Chutzpah as the tool to use, which is the question I’ve been asking after trying Karma, Protractor, DalekJS, et al for the last weeks.

    Thanks for posting the link to your samples which gave me a workable exercise in learning how these things work.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s