Front-end with TypeScript Tutorial – Step 7: Adding Jasmine Tests

Posted by Bogdán Bikics on October 25, 2016

In Part 5 (Step 6: Gulp) we built up our fully working ecosystem with TypeScript. It enables us to use TypeScript, compile it automatically on every change, clean up, handle dependencies both for internal and external node modules. Now it is time to put the cherry on the top of the cake: let’s add Jasmine tests written in TypeScript!

Step 7: Jasmine tests written in TypeScript

Okay, so let’s test if words in ViewModel class really contains ‘Hello’ and ‘Word’ as expected.

We are going to use Jasmine as a testing framework so let’s download it (and the definition file of course):

Before we start writing our test, let’s put ViewModel into another file. Decoupling is always good, but in this case you would also get an error if you imported main.ts into your test: we don’t want knockout to do applyBindings to a view that is not there in the test environment.

So here is our first test, now we just have to make it somehow visible if it works. Since we have dependencies, and we might have many other jasmine test files later, we also have to compile and browserify tests into a testbundle. So let’s make some modification in our “gulpfile.js”!

Since we’ll use gulp-watch and gulp-jasmine-browser, let’s install those:

npm install --save gulp-watch gulp-jasmine-browser

Now it will generate a “testbundle.js” too in the “javascript/test” folder. If you read the gulpfile carefully you might have noticed that there is a task named “run-jasmine” in there. It is not included in the default gulp task, but we can run it separately:

Note that it only works if you generated the “testbundle.js” file first! The way I am using it now, is that I first run “gulp” in one Console and then in another Console I run “gulp run-jasmine”. If you modify your tests and refresh your browser, it will be up to date.

There! We are having a sufficient enough ecosystem for you to get started with a real TypeScript project!

Coming up next:

But what about the Backend? Can we have One Build on both sides?

In my upcoming posts we will figure out how to integrate all this into Maven, and we will have a look how all this works with a Node.js server.