Fight TypeScript With TypeScript
Given that I’m fairly satisfied with the state of my server-side Hydra library for NancyFx called Argolis it is now time to write some client-side library to consume it. I did some spiking in another small project and it was now time to do it properly. I’ve already had some experience with TypeScript and JSPM so I decided to give these two a go.
Unfortunately getting the project setup right was harder than I’d hoped. Here’s how I managed to get my first test to pass.
I want to proceed with a TDD approach but unlike before this time I want to write both my code and modules in TypeScript.
Here’s my first test. I will place all tests in
tests folder and my modules in the
src folder as you can see in the
import in line 2.
As you see I’m using ES6/TypeScript syntax here with module imports and arrow functions.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
In my first test I want to check that
window.fetch is called with the expected URL. To do that I’m using sinon
stub to set up a call (line 8) and verify correct parameters (line 12). To make it work sinon must be installed from jspm.
Browser other that Chrome and Opera would also need the whatwg-fetch package or similar
Let’s run it
With the first test in place I wanted to run it so that it becomes red.
I’ve recently found the Test’em and it looked very promising with the super-easy CI integration and convenient command line UI. Unfortunately it turns out that it doesn’t like system.js. I’ve tried other solutions and eventually Karma worked.
Setting up karma
First, install karma, local npm packages and initialize karma
1 2 3 4
Second, set up systemjs so that karma can load TypeScript tests directly. This is possible thanks to the karma-systemjs. To set it up add it as the first framework in karma and add systemjs configuration:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
systemjs section reuses jspm configuration and sets up paths served by karma server.
config.js file should look similar to the one below.
transpiler settings which make systemjs load selected typescript modules directly without upfront
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
Let’s run it for real now
If followed the above instructions you should be able to run karma server and have it start Chrome
This should execute the first test and fail on missing implementation
1 2 3
Add some code
Let’s fix the test by actually adding the first piece of code
1 2 3 4 5
If you haven’t stopped the karma server it will notice the new file being added and rerun the test. The result should be similar to
Et voilà, this was pleasantly simple. There are no build/cleanup steps required to execute the test, because systemjs does the transpilation on the fly. Karma may not have the cool little terminal control panel and test summary but it is an established testing tool and integrates well with many IDEs
Bonus - typings
Speaking of IDE, Webstorm coloured a lot of my code red, because it doesn’t recognize sinon and jasmin and fetch. To remedy that there are typings.
Sinon and jasmine have an official typings package. There is also a repository with typings for
are not all installed the same way though:
1 2 3
As you see jasmine and fetch typings are installed as ambient. This is because they populate the global scope (or window). Otherwise typings would wrap them in a named module. After all modules can be installed under an alias.
Finally add a typings reference to you source and test files like
There you go, no there are far less source code errors and also some additional context help from the editor. And remember
not to commit the
typings folder. Instead commit the
typings.json file and run
typings install to restore them.