Merge pull request #1473 from NativeScript/transitions

Resolved #811: Page Navigation Transitions

apps/perf-tests/NavigationTest/app.ts

@@ -4,13 +4,23 @@ import navPageModule = require("../nav-page");
 import trace = require("trace");
 trace.enable();
 trace.setCategories(trace.categories.concat(
-    trace.categories.NativeLifecycle
-    , trace.categories.Navigation
+    trace.categories.NativeLifecycle,
+    trace.categories.Navigation,
+    //trace.categories.Animation,
+    trace.categories.Transition
 ));
 
 application.mainEntry = {
     create: function () {
-        return new navPageModule.NavPage(0);
+        return new navPageModule.NavPage({
+            index: 0,
+            backStackVisible: true,
+            clearHistory: false,
+            animated: true,
+            transition: 0,
+            curve: 0,
+            duration: 0,
+        });
     }
     //backstackVisible: false,
     //clearHistory: true

apps/perf-tests/NavigationTest/list-picker-page.ts

@@ -0,0 +1,21 @@
+import {Page, ShownModallyData, ListPicker} from "ui";
+
+var closeCallback: Function;
+var page: Page;
+var listPicker: ListPicker;
+
+export function onLoaded(args) {
+    page = <Page>args.object;
+    listPicker = page.getViewById<ListPicker>("listPicker");
+}
+
+export function onShownModally(args) {
+    closeCallback = args.closeCallback;
+
+    listPicker.items = args.context.items;
+    listPicker.selectedIndex = args.context.selectedIndex || 0;
+}
+
+export function onButtonTap() {
+    closeCallback(listPicker.selectedIndex);
+}

apps/perf-tests/NavigationTest/list-picker-page.xml

@@ -0,0 +1,6 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onLoaded" shownModally="onShownModally" style.backgroundColor="lightgray">
+  <StackLayout>
+    <ListPicker id="listPicker"/>
+    <Button text="Done" tap="onButtonTap"/>
+  </StackLayout>
+</Page>

apps/perf-tests/custom-transition.android.ts

@@ -0,0 +1,35 @@
+import transition = require("ui/transition");
+import platform = require("platform");
+
+var floatType = java.lang.Float.class.getField("TYPE").get(null);
+
+export class CustomTransition extends transition.Transition {
+    public createAndroidAnimator(transitionType: string): android.animation.Animator {
+        var scaleValues = java.lang.reflect.Array.newInstance(floatType, 2);
+        switch (transitionType) {
+            case transition.AndroidTransitionType.enter:
+            case transition.AndroidTransitionType.popEnter:
+                scaleValues[0] = 0;
+                scaleValues[1] = 1;
+                break;
+            case transition.AndroidTransitionType.exit:
+            case transition.AndroidTransitionType.popExit:
+                scaleValues[0] = 1;
+                scaleValues[1] = 0;
+                break;
+        }
+        var objectAnimators = java.lang.reflect.Array.newInstance(android.animation.Animator.class, 2);
+        objectAnimators[0] = android.animation.ObjectAnimator.ofFloat(null, "scaleX", scaleValues);
+        objectAnimators[1] = android.animation.ObjectAnimator.ofFloat(null, "scaleY", scaleValues);
+        var animatorSet = new android.animation.AnimatorSet();
+        animatorSet.playTogether(objectAnimators);
+
+        var duration = this.getDuration();
+        if (duration !== undefined) {
+            animatorSet.setDuration(duration);
+        }
+        animatorSet.setInterpolator(this.getCurve());
+
+        return animatorSet;
+    }
+}

apps/perf-tests/custom-transition.ios.ts

@@ -0,0 +1,26 @@
+import transition = require("ui/transition");
+import platform = require("platform");
+
+export class CustomTransition extends transition.Transition {
+    public animateIOSTransition(containerView: UIView, fromView: UIView, toView: UIView, operation: UINavigationControllerOperation, completion: (finished: boolean) => void): void {
+        toView.transform = CGAffineTransformMakeScale(0, 0);
+        fromView.transform = CGAffineTransformIdentity;
+
+        switch (operation) {
+            case UINavigationControllerOperation.UINavigationControllerOperationPush:
+                containerView.insertSubviewAboveSubview(toView, fromView);
+                break;
+            case UINavigationControllerOperation.UINavigationControllerOperationPop:
+                containerView.insertSubviewBelowSubview(toView, fromView);
+                break;
+        }
+
+        var duration = this.getDuration();
+        var curve = this.getCurve();
+        UIView.animateWithDurationAnimationsCompletion(duration, () => {
+            UIView.setAnimationCurve(curve);
+            toView.transform = CGAffineTransformIdentity;
+            fromView.transform = CGAffineTransformMakeScale(0, 0);
+        }, completion);
+    }
+}

apps/perf-tests/nav-page.ts

@@ -1,82 +1,194 @@
 import definition = require("controls-page");
-import frameModule = require("ui/frame");
-import pagesModule = require("ui/page");
-import stackLayoutModule = require("ui/layouts/stack-layout");
-import labelModule = require("ui/label");
-import buttonModule = require("ui/button");
-import textFieldModule = require("ui/text-field");
-import enums = require("ui/enums");
-import switchModule = require("ui/switch");
+import {View, Page, topmost as topmostFrame, NavigationTransition, Orientation, AnimationCurve, StackLayout, Button, Label, TextField, Switch, ListPicker, Slider} from "ui";
+import {Color} from "color";
+import platform = require("platform");
 
-export class NavPage extends pagesModule.Page implements definition.ControlsPage {
-    constructor(id: number) {
+var availableTransitions = ["default", "custom", "flip", "flipRight", "flipLeft", "slide", "slideLeft", "slideRight", "slideTop", "slideBottom", "fade"];
+if (platform.device.os === platform.platformNames.ios) {
+    availableTransitions = availableTransitions.concat(["curl", "curlUp", "curlDown"]);
+}
+else {
+    availableTransitions = availableTransitions.concat(["explode"]);
+}
+
+var availableCurves = [AnimationCurve.easeInOut, AnimationCurve.easeIn, AnimationCurve.easeOut, AnimationCurve.linear];
+
+export interface Context {
+    index: number;
+    backStackVisible: boolean;
+    clearHistory: boolean;
+    animated: boolean;
+    transition: number;
+    curve: number;
+    duration: number;
+}
+
+export class NavPage extends Page implements definition.ControlsPage {
+    constructor(context: Context) {
         super();
 
-        this.id = "NavPage " + id;
+        var that = this;
+        that.on(View.loadedEvent, (args) => {
+            console.log(`${args.object}.loadedEvent`);
+            if (topmostFrame().android) {
+                topmostFrame().android.cachePagesOnNavigate = true;
+            }
+        });
+        that.on(View.unloadedEvent, (args) => {
+            console.log(`${args.object}.unloadedEvent`);
+        });
+        that.on(Page.navigatingFromEvent, (args) => {
+            console.log(`${args.object}.navigatingFromEvent`);
+        });
+        that.on(Page.navigatedFromEvent, (args) => {
+            console.log(`${args.object}.navigatedFromEvent`);
+        });
+        that.on(Page.navigatingToEvent, (args) => {
+            console.log(`${args.object}.navigatingToEvent`);
+        });
+        that.on(Page.navigatedToEvent, (args) => {
+            console.log(`${args.object}.navigatedToEvent`);
+        });
 
-        var stackLayout = new stackLayoutModule.StackLayout();
-        stackLayout.orientation = enums.Orientation.vertical;
+        this.id = "" + context.index;
 
-        var goBackButton = new buttonModule.Button();
-        goBackButton.text = "<-";
-        goBackButton.on(buttonModule.Button.tapEvent, function () {
-            frameModule.topmost().goBack();
+        var bg = new Color(255, Math.round(Math.random() * 255), Math.round(Math.random() * 255), Math.round(Math.random() * 255));
+        this.style.backgroundColor = bg;
+
+        var stackLayout = new StackLayout();
+        stackLayout.orientation = Orientation.vertical;
+
+        var goBackButton = new Button();
+        goBackButton.text = "<=";
+        goBackButton.style.fontSize = 18;
+        goBackButton.on(Button.tapEvent, () => {
+            topmostFrame().goBack();
         });
         stackLayout.addChild(goBackButton);
 
-        this.on(pagesModule.Page.navigatedToEvent, function () {
+        this.on(Page.navigatedToEvent, function () {
             //console.log("Navigated to NavPage " + id + "; backStack.length: " + frameModule.topmost().backStack.length);
-            goBackButton.isEnabled = frameModule.topmost().canGoBack();
+            goBackButton.isEnabled = topmostFrame().canGoBack();
         });
 
-        var stateLabel = new labelModule.Label();
-        stateLabel.text = "NavPage " + id;
+        var stateLabel = new Label();
+        stateLabel.text = `${this.id} (${(<any>bg)._hex})`;
         stackLayout.addChild(stateLabel);
 
-        var textField = new textFieldModule.TextField();
+        var textField = new TextField();
         textField.text = "";
         stackLayout.addChild(textField);
 
-        var changeStateButton = new buttonModule.Button();
+        var changeStateButton = new Button();
         changeStateButton.text = "Click me!"
         var clickCount = 0;
-        changeStateButton.on(buttonModule.Button.tapEvent, () => {
-            //stateLabel.text = "<<<CHANGED STATE>>>";
-            //textField.text = "<<<CHANGED STATE>>>";
+        changeStateButton.on(Button.tapEvent, () => {
             changeStateButton.text = (clickCount++).toString();
         });
         stackLayout.addChild(changeStateButton);
 
-        var optionsLayout = new stackLayoutModule.StackLayout();
+        var optionsLayout = new StackLayout();
 
-        var addToBackStackLabel = new labelModule.Label();
+        var addToBackStackLabel = new Label();
         addToBackStackLabel.text = "backStackVisible";
         optionsLayout.addChild(addToBackStackLabel);
 
-        var addToBackStackSwitch = new switchModule.Switch();
-        addToBackStackSwitch.checked = true;
+        var addToBackStackSwitch = new Switch();
+        addToBackStackSwitch.checked = context.backStackVisible;
         optionsLayout.addChild(addToBackStackSwitch);
 
-        var clearHistoryLabel = new labelModule.Label();
+        var clearHistoryLabel = new Label();
         clearHistoryLabel.text = "clearHistory";
         optionsLayout.addChild(clearHistoryLabel);
 
-        var clearHistorySwitch = new switchModule.Switch();
-        clearHistorySwitch.checked = false;
+        var clearHistorySwitch = new Switch();
+        clearHistorySwitch.checked = context.clearHistory;
         optionsLayout.addChild(clearHistorySwitch);
 
+        var animatedLabel = new Label();
+        animatedLabel.text = "animated";
+        optionsLayout.addChild(animatedLabel);
+
+        var animatedSwitch = new Switch();
+        animatedSwitch.checked = context.animated;
+        optionsLayout.addChild(animatedSwitch);
+
+        var transitionButton = new Button();
+        transitionButton.text = availableTransitions[context.transition];
+        transitionButton.on("tap", () => {
+            that.showModal("perf-tests/NavigationTest/list-picker-page", { items: availableTransitions, selectedIndex: context.transition }, (selectedIndex: number) => {
+                context.transition = selectedIndex;
+                transitionButton.text = availableTransitions[context.transition];
+            }, true);
+        });
+        optionsLayout.addChild(transitionButton);
+
+        var curveButton = new Button();
+        curveButton.text = availableCurves[context.curve];
+        curveButton.on(Button.tapEvent, () => {
+            that.showModal("perf-tests/NavigationTest/list-picker-page", { items: availableCurves, selectedIndex: context.curve }, (selectedIndex: number) => {
+                context.curve = selectedIndex;
+                curveButton.text = availableCurves[context.curve]
+            }, true);
+        });
+        optionsLayout.addChild(curveButton);
+
+        var durationLabel = new Label();
+        durationLabel.text = "Duration";
+        optionsLayout.addChild(durationLabel);
+
+        var durationSlider = new Slider();
+        durationSlider.minValue = 0;
+        durationSlider.maxValue = 10000;
+        durationSlider.value = context.duration;
+        optionsLayout.addChild(durationSlider);
+
         stackLayout.addChild(optionsLayout);
 
-        var forwardButton = new buttonModule.Button();
-        forwardButton.text = "->";
-        forwardButton.on(buttonModule.Button.tapEvent, function () {
+        var forwardButton = new Button();
+        forwardButton.text = "=>";
+        forwardButton.style.fontSize = 18;
+        forwardButton.on(Button.tapEvent, () => {
             var pageFactory = function () {
-                return new NavPage(id + 1);
+                return new NavPage({
+                    index: context.index + 1,
+                    backStackVisible: addToBackStackSwitch.checked,
+                    clearHistory: clearHistorySwitch.checked,
+                    animated: animatedSwitch.checked,
+                    transition: context.transition,
+                    curve: context.curve,
+                    duration: durationSlider.value,
+                });
             };
-            frameModule.topmost().navigate({
+
+            var navigationTransition: NavigationTransition;
+            if (context.transition) {// Different from default
+                var transitionName = availableTransitions[context.transition];
+                var duration = durationSlider.value !== 0 ? durationSlider.value : undefined;
+                var curve = context.curve ? availableCurves[context.curve] : undefined;
+
+                if (transitionName === "custom") {
+                    var customTransitionModule = require("./custom-transition");
+                    var customTransition = new customTransitionModule.CustomTransition(duration, curve);
+                    navigationTransition = {
+                        transition: customTransition
+                    };
+                }
+                else {
+                    navigationTransition = {
+                        transition: transitionName,
+                        duration: duration,
+                        curve: curve
+                    };
+                }
+            }
+
+            topmostFrame().navigate({
                 create: pageFactory,
                 backstackVisible: addToBackStackSwitch.checked,
-                clearHistory: clearHistorySwitch.checked
+                clearHistory: clearHistorySwitch.checked,
+                animated: animatedSwitch.checked,
+                navigationTransition: navigationTransition,
             });
         });
         stackLayout.addChild(forwardButton);

apps/tab-view-demo/mainPage.ts

@@ -46,7 +46,15 @@ export function createPage() {
             stackLayout.addChild(navigateToAnotherPageButton);
             navigateToAnotherPageButton.on(buttonModule.Button.tapEvent, function () {
                 var pageFactory = function () {
-                    return new navPageModule.NavPage(0);
+                    return new navPageModule.NavPage({
+                        index: 0,
+                        backStackVisible: true,
+                        clearHistory: false,
+                        animated: true,
+                        transition: 0,
+                        curve: 0,
+                        duration: 0,
+                    });
                 };
                 frameModule.topmost().navigate(pageFactory);
             });

apps/tests/app/mainPage.ts

@@ -7,6 +7,7 @@ trace.addCategories(trace.categories.Test + "," + trace.categories.Error);
 
 let started = false;
 let page = new Page();
+page.id = "mainPage";
 
 page.on(Page.navigatedToEvent, function () {
     if (!started) {

apps/tests/navigation-tests.ts

@@ -1,113 +0,0 @@
-import TKUnit = require("./TKUnit");
-import pageModule = require("ui/page");
-import frame = require("ui/frame");
-import { Page } from "ui/page";
-
-export var test_backstackVisible = function() {
-    var pageFactory = function(): pageModule.Page {
-        return new pageModule.Page();
-    };
-
-    var mainTestPage = frame.topmost().currentPage;
-    frame.topmost().navigate({ create: pageFactory });
-    TKUnit.waitUntilReady(() => { return frame.topmost().currentPage !== mainTestPage; });
-
-    // page1 should not be added to the backstack
-    var page0 = frame.topmost().currentPage;
-    frame.topmost().navigate({ create: pageFactory, backstackVisible: false });
-    TKUnit.waitUntilReady(() => { return frame.topmost().currentPage !== page0; });
-
-    var page1 = frame.topmost().currentPage;
-    frame.topmost().navigate({ create: pageFactory });
-    TKUnit.waitUntilReady(() => { return frame.topmost().currentPage !== page1; });
-
-    var page2 = frame.topmost().currentPage;
-    frame.topmost().goBack();
-    TKUnit.waitUntilReady(() => { return frame.topmost().currentPage !== page2; });
-
-    // From page2 we have to go directly to page0, skipping page1.
-    TKUnit.assert(frame.topmost().currentPage === page0, "Page 1 should be skipped when going back.");
-
-    frame.topmost().goBack();
-    TKUnit.waitUntilReady(() => { return frame.topmost().currentPage === mainTestPage; });
-}
-
-export var test_backToEntry = function() {
-    let page = (tag) => () => {
-        var p = new Page();
-        p["tag"] = tag;
-        return p;
-    }
-    let topmost = frame.topmost();
-    let wait = tag => TKUnit.waitUntilReady(() => topmost.currentPage["tag"] === tag, 1);
-    let navigate = tag => {
-        topmost.navigate({ create: page(tag) });
-        wait(tag)
-    }
-    let back = pages => {
-        topmost.goBack(topmost.backStack[topmost.backStack.length - pages]);
-    }
-    let currentPageMustBe = tag => {
-        wait(tag); // TODO: Add a timeout...
-        TKUnit.assert(topmost.currentPage["tag"] === tag, "Expected current page to be " + tag + " it was " + topmost.currentPage["tag"] + " instead."); 
-    }
-
-    navigate("page1");
-    navigate("page2");
-    navigate("page3");
-    navigate("page4");
-
-    currentPageMustBe("page4");
-    back(2);
-    currentPageMustBe("page2");
-    back(1);
-    currentPageMustBe("page1");
-    navigate("page1.1");
-    navigate("page1.2");
-    currentPageMustBe("page1.2");
-    back(1);
-    currentPageMustBe("page1.1");
-    back(1);
-    currentPageMustBe("page1");
-    back(1);
-}
-
-// Clearing the history messes up the tests app.
-export var test_ClearHistory = function () {
-    var pageFactory = function(): pageModule.Page {
-        return new pageModule.Page();
-    };
-
-    var mainTestPage = frame.topmost().currentPage;
-    var mainPageFactory = function(): pageModule.Page {
-        return mainTestPage;
-    };
-
-    var currentPage: pageModule.Page;
-
-    currentPage = frame.topmost().currentPage;
-    frame.topmost().navigate({ create: pageFactory });
-    TKUnit.waitUntilReady(() => { return frame.topmost().currentPage !== currentPage; });
-
-    currentPage = frame.topmost().currentPage;
-    frame.topmost().navigate({ create: pageFactory });
-    TKUnit.waitUntilReady(() => { return frame.topmost().currentPage !== currentPage; });
-
-    currentPage = frame.topmost().currentPage;
-    frame.topmost().navigate({ create: pageFactory });
-    TKUnit.waitUntilReady(() => { return frame.topmost().currentPage !== currentPage; });
-
-    TKUnit.assert(frame.topmost().canGoBack(), "Frame should be able to go back.");
-    TKUnit.assert(frame.topmost().backStack.length === 3, "Back stack should have 3 entries.");
-
-    // Navigate with clear history.
-    currentPage = frame.topmost().currentPage;
-    frame.topmost().navigate({ create: pageFactory, clearHistory: true });
-    TKUnit.waitUntilReady(() => { return frame.topmost().currentPage !== currentPage; });
-
-    TKUnit.assert(!frame.topmost().canGoBack(), "Frame should NOT be able to go back.");
-    TKUnit.assert(frame.topmost().backStack.length === 0, "Back stack should have 0 entries.");
-
-    frame.topmost().navigate({ create: mainPageFactory });
-    TKUnit.waitUntilReady(() => { return frame.topmost().currentPage === mainTestPage; });
-}

apps/tests/navigation/custom-transition.android.ts

@@ -0,0 +1,39 @@
+import transition = require("ui/transition");
+import platform = require("platform");
+
+var floatType = java.lang.Float.class.getField("TYPE").get(null);
+
+export class CustomTransition extends transition.Transition {
+    constructor(duration: number, curve: any) {
+        super(duration, curve);
+    }
+
+    public createAndroidAnimator(transitionType: string): android.animation.Animator {
+        var scaleValues = java.lang.reflect.Array.newInstance(floatType, 2);
+        switch (transitionType) {
+            case transition.AndroidTransitionType.enter:
+            case transition.AndroidTransitionType.popEnter:
+                scaleValues[0] = 0;
+                scaleValues[1] = 1;
+                break;
+            case transition.AndroidTransitionType.exit:
+            case transition.AndroidTransitionType.popExit:
+                scaleValues[0] = 1;
+                scaleValues[1] = 0;
+                break;
+        }
+        var objectAnimators = java.lang.reflect.Array.newInstance(android.animation.Animator.class, 2);
+        objectAnimators[0] = android.animation.ObjectAnimator.ofFloat(null, "scaleX", scaleValues);
+        objectAnimators[1] = android.animation.ObjectAnimator.ofFloat(null, "scaleY", scaleValues);
+        var animatorSet = new android.animation.AnimatorSet();
+        animatorSet.playTogether(objectAnimators);
+
+        var duration = this.getDuration();
+        if (duration !== undefined) {
+            animatorSet.setDuration(duration);
+        }
+        animatorSet.setInterpolator(this.getCurve());
+
+        return animatorSet;
+    }
+}

apps/tests/navigation/custom-transition.ios.ts

@@ -0,0 +1,30 @@
+import transition = require("ui/transition");
+import platform = require("platform");
+
+export class CustomTransition extends transition.Transition {
+    constructor(duration: number, curve: any) {
+        super(duration, curve);
+    }
+
+    public animateIOSTransition(containerView: UIView, fromView: UIView, toView: UIView, operation: UINavigationControllerOperation, completion: (finished: boolean) => void): void {
+        toView.transform = CGAffineTransformMakeScale(0, 0);
+        fromView.transform = CGAffineTransformIdentity;
+
+        switch (operation) {
+            case UINavigationControllerOperation.UINavigationControllerOperationPush:
+                containerView.insertSubviewAboveSubview(toView, fromView);
+                break;
+            case UINavigationControllerOperation.UINavigationControllerOperationPop:
+                containerView.insertSubviewBelowSubview(toView, fromView);
+                break;
+        }
+
+        var duration = this.getDuration();
+        var curve = this.getCurve();
+        UIView.animateWithDurationAnimationsCompletion(duration, () => {
+            UIView.setAnimationCurve(curve);
+            toView.transform = CGAffineTransformIdentity;
+            fromView.transform = CGAffineTransformMakeScale(0, 0);
+        }, completion);
+    }
+}

apps/tests/navigation/navigation-tests.ts

@@ -0,0 +1,183 @@
+import TKUnit = require("../TKUnit");
+import platform = require("platform");
+import transitionModule = require("ui/transition");
+import {Frame, Page, topmost as topmostFrame, NavigationEntry, NavigationTransition, AnimationCurve, WrapLayout, Button} from "ui";
+import color = require("color");
+import helper = require("../ui/helper");
+import utils = require("utils/utils");
+import trace = require("trace");
+
+// Creates a random colorful page full of meaningless stuff.
+var pageFactory = function(): Page {
+    var page = new Page();
+    page.style.backgroundColor = new color.Color(255, Math.round(Math.random() * 255), Math.round(Math.random() * 255), Math.round(Math.random() * 255));
+    return page;
+};
+
+function _testTransition(navigationTransition: NavigationTransition) {
+    var testId = `Transition[${JSON.stringify(navigationTransition)}]`;
+    trace.write(`Testing ${testId}`, trace.categories.Test);
+    var navigationEntry: NavigationEntry = {
+        create: function (): Page {
+            var page = new Page();
+            page.id = testId;
+            page.style.backgroundColor = new color.Color(255, Math.round(Math.random() * 255), Math.round(Math.random() * 255), Math.round(Math.random() * 255));
+            return page;
+        },
+        animated: true,
+        navigationTransition: navigationTransition
+    }
+
+    helper.navigateWithEntry(navigationEntry);
+    TKUnit.wait(0.100);
+    helper.goBack();
+    TKUnit.wait(0.100);
+    utils.GC();
+}
+
+// Extremely slow. Run only if needed.
+export var test_Transitions = function () {
+    helper.navigate(() => {
+        var page = new Page();
+        page.id = "TransitionsTestPage_MAIN"
+        page.style.backgroundColor = new color.Color(255, Math.round(Math.random() * 255), Math.round(Math.random() * 255), Math.round(Math.random() * 255));
+        return page;
+    });
+
+    var transitions;
+    if (platform.device.os === platform.platformNames.ios) {
+        transitions = ["curl"];
+    }
+    else {
+        var _sdkVersion = parseInt(platform.device.sdkVersion);
+        transitions = _sdkVersion >= 21 ? ["explode"] : [];
+    }
+    transitions = transitions.concat(["fade", "flip", "slide"]);
+    var durations = [undefined, 500];
+    var curves = [undefined, AnimationCurve.easeIn];
+
+    // Built-in transitions
+    var t, d, c;
+    var tlen = transitions.length;
+    var dlen = durations.length;
+    var clen = curves.length;
+    for (t = 0; t < tlen; t++) {
+        for (d = 0; d < dlen; d++) {
+            for (c = 0; c < clen; c++) {
+                _testTransition({
+                    transition: transitions[t],
+                    duration: durations[d],
+                    curve: curves[c]
+                });
+            }
+        }
+    }
+
+    // Custom transition
+    var customTransitionModule = require("./custom-transition");
+    var customTransition = new customTransitionModule.CustomTransition();
+    _testTransition({transition: customTransition});
+
+    helper.goBack();
+}
+
+export var test_backstackVisible = function () {
+    var mainTestPage = topmostFrame().currentPage;
+    topmostFrame().navigate({ create: pageFactory });
+    TKUnit.waitUntilReady(() => { return topmostFrame().currentPage !== mainTestPage; });
+
+    // page1 should not be added to the backstack
+    var page0 = topmostFrame().currentPage;
+    topmostFrame().navigate({ create: pageFactory, backstackVisible: false });
+    TKUnit.waitUntilReady(() => { return topmostFrame().currentPage !== page0; });
+
+    var page1 = topmostFrame().currentPage;
+    topmostFrame().navigate({ create: pageFactory });
+    TKUnit.waitUntilReady(() => { return topmostFrame().currentPage !== page1; });
+
+    var page2 = topmostFrame().currentPage;
+    topmostFrame().goBack();
+    TKUnit.waitUntilReady(() => { return topmostFrame().currentPage !== page2; });
+
+    // From page2 we have to go directly to page0, skipping page1.
+    TKUnit.assert(topmostFrame().currentPage === page0, "Page 1 should be skipped when going back.");
+
+    topmostFrame().goBack();
+    TKUnit.waitUntilReady(() => { return topmostFrame().currentPage === mainTestPage; });
+}
+
+export var test_backToEntry = function () {
+    let page = (tag) => () => {
+        var p = new Page();
+        p["tag"] = tag;
+        return p;
+    }
+    let topmost = topmostFrame();
+    let wait = tag => TKUnit.waitUntilReady(() => topmost.currentPage["tag"] === tag, 1);
+    let navigate = tag => {
+        topmost.navigate({ create: page(tag) });
+        wait(tag)
+    }
+    let back = pages => {
+        topmost.goBack(topmost.backStack[topmost.backStack.length - pages]);
+    }
+    let currentPageMustBe = tag => {
+        wait(tag); // TODO: Add a timeout...
+        TKUnit.assert(topmost.currentPage["tag"] === tag, "Expected current page to be " + tag + " it was " + topmost.currentPage["tag"] + " instead.");
+    }
+
+    navigate("page1");
+    navigate("page2");
+    navigate("page3");
+    navigate("page4");
+
+    currentPageMustBe("page4");
+    back(2);
+    currentPageMustBe("page2");
+    back(1);
+    currentPageMustBe("page1");
+    navigate("page1.1");
+    navigate("page1.2");
+    currentPageMustBe("page1.2");
+    back(1);
+    currentPageMustBe("page1.1");
+    back(1);
+    currentPageMustBe("page1");
+    back(1);
+}
+
+// Clearing the history messes up the tests app.
+export var test_ClearHistory = function () {
+    var mainTestPage = topmostFrame().currentPage;
+    var mainPageFactory = function (): Page {
+        return mainTestPage;
+    };
+
+    var currentPage: Page;
+
+    currentPage = topmostFrame().currentPage;
+    topmostFrame().navigate({ create: pageFactory });
+    TKUnit.waitUntilReady(() => { return topmostFrame().currentPage !== currentPage; });
+
+    currentPage = topmostFrame().currentPage;
+    topmostFrame().navigate({ create: pageFactory });
+    TKUnit.waitUntilReady(() => { return topmostFrame().currentPage !== currentPage; });
+
+    currentPage = topmostFrame().currentPage;
+    topmostFrame().navigate({ create: pageFactory });
+    TKUnit.waitUntilReady(() => { return topmostFrame().currentPage !== currentPage; });
+
+    TKUnit.assert(topmostFrame().canGoBack(), "Frame should be able to go back.");
+    TKUnit.assert(topmostFrame().backStack.length === 3, "Back stack should have 3 entries.");
+
+    // Navigate with clear history.
+    currentPage = topmostFrame().currentPage;
+    topmostFrame().navigate({ create: pageFactory, clearHistory: true });
+    TKUnit.waitUntilReady(() => { return topmostFrame().currentPage !== currentPage; });
+
+    TKUnit.assert(!topmostFrame().canGoBack(), "Frame should NOT be able to go back.");
+    TKUnit.assert(topmostFrame().backStack.length === 0, "Back stack should have 0 entries.");
+
+    topmostFrame().navigate({ create: mainPageFactory });
+    TKUnit.waitUntilReady(() => { return topmostFrame().currentPage === mainTestPage; });
+}

apps/tests/testRunner.ts

@@ -92,15 +92,16 @@ if (!isRunningOnEmulator()) {
 }
 
 // Navigation tests should always be last.
-allTests["NAVIGATION"] = require("./navigation-tests");
+allTests["NAVIGATION"] = require("./navigation/navigation-tests");
 
 var testsWithLongDelay = {
+    test_Transitions: 3 * 60 * 1000,
     testLocation: 10000,
     testLocationOnce: 10000,
     testLocationOnceMaximumAge: 10000,
     //web-view-tests
     testLoadExistingUrl: 10000,
-    testLoadInvalidUrl: 10000,
+    testLoadInvalidUrl: 10000
 }
 
 var running = false;

apps/tests/ui/helper.ts

@@ -207,22 +207,25 @@ export function buildUIWithWeakRefAndInteract<T extends view.View>(createFunc: (
 export function navigate(pageFactory: () => page.Page, navigationContext?: any) {
     var currentPage = frame.topmost().currentPage;
     frame.topmost().navigate({ create: pageFactory, animated: false, context: navigationContext });
-    TKUnit.waitUntilReady(() => { return frame.topmost().currentPage !== currentPage; });
+    TKUnit.waitUntilReady(() => { return frame.topmost().currentPage !== currentPage && frame.topmost().currentPage.isLoaded && !currentPage.isLoaded; });
 }
 
 export function navigateToModule(moduleName: string, context?: any) {
     var currentPage = frame.topmost().currentPage;
     frame.topmost().navigate({ moduleName: moduleName, context: context, animated: false });
-    TKUnit.waitUntilReady(() => { return frame.topmost().currentPage !== currentPage; });
-    TKUnit.assert(frame.topmost().currentPage.isLoaded, "Current page should be loaded!");
+    TKUnit.waitUntilReady(() => { return frame.topmost().currentPage !== currentPage && frame.topmost().currentPage.isLoaded && !currentPage.isLoaded; });
+}
+
+export function navigateWithEntry(navigationEntry: frame.NavigationEntry) {
+    var currentPage = frame.topmost().currentPage;
+    frame.topmost().navigate(navigationEntry);
+    TKUnit.waitUntilReady(() => { return frame.topmost().currentPage !== currentPage && frame.topmost().currentPage.isLoaded && !currentPage.isLoaded; });
 }
 
 export function goBack(): void {
     var currentPage = frame.topmost().currentPage;
     frame.topmost().goBack();
-    TKUnit.waitUntilReady(() => { return frame.topmost().currentPage !== currentPage; });
-    TKUnit.assert(frame.topmost().currentPage.isLoaded, "Current page should be loaded!");
-    TKUnit.assert(!currentPage.isLoaded, "Previous page should be unloaded!");
+    TKUnit.waitUntilReady(() => { return frame.topmost().currentPage !== currentPage && frame.topmost().currentPage.isLoaded && !currentPage.isLoaded; });
 }
 
 export function assertAreClose(actual: number, expected: number, message: string): void {

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

@@ -28,6 +28,7 @@ import stackLayoutModule = require("ui/layouts/stack-layout");
 import helper = require("../helper");
 import view = require("ui/core/view");
 import platform = require("platform");
+import observable = require("data/observable");
 
 export function addLabelToPage(page: PageModule.Page, text?: string) {
     var label = new LabelModule.Label();
@@ -59,13 +60,9 @@ export function test_AfterPageLoaded_is_called_NativeInstance_is_created() {
 
     helper.navigate(pageFactory);
 
-    try {
-        TKUnit.assert(nativeInstanceCreated, "Expected: true, Actual: " + nativeInstanceCreated);
-    }
-    finally {
-        page.off(view.View.loadedEvent, handler);
-        helper.goBack();
-    }
+    TKUnit.assert(nativeInstanceCreated, "Expected: true, Actual: " + nativeInstanceCreated);
+    page.off(view.View.loadedEvent, handler);
+    helper.goBack();
 }
 
 export function test_PageLoaded_is_called_once() {
@@ -96,14 +93,10 @@ export function test_PageLoaded_is_called_once() {
 
     helper.navigate(pageFactory2);
 
-    try {
-        TKUnit.assert(loaded === 1, "Expected: 1, Actual: " + loaded);
-    }
-    finally {
-        page2.off(view.View.loadedEvent, handler);
-        helper.goBack();
-        helper.goBack();
-    }
+    TKUnit.assert(loaded === 1, "Expected: 1, Actual: " + loaded);
+    page2.off(view.View.loadedEvent, handler);
+    helper.goBack();
+    helper.goBack();
 }
 
 export function test_NavigateToNewPage() {
@@ -147,7 +140,15 @@ export function test_NavigateToNewPage() {
     TKUnit.assert(testPage._isAddedToNativeVisualTree === false, "Page._isAddedToNativeVisualTree should become false after navigating back");
 }
 
-export function test_PageNavigation_EventSequence() {
+export function test_PageNavigation_EventSequence_WithTransition() {
+    _test_PageNavigation_EventSequence(true);
+}
+
+export function test_PageNavigation_EventSequence_WithoutTransition() {
+    _test_PageNavigation_EventSequence(false);
+}
+
+function _test_PageNavigation_EventSequence(withTransition: boolean) {
     var testPage: PageModule.Page;
     var context = { property: "this is the context" };
     var eventSequence = [];
@@ -160,13 +161,15 @@ export function test_PageNavigation_EventSequence() {
             TKUnit.assertEqual(data.context, context, "navigatingTo: navigationContext");
         });
 
-        testPage.on(PageModule.Page.loadedEvent, function (data) {
+        testPage.on(PageModule.Page.loadedEvent, function (data: observable.EventData) {
             eventSequence.push("loaded");
+            TKUnit.assertNotEqual(FrameModule.topmost().currentPage, data.object);
         });
 
         testPage.on(PageModule.Page.navigatedToEvent, function (data: PageModule.NavigatedData) {
             eventSequence.push("navigatedTo");
             TKUnit.assertEqual(data.context, context, "navigatedTo : navigationContext");
+            TKUnit.assertEqual(FrameModule.topmost().currentPage, data.object);
         });
 
         testPage.on(PageModule.Page.navigatingFromEvent, function (data: PageModule.NavigatedData) {
@@ -186,7 +189,23 @@ export function test_PageNavigation_EventSequence() {
         return testPage;
     };
 
-    helper.navigate(pageFactory, context);
+    if (withTransition) {
+        var navigationTransition: FrameModule.NavigationTransition = {
+            transition: "slide",
+            duration: 1000,
+        };
+        var navigationEntry: FrameModule.NavigationEntry = {
+            create: pageFactory,
+            context: context,
+            animated: true,
+            navigationTransition: navigationTransition
+        }
+        helper.navigateWithEntry(navigationEntry);
+    }
+    else {
+        helper.navigate(pageFactory, context);
+    }
+
     helper.goBack();
 
     var expectedEventSequence = ["navigatingTo", "loaded", "navigatedTo", "navigatingFrom", "navigatedFrom", "unloaded"];
@@ -218,13 +237,9 @@ export function test_NavigateTo_WithContext() {
     // </snippet>
     TKUnit.waitUntilReady(() => { return topFrame.currentPage !== currentPage });
 
-    try {
-        var actualContextValue = testPage.navigationContext;
-        TKUnit.assert(actualContextValue === "myContext", "Expected: myContext" + ", Actual: " + actualContextValue);
-    }
-    finally {
-        helper.goBack();
-    }
+    var actualContextValue = testPage.navigationContext;
+    TKUnit.assert(actualContextValue === "myContext", "Expected: myContext" + ", Actual: " + actualContextValue);
+    helper.goBack();
 
     TKUnit.assert(testPage.navigationContext === undefined, "Navigation context should be cleared on navigating back");
 }
@@ -239,13 +254,9 @@ export function test_FrameBackStack_WhenNavigatingForwardAndBack() {
     helper.navigate(pageFactory);
 
     var topFrame = FrameModule.topmost();
-    try {
-        TKUnit.assert(topFrame.backStack.length === 1, "Expected: 1, Actual: " + topFrame.backStack.length);
-        TKUnit.assert(topFrame.canGoBack(), "We should can go back.");
-    }
-    finally {
-        helper.goBack();
-    }
+    TKUnit.assert(topFrame.backStack.length === 1, "Expected: 1, Actual: " + topFrame.backStack.length);
+    TKUnit.assert(topFrame.canGoBack(), "We should can go back.");
+    helper.goBack();
 
     TKUnit.assert(topFrame.backStack.length === 0, "Expected: 0, Actual: " + topFrame.backStack.length);
     TKUnit.assert(topFrame.canGoBack() === false, "canGoBack should return false.");
@@ -253,44 +264,31 @@ export function test_FrameBackStack_WhenNavigatingForwardAndBack() {
 
 export function test_LoadPageFromModule() {
     helper.navigateToModule("ui/page/test-page-module");
-    try {
-        var topFrame = FrameModule.topmost();
-        TKUnit.assert(topFrame.currentPage.content instanceof LabelModule.Label, "Content of the test page should be a Label created within test-page-module.");
-        var testLabel = <LabelModule.Label>topFrame.currentPage.content;
-        TKUnit.assert(testLabel.text === "Label created within a page module.");
-    }
-    finally {
-        helper.goBack();
-    }
+    var topFrame = FrameModule.topmost();
+    TKUnit.assert(topFrame.currentPage.content instanceof LabelModule.Label, "Content of the test page should be a Label created within test-page-module.");
+    var testLabel = <LabelModule.Label>topFrame.currentPage.content;
+    TKUnit.assert(testLabel.text === "Label created within a page module.");
+    helper.goBack();
 }
 
 export function test_LoadPageFromDeclarativeWithCSS() {
     helper.navigateToModule("ui/page/test-page-declarative-css");
-    try {
-        var topFrame = FrameModule.topmost();
-        TKUnit.assert(topFrame.currentPage.content instanceof LabelModule.Label, "Content of the test page should be a Label created within test-page-module-css.");
-        var testLabel = <LabelModule.Label>topFrame.currentPage.content;
-        TKUnit.assert(testLabel.text === "Label created within a page declarative file with css.");
-        TKUnit.assert(testLabel.style.backgroundColor.hex === "#ff00ff00", "Expected: #ff00ff00, Actual: " + testLabel.style.backgroundColor.hex);
-    }
-    finally {
-        helper.goBack();
-    }
-
+    var topFrame = FrameModule.topmost();
+    TKUnit.assert(topFrame.currentPage.content instanceof LabelModule.Label, "Content of the test page should be a Label created within test-page-module-css.");
+    var testLabel = <LabelModule.Label>topFrame.currentPage.content;
+    TKUnit.assert(testLabel.text === "Label created within a page declarative file with css.");
+    TKUnit.assert(testLabel.style.backgroundColor.hex === "#ff00ff00", "Expected: #ff00ff00, Actual: " + testLabel.style.backgroundColor.hex);
+    helper.goBack();
 }
 
 export function test_LoadPageFromModuleWithCSS() {
     helper.navigateToModule("ui/page/test-page-module-css");
-    try {
-        var topFrame = FrameModule.topmost();
-        TKUnit.assert(topFrame.currentPage.content instanceof LabelModule.Label, "Content of the test page should be a Label created within test-page-module-css.");
-        var testLabel = <LabelModule.Label>topFrame.currentPage.content;
-        TKUnit.assert(testLabel.text === "Label created within a page module css.");
-        TKUnit.assert(testLabel.style.backgroundColor.hex === "#ff00ff00", "Expected: #ff00ff00, Actual: " + testLabel.style.backgroundColor.hex);
-    }
-    finally {
-        helper.goBack();
-    }
+    var topFrame = FrameModule.topmost();
+    TKUnit.assert(topFrame.currentPage.content instanceof LabelModule.Label, "Content of the test page should be a Label created within test-page-module-css.");
+    var testLabel = <LabelModule.Label>topFrame.currentPage.content;
+    TKUnit.assert(testLabel.text === "Label created within a page module css.");
+    TKUnit.assert(testLabel.style.backgroundColor.hex === "#ff00ff00", "Expected: #ff00ff00, Actual: " + testLabel.style.backgroundColor.hex);
+    helper.goBack();
 }
 
 export function test_NavigateToPageCreatedWithNavigationEntry() {
@@ -305,12 +303,8 @@ export function test_NavigateToPageCreatedWithNavigationEntry() {
     helper.navigate(pageFactory);
 
     var actualContent = <LabelModule.Label>testPage.content;
-    try {
-        TKUnit.assert(actualContent.text === expectedText, "Expected: " + expectedText + ", Actual: " + actualContent.text);
-    }
-    finally {
-        helper.goBack();
-    }
+    TKUnit.assert(actualContent.text === expectedText, "Expected: " + expectedText + ", Actual: " + actualContent.text);
+    helper.goBack();
 }
 
 export function test_cssShouldBeAppliedToAllNestedElements() {
@@ -330,13 +324,9 @@ export function test_cssShouldBeAppliedToAllNestedElements() {
     helper.navigate(pageFactory);
 
     var expectedText = "Some text";
-    try {
-        TKUnit.assert(label.style.backgroundColor.hex === "#ff00ff00", "Expected: #ff00ff00, Actual: " + label.style.backgroundColor.hex);
-        TKUnit.assert(StackLayout.style.backgroundColor.hex === "#ffff0000", "Expected: #ffff0000, Actual: " + StackLayout.style.backgroundColor.hex);
-    }
-    finally {
-        helper.goBack();
-    }
+    TKUnit.assert(label.style.backgroundColor.hex === "#ff00ff00", "Expected: #ff00ff00, Actual: " + label.style.backgroundColor.hex);
+    TKUnit.assert(StackLayout.style.backgroundColor.hex === "#ffff0000", "Expected: #ffff0000, Actual: " + StackLayout.style.backgroundColor.hex);
+    helper.goBack();
 }
 
 export function test_cssShouldBeAppliedAfterChangeToAllNestedElements() {
@@ -357,17 +347,13 @@ export function test_cssShouldBeAppliedAfterChangeToAllNestedElements() {
     helper.navigate(pageFactory);
 
     var expectedText = "Some text";
-    try {
-        TKUnit.assert(label.style.backgroundColor.hex === "#ff00ff00", "Expected: #ff00ff00, Actual: " + label.style.backgroundColor.hex);
-        TKUnit.assert(StackLayout.style.backgroundColor.hex === "#ffff0000", "Expected: #ffff0000, Actual: " + StackLayout.style.backgroundColor.hex);
+    TKUnit.assert(label.style.backgroundColor.hex === "#ff00ff00", "Expected: #ff00ff00, Actual: " + label.style.backgroundColor.hex);
+    TKUnit.assert(StackLayout.style.backgroundColor.hex === "#ffff0000", "Expected: #ffff0000, Actual: " + StackLayout.style.backgroundColor.hex);
 
-        testPage.css = "stackLayout {background-color: #ff0000ff;} label {background-color: #ffff0000;}";
-        TKUnit.assert(label.style.backgroundColor.hex === "#ffff0000", "Expected: #ffff0000, Actual: " + label.style.backgroundColor.hex);
-        TKUnit.assert(StackLayout.style.backgroundColor.hex === "#ff0000ff", "Expected: #ff0000ff, Actual: " + StackLayout.style.backgroundColor.hex);
-    }
-    finally {
-        helper.goBack();
-    }
+    testPage.css = "stackLayout {background-color: #ff0000ff;} label {background-color: #ffff0000;}";
+    TKUnit.assert(label.style.backgroundColor.hex === "#ffff0000", "Expected: #ffff0000, Actual: " + label.style.backgroundColor.hex);
+    TKUnit.assert(StackLayout.style.backgroundColor.hex === "#ff0000ff", "Expected: #ff0000ff, Actual: " + StackLayout.style.backgroundColor.hex);
+    helper.goBack();
 }
 
 export function test_page_backgroundColor_is_white() {
@@ -377,10 +363,10 @@ export function test_page_backgroundColor_is_white() {
     });
 }
 
-export function test_WhenPageIsLoadedFrameCurrentPageIsTheSameInstance() {
+export function test_WhenPageIsLoadedFrameCurrentPageIsNotYetTheSameAsThePage() {
     var page;
     var loadedEventHandler = function (args) {
-        TKUnit.assert(FrameModule.topmost().currentPage === args.object, `frame.topmost().currentPage should be equal to args.object page instance in the page.loaded event handler. Expected: ${args.object.id}; Actual: ${FrameModule.topmost().currentPage.id};`);
+        TKUnit.assert(FrameModule.topmost().currentPage !== args.object, `When a page is loaded it should not yet be the current page. Loaded: ${args.object.id}; Current: ${FrameModule.topmost().currentPage.id};`);
     }
 
     var pageFactory = function (): PageModule.Page {
@@ -393,13 +379,30 @@ export function test_WhenPageIsLoadedFrameCurrentPageIsTheSameInstance() {
         return page;
     };
 
-    try {
-        helper.navigate(pageFactory);
-        page.off(view.View.loadedEvent, loadedEventHandler);
-    }
-    finally {
-        helper.goBack();
+    helper.navigate(pageFactory);
+    page.off(view.View.loadedEvent, loadedEventHandler);
+    helper.goBack();
+}
+
+export function test_WhenPageIsNavigatedToFrameCurrentPageIsNowTheSameAsThePage() {
+    var page;
+    var navigatedEventHandler = function (args) {
+        TKUnit.assert(FrameModule.topmost().currentPage === args.object, `frame.topmost().currentPage should be equal to args.object page instance in the page.navigatedTo event handler. Expected: ${args.object.id}; Actual: ${FrameModule.topmost().currentPage.id};`);
     }
+
+    var pageFactory = function (): PageModule.Page {
+        page = new PageModule.Page();
+        page.id = "newPage";
+        page.on(PageModule.Page.navigatedToEvent, navigatedEventHandler);
+        var label = new LabelModule.Label();
+        label.text = "Text";
+        page.content = label;
+        return page;
+    };
+
+    helper.navigate(pageFactory);
+    page.off(view.View.loadedEvent, navigatedEventHandler);
+    helper.goBack();
 }
 
 export function test_WhenNavigatingForwardAndBack_IsBackNavigationIsCorrect() {
@@ -407,7 +410,7 @@ export function test_WhenNavigatingForwardAndBack_IsBackNavigationIsCorrect() {
     var page2;
     var forwardCounter = 0;
     var backCounter = 0;
-    var loadedEventHandler = function (args: PageModule.NavigatedData) {
+    var navigatedEventHandler = function (args: PageModule.NavigatedData) {
         if (args.isBackNavigation) {
             backCounter++;
         }
@@ -418,28 +421,24 @@ export function test_WhenNavigatingForwardAndBack_IsBackNavigationIsCorrect() {
 
     var pageFactory1 = function (): PageModule.Page {
         page1 = new PageModule.Page();
-        page1.on(PageModule.Page.navigatedToEvent, loadedEventHandler);
+        page1.on(PageModule.Page.navigatedToEvent, navigatedEventHandler);
         return page1;
     };
 
     var pageFactory2 = function (): PageModule.Page {
         page2 = new PageModule.Page();
-        page2.on(PageModule.Page.navigatedToEvent, loadedEventHandler);
+        page2.on(PageModule.Page.navigatedToEvent, navigatedEventHandler);
         return page2;
     };
 
-    try {
-        helper.navigate(pageFactory1);
-        helper.navigate(pageFactory2);
-        helper.goBack();
-        TKUnit.assertEqual(forwardCounter, 2, "Forward navigation counter should be 1");
-        TKUnit.assertEqual(backCounter, 1, "Backward navigation counter should be 1");
-        page1.off(PageModule.Page.navigatedToEvent, loadedEventHandler);
-        page2.off(PageModule.Page.navigatedToEvent, loadedEventHandler);
-    }
-    finally {
-        helper.goBack();
-    }
+    helper.navigate(pageFactory1);
+    helper.navigate(pageFactory2);
+    helper.goBack();
+    TKUnit.assertEqual(forwardCounter, 2, "Forward navigation counter should be 1");
+    TKUnit.assertEqual(backCounter, 1, "Backward navigation counter should be 1");
+    page1.off(PageModule.Page.navigatedToEvent, navigatedEventHandler);
+    page2.off(PageModule.Page.navigatedToEvent, navigatedEventHandler);
+    helper.goBack();
 }
 
 //export function test_ModalPage_Layout_is_Correct() {

apps/tests/ui/page/page-tests.ios.ts

@@ -27,7 +27,7 @@ export function test_NavigateToNewPage_InnerControl() {
     TKUnit.assert(label.isLoaded === false, "InnerControl.isLoaded should become false after navigating back");
 }
 
-export function test_WhenPageIsLoadedItCanShowAnotherPageAsModal() {
+export function test_WhenPageIsNavigatedToItCanShowAnotherPageAsModal() {
     var masterPage;
     var ctx = {
         shownModally: false
@@ -42,7 +42,7 @@ export function test_WhenPageIsLoadedItCanShowAnotherPageAsModal() {
         modalClosed = true;
     }
 
-    var loadedEventHandler = function (args) {
+    var navigatedToEventHandler = function (args) {
         TKUnit.assert(!frame.topmost().currentPage.modal, "frame.topmost().currentPage.modal should be undefined when no modal page is shown!");
         var basePath = "ui/page/";
         args.object.showModal(basePath + "modal-page", ctx, modalCloseCallback, false);
@@ -51,7 +51,7 @@ export function test_WhenPageIsLoadedItCanShowAnotherPageAsModal() {
     var masterPageFactory = function (): PageModule.Page {
         masterPage = new PageModule.Page();
         masterPage.id = "newPage";
-        masterPage.on(view.View.loadedEvent, loadedEventHandler);
+        masterPage.on(PageModule.Page.navigatedToEvent, navigatedToEventHandler);
         var label = new LabelModule.Label();
         label.text = "Text";
         masterPage.content = label;
@@ -61,7 +61,7 @@ export function test_WhenPageIsLoadedItCanShowAnotherPageAsModal() {
     try {
         helper.navigate(masterPageFactory);
         TKUnit.waitUntilReady(() => { return modalClosed; });
-        masterPage.off(view.View.loadedEvent, loadedEventHandler);
+        masterPage.off(view.View.loadedEvent, navigatedToEventHandler);
     }
     finally {
         helper.goBack();
@@ -77,7 +77,7 @@ export function test_WhenShowingModalPageUnloadedIsNotFiredForTheMasterPage() {
         modalClosed = true;
     }
 
-    var loadedEventHandler = function (args) {
+    var navigatedToEventHandler = function (args) {
         var basePath = "ui/page/";
         args.object.showModal(basePath + "modal-page", null, modalCloseCallback, false);
     };
@@ -89,7 +89,7 @@ export function test_WhenShowingModalPageUnloadedIsNotFiredForTheMasterPage() {
     var masterPageFactory = function (): PageModule.Page {
         masterPage = new PageModule.Page();
         masterPage.id = "master-page";
-        masterPage.on(view.View.loadedEvent, loadedEventHandler);
+        masterPage.on(PageModule.Page.navigatedToEvent, navigatedToEventHandler);
         masterPage.on(view.View.unloadedEvent, unloadedEventHandler);
         var label = new LabelModule.Label();
         label.text = "Modal Page";
@@ -101,8 +101,8 @@ export function test_WhenShowingModalPageUnloadedIsNotFiredForTheMasterPage() {
         helper.navigate(masterPageFactory);
         TKUnit.waitUntilReady(() => { return modalClosed; });
         TKUnit.assert(!masterPageUnloaded, "Master page should not raise 'unloaded' when showing modal!");
-        masterPage.off(view.View.loadedEvent, loadedEventHandler);
-        masterPage.off(view.View.unloadedEvent, loadedEventHandler);
+        masterPage.off(view.View.loadedEvent, navigatedToEventHandler);
+        masterPage.off(view.View.unloadedEvent, unloadedEventHandler);
     }
     finally {
         helper.goBack();