Update tests project for RC6. Fix Karma tests.

Author: hdeshev

tests/app/app.component.ts

@@ -4,7 +4,6 @@ import {MultiPageMain} from "./multi-page-main.component";
 
 @Component({
     selector: "my-app",
-    directives: [SinglePageMain, MultiPageMain],
     template: `
     <multi-page-main></multi-page-main>
     <!--

tests/app/base.component.ts

@@ -1,4 +1,3 @@
-import {ROUTER_DIRECTIVES, Router } from '@angular/router';
 import {Component, OpaqueToken, OnInit, OnDestroy} from "@angular/core";
 export const HOOKS_LOG = new OpaqueToken("Hooks log");
 import {BehaviorSubject} from "rxjs";

tests/app/first.component.ts

@@ -1,7 +1,7 @@
-import {ROUTER_DIRECTIVES, Router, ActivatedRoute } from '@angular/router';
-import {Component, Inject} from "@angular/core";
-import {HOOKS_LOG, BaseComponent} from "./base.component";
-import {BehaviorSubject} from "rxjs";
+import { Router, ActivatedRoute } from '@angular/router';
+import { Component, Inject } from "@angular/core";
+import { HOOKS_LOG, BaseComponent } from "./base.component";
+import { BehaviorSubject } from "rxjs";
 
 @Component({
     selector: "first-comp",

tests/app/main.ts

@@ -11,10 +11,14 @@ import {Page} from "ui/page";
 import {StackLayout} from "ui/layouts/stack-layout";
 
 import * as application from "application";
+import "ui/styling/style";
+import "ui/frame";
 import {HOOKS_LOG} from "./base.component";
 import {MultiPageMain, routes as multiPageRoutes} from "./multi-page-main.component";
 import {SinglePageMain, routes as singlePageRoutes} from "./single-page-main.component";
-import {provide, OpaqueToken, NgModule} from "@angular/core";
+import {FirstComponent} from "./first.component";
+import {SecondComponent} from "./second.component";
+import { OpaqueToken, NgModule } from "@angular/core";
 
 import {PageNavigationApp} from "./snippets/navigation/page-outlet";
 import {NavigationApp} from "./snippets/navigation/router-outlet";
@@ -33,18 +37,25 @@ trace.enable();
 // nativeScriptBootstrap(IconFontComponent);
 const platform = platformNativeScriptDynamic({bootInExistingPage: true});
 const root = new StackLayout();
-const rootViewProvider = provide(APP_ROOT_VIEW, { useValue: root });
+const rootViewProvider = {provide: APP_ROOT_VIEW, useValue: root};
 const singlePageHooksLog = new BehaviorSubject([]);
-const singlePageHooksLogProvider = provide(HOOKS_LOG, { useValue: singlePageHooksLog });
+const singlePageHooksLogProvider = {provide: HOOKS_LOG, useValue: singlePageHooksLog};
 const multiPageHooksLog = new BehaviorSubject([]);
-const multiPageHooksLogProvider = provide(HOOKS_LOG, { useValue: multiPageHooksLog });
+const multiPageHooksLogProvider = {provide: HOOKS_LOG, useValue: multiPageHooksLog};
 
 @NgModule({
     bootstrap: [
         SinglePageMain
     ],
     declarations: [
-        SinglePageMain
+        SinglePageMain,
+        FirstComponent,
+        SecondComponent,
+    ],
+    entryComponents: [
+        SinglePageMain,
+        FirstComponent,
+        SecondComponent,
     ],
     imports: [
         NativeScriptModule,
@@ -69,7 +80,14 @@ class SinglePageModule {}
         MultiPageMain
     ],
     declarations: [
-        MultiPageMain
+        MultiPageMain,
+        FirstComponent,
+        SecondComponent,
+    ],
+    entryComponents: [
+        MultiPageMain,
+        FirstComponent,
+        SecondComponent,
     ],
     imports: [
         NativeScriptModule,

tests/app/multi-page-main.component.ts

@@ -1,13 +1,11 @@
-import {ROUTER_DIRECTIVES, Router, RouterConfig } from '@angular/router';
-import {nsProvideRouter, NS_ROUTER_DIRECTIVES} from 'nativescript-angular/router';
+import {Router} from '@angular/router';
 import {Component, ElementRef} from "@angular/core";
 import {Location, LocationStrategy} from '@angular/common';
 import {FirstComponent} from "./first.component";
 import {SecondComponent} from "./second.component";
 
 @Component({
     selector: "multi-page-main",
-    directives: [ROUTER_DIRECTIVES, NS_ROUTER_DIRECTIVES],
     template: `
     <Label text="Multi-page router"></Label>
     <page-router-outlet></page-router-outlet>
@@ -23,7 +21,7 @@ export class MultiPageMain {
 }
 
 export const routes = [
-    { path: "", redirectTo: "first/multi-page", terminal: true },
+    { path: "", redirectTo: "first/multi-page", pathMatch: "full", terminal: true },
     { path: "first/:id", component: FirstComponent },
     { path: "second/:id", component: SecondComponent },
 ];

tests/app/second.component.ts

@@ -1,4 +1,4 @@
-import {ROUTER_DIRECTIVES, Router, ActivatedRoute } from '@angular/router';
+import {Router, ActivatedRoute } from '@angular/router';
 import {Component, Inject} from "@angular/core";
 import {Location} from "@angular/common";
 import {HOOKS_LOG, BaseComponent} from "./base.component";

tests/app/single-page-main.component.ts

@@ -1,13 +1,11 @@
-import {ROUTER_DIRECTIVES, Router, RouterConfig } from '@angular/router';
-import {nsProvideRouter} from 'nativescript-angular/router';
+import {Router} from '@angular/router';
 import {Component, ElementRef} from "@angular/core";
 import {Location, LocationStrategy} from '@angular/common';
 import {FirstComponent} from "./first.component";
 import {SecondComponent} from "./second.component";
 
 @Component({
     selector: "single-page-main",
-    directives: [ROUTER_DIRECTIVES],
     template: `
     <Label text="Single-page router"></Label>
     <router-outlet></router-outlet>
@@ -23,7 +21,7 @@ export class SinglePageMain {
 }
 
 export const routes = [
-    { path: "", redirectTo: "first/single-page", terminal: true },
+    { path: "", redirectTo: "first/single-page", pathMatch: "full", terminal: true },
     { path: "first/:id", component: FirstComponent },
     { path: "second/:id", component: SecondComponent },
 ];

tests/app/snippets/navigation/app.routes.ts

@@ -1,7 +1,7 @@
 import {FirstComponent, SecondComponent} from "./navigation-common";
 // >> router-config-all
 export const routes = [
-    { path: "", redirectTo: "/first", terminal: true },
+    { path: "", redirectTo: "/first", pathMatch: "full", terminal: true },
     { path: "first", component: FirstComponent },
     { path: "second", component: SecondComponent },
 ];

tests/app/snippets/navigation/navigation-common.ts

@@ -1,10 +1,8 @@
 // >> router-content-components
 import {Component} from '@angular/core';
-import {NS_ROUTER_DIRECTIVES} from 'nativescript-angular/router';
 
 @Component({
     selector: "first",
-    directives: [NS_ROUTER_DIRECTIVES],
     template: `
     <StackLayout>
         <Label text="First component" class="title"></Label>
@@ -15,12 +13,11 @@ export class FirstComponent { }
 
 @Component({
     selector: "second",
-    directives: [NS_ROUTER_DIRECTIVES],
     template: `
     <StackLayout>
         <Label text="Second component" class="title"></Label>
         <Button text="GO TO FIRST" [nsRouterLink]="['/first']" class="link"></Button>
     </StackLayout>`
 })
 export class SecondComponent { }
-// << router-content-components
+// << router-content-components

tests/app/snippets/navigation/page-outlet.ts

@@ -4,7 +4,7 @@ import { ApplicationRef } from '@angular/core';
 import { Component, NgModule } from '@angular/core';
 import { platformNativeScriptDynamic } from "nativescript-angular/platform";
 import { NativeScriptRouterModule } from "nativescript-angular/router";
-import { Router } from '@angular/router';
+import { Router, NavigationStart, NavigationEnd } from '@angular/router';
 import { routes } from "./app.routes";
 
 @Component({
@@ -13,8 +13,26 @@ import { routes } from "./app.routes";
 })
 export class PageNavigationApp { 
     // >> (hide)
+    public startEvent: any;
+    public endEvent: any;
+
+    public done: Promise<void>;
+
     constructor(public router: Router, public appRef: ApplicationRef) {
         registerTestApp(PageNavigationApp, this, appRef);
+
+        this.done = new Promise<void>((resolve, reject) => {
+            this.router.events.subscribe((e) => {
+                console.log("------>>>>>> PageRouter event: " + e.toString());
+                if (e instanceof NavigationStart) {
+                    this.startEvent = e;
+                }
+                if (e instanceof NavigationEnd) {
+                    this.endEvent = e
+                    resolve();
+                }
+            });
+        });
     }
     // << (hide)
 }

tests/app/snippets/navigation/router-extensions.ts

@@ -1,16 +1,10 @@
-import {Component} from "@angular/core";
-import {NS_ROUTER_DIRECTIVES } from 'nativescript-angular/router';
-import {nsProvideRouter} from 'nativescript-angular/router';
-import {RouterConfig} from '@angular/router';
-
-
+import { Component } from "@angular/core";
 import { RouterExtensions } from 'nativescript-angular/router';
 
 @Component({
     // ...
     // >> (hide)
     selector: "router-extensions-import",
-    directives: [NS_ROUTER_DIRECTIVES],
     templateUrl: 'snippets/navigation/router-extensions.html'
     // << (hide)
 })
@@ -70,9 +64,7 @@ export class MainComponent {
 })
 export class App { }
 
-const routes: RouterConfig = [
+const routes = [
     { path: "", component: MyComponent },
     { path: "main", component: MainComponent },
 ];
-
-export const providers = nsProvideRouter(routes, {});

tests/app/snippets/navigation/router-outlet.ts

@@ -4,8 +4,9 @@ import { ApplicationRef } from '@angular/core';
 import { Component, NgModule } from '@angular/core';
 import { platformNativeScriptDynamic } from "nativescript-angular/platform";
 import { NativeScriptRouterModule } from "nativescript-angular/router";
-import { Router } from '@angular/router';
+import { Router, NavigationStart, NavigationEnd } from '@angular/router';
 import { routes } from "./app.routes";
+import {FirstComponent, SecondComponent} from "./navigation-common";
 
 @Component({
     selector: 'navigation-test',
@@ -24,14 +25,32 @@ import { routes } from "./app.routes";
 })
 export class NavigationApp {
     // >> (hide)
+    public startEvent: any;
+    public endEvent: any;
+    public done: Promise<void>;
+
     constructor(public router: Router, public appRef: ApplicationRef) {
         registerTestApp(NavigationApp, this, appRef);
+
+        this.done = new Promise<void>((resolve, reject) => {
+            this.router.events.subscribe((e) => {
+                console.log("------>>>>>> Router event: " + e.toString());
+                if (e instanceof NavigationStart) {
+                    this.startEvent = e;
+                }
+                if (e instanceof NavigationEnd) {
+                    this.endEvent = e
+                    resolve();
+                }
+            });
+        });
     }
     // << (hide)
 }
 
 @NgModule({
     bootstrap: [NavigationApp],
+    entryComponents: [FirstComponent, SecondComponent],
     imports: [
         NativeScriptRouterModule,
         NativeScriptRouterModule.forRoot(routes)

tests/app/tests/detached-loader-tests.ts

@@ -18,21 +18,21 @@ class TestComponent { }
 class LoaderComponentBase {
     @ViewChild(DetachedLoader) public loader: DetachedLoader;
 
-    public ready: Promise<LoaderComponent>;
+    public ready: Promise<LoaderComponentBase>;
     private resolve;
     constructor() {
         this.ready = new Promise((reslove, reject) => {
             this.resolve = reslove;
         })
     }
     ngAfterViewInit() {
+        console.log("!!! ngAfterViewInit -> loader: " + this.loader);
         this.resolve(this);
     }
 }
 
 @Component({
     selector: 'loader-component-on-push',
-    directives: [DetachedLoader],
     template: `
     <StackLayout>
         <DetachedContainer #loader></DetachedContainer>
@@ -43,7 +43,6 @@ export class LoaderComponent extends LoaderComponentBase { }
 
 @Component({
     selector: 'loader-component-on-push',
-    directives: [DetachedLoader],
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
     <StackLayout>
@@ -57,7 +56,8 @@ describe('DetachedLoader', () => {
     let testApp: TestApp = null;
 
     before(() => {
-        return TestApp.create().then((app) => {
+        return TestApp.create([], [LoaderComponent, LoaderComponentOnPush, TestComponent]).then((app) => {
+            console.log("TEST APP: " + app);
             testApp = app;
         })
     });

tests/app/tests/http.ts

@@ -5,7 +5,7 @@ import {
     inject,
 } from '@angular/core/testing';
 import {ReflectiveInjector} from '@angular/core';
-import {BaseRequestOptions, ConnectionBackend, Http, HTTP_PROVIDERS, Response, ResponseOptions} from '@angular/http';
+import {BaseRequestOptions, ConnectionBackend, Http, Response, ResponseOptions} from '@angular/http';
 import 'rxjs/add/operator/map';
 import {MockBackend} from '@angular/http/testing';
 import {NSHttp} from "nativescript-angular/http/ns-http";

tests/app/tests/list-view-tests.ts

@@ -16,7 +16,7 @@ class DataItem {
     template: `
     <StackLayout>
         <ListView height="200" [items]="myItems" (setupItemView)="onSetupItemView($event)">
-            <template #item="item" #i="index" #odd="odd" #even="even">
+            <template let-item="item" let-i="index" let-odd="odd" let-even="even">
                 <StackLayout [class.odd]="odd" [class.even]="even">
                     <Label [text]='"index: " + i'></Label>
                     <Label [text]='"[" + item.id +"] " + item.name'></Label>
@@ -43,12 +43,11 @@ export class TestListViewComponent {
     }
 }
 
-// TODO: Skip list-view test until karma test launcher double navigate bug is fixed
-describe.skip('ListView-tests', () => {
+describe('ListView-tests', () => {
     let testApp: TestApp = null;
 
     before(() => {
-        return TestApp.create().then((app) => {
+        return TestApp.create([], [TestListViewComponent]).then((app) => {
             testApp = app;
         })
     });