fix-next: navigation events' workflow in modal dialog scenarios (#5341)

tests/app/app/app.ts

@@ -141,4 +141,4 @@ else {
 
 console.log(`TIME TO LOAD APP: ${time} ms`);
 
-application.start({ moduleName: "app/mainPage" });
+application.run({ moduleName: "app/appRoot" });

tests/app/app/appRoot.xml

@@ -0,0 +1 @@
+<Frame defaultPage="app/mainPage" />

tests/app/app/mainPage.ts

@@ -1,9 +1,6 @@
 import { Page } from "tns-core-modules/ui/page";
 import * as trace from "tns-core-modules/trace";
 import * as tests from "../testRunner";
-import { Label } from "tns-core-modules/ui/label";
-import * as application from "tns-core-modules/application";
-import * as platform from "tns-core-modules/platform";
 
 trace.enable();
 trace.addCategories(trace.categories.Test + "," + trace.categories.Error);
@@ -18,46 +15,12 @@ trace.addCategories(trace.categories.Test + "," + trace.categories.Error);
 //    trace.categories.VisualTreeEvents
 // ));
 
-let page = new Page();
-page.id = "mainPage";
-
-page.on(Page.navigatedToEvent, onNavigatedTo);
-
 function runTests() {
     setTimeout(() => tests.runAll(''), 10);
 }
 
-function onNavigatedTo(args) {
-    let label = new Label();
-    label.text = "Running non-UI tests...";
-    page.content = label;
-    args.object.off(Page.navigatedToEvent, onNavigatedTo);
-
-    // Request permission to write test-results.xml file for API >= 23
-    // if (platform.isAndroid && parseInt(platform.device.sdkVersion) >= 23) {
-    //     let handler = (args: application.AndroidActivityRequestPermissionsEventData) => {
-    //         application.android.off(application.AndroidApplication.activityRequestPermissionsEvent, handler);
-    //         if (args.requestCode === 1234 && args.grantResults.length > 0 && args.grantResults[0] === android.content.pm.PackageManager.PERMISSION_GRANTED) {
-    //             runTests();
-    //         } else {
-    //             trace.write("Permission for write to external storage not granted!", trace.categories.Error, trace.messageType.error);
-    //         }
-    //     };
-
-    //     application.android.on(application.AndroidApplication.activityRequestPermissionsEvent, handler);
-
-    //     if ((<any>android.support.v4.content.ContextCompat).checkSelfPermission(application.android.currentContext, (<any>android).Manifest.permission.WRITE_EXTERNAL_STORAGE) !== android.content.pm.PackageManager.PERMISSION_GRANTED) {
-    //         (<any>android.support.v4.app.ActivityCompat).requestPermissions(application.android.currentContext, [(<any>android).Manifest.permission.WRITE_EXTERNAL_STORAGE], 1234);
-    //     } else {
-    //         runTests();
-    //     }
-    // } else {
-    //     runTests();
-    // }
+export function onNavigatedTo(args) {
+    args.object.off(Page.loadedEvent, onNavigatedTo);
 
     runTests();
 }
-
-export function createPage() {
-    return page;
-}

tests/app/app/mainPage.xml

@@ -0,0 +1,3 @@
+<Page navigatedTo="onNavigatedTo">
+    <Label text="Running non-UI tests..." />
+</Page>

tests/app/ui/page/page-tests-common.ts

@@ -19,6 +19,7 @@ import * as helper from "../helper";
 import { GridLayout } from "tns-core-modules/ui/layouts/grid-layout";
 import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout";
 import { View, PercentLength, Observable, unsetValue, EventData, isIOS } from "tns-core-modules/ui/core/view";
+import { Frame } from "tns-core-modules/ui/frame";
 import { Label } from "tns-core-modules/ui/label";
 import { Color } from "tns-core-modules/color";
 
@@ -538,6 +539,271 @@ export function test_WhenPageIsNavigatedToItCanShowAnotherPageAsModal() {
     masterPage.off(Page.navigatedToEvent, navigatedToEventHandler);
 }
 
+export function test_WhenModalPageShownHostPageNavigationEventsShouldNotBeRaised() {
+    let hostNavigatingToCount = 0;
+    let hostNavigatedToCount = 0;
+    let hostNavigatingFromCount = 0;
+    let hostNavigatedFromCount = 0;
+
+    let ready = false;
+
+    const modalCloseCallback = function (returnValue: any) {
+        ready = true;
+    }
+
+    const hostNavigatingToEventHandler = function () {
+        hostNavigatingToCount++;
+    };
+
+    const hostNavigatedToEventHandler = function () {
+        hostNavigatedToCount++;
+    };
+
+    const hostNavigatingFromEventHandler = function () {
+        hostNavigatingFromCount++;
+    };
+
+    const hostNavigatedFromEventHandler = function () {
+        hostNavigatedFromCount++;
+    };
+
+    const hostNavigatedToEventHandler2 = function(args: NavigatedData) {
+        const page = <Page>args.object;
+        page.off(Page.navigatedToEvent, hostNavigatedToEventHandler2);
+
+        const basePath = "ui/page/";
+        const entry: NavigationEntry = {
+            moduleName: basePath + "modal-page"
+        };
+
+        const modalPage = createViewFromEntry(entry) as Page;
+        page.showModal(modalPage, {}, modalCloseCallback, false, false);
+    }
+    
+    const masterPageFactory = function (): Page {
+        const masterPage = new Page();
+        masterPage.id = "masterPage_test_WhenModalPageShownHostPageNavigationEventsShouldNotBeRaised";
+        masterPage.on(Page.navigatingToEvent, hostNavigatingToEventHandler);
+        masterPage.on(Page.navigatedToEvent, hostNavigatedToEventHandler);
+        masterPage.on(Page.navigatedToEvent, hostNavigatedToEventHandler2);
+        masterPage.on(Page.navigatingFromEvent, hostNavigatingFromEventHandler);
+        masterPage.on(Page.navigatedFromEvent, hostNavigatedFromEventHandler);
+
+        const label = new Label();
+        label.text = "Text";
+        masterPage.content = label;
+        return masterPage;
+    };
+
+    helper.navigate(masterPageFactory);
+
+    TKUnit.waitUntilReady(() => ready);
+
+    // only raised by the initial navigation to the master page
+    TKUnit.assertTrue(hostNavigatingToCount === 1);
+    TKUnit.assertTrue(hostNavigatedToCount === 1);
+
+    TKUnit.assertTrue(hostNavigatingFromCount === 0);
+    TKUnit.assertTrue(hostNavigatedFromCount === 0);
+}
+
+export function test_WhenModalPageShownModalNavigationToEventsShouldBeRaised() {
+    let modalNavigatingToCount = 0;
+    let modalNavigatedToCount = 0;
+    let modalNavigatingFromCount = 0;
+    let modalNavigatedFromCount = 0;
+
+    let ready = false;
+
+    const modalCloseCallback = function (returnValue: any) {
+        ready = true;
+    }
+
+    const modalNavigatingToEventHandler = function () {
+        modalNavigatingToCount++;
+    };
+
+    const modalNavigatedToEventHandler = function (args: NavigatedData) {
+        modalNavigatedToCount++;
+
+        (args.object as View).closeModal();
+    };
+
+    const modalNavigatingFromEventHandler = function () {
+        modalNavigatingFromCount++;
+    };
+
+    const modalNavigatedFromEventHandler = function () {
+        modalNavigatedFromCount++;
+    };
+
+    const modalFrameShownModallyEventHandler = function(args) {
+        const basePath = "ui/page/";
+        const entry: NavigationEntry = {
+            moduleName: basePath + "modal-page"
+        };        
+        
+        const modalPage = createViewFromEntry(entry) as Page;
+        modalPage.on(Page.navigatingToEvent, modalNavigatingToEventHandler);
+        modalPage.on(Page.navigatedToEvent, modalNavigatedToEventHandler);
+        modalPage.on(Page.navigatingFromEvent, modalNavigatingFromEventHandler);
+        modalPage.on(Page.navigatedFromEvent, modalNavigatedFromEventHandler);
+
+        (args.object as Frame).navigate(() => modalPage);
+    }
+
+    let modalFrame;
+
+    const hostNavigatedToEventHandler = function(args) {
+        const page = <Page>args.object;
+        page.off(Page.navigatedToEvent, hostNavigatedToEventHandler);
+
+        modalFrame = new Frame();
+        modalFrame.on(Frame.shownModallyEvent, modalFrameShownModallyEventHandler);
+
+        page.showModal(modalFrame, {}, modalCloseCallback, false, false);
+    }
+    
+    const masterPageFactory = function (): Page {
+        const masterPage = new Page();
+        masterPage.id = "masterPage_test_WhenModalPageShownModalNavigationToEventsShouldBeRaised";
+        masterPage.on(Page.navigatedToEvent, hostNavigatedToEventHandler);
+
+        const label = new Label();
+        label.text = "Text";
+        masterPage.content = label;
+        return masterPage;
+    };
+
+    helper.navigate(masterPageFactory);
+
+    TKUnit.waitUntilReady(() => ready && !modalFrame.isLoaded);
+
+    // only raised by the initial show modal navigation
+    TKUnit.assertTrue(modalNavigatingToCount === 1);
+    TKUnit.assertTrue(modalNavigatedToCount === 1);
+
+    TKUnit.assertTrue(modalNavigatingFromCount === 0);
+    TKUnit.assertTrue(modalNavigatedFromCount === 0);
+}
+
+export function test_WhenModalFrameShownModalEventsRaisedOnRootModalFrame() {
+    let showingModallyCount = 0;
+    let shownModallyCount = 0;
+
+    let ready = false;
+
+    const modalCloseCallback = function (returnValue: any) {
+        ready = true;
+    }
+
+    const modalFrameShowingModallyEventHandler = function(args: ShownModallyData) {
+        showingModallyCount++;
+    }
+
+    const modalFrameShownModallyEventHandler = function(args: ShownModallyData) {
+        shownModallyCount++;
+
+        args.closeCallback("return value");
+    }
+
+    let modalFrame;
+
+    const hostNavigatedToEventHandler = function(args) {
+        const page = <Page>args.object;
+        page.off(Page.navigatedToEvent, hostNavigatedToEventHandler);
+
+        const basePath = "ui/page/";
+        const entry: NavigationEntry = {
+            moduleName: basePath + "modal-page"
+        };
+
+        const modalPage = createViewFromEntry(entry) as Page;
+
+        modalFrame = new Frame();
+        modalFrame.on(Frame.showingModallyEvent, modalFrameShowingModallyEventHandler);
+        modalFrame.on(Frame.shownModallyEvent, modalFrameShownModallyEventHandler);
+        modalFrame.navigate(() => modalPage);
+
+        page.showModal(modalFrame, {}, modalCloseCallback, false, false);
+    }
+    
+    const masterPageFactory = function (): Page {
+        const masterPage = new Page();
+        masterPage.id = "masterPage_test_WhenModalFrameShownModalEventsRaisedOnRootModalFrame";
+        masterPage.on(Page.navigatedToEvent, hostNavigatedToEventHandler);
+
+        const label = new Label();
+        label.text = "Text";
+        masterPage.content = label;
+        return masterPage;
+    };
+
+    helper.navigate(masterPageFactory);
+
+    TKUnit.waitUntilReady(() => ready && !modalFrame.isLoaded);
+
+    TKUnit.assertTrue(showingModallyCount === 1);
+    TKUnit.assertTrue(shownModallyCount === 1);
+}
+
+export function test_WhenModalPageShownShowModalEventsRaisedOnRootModalPage() {
+    let showingModallyCount = 0;
+    let shownModallyCount = 0;
+
+    let ready = false;
+
+    const modalCloseCallback = function (returnValue: any) {
+        ready = true;
+    }
+
+    const modalPageShowingModallyEventHandler = function(args: ShownModallyData) {
+        showingModallyCount++;
+    }
+
+    const modalPageShownModallyEventHandler = function(args: ShownModallyData) {
+        shownModallyCount++;
+
+        setTimeout(() => {
+            args.closeCallback("return value");
+        }, 0);
+    }
+
+    const hostNavigatedToEventHandler = function(args) {
+        const page = <Page>args.object;
+        page.off(Page.navigatedToEvent, hostNavigatedToEventHandler);
+
+        const basePath = "ui/page/";
+        const entry: NavigationEntry = {
+            moduleName: basePath + "modal-page"
+        };
+
+        const modalPage = createViewFromEntry(entry) as Page;
+        modalPage.on(Page.showingModallyEvent, modalPageShowingModallyEventHandler);
+        modalPage.on(Page.shownModallyEvent, modalPageShownModallyEventHandler);
+
+        page.showModal(modalPage, {}, modalCloseCallback, false, false);
+    }
+    
+    const masterPageFactory = function (): Page {
+        const masterPage = new Page();
+        masterPage.id = "masterPage_test_WhenModalPageShownShowModalEventsRaisedOnRootModalPage";
+        masterPage.on(Page.navigatedToEvent, hostNavigatedToEventHandler);
+
+        const label = new Label();
+        label.text = "Text";
+        masterPage.content = label;
+        return masterPage;
+    };
+
+    helper.navigate(masterPageFactory);
+
+    TKUnit.waitUntilReady(() => ready);
+
+    TKUnit.assertTrue(showingModallyCount === 1);
+    TKUnit.assertTrue(shownModallyCount === 1);
+}
+
 export function test_percent_width_and_height_support() {
     const testPage = new Page();
     testPage.id = "test_percent_width_and_height_support";

tests/package.json

@@ -6,10 +6,10 @@
   "nativescript": {
     "id": "org.nativescript.UnitTestApp",
     "tns-ios": {
-      "version": "3.2.0"
+      "version": "3.4.1"
     },
     "tns-android": {
-      "version": "3.2.0"
+      "version": "3.4.1"
     }
   },
   "dependencies": {