How to start writing unit tests with ES6, Angular 1.x and JSPM — Martin Micunda

  • If you gonna load only test files in loadFiles then coverage thresholds will be generate only for these files e.g.: you have app files A.js, B.js, C.js and you write test only for file A.spec.js then you get only coverage for file A.js with 100% coverage which is incorrect from application point of view because I would expect coverage under 100% as files B.js and C.js haven’t been tested.
  • After you run tests the coverage reports can be found in the test-reports/coverage/ folder.
  • Depends on your application file structure you might see 404 error when you run your test.
  • The loadFiles configuration tells karma-jspm which files should be dynamically loaded via SystemJS before the tests run.
  • How to start writing unit tests with ES6, Angular 1.x and JSPM

For last couple of months I have been working on Employee Scheduling application that is fully written in ES2015 and ES2016 with Angular 1.x and came to the …

@K0YCHEV: #HowTo start writing unit tests with ES6, #AngularJS and JSPM

For last couple of months I have been working on Employee Scheduling application that is fully written in ES2015 and ES2016 with Angular 1.x (if you want to know more about how to write apps with ES2015, Angular 1.x and JSPM check my blog post here) and came to the point where I had to start writing some unit tests.

Currently I am running over 900 unit tests and in this post I gonna describe how I got running all these tests with ES2015, Angular 1.x, Karma, JSPM, Istanbul and Jasmine.

at all as you only test vanilla JavaScript code. To give you some example let’s have look how we can test authentication service written in ES2015 and Angular 1.x:

promise instead I am using ES2015 promise and then I resolve these promises with tiny library called jasmine-async-sugar (we gonna talk about this library later on in this blog).

etc. then have look at Employee Scheduling project.

To get running unit tests written in ES2015 we need to install extra libraries so let’s install follow packages:

block:

function is use by SystemJS and it might be use in other libraries so it is good idea to include this polyfill with PhantomJS 1.x.

library that enhance testing of async (promise) functionality in Angular 1.X applications. To give you quick taste have look on the follow code:

file:

is the main file that bootstrap angular app and includes all app sub-modules.

prefix e.g.:

file is available here and you should be able to run your ES2015 code with JSPM now. If you want to know how to run coverage for ES2015 code then just continue reading.

To get running coverage for ES2015 code we need to install extra libraries so let’s install follow packages:

is a instrumenter code coverage tool for ES2015 using babel.

project is available here.

At the time of writing this blog there are a few issues with ES2015 coverage so let’s have look on these issues and how to fix them.

is only showing ES5 code and not ES2015 as you would expect so to fix this problem we need to use a fork version that was created by Douglas Duteil.

and I was not able to get ES2015 output. I have opened issue regarding to this problem.

When you generate ES2015 coverage reports you might see error like this:

This is an issue with Istanbul and source maps so to fix this problem we need use Istanbul branch that has fix for this issue:

file can be found in my Employee Scheduling project.

How to start writing unit tests with ES6, Angular 1.x and JSPM — Martin Micunda

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.