Unit Testing In A Telerik NativeScript Mobile App

Unit testing! It’s something that we as developers all understand the importance of and implement in every project, right?

cough

Anyway… did you know NativeScript supports unit testing out of the box? It’s true!

By unit testing your application, you can ensure that any changes you’ve made to your code are working properly and that they haven’t broken any previous code. You could also integrate it into your Continuous Integration process and automate the running of your tests on a regular basis, or on each code check in!

Setting up Your Project

To start a new project, run the usual commands:

tns create unitTesting
cd unitTesting

Now, run this command to configure the project for unit testing:

tns test init

You’ll be prompted to choose a testing framework from Jasmine, Mocha with Chai or QUnit. Which one you choose is completely up to you but I’ll use QUnit for this article.

Once you’ve picked your framework, NativeScript will add some npm packages to your project – the Karma test runner, the karma-nativescript-launcher package (which you can check out here if you’re so inclined) and the karma plugin for whichever framework you chose.

It also updates your project structure. It adds a “tests” directory into your app folder. This is where all your test will be written.

It also adds a karma.conf.js into your project root which contains the default configuration for the Karma server for your framework. For more information in what you can do with this file – go here.

Inside this folder will be a file – example.js. This contains a really basic test written in whichever framework you chose above.

Writing Tests

There are some limitations and some things to bear in mind when writing tests for NativeScript – the full list is here but the main things to remember are:

• You can only test your JavaScript code – you can’t test any styling or UI elements that aren’t created in JavaScript. For these things, you might want to take a look at something like Appium. This isn’t something I have experience with (yet!) and it’s out of the scope of this particular article.
• To be able to test your code you must export it. If you can’t access it by requiring it into your test file, you can’t test it.

The link above should contain an example test for the starter Hello World app in each of the supported frameworks, so feel free to copy the test into your example.js file.

IMPORTANT – At the time of writing (30th March 2016), the tests in the docs will fail. They haven’t been updated to the latest version of the starter app.

I’ve knocked together an equivalent test which you can copy into your example.js file:

var mainViewModel = require("../main-view-model").createViewModel();

QUnit.test("Hello World Sample Test:", function (assert) {
 console.log(mainViewModel);
 assert.equal( mainViewModel.counter, 42, "Counter, 42; equal succeeds." );
 assert.equal( mainViewModel.message, "42 taps left", "Message, 42 taps left; equal succeeds." );
});

Run the test!

If you’re running your test on an Android device or emulator, then you need to run:

tns test android

For an iOS device, run:

tns test ios

Or for an iOS emulator:

tns test ios --emulator

All being well, you’ll see this:

What happened there?

When executing your tests, the NativeScript CLI doesn’t start your app – instead it starts a Karma server on the development machine (in this case, my laptop), builds and deploys your app to whichever device you selected and launches the main module of the NativeScript Test Runner package that was added earlier. The unit test runner connects to the Karma server, runs the tests and then reports the results to the command line. Once complete, the app closes.

For a more detailed rundown, check out the NativeScript docs.

Conclusion

So that’s a very basic rundown of unit testing in NativeScript. The NativeScript docs go into a bit more detail but this should get you up and running. If there’s anything more you think I can help you with, let me know in the comments below, or over at my personal blog.

Thanks for reading!

Ben Elliott

I'm always looking for something to learn. Check out my blog at http://therankamateur.co.uk