I already looked at that website. and that was the first tutorial i fully read to try to understand how to do unit Testing.
Well all my code is related to Page Design. Basically all my NativeScript Angular 2 Tests will be related to my UI components with external dependencies. How am i supposed to test that?
I barely have any code since my application is connected to a REST API throught a server that takes of the business part. So i only have basically page components.
How am i supposed to write Unit tests for this component? Can you give a few ideas on how to proceed towards this?
My HomePage, how am i supposed to test it taking into consideration i have external dependencies.
Remenber that i must test the connection between my application and a Spring Boot Server. That’s the part i dont know neither have any idea on how to do it.
Any ideas?
My code:
HomePage.html
<FlexboxLayout flexDirection="column">
<AbsoluteLayout>
<image class="imageRhombus" src="res://rhombus" stretch="enum"></image>
</AbsoluteLayout>
<label class="text-title" text="FastCanteen"></label>
<StackLayout orientation="vertical" flexGrow="1" backgroundColor="transparent">
<StackLayout marginTop="20" marginBottom="30">
<image class="imageAccountCircle" src="res://ic_account_circle_white"></image>
<Label id="userNameTop" class="labelName" textWrap="true"></Label>
<Label class="labelNIF" [text]=user.nif textWrap="true"></Label>
</StackLayout>
<StackLayout>
<StackLayout marginLeft="70" marginRight="70" marginBottom="60" backgroundColor="#444444" borderRadius="30%" opacity="0.7"
height="100">
<Label id="balance" class="labelBalanceValue"></Label>
<Label class="labelTextBalance" text="Available Balance"></Label>
</StackLayout>
</StackLayout>
<div *ngIf="isVisible">
<StackLayout (tap)="accountTransactions()" [nsRouterLink]="['/main']" pageTransition="slide" marginBottom="10" marginLeft="20"
marginRight="20" verticalAlignment="bottom" backgroundColor="#444444">
<GridLayout rows="auto auto auto" columns="* 75">
<Label class="labelLastBill" text="Last Bill" textWrap="true" row="0" col="0" marginTop="10"></Label>
<Label id="valueLastBill" class="labelValue" textWrap="true" row="1" col="0"></Label>
<Label class="transactionsButtons" text=">" row="1" col="1" marginTop="-5"></Label>
<Label id="typeLastBill" class="labelTypeOfBill" textWrap="true" row="2" col="0" marginBottom="10"></Label>
</GridLayout>
</StackLayout>
</div>
</StackLayout>
<FlexboxLayout>
<BottomBar row="1" [items]="items" [hide]="hidden" [titleState]="titleState" (loaded)="tabLoaded($event)" (tabSelected)="tabSelected($event)"
[inactiveColor]="inactiveColor" [accentColor]="accentColor" colored="true"></BottomBar>
</FlexboxLayout>
</FlexboxLayout>
HomePage.component.ts
import { Page } from "ui/page";
import { Component, OnInit } from "@angular/core";
import { registerElement } from 'nativescript-angular';
import { BottomBar, BottomBarItem, TITLE_STATE, SelectedIndexChangedEventData, Notification } from 'nativescript-bottombar';
import { User } from "../../shared/model/user/user";
import { UserService } from "../../shared/model/user/user.service";
import { MovementService } from "../../shared/model/movement/movement.service";
import { Router, NavigationExtras } from "@angular/router";
import * as colorModule from "tns-core-modules/color";
import { ActivatedRoute } from "@angular/router";
import * as platformModule from "tns-core-modules/platform";
import { Config } from "../../shared/config";
import { Budget } from "../../shared/model/budget/budget";
import listView = require("ui/list-view");
import { Http } from "@angular/http";
var view = require("ui/core/view");
var applicationSettings = require("application-settings");
registerElement('BottomBar', () => BottomBar);
@Component({
selector: "homePage",
providers: [UserService, MovementService],
templateUrl: "pages/homePage/homePage.html",
styleUrls: ["pages/homePage/homePage-common.css", "pages/homePage/homePage.css"]
})
export class HomePageComponent implements OnInit {
public hidden: boolean;
public titleState: TITLE_STATE;
public _bar: BottomBar;
public inactiveColor: string;
public accentColor: string;
public user: User;
public budget: Budget;
public nameFromAPI: string;
public value: string;
public type: string;
public isVisible: boolean = true;;
public height: number;
public width: number;
constructor(private http: Http, private router: Router, private page: Page, private route: ActivatedRoute, private userService: UserService, private movementService: MovementService) {
this.route.queryParams.subscribe(params => {
this.user = JSON.parse(params["user"]);
})
console.log("Inside HomePage");
console.log("UserToken: " + Config.token);
this.user.name = this.nameFromAPI;
}
public items: Array<BottomBarItem> = [
new BottomBarItem(0, "Home", "ic_home", "white"),
new BottomBarItem(1, "Menu", "ic_local_dining", "white"),
new BottomBarItem(2, "Check-out", "ic_add_a_photo", "white"),
new BottomBarItem(3, "Transactions", "ic_assignment", "white"),
new BottomBarItem(4, "Settings", "ic_settings", "white")
];
tabLoaded(event) {
this._bar = <BottomBar>event.object;
this.hidden = false;
this.titleState = TITLE_STATE.ALWAYS_SHOW;
var Color = colorModule.Color;
var color = new Color("#8e8e93");
this.inactiveColor = color.hex;
this.accentColor = "black";
}
ngOnInit() {
let navigationExtras: NavigationExtras = {
queryParams: {
"user": JSON.stringify({
"name": this.user.name,
"nif": this.user.nif,
"password": this.user.password
})
}
};
this.page.actionBarHidden = true;
this.page.backgroundImage = "res://bitmap";
// Available Balance
this.budget = new Budget();
var tmp;
this.userService.readBalance(applicationSettings.getString("user.token", "default"))
.subscribe((res) => {
this.budget.amount = res;
tmp = res;
//console.log("Budget Value on Home Page : " + this.budget.amount);
var htmlBalance;
htmlBalance = this.page.getViewById("balance");
if (typeof htmlBalance == "undefined") {
alert("Balance undefined!");
} else {
if (Number.isInteger(this.budget.amount)) {
htmlBalance.text = this.budget.amount + ".00 €";
} else {
var number = this.decimalPlaces(this.budget.amount);
if (number == 1) {
htmlBalance.text = this.budget.amount + "0 €";
} else {
htmlBalance.text = this.budget.amount + "€";
}
}
}
},
(error) => alert(error)
);
var htmlBalance;
htmlBalance = this.page.getViewById("balance");
htmlBalance.text = "50.00 €";
//NameByToken
this.userService.nameByToken(applicationSettings.getString("user.token", "default"))
.subscribe((res) => {
this.nameFromAPI = res.Result.message;
//console.log("Username on Home Page[From Method] : " + res.Result.message);
var htmlName;
htmlName = this.page.getViewById("userNameTop");
if (typeof htmlName == "undefined") {
alert("Name undefined!");
} else {
htmlName.text = this.nameFromAPI;
}
},
(error) => alert(error)
);
var htmlName;
htmlName = this.page.getViewById("userNameTop");
htmlName.text = "Joao";
//LastMovemnet
this.movementService.lastMovement(applicationSettings.getString("user.token", "default"))
.subscribe((res) => {
this.value = res.Value;
this.type = res.Type;
//verificar que values nao vem a null
if (this.type != "undefined" && this.value != "undefined") {
this.isVisible = true;
var htmlValueLastBill;
htmlValueLastBill = this.page.getViewById("valueLastBill");
if (typeof htmlValueLastBill == "undefined") {
alert("Value undefined!");
} else {
htmlValueLastBill.text = "- € " + this.value;
}
//Portuguese -> English
this.type = this.type.trim();
if (this.type == "Pagamento") {
this.type = "Payment";
}
if (this.type == "Carregamento") {
this.type = "Bank Transaction";
}
if (this.type == "Estorno") {
this.type = "Refund";
}
var htmlTypeLastBill;
htmlTypeLastBill = this.page.getViewById("typeLastBill");
if (typeof htmlTypeLastBill == "undefined") {
alert("Type undefined!");
} else {
htmlTypeLastBill.text = this.type;
}
} else {
this.isVisible = false;
}
},
(error) => alert(error)
);
}
decimalPlaces(num) {
var match = ('' + num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
if (!match) { return 0; }
return Math.max(
0,
// Number of digits right of decimal point.
(match[1] ? match[1].length : 0)
// Adjust for scientific notation.
- (match[2] ? +match[2] : 0));
}
accountTransactions() {
let navigationExtras: NavigationExtras = {
queryParams: {
"user": JSON.stringify({
"name": this.user.name,
"nif": this.user.nif,
"password": this.user.password
})
}
};
this.router.navigate(["/transactions"], navigationExtras);
}
tabSelected(args: SelectedIndexChangedEventData) {
switch (args.newIndex) {
case 0: {
let navigationExtras: NavigationExtras = {
queryParams: {
"user": JSON.stringify({
"name": this.user.name,
"nif": this.user.nif,
"password": this.user.password
})
}
};
this.router.navigate(["/homePage"], navigationExtras);
break;
}
case 1: {
let navigationExtras: NavigationExtras = {
queryParams: {
"user": JSON.stringify({
"name": this.user.name,
"nif": this.user.nif,
"password": this.user.password
})
}
};
this.router.navigate(["/menu"], navigationExtras);
break;
}
case 2: {
let navigationExtras: NavigationExtras = {
queryParams: {
"user": JSON.stringify({
"name": this.user.name,
"nif": this.user.nif,
"password": this.user.password
})
}
};
this.router.navigate(["/payment"], navigationExtras);
break;
}
case 3: {
let navigationExtras: NavigationExtras = {
queryParams: {
"user": JSON.stringify({
"name": this.user.name,
"nif": this.user.nif,
"password": this.user.password
})
}
};
this.router.navigate(["/transactions"], navigationExtras);
break;
}
case 4: {
let navigationExtras: NavigationExtras = {
queryParams: {
"user": JSON.stringify({
"name": this.user.name,
"nif": this.user.nif,
"password": this.user.password
})
}
};
this.router.navigate(["/userSettings"], navigationExtras);
break;
}
}
}
}
@nraboy.
Thanks in advance
![Screenshot_20170807-120838[1]](https://cdn-standard3.discourse.org/uploads/nativescript/optimized/1X/0ad37c2f33c50fd4821a16fce0bfb3686bdb93c4_1_281x500.png)
