Cross-browser Karma JavaScript test results in Visual Studio Test Explorer

Click to see a demo of this extension used for Karma cross-browser JavaScript testing.

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 initearlier (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! :-)

• GitHub Issues: TestAdapters/issues
• Twitter: @DanTup
• Google+: Danny Tuppeny
• Email: danny+testadapters@tuppeny.com