Day -6 NativeScript Post Series

How to unit test NativeScript Angular mobile Application using Mocha.

In today’s post I will go over the steps required to perform unit testing in NativeScript mobile application which uses Angular and TypeScript.

We can use the below commands to create application using default nativescript angular template.

tns create TestMochaProject --ng

testing1

This will create a default application with “src” folder. The command creates an item and item detail component . ItemService is used to populate items array and return the same to each components.

testing2

Next we will go ahead and run the below command to include test project and use mocha framework for unit testing. This command will also create a example.js test file which is a sample mocha test file under tests folder.

tns test init

testing3

Once the test folders is created, we need to run the below command to enable types. For example “describe”, this will be recognized only after we run the below command.

npm i @types/mocha

testing7

Now that we have installed the required types. We need to perform a clean up of our application folder.

  1. Move all contents from “src/app” folder to inside “src” folder.
  2. Delete the “app” folder.
  3. Rename the “src” folder to “app” folder.

The final application should resemble as below.

testing8

Once we perform the above cleanup, now we need to make some changes to our main.ts, tsconfig.json and nsconfig.json

Change the AppModule imports statement and include statement to import reflect-metadata as shown below in main.ts file.

import { AppModule } from "./app.module";
import "reflect-metadata";

Modify tsconfig.json file as shown below. We changed “src” to “app” in paths.

{
"compilerOptions": 
{
"target": "es5",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"noEmitHelpers": true,
"noEmitOnError": true,
"lib": [
"es6",
"dom",
"es2015.iterable"
],
"baseUrl": ".",
"paths": {
"~/*": [
"app/*"
],
"*": [
"./node_modules/tns-core-modules/*",
"./node_modules/*"
]
}
},
"exclude": [
"node_modules",
"platforms",
"**/*.aot",
"e2e"
]
}

Modify nsconfig.json file with contents as shown below.

{
"appResourcesPath": "App_Resources",
"appPath": "app"
}
We need to update the typescript version to 2.9.2 in package.json file which is present in root level of application.
Once we have completed the above steps, we will add the below files in tests folder.
1. Add test-config.ts file in tests folder with below content.
(<any>global).mocha.setup({
timeout:20000
});

import * as chai from "chai";
export let assert: typeof chai.assert =
 (<any>global).chai.assert;
2. Add test-main.ts file in tests folder with below content.
import 'nativescript-angular/zone-js/testing.mocha';
import {nsTestBedInit} from 
'nativescript-angular/testing';
nsTestBedInit();
3. Add a test file items.componenttest.ts file in tests folder. The content of this file can be found in the github repository.

 

We need to perform one last update to karma.conf.js file to load correct files as shown below.

testing4

Execute the below commands to build and perform testing. Before executing tns test command we would need to ensure that we have the android emulator up and running.

tns build android
tns test android

Test command uses karma server and provides an url. Browse the url in a separate browser.

http://localhost:9876/

testing5

Tests from example.js and items.componenttest.ts file will be executed. In our items component test we are performing check on the length of items returned from the items service call. In the example here we are not performing any http calls. If there are any http calls , recommendation is to mock those calls.

As part of the test under beforeEach function, we provide the details of components which are required by our app along with the provider. In the sample ItemService is the provider.

beforeEach(nsTestBedBeforeEach([AppComponent,
ItemsComponent,
ItemDetailComponent],[ItemService])

);

afterEach(nsTestBedAfterEach(false));
We need to make sure that we have equal number of nsTestBedBeforeEach and nsTestBedAfterEach statement. They should match.
Once the tests are executed we get the below information from the logs on the status of execution of tests.
testing6

 

The sample for this app can be found here.

Happy Reading !!!!

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s