Unit testing with NativeScript + Angular


#1

Hello,
i am trying to write unit tests for my application. I have read the blog at https://www.thepolyglotdeveloper.com/2016/08/unit-testing-nativescript-angular-2-android-ios-mobile-application/ and the author shows how to test a new instance of a component without any dependencies. In my case i have components with internal and external dependencies (Dependency Injection).

For example:

// External
import { Component, ChangeDetectionStrategy, ChangeDetectorRef, OnInit } from '@angular/core';
import { RadListView, ListViewEventData } from 'nativescript-telerik-ui/listview';
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { PageRoute, RouterExtensions } from "nativescript-angular/router";

// Internal
import { ApiGatewayService } from "../../services/apiGateway/apiGateway.service";
import { ToastService } from "../../services/toast/toast.service";
import { DeviceListItemModel } from "../../models/deviceListItem/deviceListItem.model";
import { DataProviderService } from "../../services/dataProvider/dataProvider.service";
import { DeviceTypeEnum } from "../../enums/deviceType/deviceType.enum";
import { DeviceStatusEnum } from "../../enums/deviceStatus/deviceStatus.enum";

@Component({
    selector: 'device-list-page',
    templateUrl: "components/deviceListPage/deviceListPage.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DeviceListPageComponent implements OnInit {
    // Fields
    private _title: string;
    private _roomId: string;
    private _deviceListItemModels: ObservableArray<DeviceListItemModel>;

    // Properties
    get title(): string {
        return this._title;
    }

    get deviceListItems(): ObservableArray<DeviceListItemModel> {
        return this._deviceListItemModels;
    }

    // Constructor
    constructor(private _pageRoute: PageRoute,
                     private _routerExtensions: RouterExtensions,
                     private _apiGatewayService: ApiGatewayService,
                     private _toastService: ToastService,
                     private _dataProviderService: DataProviderService,
                     private _cd: ChangeDetectorRef) {
        this._title = "";
        this._roomId = "";
        this._deviceListItemModels = new ObservableArray<DeviceListItemModel>();
    }

    // Methods   
    updateDevices(): void {
        // Get all devices of a given room by id
        let deviceModels;
        for (let room of this._dataProviderService.storage.rooms) {
            if (room.id == this._roomId) {
                deviceModels = room.devices;
                this._title = room.name + " Devices";
                break;
            }
        };
...

I cannot create a new instance of my component because of the dependencies so what is the usual way to unit test components like this one?

Best regards

Peter


#2

ping @nraboy :slight_smile: for help here


#3

Did you figure this out? This should be in the docs. Without this, no component testing, no provider testing, only models.


#4

@Pete.K do we have pointers on this?


#5

I’ll ask for leads on Monday, though we’d like to rework the testing framework a bit if we get the chance.


#6

@Pete.K Any news on this?


#7

People are on vacation until the end of the week it seems.


#8

Hi, this is very useful for me any news if there was a solution for it?