Yesterday I published my third Visual Studio extension! :)

It’s a fairly generic extension, with reads static XML files that contain test results into the Visual Studio Test Explorer window. While this might sound a bit strange, its goal is to integrate with third party tools that can output results as XML and update them realtime. For example, Google’s Karma test runner.

Here’s a video showing it all in action:

Installation and Setup

  1. Install my Karma Test Adapter from Visual Studio Gallery
  2. Install/download nodejs (I grabbed the exe from here and added it to my PATH)
  3. Install/download npm (I grabbed the zip from here and put it in the same folder as node.exe)
  4. Install the karma-cli node module globally
    • npm install -g karma-cli

Usage

  1. Create/navigate to the folder that contains/will contain your tests
  2. Create a package.json to hold your node dependencies
    • PowerShell: "{}" | Out-File -Encoding ascii package.json
    • or CMD: echo '{}' > package.json
  3. Install karma and some dependencies
    1. npm install karma --save-dev
    2. npm install karma-xml-reporter --save-dev
    3. npm install karma-jasmine --save-dev
    4. npm install karma-phantomjs-launcher --save-dev (required only if you want to use PhantomJS)
    5. npm install karma-ie-launcher --save-dev (required only if you want Karma to be able to launch IE)
    6. npm installkarma-chrome-launcher --save-dev (required only if you want Karma to be able to launch Chrome)
    7. npm installkarma-firefox-launcher --save-dev (required only if you want Karma to be able to launch Firefox)
  4. Create a karma config file in the folder with your tests
    1. karma init
    2. answer the questions, for example:
      1. Test framework: jasmine
      2. RequireJS: no
      3. Browsers:
        • Chrome
        • IE
        • PhantomJS
      4. JavaScript and Test files:
        • app\**.js
        • tests\**.js
      5. Exclusions: (none)
      6. Watch for changes: yes
  5. Open up the generated karma.config.js in your text editor and add ‘xml’ as a reporter
    • reporters: ['progress'] becomes reporters: ['progress', 'xml']
  6. Open Visual Studio and create a project that lives in the folder that contains your tests/karma config file
    • I usually choose File -> Open Web Site and choose the FileSystem option, pointing at the folder
  7. Create a simple test we can use to verify everything works. The filename must match the filter you gave to karma init earlier (eg. MyTestSpecs.js)
    • describe("a test", function() { it("passes", function() { expect(true).toBe(true); }); });
  8. From the command line, start karma
    • karma start
    • note: This will fire up the browsers that you configured; these must be left open to execute tests
  9. In Visual Studio, toggle the “Run Tests on Build” option on in the Test Explorer Window
  10. Right-click -> Refresh on the project, to ensure Visual Studio spots the test-results.testxml file
  11. As you make changes to your js files and press save, Karma will now automatically execute your tests and the results will magically update in Visual Studio!
  12. Bonus: You can open up other browsers and point them at the url that’s loaded in the existing browsers and they will automatically be used for tests. Eg. enter the URL into your smartphone browser, and now it will show up in the test results too!

Feedback

Please send your feedback/issues/feature requests! :-)