Sunday, December 8, 2013

Running Karma Tests for TypeScript Node.js Code in WebStorm 7

After getting up and running with TypeScript Node.js development in WebStorm, I was pretty confident that I had everything set up and ready to go for my next project, I wanted to write some tests and realized I had no idea how to do that. I've just worked out a nice solution and my initial googling didn't come up with anything so I've decided it's worth a post.

My searches started out well, I found this blog post which goes through testing JavaScript using Karma and Jasmine and shows off some neat WebStorm integration, but this was written with "vanilla" JavaScript in mind, so even though it works with transpiled TypeScript, it doesn't work with Node.js modules. The reason is because it's running in a browser, so you can't pull in node modules using CommonJS-compiled TypeScript code. I briefly experimented with using AMD as the module system and getting the browser to use RequireJS, but that would have required me to have two different transpilations of my TypeScript code, and I couldn't get it to work anyway.

After a bit of poking around, I'm almost certain that "the way" to run jasmine Node.js tests is to use jasmine-node in place of the built-in Karma support in WebStorm. I figured I would just run jasmine-node from the terminal and deal with an un-integrated test runner, but I really wanted to be able to debug through my code while the tests were running. The way I've done this before was to use node-inspector, so I started searching around for a way to get that working with jasmine-node, and I found this StackOverflow question. The answer points out that jasmine-node is just an alias for a normal Node.js app, so I figured I would just add that as a Node.js run/debug configuration, and surprise surprise everything worked perfectly.

For posterity, here are all the steps I took:
  1. Create a new empty WebStorm project.
  2. Make a simple TypeScript file that we can test:
  3. // File: Roster.ts
    export class Person {
     constructor(public name:string) {}
    }
    

  4. Add the TypeScript file watcher, fix it by adding "--module commonjs" to the arguments.
  5. Add karma-jasmine as an external library as shown in the JetBrains blog post video so that autocomplete and code generation work for the test spec files.
  6. Get the jasmine TypeScript definitions from DefinitelyTyped.
  7. Make a simple test, referencing the TypeScript code and jasmine definitions:
  8. // File: test/PersonSpec.ts
    /// 
    /// 
    
    import p = require("../Person");
    
    describe("suite", () => {
     it("should be true", () => {
      expect(true).toBe(true);
      var person = new p.Person("Joe");
      expect(person.name).toBe("Joe");
     });
    });
    

  9. Make a new Node.js run configuration to run the tests, use the node_modules\jasmine-node\lib\jasmine-node\cli.js file as the JavaScript file (this can be either local or globally installed via npm), and the test folder as the application parameters.
  10. I also suggest making another run configuration that is identical except for having an additional "--autotest" application parameter before the test folder. This will run in the background and continually re-run tests whenever a change is detected in the source code.
Now when you want to run tests or debug through the test, you can just use one of these new run configurations.

No comments:

Post a Comment