Writing tests is a very important part of mobile application development, but not everyone does it. It could be laziness, it could be because you don’t know how. I fall into the category that I’m often too lazy to write tests. I don’t have time to write tests, I just want my application done. That is probably not a good answer. Unit testing will lead to overall better applications with less problems down the road.

Not too long ago, Ben Elliot wrote a guest post on The Polyglot Developer regarding unit testing a NativeScript mobile application. The thing is, that this was directed towards vanilla NativeScript. While vanilla is a very valid option when it comes to NativeScript, I prefer using Angular which is a bit different.

We’re going to see how to write unit tests for a NativeScript Android and iOS applications that use Angular and TypeScript.

To make this tutorial easy to understand, we’re going to work with a fresh project. Using a Command Prompt (Windows) or Terminal (Mac and Linux), execute the following:

You’ll notice the --ng tag indicates that we’re creating an Angular and TypeScript application. Although we’re adding the iOS platform, you won’t be able to build for iOS unless you’re using a Mac with Xcode installed.

The NativeScript CLI makes it very easy to include tests in our project. Using the command line, execute the following to configure your testing framework:

tns test init

The above command will ask you to choose which testing framework you’d like to use. You can use Jasmine, Mocha with Chai, or QUnit. There is no best framework. I often use Mocha with Chai, but this time we’re going to use Jasmine.

After the test framework is initialized you’ll be left with a app/tests/example.js file. The name of this file is not particularly important. In fact we’ll create a new file in here for every component that we have and name them similarly. As of right now, even though we’re using a TypeScript project, the tests are written in JavaScript. Not too big a deal as you can convert them, but in an effort to stay in line with the defaults, we’ll leave them as JavaScript. Status on the TypeScript unit test ticket can be found here.

Go ahead and create a file in your project called app/tests/app.component.js which will hold the tests for our project’s app/app.component.ts file. Open it and include the following:

Because our intention is to test an Angular component that contains annotations, we need to include the reflect-metadata dependency. We also need to define which file we plan to test, being our app/app.component.ts file.

As of right now we only have one set of tests with a single test. Out of the box, NativeScript has an app/app.component.ts file that looks like the following:

The counter variable is defaulted to 16 and when trying to access message this number is prepended to a string of text. When you first run the application, the string of text will be 16 taps left which matches what we’re testing for in our test case.

If the actual value does not match the expected value, the test will fail.

So how do we actually execute these tests?

From the Terminal or Command Prompt, execute the following:

tns test android

NativeScript allows you to test on a per platform basis. Above we are testing on Android, but you could switch to iOS if you wanted to.

Let’s do a few more things in terms of testing this application. While we won’t add any extra components in this example, there is still stuff to do.

We have an onTap method in our app/app.component.ts file so it might be a good idea to test it. However, we want to also reduce some of our unit test code. If you’re using Jasmine we can run a few things before the test, sort of like a preparation. The preparation is through the beforeEach like seen below:

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.