Category Archives: Grunt

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'
]);
Advertisement

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.