Tag Archives: Karma

AngularJS, Karma and debugging unit tests in WebStorm or IntelliJ IDEA

AngularJS, JavaScript, Karma, Node.js July 21, 2013 Leave a comment

Recently i had to debug few Javascript unit tests in WebStorm IDE and was wondering if it’ll be as easy of an experience as it is in case of Java and IntelliJ IDEA (where i originally come from).

WebStorm 6 doesn’t offer native Karma test runner support (ver 7 which is currently in EAP, does – details here), but using a NodeJS plug-in you can execute any kind of NodeJS application (Karma included).

 

OK, what we’ll need in this exercise is following:

  • One of two JetBrains IDE’s, either:
    • WebStorm (great for JavaScript code) or
    • IntelliJ IDEA (Java’s no. 1 IDE)
  • NodeJS plug-in installed in the IDE:
    • WebStorm comes having it already pre-installed
    • in case of IDEA (Ultimate version, because Community Edition doesn’t have the required JavaScript plug-in for it to work, see here) the plug-in can be downloaded from here.
  • NodeJS environment which can be downloaded from here.
  • Karma (old name Testacular) test runner installed (“npm install -g karma”) that allows running unit (or E2E) tests in one of these browsers:
    • Chrome
    • ChromeCanary
    • Firefox
    • Opera
    • Safari (only Mac)
    • PhantomJS
    • IE (only Windows)
  • Chrome/Firefox “JetBrains IDE Support” extension (required for debugging) that can be downloaded from here.

 

Installing the NodeJS plug-in in IntelliJ IDEA:

  • Open “Settings” dialog (File -> Settings… in the menu bar)
  • Select “Plugins” (under “IDE Settings”)
  • Click “Browse repositories…”
  • Click “Download and Install” on the “NodeJS” plug-in
  • Press “Restart” when asked, to restart the IDE

 

Configuring IDE to execute Karma test in NodeJS using the plug-in:

  • Open the Run/Debug Configuration dialog by selecting “Edit Configurations” in the Run area of the main toolbar of WebStorm.
  • Add the following two configurations (picture below):
    • “Karma Run”: to perform a “single run” of your unit tests.
    • “Karma Server”: to start Karma in “Continuous Integration” mode (automatic re-runs of your tests whenever files change).
  • Configure the “Karma Run” configuration:
    • Press the “+” button in the top-left of the “Run/Debug Configurations” dialog.
    • Select “Node.js” in the list
    • Fill in the following fields:
      • Name: enter “Karma Run”
      • Path to Node: absolute path to NodeJS executable (i.e. “c:\NodeJS\node.exe”)
      • Working Directory: absolute path of your AngularJS application (i.e. “C:\MyProjects\AngularApp”)
      • Path to Node App JS File: Should point to the (globally, ie. -g) installed “Karma” NodeJs executable (i.e. “C:\Users\…\AppData\Roaming\npm\node_modules\karma\bin\karma”)
      • Application Parameters: run karma.conf.js –single-run –no-auto-watch –reporters dots
    • Press “Apply”
  • Configure the “Karma Server” configuration:
    • Essentially take the same steps as while configuring “Karma Run”, changing only the following:
      • Name: enter “Karma Run”
      • Application Parameters: start karma.conf.js –no-single-run –auto-watch –reporters dots
  • Configure the “Karma Debug” configuration to allow debugging of Karma unit tests
    • Press the “+” button in the top-left of the “Run/Debug Configurations” dialog.
    • Select “JavaScript Debug -> Remote” in the list
    • Fill in the following fields:
      • Name: enter “Karma Debug”
      • URL to open: http://localhost:8100/debug.html (port number depends on your configuration in karma.conf.js file (passed as an “Application Parameter” in the previous two configurations)
      • Browser: chose either Chrome or Firefox
      • Set the “Remote URL” field to point to “http://localhost:8100/base”

        Karma Debug configuration in IntelliJ WebStorm

 

Finally, run your “Karma Server” configuration and while it’s working in the background (–auto-watch mode), set debugging breakpoints in your code and fire “Karma Debug” configuration.

That’s it. Hope this small guide turns out to be helpful.

 

Resources:

Yeoman, Karma and e2e testing

AngularJS, Grunt, JavaScript, Karma, Yeoman July 18, 2013 Comments: 5

Imagine my surprise when i first looked at the Gruntfile.js of my newly generated angular app and found out that Yeoman is configuring by default only the karma:unit section, missing out the karma:e2e piece. I know the product is fairly new, but i would expect it to be a little more “mature” (spent quite some time figuring out why my e2e tests aren’t working and how to solve the problem).

 

Anyway, in order to run your e2e tests, you have to do the following:

  1. Update the Gruntfile.js
karma: {
    e2e: {
        configFile: 'karma-e2e.conf.js'
    },
    unit: { ... }
},
  1. Update the karma-e2e.conf.js
urlRoot = '/e2e/';
proxies = {
    // port has to be the same your web server is running on
    '/': 'http://localhost:9000'
};

 

Also, if you want Grunt to run your e2e tests without the need to manually run the web server first, you can additionally define the following task:

grunt.registerTask('test:e2e', function () {
    grunt.task.run([
        'clean:server',
        'concurrent:server',
        'connect:livereload',
        'open',
        'karma:e2e'
    ]);
});

 

(and “test:unit” task accordingly, for consistency sake):

grunt.registerTask('test:unit', [
    'karma:unit'
]);

JavaScript Toolset

AngularJS, Bower, Grunt, JavaScript, Karma, Node.js, NPM, Yeoman July 10, 2013 Leave a comment

Below you’ll find a short list specifying toolset that may be helpful when developing JavaScript code:

  1. Node.js – a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. It uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.
  2. NPM – node package manager (part of Node.js)
  3. Yeoman – a robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build web applications
  4. Bower – package manager for javascript libraries
  5. Karma – Spectacular Test Runner for JavaScript
  6. WebStorm – The smartest JavaScript IDE
  7. Jasmine – a behavior-driven development (BDD) framework that allows writing specifications that denote how your code should behave.
  8. Batarang – Extends Chrome’s Developer Tools, adding tools for debugging and profiling AngularJS application
  9. RequireJS – a JavaScript file and module loader

 

Also, there are tools you’ll be using less frequently (especially, if you decide to go with Yeoman as Yo integrates many of them), but still it’s good to know what they do:

  1. angular-seed – seed project (an application skeleton) for angular apps. You can use it to quickly bootstrap your angular webapp projects and dev environment for these projects. The seed contains AngularJS libraries, test libraries and a bunch of scripts all pre-configured for instant web development gratification. Just clone the repo (or download the zip/tarball), start up our/provided (or yours) webserver and you are ready to develop and test your application.
  2. underscore.js – a utility-belt library for JavaScript that provides a lot of the functional programming support for the usual functional suspects (each, map, reduce, filter…) without extending any core JavaScript objects.
  3. angular-mocks.js – contains an implementation of mocks that makes testing angular apps easier.
  4. angular-scenario.js – a nifty JavaScript lib that allows you to write and execute end-to-end tests for angular applications
  5. angular-loader.js – module loader for Angular modules. If you are loading multiple script files containing Angular modules, you can load them asynchronosuly and in any order as long as you load this file first.
  6. angular-resource.js – provides $resource service that makes it possible to execute HTTP calls (eg. against REST API’s)
  7. angular-cookies.js – provides two services: $cookies and $cookieStore.
  8. angular-sanitize.js – provides ngBindHtml directive, linky filter and $sanitize service.