From 86cd2903f040ae8779e9aaf4a8b03f6b4b6194f4 Mon Sep 17 00:00:00 2001 From: Alexander Vakrilov Date: Tue, 22 Jan 2019 11:15:22 +0200 Subject: [PATCH] feat(router): detach change detection on navigation (#1507) * feat(router): detach change detection on navigation * test: add CD test when navigation * chore: update deps --- e2e/modal-navigation-ng/package.json | 2 +- e2e/nested-router-tab-view/package.json | 2 +- e2e/renderer/package.json | 2 +- e2e/router-tab-view/package.json | 2 +- e2e/router/app/first/first.component.ts | 16 ++++++++-- e2e/router/e2e/router.e2e-spec.ts | 31 +++++++++++++++++++ e2e/router/package.json | 23 ++++++++------ e2e/router/references.d.ts | 1 + e2e/router/tsconfig.tns.json | 7 +++++ .../router/page-router-outlet.ts | 6 ++++ tests/package.json | 2 +- 11 files changed, 77 insertions(+), 17 deletions(-) create mode 100644 e2e/router/references.d.ts create mode 100644 e2e/router/tsconfig.tns.json diff --git a/e2e/modal-navigation-ng/package.json b/e2e/modal-navigation-ng/package.json index bf92f4395..444d4b4ee 100644 --- a/e2e/modal-navigation-ng/package.json +++ b/e2e/modal-navigation-ng/package.json @@ -44,7 +44,7 @@ "mocha-junit-reporter": "^1.18.0", "mocha-multi": "^1.0.1", "nativescript-dev-appium": "next", - "nativescript-dev-typescript": "~0.7.8", + "nativescript-dev-typescript": "next", "nativescript-dev-webpack": "next", "typescript": "~3.1.1" }, diff --git a/e2e/nested-router-tab-view/package.json b/e2e/nested-router-tab-view/package.json index 109b89bdc..d4398ba15 100644 --- a/e2e/nested-router-tab-view/package.json +++ b/e2e/nested-router-tab-view/package.json @@ -44,7 +44,7 @@ "mocha-junit-reporter": "^1.18.0", "mocha-multi": "^1.0.1", "nativescript-dev-appium": "next", - "nativescript-dev-typescript": "~0.7.4", + "nativescript-dev-typescript": "next", "nativescript-dev-webpack": "next", "typescript": "~3.1.1" }, diff --git a/e2e/renderer/package.json b/e2e/renderer/package.json index d2e82b4ff..8683bd45b 100644 --- a/e2e/renderer/package.json +++ b/e2e/renderer/package.json @@ -39,7 +39,7 @@ "mocha-junit-reporter": "~1.17.0", "mocha-multi": "~1.0.0", "nativescript-dev-appium": "next", - "nativescript-dev-typescript": "~0.7.1", + "nativescript-dev-typescript": "next", "nativescript-dev-webpack": "next", "tslib": "^1.7.1", "typescript": "~3.1.1" diff --git a/e2e/router-tab-view/package.json b/e2e/router-tab-view/package.json index 187cc9752..d4a2a71db 100644 --- a/e2e/router-tab-view/package.json +++ b/e2e/router-tab-view/package.json @@ -41,7 +41,7 @@ "mocha-junit-reporter": "~1.17.0", "mocha-multi": "~1.0.0", "nativescript-dev-appium": "next", - "nativescript-dev-typescript": "~0.6.0", + "nativescript-dev-typescript": "next", "typescript": "~3.1.1" }, "scripts": { diff --git a/e2e/router/app/first/first.component.ts b/e2e/router/app/first/first.component.ts index acb962c63..5d93d97b7 100644 --- a/e2e/router/app/first/first.component.ts +++ b/e2e/router/app/first/first.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, OnDestroy, OnChanges } from "@angular/core"; +import { Component, OnInit, OnDestroy, OnChanges, DoCheck } from "@angular/core"; import { ActivatedRoute, Router, Route } from "@angular/router"; import { Location } from "@angular/common"; import { RouterExtensions } from "nativescript-angular/router"; @@ -18,11 +18,14 @@ import { Page } from "tns-core-modules/ui/page"; + + ` }) -export class FirstComponent implements OnInit, OnDestroy { +export class FirstComponent implements OnInit, OnDestroy, DoCheck { public message: string = ""; + public doCheckCount: number = 0; constructor(private routerExt: RouterExtensions, page: Page) { console.log("FirstComponent - constructor() page: " + page); } @@ -35,6 +38,15 @@ export class FirstComponent implements OnInit, OnDestroy { console.log("FirstComponent - ngOnDestroy()"); } + ngDoCheck() { + this.doCheckCount++; + console.log("FirstComponent - ngDoCheck(): " + this.doCheckCount); + } + + reset() { + this.doCheckCount = 0; + } + goBack() { this.message = ""; if (this.routerExt.canGoBack()) { diff --git a/e2e/router/e2e/router.e2e-spec.ts b/e2e/router/e2e/router.e2e-spec.ts index 147d9f948..ba69f92ef 100644 --- a/e2e/router/e2e/router.e2e-spec.ts +++ b/e2e/router/e2e/router.e2e-spec.ts @@ -406,6 +406,37 @@ describe("Navigate to componentless lazy module route", () => { }); }); +describe("Simple navigate and back should trigger only one CD on FirstComponent", () => { + let driver: AppiumDriver; + + before(async () => { + driver = await createDriver(); + await driver.resetApp(); + }); + + it("should find First", async () => { + await assureFirstComponent(driver); + }); + + it("should reset counter", async () => { + await findAndClick(driver, "RESET"); + await driver.waitForElement("CHECK: 1"); + }); + + it("should navigate to Second(1)/master", async () => { + await findAndClick(driver, "GO TO SECOND"); + + await assureSecondComponent(driver, 1); + await assureNestedMasterComponent(driver); + }); + + it("should navigate back to First", async () => { + await goBack(driver); + await assureFirstComponent(driver); + await driver.waitForElement("CHECK: 2"); + }); +}); + async function assureFirstComponent(driver: AppiumDriver) { await driver.findElementByAutomationText("FirstComponent"); } diff --git a/e2e/router/package.json b/e2e/router/package.json index d550d9c1b..0f38b6720 100644 --- a/e2e/router/package.json +++ b/e2e/router/package.json @@ -4,7 +4,10 @@ "readme": "NativeScript Application", "repository": "", "nativescript": { - "id": "org.nativescript.router" + "id": "org.nativescript.router", + "tns-android": { + "version": "5.1.0" + } }, "dependencies": { "@angular/animations": "~7.2.0", @@ -24,10 +27,10 @@ "zone.js": "^0.8.4" }, "devDependencies": { - "@ngtools/webpack": "~7.2.0", "@angular/compiler-cli": "~7.2.0", - "@types/chai": "^4.0.2", - "@types/mocha": "^5.2.5", + "@ngtools/webpack": "~7.2.0", + "@types/chai": "~4.1.7", + "@types/mocha": "~5.2.5", "@types/node": "^10.12.12", "babel-traverse": "6.25.0", "babel-types": "6.25.0", @@ -36,14 +39,14 @@ "chai-as-promised": "~7.1.1", "colors": "^1.1.2", "lazy": "1.0.11", - "mocha": "~3.5.0", - "mocha-junit-reporter": "^1.13.0", - "mocha-multi": "^0.11.0", - "nativescript-dev-appium": "next", - "nativescript-dev-typescript": "~0.4.0", + "mocha": "~5.2.0", + "mocha-junit-reporter": "~1.18.0", + "mocha-multi": "~1.0.1", + "nativescript-dev-appium": "^4.0.10-2019-01-16-01", + "nativescript-dev-typescript": "^0.7.10-next-2019-01-07-183215-03", "nativescript-dev-webpack": "next", "tslib": "^1.7.1", - "typescript": "~3.1.1" + "typescript": "^3.1.6" }, "scripts": { "e2e": "tsc -p e2e && mocha --opts ../config/mocha.opts --recursive e2e --appiumCapsLocation ../config/appium.capabilities.json", diff --git a/e2e/router/references.d.ts b/e2e/router/references.d.ts new file mode 100644 index 000000000..b14f3837d --- /dev/null +++ b/e2e/router/references.d.ts @@ -0,0 +1 @@ +/// Needed for autocompletion and compilation. \ No newline at end of file diff --git a/e2e/router/tsconfig.tns.json b/e2e/router/tsconfig.tns.json new file mode 100644 index 000000000..95f2ecee0 --- /dev/null +++ b/e2e/router/tsconfig.tns.json @@ -0,0 +1,7 @@ +{ + "extends": "./tsconfig", + "compilerOptions": { + "module": "es2015", + "moduleResolution": "node" + } +} diff --git a/nativescript-angular/router/page-router-outlet.ts b/nativescript-angular/router/page-router-outlet.ts index a1481e2e4..cd105c52a 100644 --- a/nativescript-angular/router/page-router-outlet.ts +++ b/nativescript-angular/router/page-router-outlet.ts @@ -242,6 +242,9 @@ export class PageRouterOutlet implements OnDestroy { // tslint:disable-line:dire log(`PageRouterOutlet.detach() - ${routeToString(this._activatedRoute)}`); } + // Detach from ChangeDetection + this.activated.hostView.detach(); + const component = this.activated; this.activated = null; this._activatedRoute = null; @@ -257,6 +260,9 @@ export class PageRouterOutlet implements OnDestroy { // tslint:disable-line:dire } this.activated = ref; + + // reattach to ChangeDetection + this.activated.hostView.reattach(); this._activatedRoute = activatedRoute; this.markActivatedRoute(activatedRoute); diff --git a/tests/package.json b/tests/package.json index 1447a413b..29bede509 100644 --- a/tests/package.json +++ b/tests/package.json @@ -51,7 +51,7 @@ "karma-mocha-reporter": "2.2.5", "karma-nativescript-launcher": "0.4.0", "mocha": "5.2.0", - "nativescript-dev-typescript": "~0.7.8", + "nativescript-dev-typescript": "next", "babel-traverse": "6.8.0", "babel-types": "6.8.1", "babylon": "6.8.0",