Merge pull request #3470 from NativeScript/view-tests

View tests turned green

tests/app/testRunner.ts

@@ -65,7 +65,7 @@ allTests["STACKLAYOUT"] = require("./ui/layouts/stack-layout-tests");
 allTests["FLEXBOXLAYOUT"] = require("./ui/layouts/flexbox-layout-tests");
 allTests["STYLE-PROPERTIES"] = require("./ui/styling/style-properties-tests");
 allTests["FRAME"] = require("./ui/frame/frame-tests");
-// allTests["VIEW"] = require("./ui/view/view-tests");
+allTests["VIEW"] = require("./ui/view/view-tests");
 // allTests["STYLE"] = require("./ui/styling/style-tests");
 // allTests["VISUAL-STATE"] = require("./ui/styling/visual-state-tests");
 // allTests["VALUE-SOURCE"] = require("./ui/styling/value-source-tests");

tests/app/ui/helper.ts

@@ -10,6 +10,7 @@ import * as colorModule from "color";
 import * as formattedStringModule from "text/formatted-string";
 import * as spanModule from "text/span";
 import * as enums from "ui/enums";
+import { ActionBar } from "ui/action-bar";
 import { unsetValue } from "ui/core/view";
 
 var DELTA = 0.1;
@@ -35,7 +36,7 @@ function clearPage(): void {
     newPage.id = unsetValue;
 }
 
-export function do_PageTest(test: (views: Array<view.View>) => void, content: view.View, secondView: view.View, thirdView: view.View) {
+export function do_PageTest(test: (views: [page.Page, view.View, view.View, view.View, ActionBar]) => void, content: view.View, secondView: view.View, thirdView: view.View) {
     clearPage();
     let newPage = getCurrentPage();
     newPage.content = content;
@@ -43,7 +44,7 @@ export function do_PageTest(test: (views: Array<view.View>) => void, content: vi
     newPage.content = null;
 }
 
-export function do_PageTest_WithButton(test: (views: Array<view.View>) => void) {
+export function do_PageTest_WithButton(test: (views: [page.Page, button.Button, ActionBar]) => void) {
     clearPage();
     let newPage = getCurrentPage();
     let btn = new button.Button();
@@ -52,7 +53,7 @@ export function do_PageTest_WithButton(test: (views: Array<view.View>) => void)
     newPage.content = null;
 }
 
-export function do_PageTest_WithStackLayout_AndButton(test: (views: Array<view.View>) => void) {
+export function do_PageTest_WithStackLayout_AndButton(test: (views: [page.Page, stackLayoutModule.StackLayout, button.Button, ActionBar]) => void) {
     clearPage();
     let newPage = getCurrentPage();
     let stackLayout = new stackLayoutModule.StackLayout();
@@ -64,7 +65,7 @@ export function do_PageTest_WithStackLayout_AndButton(test: (views: Array<view.V
 }
 
 //export function buildUIAndRunTest(controlToTest, testFunction, pageCss?, testDelay?) {
-export function buildUIAndRunTest(controlToTest, testFunction, pageCss?) {
+export function buildUIAndRunTest<T extends view.View>(controlToTest: T, testFunction: (views: [T, page.Page]) => void, pageCss?) {
     clearPage();
     let newPage = getCurrentPage();
     newPage.content = controlToTest;
@@ -92,9 +93,9 @@ export function buildUIWithWeakRefAndInteract<T extends view.View>(createFunc: (
             }
 
             sp.removeChild(weakRef.get());
-            
+
             TKUnit.wait(1); // Wait for the TextField/TextView to close its keyboard so it can be released.
-            
+
             if (newPage.ios) {
                 /* tslint:disable:no-unused-expression */
                 // Could cause GC on the next call.
@@ -115,7 +116,7 @@ export function buildUIWithWeakRefAndInteract<T extends view.View>(createFunc: (
     newPage.content = sp;
 
     TKUnit.waitUntilReady(() => testFinished, MEMORY_ASYNC);
-    TKUnit.assertTrue(testFinished, "Test did not completed.")
+    TKUnit.assertTrue(testFinished, "Test did not completed.");
     done(null);
 }
 
@@ -162,7 +163,7 @@ export function navigateWithEntry(entry: frame.NavigationEntry): page.Page {
     entry.moduleName = null;
     entry.create = function () {
         return page;
-    }
+    };
 
     let currentPage = getCurrentPage();
     frame.topmost().navigate(entry);
@@ -177,8 +178,8 @@ export function goBack() {
 }
 
 export function assertAreClose(actual: number, expected: number, message: string): void {
-    var density = utils.layout.getDisplayDensity();
+    const density = utils.layout.getDisplayDensity();
-    var delta = Math.floor(density) !== density ? 1.1 : DELTA;
+    const delta = Math.floor(density) !== density ? 1.1 : DELTA;
 
     TKUnit.assertAreClose(actual, expected, delta, message);
 }
@@ -204,7 +205,7 @@ export function forceGC() {
     utils.GC();
 }
 
-export function _generateFormattedString(): formattedStringModule.FormattedString{
+export function _generateFormattedString(): formattedStringModule.FormattedString {
     let formattedString = new formattedStringModule.FormattedString();
     let span: spanModule.Span;
 
@@ -218,7 +219,7 @@ export function _generateFormattedString(): formattedStringModule.FormattedStrin
     span.strikethrough = 1;
     span.text = "Formatted";
     formattedString.spans.push(span);
-    
+
     span = new spanModule.Span();
     span.fontFamily = "sans-serif";
     span.fontSize = 20;

tests/app/ui/image/image-tests.ts

@@ -142,7 +142,7 @@ export function test_imageSourceNotResetAfterCreateUI() {
     let image = new ImageModule.Image();
     let imageSource = ImageSourceModule.fromResource("splashscreen.9");
     image.imageSource = imageSource;
-    helper.buildUIAndRunTest(image, (img, page) => {
+    helper.buildUIAndRunTest(image, () => {
         TKUnit.waitUntilReady(() => image.isLoaded);
         TKUnit.assertEqual(image.imageSource, imageSource);
     });

tests/app/ui/view/view-tests.android.ts

@@ -14,48 +14,48 @@ trace.enable();
 
 global.moduleMerge(commonTests, exports);
 
-export var test_event_onAttached_IsRaised = function () {
+export const test_event_setupUI_IsRaised = function () {
-    var listener = new Listener("_onAttached");
+    const listener = new Listener("_setupUI");
     trace.addEventListener(listener);
 
-    var test = function (views: Array<view.View>) {
+    const test = function (views: Array<view.View>) {
-        // 2 onAttached calls: stack, button
+        // 2 setupUI calls: stack, button
-        TKUnit.assertEqual(listener.receivedEvents.length, 2, "onAttached calls");
+        TKUnit.assertEqual(listener.receivedEvents.length, 2, "setupUI calls");
 
         for (let i = 0; i < listener.receivedEvents.length; i++) {
             TKUnit.assertEqual(listener.receivedEvents[i].sender, views[i + 1]); // 0 is Page, so start with +1.
-            TKUnit.assertEqual(listener.receivedEvents[i].name, "_onAttached");
+            TKUnit.assertEqual(listener.receivedEvents[i].name, "_setupUI");
         }
-    }
+    };
 
     helper.do_PageTest_WithStackLayout_AndButton(test);
     trace.removeEventListener(listener);
-}
+};
 
-export var test_event_onAttached_IsRaised_WhenAttached_Dynamically = function () {
+export const test_event_setupUI_IsRaised_WhenAttached_Dynamically = function () {
-    var test = function (views: Array<view.View>) {
+    const test = function (views: Array<view.View>) {
-        // add new button to the visual tree and ensure its _onAttached event
+        // add new button to the visual tree and ensure its _setupUI event
-        var listener = new Listener("_onAttached");
+        const listener = new Listener("_setupUI");
         trace.addEventListener(listener);
 
-        var newButton = new button.Button();
+        const newButton = new button.Button();
         (<stack.StackLayout>views[1]).addChild(newButton);
 
         TKUnit.assertEqual(listener.receivedEvents.length, 1);
-        TKUnit.assertEqual(listener.receivedEvents[0].name, "_onAttached");
+        TKUnit.assertEqual(listener.receivedEvents[0].name, "_setupUI");
         TKUnit.assertEqual(listener.receivedEvents[0].sender, newButton);
 
         trace.removeEventListener(listener);
-    }
+    };
 
     helper.do_PageTest_WithStackLayout_AndButton(test);
-}
+};
 
-export var test_event_onContextChanged_IsRaised_WhenAttached = function () {
+export const test_event_onContextChanged_IsRaised_WhenAttached = function () {
-    var listener = new Listener("_onContextChanged");
+    const listener = new Listener("_onContextChanged");
     trace.addEventListener(listener);
 
-    var test = function (views: Array<view.View>) {
+    const test = function (views: Array<view.View>) {
         // 2 onContextChanged calls: stack, button
         TKUnit.assertEqual(listener.receivedEvents.length, 2, "onContextChanged calls");
 
@@ -63,19 +63,19 @@ export var test_event_onContextChanged_IsRaised_WhenAttached = function () {
             TKUnit.assertEqual(listener.receivedEvents[i].sender, views[i + 1]); // 0 is Page, so start with +1.
             TKUnit.assertEqual(listener.receivedEvents[i].name, "_onContextChanged");
         }
-    }
+    };
 
     helper.do_PageTest_WithStackLayout_AndButton(test);
     trace.removeEventListener(listener);
-}
+};
 
-export var test_event_onContextChanged_IsRaised_WhenAttached_Dynamically = function () {
+export const test_event_onContextChanged_IsRaised_WhenAttached_Dynamically = function () {
-    var test = function (views: Array<view.View>) {
+    const test = function (views: Array<view.View>) {
         // add new button to the visual tree and ensure its _onContextChanged event
-        var listener = new Listener("_onContextChanged");
+        const listener = new Listener("_onContextChanged");
         trace.addEventListener(listener);
 
-        var newButton = new button.Button();
+        const newButton = new button.Button();
         (<stack.StackLayout>views[1]).addChild(newButton);
 
         TKUnit.assertEqual(listener.receivedEvents.length, 1);
@@ -83,63 +83,63 @@ export var test_event_onContextChanged_IsRaised_WhenAttached_Dynamically = funct
         TKUnit.assertEqual(listener.receivedEvents[0].sender, newButton);
 
         trace.removeEventListener(listener);
-    }
+    };
 
     helper.do_PageTest_WithStackLayout_AndButton(test);
-}
+};
 
-export var test_event_onDetached_IsRaised = function () {
+export const test_event_tearDownUI_IsRaised = function () {
-    var cachedViews: Array<view.View>;
+    let cachedViews: Array<view.View>;
-    var listener: Listener;
+    let listener: Listener;
 
-    var test = function (views: Array<view.View>) {
+    const test = function (views: Array<view.View>) {
         cachedViews = views;
 
         // once the above method completes goBack on the current frame is called which will detach the tested views
-        listener = new Listener("_onDetached");
+        listener = new Listener("_tearDownUI");
         trace.addEventListener(listener);
-    }
+    };
 
     helper.do_PageTest_WithStackLayout_AndButton(test);
 
     // 2 detached calls: page, stack, button, actionBar
-    TKUnit.assertEqual(listener.receivedEvents.length, 2, "onDetached calls");
+    TKUnit.assertEqual(listener.receivedEvents.length, 2, "tearDownUI calls");
 
-    // _onDetached event is propagated to nested children first
+    // _tearDownUI event is propagated to nested children first
     for (let i = 0, j = listener.receivedEvents.length - 1; i < listener.receivedEvents.length; i++ , j--) {
         // check the sender and remove
-        var index = cachedViews.indexOf(<view.View>listener.receivedEvents[i].sender);
+        const index = cachedViews.indexOf(<view.View>listener.receivedEvents[i].sender);
-        TKUnit.assert(index >= 0, "_onDetached called for unknown sender");
+        TKUnit.assert(index >= 0, "_tearDownUI called for unknown sender");
         cachedViews.splice(index, 1);
 
-        TKUnit.assertEqual(listener.receivedEvents[i].name, "_onDetached");
+        TKUnit.assertEqual(listener.receivedEvents[i].name, "_tearDownUI");
     }
 
     trace.removeEventListener(listener);
-}
+};
 
-export var test_event_onDetached_IsRaised_WhenRemoved_Dynamically = function () {
+export const test_event_tearDownUI_IsRaised_WhenRemoved_Dynamically = function () {
-    var test = function (views: Array<view.View>) {
+    const test = function (views: Array<view.View>) {
-        // add new button to the visual tree and ensure its _onContextChanged event
+        // add new button to the visual tree and ensure its _tearDownUI event
-        var listener = new Listener("_onDetached");
+        const listener = new Listener("_tearDownUI");
         trace.addEventListener(listener);
 
         // remove the button from the layout
         (<stack.StackLayout>views[1]).removeChild(views[2]);
 
         TKUnit.assertEqual(listener.receivedEvents.length, 1);
-        TKUnit.assertEqual(listener.receivedEvents[0].name, "_onDetached");
+        TKUnit.assertEqual(listener.receivedEvents[0].name, "_tearDownUI");
         TKUnit.assertEqual(listener.receivedEvents[0].sender, views[2]);
 
         trace.removeEventListener(listener);
-    }
+    };
 
     helper.do_PageTest_WithStackLayout_AndButton(test);
-}
+};
 
-export var test_events_onDetachedAndRemovedFromNativeVisualTree_AreRaised_WhenNavigateBack = function () {
+export const test_events_tearDownUIAndRemovedFromNativeVisualTree_AreRaised_WhenNavigateBack = function () {
-    let onDetachedListener = new Listener("_onDetached");
+    let tearDownUIListener = new Listener("_tearDownUI");
-    let removeFromNativeVisualTreeListener = new Listener("childInLayoutRemovedFromNativeVisualTree");
+    let removeFromNativeVisualTreeListener = new Listener("_removeViewFromNativeVisualTree");
 
     let page = frame.topmost().currentPage;
     let stackLayout = new stack.StackLayout();
@@ -147,34 +147,34 @@ export var test_events_onDetachedAndRemovedFromNativeVisualTree_AreRaised_WhenNa
     stackLayout.addChild(btn);
     page.content = stackLayout;
 
-    trace.addEventListener(onDetachedListener);
+    trace.addEventListener(tearDownUIListener);
     trace.addEventListener(removeFromNativeVisualTreeListener);
 
     page.content = null;
 
-    // 2 onDetached calls: stack, button
+    // 2 tearDownUI calls: stack, button
-    TKUnit.assertEqual(onDetachedListener.receivedEvents.length, 2, "onDetached calls");
+    TKUnit.assertEqual(tearDownUIListener.receivedEvents.length, 2, "tearDownUI calls");
 
-    TKUnit.assertEqual(onDetachedListener.receivedEvents[0].name, "_onDetached");
+    TKUnit.assertEqual(tearDownUIListener.receivedEvents[0].name, "_tearDownUI");
-    TKUnit.assertEqual(onDetachedListener.receivedEvents[0].sender, btn); // Button
+    TKUnit.assertEqual(tearDownUIListener.receivedEvents[0].sender, btn); // Button
-    TKUnit.assertEqual(onDetachedListener.receivedEvents[1].sender, stackLayout); // stackLayout
+    TKUnit.assertEqual(tearDownUIListener.receivedEvents[1].sender, stackLayout); // stackLayout
 
     // this is an event fired from CustomLayoutView when a child is removed from the native visual tree
     // therefore this event is fired for StackLayout and Button (which is inside StackLayout).
     TKUnit.assertEqual(removeFromNativeVisualTreeListener.receivedEvents.length, 2);
-    TKUnit.assertEqual(removeFromNativeVisualTreeListener.receivedEvents[0].name, "childInLayoutRemovedFromNativeVisualTree");
+    TKUnit.assertEqual(removeFromNativeVisualTreeListener.receivedEvents[0].name, "_removeViewFromNativeVisualTree");
-    TKUnit.assertEqual(removeFromNativeVisualTreeListener.receivedEvents[0].sender, stackLayout);
+    TKUnit.assertEqual(removeFromNativeVisualTreeListener.receivedEvents[0].sender, btn);
 
-    TKUnit.assertEqual(removeFromNativeVisualTreeListener.receivedEvents[1].name, "childInLayoutRemovedFromNativeVisualTree");
+    TKUnit.assertEqual(removeFromNativeVisualTreeListener.receivedEvents[1].name, "_removeViewFromNativeVisualTree");
-    TKUnit.assertEqual(removeFromNativeVisualTreeListener.receivedEvents[1].sender, btn);
+    TKUnit.assertEqual(removeFromNativeVisualTreeListener.receivedEvents[1].sender, stackLayout);
 
-    trace.removeEventListener(onDetachedListener);
+    trace.removeEventListener(tearDownUIListener);
     trace.removeEventListener(removeFromNativeVisualTreeListener);
-}
+};
 
-export var test_cachedProperties_Applied_WhenNativeWidged_IsCreated = function () {
+export const test_cachedProperties_Applied_WhenNativeWidged_IsCreated = function () {
-    var test = function (views: Array<view.View>) {
+    const test = function (views: Array<view.View>) {
-        var newButton = new button.Button();
+        const newButton = new button.Button();
         newButton.text = "Test Button";
         TKUnit.assert(types.isUndefined(newButton.android));
 
@@ -183,37 +183,36 @@ export var test_cachedProperties_Applied_WhenNativeWidged_IsCreated = function (
         TKUnit.assert(types.isDefined(newButton.android));
         // TODO: There is currently an issue with the getText conversion to JavaScript string
         TKUnit.assertEqual(newButton.android.getText(), "Test Button");
-    }
+    };
 
     helper.do_PageTest_WithStackLayout_AndButton(test);
-}
+};
 
 export function test_automation_text_set_to_native() {
-    var test = function (views: Array<view.View>) {
+    const test = function (views: Array<view.View>) {
-        var newButton = new button.Button();
+        const newButton = new button.Button();
         newButton.automationText = "Button1";
         (<stack.StackLayout>views[1]).addChild(newButton);
         TKUnit.assertEqual((<android.widget.Button>newButton.android).getContentDescription(), "Button1", "contentDescription not set to native view.");
-    }
+    };
 
     helper.do_PageTest_WithStackLayout_AndButton(test);
 }
 
-export var test_event_onContextChanged_IsNotRaised_WhenAttachedToSameContext = function () {
+export const test_event_onContextChanged_IsNotRaised_WhenAttachedToSameContext = function () {
-    var test = function (views: Array<view.View>) {
+    const test = function (views: Array<view.View>) {
-        var listener = new Listener("_onContextChanged");
+        const listener = new Listener("_onContextChanged");
         trace.addEventListener(listener);
 
-        // views[2]._onContextChanged(views[0]._context);
         views[2]._setupUI(views[0]._context);
 
         TKUnit.assertEqual(listener.receivedEvents.length, 0, "listener.receivedEvents.length");
 
         trace.removeEventListener(listener);
-    }
+    };
 
     helper.do_PageTest_WithStackLayout_AndButton(test);
-}
+};
 
 class Listener implements trace.EventListener {
     public filter: string;
@@ -232,111 +231,111 @@ class Listener implements trace.EventListener {
     }
 }
 
-export var test_StylePropertiesDefaultValuesCache = function () {
+export const test_StylePropertiesDefaultValuesCache = function () {
-    var testValue = 35;
+    const testValue = 35;
 
-    var test = function (views: Array<view.View>) {
+    const test = function (views: [view.View, stack.StackLayout, button.Button, view.View]) {
-        var testLabel = new labelModule.Label();
+        const testLabel = new labelModule.Label();
-        var testButton = new button.Button();
+        const testButton = new button.Button();
 
-        var stack = <stack.StackLayout>views[1];
+        const stack = views[1];
 
         stack.addChild(testLabel);
         stack.addChild(testButton);
 
-        var defaultLabelFontSize = (<android.widget.TextView>(testLabel.android)).getTextSize();
+        const defaultLabelFontSize = (<android.widget.TextView>(testLabel.android)).getTextSize();
-        var defaultButtonFontSize = (<android.widget.Button>(testButton.android)).getTextSize();
+        const defaultButtonFontSize = (<android.widget.Button>(testButton.android)).getTextSize();
 
         testLabel.style.fontSize = testValue;
         testButton.style.fontSize = testValue;
 
-        var actualLabelTextSize = (<android.widget.TextView>(testLabel.android)).getTextSize();
+        let actualLabelTextSize = (<android.widget.TextView>(testLabel.android)).getTextSize();
-        var actualButtonTextSize = (<android.widget.Button>(testButton.android)).getTextSize();
+        let actualButtonTextSize = (<android.widget.Button>(testButton.android)).getTextSize();
 
         TKUnit.assert(actualLabelTextSize !== defaultLabelFontSize, "Label text size should be different from default!");
         TKUnit.assert(actualButtonTextSize !== defaultButtonFontSize, "Button text size should be different from default!");
 
-        testLabel.style.fontSize = undefined;
+        testLabel.style.fontSize = view.unsetValue;
-        testButton.style.fontSize = undefined;
+        testButton.style.fontSize = view.unsetValue;
 
         actualLabelTextSize = (<android.widget.TextView>(testLabel.android)).getTextSize();
         actualButtonTextSize = (<android.widget.Button>(testButton.android)).getTextSize();
 
-        TKUnit.assert(actualLabelTextSize === defaultLabelFontSize, "Label text size should be default!");
+        TKUnit.assertEqual(actualLabelTextSize, defaultLabelFontSize, "Label text size should be default!");
-        TKUnit.assert(actualButtonTextSize === defaultButtonFontSize, "Button text size should be default!");
+        TKUnit.assertEqual(actualButtonTextSize, defaultButtonFontSize, "Button text size should be default!");
     };
 
     helper.do_PageTest_WithStackLayout_AndButton(test);
-}
+};
 
 export function getUniformNativeBorderWidth(v: view.View): number {
-    var bkg = <org.nativescript.widgets.BorderDrawable>v.android.getBackground();
+    const bkg = <org.nativescript.widgets.BorderDrawable>v.android.getBackground();
     return bkg ? bkg.getUniformBorderWidth() : 0;
 }
 
 export function checkUniformNativeBorderColor(v: view.View): boolean {
-    var bkg = <org.nativescript.widgets.BorderDrawable>(<android.view.View>v.android).getBackground();
+    const bkg = <org.nativescript.widgets.BorderDrawable>(<android.view.View>v.android).getBackground();
     return bkg && bkg.getUniformBorderColor() === (<Color>v.borderColor).android;
 }
 
 export function getUniformNativeCornerRadius(v: view.View): number {
-    var bkg = <org.nativescript.widgets.BorderDrawable>v.android.getBackground();
+    const bkg = <org.nativescript.widgets.BorderDrawable>v.android.getBackground();
-    return bkg ? bkg.getUniformBorderRadius() : 0
+    return bkg ? bkg.getUniformBorderRadius() : 0;
 }
 
 export function checkNativeBackgroundColor(v: view.View): boolean {
-    var bkg = <org.nativescript.widgets.BorderDrawable>(<android.view.View>v.android).getBackground();
+    const bkg = <org.nativescript.widgets.BorderDrawable>(<android.view.View>v.android).getBackground();
 
     return v.backgroundColor && bkg && bkg.getBackgroundColor() === v.backgroundColor.android;
 }
 
 export function checkNativeBackgroundImage(v: view.View): boolean {
-    var bkg = <org.nativescript.widgets.BorderDrawable>(<android.view.View>v.android).getBackground();
+    const bkg = <org.nativescript.widgets.BorderDrawable>(<android.view.View>v.android).getBackground();
 
     return bkg && !types.isNullOrUndefined(bkg.getBackgroundImage());
 }
 
 let SDK: number;
 function getSDK() {
-   if (!SDK) {
+    if (!SDK) {
-       SDK = android.os.Build.VERSION.SDK_INT;
+        SDK = android.os.Build.VERSION.SDK_INT;
-   }
+    }
 
-   return SDK;
+    return SDK;
 }
 
 export function test_AndroidLayerType_BorderWidth() {
-   helper.buildUIAndRunTest(new labelModule.Label(), (views: Array<view.View>) => {
+    helper.buildUIAndRunTest(new labelModule.Label(), (views: Array<view.View>) => {
-       let lbl = <labelModule.Label>(views[0]);
+        let lbl = <labelModule.Label>(views[0]);
-       let androidView = <android.view.View>lbl.android;
+        let androidView = <android.view.View>lbl.android;
-       let originalLayerType = androidView.getLayerType();
+        let originalLayerType = androidView.getLayerType();
-       lbl.borderWidth = 5;
+        lbl.borderWidth = 5;
-       TKUnit.assertEqual(androidView.getLayerType(), getSDK() < 18 ? android.view.View.LAYER_TYPE_SOFTWARE : originalLayerType);
+        TKUnit.assertEqual(androidView.getLayerType(), getSDK() < 18 ? android.view.View.LAYER_TYPE_SOFTWARE : originalLayerType);
-       lbl.borderWidth = 0;
+        lbl.borderWidth = 0;
-       TKUnit.assertEqual(androidView.getLayerType(), originalLayerType);
+        TKUnit.assertEqual(androidView.getLayerType(), originalLayerType);
-   });
+    });
 };
 
 export function test_AndroidLayerType_BorderRadius() {
-   helper.buildUIAndRunTest(new labelModule.Label(), (views: Array<view.View>) => {
+    helper.buildUIAndRunTest(new labelModule.Label(), (views: Array<view.View>) => {
-       let lbl = <labelModule.Label>(views[0]);  
+        let lbl = <labelModule.Label>(views[0]);
-       let androidView = <android.view.View>lbl.android;
+        let androidView = <android.view.View>lbl.android;
-       let originalLayerType = androidView.getLayerType();
+        let originalLayerType = androidView.getLayerType();
-       lbl.borderRadius = 5;
+        lbl.borderRadius = 5;
-       TKUnit.assertEqual(androidView.getLayerType(), getSDK() < 18 ? android.view.View.LAYER_TYPE_SOFTWARE : originalLayerType);
+        TKUnit.assertEqual(androidView.getLayerType(), getSDK() < 18 ? android.view.View.LAYER_TYPE_SOFTWARE : originalLayerType);
-       lbl.borderRadius = 0;
+        lbl.borderRadius = 0;
-       TKUnit.assertEqual(androidView.getLayerType(), originalLayerType);
+        TKUnit.assertEqual(androidView.getLayerType(), originalLayerType);
-   });
+    });
 };
 
 export function test_AndroidLayerType_ClipPath() {
-   helper.buildUIAndRunTest(new labelModule.Label(), (views: Array<view.View>) => {
+    helper.buildUIAndRunTest(new labelModule.Label(), (views: Array<view.View>) => {
-       let lbl = <labelModule.Label>(views[0]);  
+        let lbl = <labelModule.Label>(views[0]);
-       let androidView = <android.view.View>lbl.android;
+        let androidView = <android.view.View>lbl.android;
-       let originalLayerType = androidView.getLayerType();
+        let originalLayerType = androidView.getLayerType();
-       lbl.style.clipPath = "rect(0, 0, 100%, 100%)";
+        lbl.style.clipPath = "rect(0, 0, 100%, 100%)";
-       TKUnit.assertEqual(androidView.getLayerType(), getSDK() < 18 ? android.view.View.LAYER_TYPE_SOFTWARE : originalLayerType);
+        TKUnit.assertEqual(androidView.getLayerType(), getSDK() < 18 ? android.view.View.LAYER_TYPE_SOFTWARE : originalLayerType);
-       lbl.style.clipPath = undefined;
+        lbl.style.clipPath = undefined;
-       TKUnit.assertEqual(androidView.getLayerType(), originalLayerType);
+        TKUnit.assertEqual(androidView.getLayerType(), originalLayerType);
-   });
+    });
 };

tests/app/ui/view/view-tests.ios.ts

@@ -8,6 +8,18 @@ import * as button from "ui/button";
 
 global.moduleMerge(commonTests, exports);
 
+class MyGrid extends grid.GridLayout {
+    public backgroundSetterCount: number = 0;
+
+    get [view.backgroundInternalProperty.native](): any {
+        return null;
+    }
+    set [view.backgroundInternalProperty.native](value: any) {
+        this.backgroundSetterCount ++;
+    }
+
+}
+
 export function getUniformNativeBorderWidth(v: view.View): number {
     return (<UIView>v.ios).layer.borderWidth;
 }
@@ -41,28 +53,20 @@ export function checkNativeBackgroundImage(v: view.View): boolean {
 export function testBackgroundInternalChangedOnceOnResize() {
 
     let root = helper.getCurrentPage();
-    let layout = new grid.GridLayout();
+    let layout = new MyGrid();
     layout.className = "myClass";
     layout.backgroundColor = new color.Color(255, 255, 0, 0);
 
     root.css = ".myClass { background-image: url('~/tests/logo.png') }";
     root.content = layout;
 
-    let sizeChangedCount = 0;
     function trackCount() {
-        let result = sizeChangedCount;
+        let result = layout.backgroundSetterCount;
-        sizeChangedCount = 0;
+        layout.backgroundSetterCount = 0;
         return result;
     }
 
-    var base = (<any>layout.style)._applyStyleProperty;
+    trackCount();
-    (<any>layout.style)._applyStyleProperty = function (property) {
-        base.apply(layout.style, arguments);
-        if (property.name === "_backgroundInternal") {
-            ++sizeChangedCount;
-        }
-    }
-
     layout.requestLayout();
     layout.layout(0, 0, 200, 200);
 

tns-core-modules/ui/action-bar/action-bar.ios.ts

@@ -1,6 +1,7 @@
 import { IOSActionItemSettings, ActionItem as ActionItemDefinition } from "ui/action-bar";
 import { ActionItemBase, ActionBarBase, isVisible, View, colorProperty, backgroundColorProperty, backgroundInternalProperty, layout } from "./action-bar-common";
 import { ImageSource, fromFileOrResource } from "image-source";
+import { Color } from "color";
 
 export * from "./action-bar-common";
 
@@ -295,10 +296,15 @@ export class ActionBar extends ActionBarBase {
     get [colorProperty.native](): UIColor {
         return null;
     }
-    set [colorProperty.native](color: UIColor) {
+    set [colorProperty.native](color: Color) {
-        let navBar = this.navBar;
+        const navBar = this.navBar;
-        navBar.tintColor = color;
+        if (color) {
-        navBar.titleTextAttributes = <any>{ [NSForegroundColorAttributeName]: color };
+            navBar.tintColor = color.ios;
+            navBar.titleTextAttributes = <any>{ [NSForegroundColorAttributeName]: color.ios };
+        } else {
+            navBar.tintColor = null;
+            navBar.titleTextAttributes = null;
+        }
     }
 
     get [backgroundColorProperty.native](): UIColor {

tns-core-modules/ui/activity-indicator/activity-indicator.ios.ts

@@ -1,5 +1,6 @@
 import { ActivityIndicatorBase, busyProperty, colorProperty } from "./activity-indicator-common";
 import { ios } from "utils/utils";
+import { Color } from "color";
 
 export * from "./activity-indicator-common";
 
@@ -36,7 +37,7 @@ export class ActivityIndicator extends ActivityIndicatorBase {
     get [colorProperty.native](): UIColor {
         return this.nativeView.color;
     }
-    set [colorProperty.native](value: UIColor) {
+    set [colorProperty.native](value: UIColor | Color) {
-        this.nativeView.color = value;
+        this.nativeView.color = value instanceof Color ? value.ios : value;;
     }
 }

tns-core-modules/ui/core/view-base.ts

@@ -104,7 +104,7 @@ export class ViewBase extends Observable implements ViewBaseDefinition {
     public bindingContext: any;
     public nativeView: any;
     public parent: ViewBase;
-    public isCollapsed;
+    public isCollapsed = false;
 
     public id: string;
     public className: string;
@@ -402,7 +402,7 @@ export class ViewBase extends Observable implements ViewBaseDefinition {
     }
 
     protected _addViewCore(view: ViewBase, atIndex?: number) {
-        if (isIOS || this._context) {
+        if (this._context) {
             view._setupUI(this._context, atIndex);
         }
 
@@ -443,7 +443,7 @@ export class ViewBase extends Observable implements ViewBaseDefinition {
 
         // view.unsetInheritedProperties();
 
-        if (isIOS || view._context) {
+        if (view._context) {
             view._tearDownUI();
         }
     }
@@ -465,7 +465,17 @@ export class ViewBase extends Observable implements ViewBaseDefinition {
     }
 
     public _setupUI(context: android.content.Context, atIndex?: number) {
+        traceNotifyEvent(this, "_setupUI");
+        if (traceEnabled) {
+            traceWrite(`${this}._setupUI(${context})`, traceCategories.VisualTreeEvents);
+        }
+
+        if (this._context === context) {
+            return;
+        }
+
         this._context = context;
+        traceNotifyEvent(this, "_onContextChanged");
 
         // TODO: refactor createUI to return native view
         this._createNativeView();
@@ -474,7 +484,7 @@ export class ViewBase extends Observable implements ViewBaseDefinition {
         this._initNativeView();
 
         if (this.parent) {
-            this.parent._addViewToNativeVisualTree(this, atIndex);
+            this._isAddedToNativeVisualTree = this.parent._addViewToNativeVisualTree(this, atIndex);
         }
 
         if (this.nativeView) {
@@ -485,13 +495,13 @@ export class ViewBase extends Observable implements ViewBaseDefinition {
             child._setupUI(context);
             return true;
         });
-
-        // if (traceEnabled) {
-        //     traceNotifyEvent(this, "_onAttached");
-        // }
     }
 
     public _tearDownUI(force?: boolean) {
+        if (traceEnabled) {
+            traceWrite(`${this}._tearDownUI(${force})`, traceCategories.VisualTreeEvents);
+        }
+
         this.eachChild((child) => {
             child._tearDownUI(force);
             return true;
@@ -511,6 +521,8 @@ export class ViewBase extends Observable implements ViewBaseDefinition {
         this._disposeNativeView();
 
         this._context = null;
+        traceNotifyEvent(this, "_onContextChanged");
+        traceNotifyEvent(this, "_tearDownUI");
     }
 
     _childIndexToNativeChildIndex(index?: number): number {
@@ -532,6 +544,7 @@ export class ViewBase extends Observable implements ViewBaseDefinition {
      * Method is intended to be overridden by inheritors and used as "protected"
      */
     public _removeViewFromNativeVisualTree(view: ViewBase) {
+        traceNotifyEvent(view, "_removeViewFromNativeVisualTree");
         view._isAddedToNativeVisualTree = false;
     }
 

tns-core-modules/ui/frame/frame.ios.ts

@@ -16,6 +16,8 @@ const DELEGATE = "_delegate";
 
 let navDepth = -1;
 
+const FRAME_CONTEXT = {};
+
 export class Frame extends FrameBase {
     private _ios: iOSFrame;
     private _paramToNavigate: any;
@@ -29,6 +31,13 @@ export class Frame extends FrameBase {
     public _bottom: number;
     public _isInitialNavigation: boolean = true;
 
+    public get _context(): any {
+        return FRAME_CONTEXT;
+    }
+    public set _context(value:any) {
+        throw new Error("Frame _context is readonly");
+    }
+
     constructor() {
         super();
         this._ios = new iOSFrame(this);
@@ -657,7 +666,7 @@ export function _getNativeCurve(transition: NavigationTransition): UIViewAnimati
                     traceWrite("Transition curve resolved to UIViewAnimationCurve.Linear.", traceCategories.Transition);
                 }
                 return UIViewAnimationCurve.Linear;
-                
+
             default:
                 if (traceEnabled) {
                     traceWrite("Transition curve resolved to original: " + transition.curve, traceCategories.Transition);

tns-core-modules/ui/progress/progress.ios.ts

@@ -38,11 +38,7 @@ export class Progress extends ProgressBase {
         return this._ios.progressTintColor;
     }
     set [colorProperty.native](value: Color) {
-        if (value instanceof Color) {
+        this._ios.progressTintColor = value instanceof Color ? value.ios : value;;
-            this._ios.progressTintColor = value.ios;
-        } else {
-            this._ios.progressTintColor = value;
-        }
     }
 
     get [backgroundColorProperty.native](): UIColor {

tns-core-modules/ui/styling/font-common.ts

@@ -1,51 +1,30 @@
 import { Font as FontDefinition, ParsedFont } from "ui/styling/font";
-import { makeValidator, makeParser} from "ui/core/properties";
+import { makeValidator, makeParser } from "ui/core/properties";
 
 export abstract class FontBase implements FontDefinition {
     public static default = undefined;
 
-    private _fontFamily: string;
-    private _fontStyle: FontStyle;
-    private _fontWeight: FontWeight;
-    private _fontSize: number;
-
-    get fontFamily(): string {
-        return this._fontFamily;
-    }
-
-    get fontStyle(): FontStyle {
-        return this._fontStyle;
-    }
-
-    get fontWeight(): FontWeight {
-        return this._fontWeight;
-    }
-
-    get fontSize(): number {
-        return this._fontSize;
-    }
-
     get isItalic(): boolean {
-        return this._fontStyle === FontStyle.ITALIC;
+        return this.fontStyle === FontStyle.ITALIC;
     }
 
     get isBold(): boolean {
-        return this._fontWeight === FontWeight.BOLD
+        return this.fontWeight === FontWeight.BOLD
-            || this._fontWeight === "700";
+            || this.fontWeight === "700";
     }
 
-    protected constructor(family: string, size: number, style: FontStyle, weight: FontWeight) {
+    protected constructor(
-        this._fontFamily = family;
+        public readonly fontFamily: string,
-        this._fontSize = size;
+        public readonly fontSize: number,
-        this._fontStyle = style;
+        public readonly fontStyle: FontStyle,
-        this._fontWeight = weight;
+        public readonly fontWeight: FontWeight) {
     }
 
     public abstract getAndroidTypeface(): android.graphics.Typeface;
     public abstract getUIFont(defaultFont: UIFont): UIFont;
     public abstract withFontFamily(family: string): FontBase;
     public abstract withFontStyle(style: string): FontBase;
-    public abstract withFontWeight(weight: string):FontBase;
+    public abstract withFontWeight(weight: string): FontBase;
     public abstract withFontSize(size: number): FontBase;
 
     public static equals(value1: FontBase, value2: FontBase): boolean {
@@ -79,10 +58,10 @@ export namespace FontWeight {
     export const THIN: "100" = "100";
     export const EXTRA_LIGHT: "200" = "200";
     export const LIGHT: "300" = "300";
-    export const NORMAL: "normal" = "normal"; 
+    export const NORMAL: "normal" = "normal";
     export const MEDIUM: "500" = "500";
     export const SEMI_BOLD: "600" = "600";
-    export const BOLD: "bold" = "bold"; 
+    export const BOLD: "bold" = "bold";
     export const EXTRA_BOLD: "800" = "800";
     export const BLACK: "900" = "900";
     export const isValid = makeValidator<FontWeight>(THIN, EXTRA_LIGHT, LIGHT, NORMAL, "400", MEDIUM, SEMI_BOLD, BOLD, "700", EXTRA_BOLD, BLACK);
@@ -114,7 +93,7 @@ export module genericFontFamilies {
 
 const styles = new Set();
 [
-    FontStyle.NORMAL, 
+    FontStyle.NORMAL,
     FontStyle.ITALIC
 ].forEach((val, i, a) => styles.add(val));
 
@@ -132,16 +111,16 @@ const styles = new Set();
 //- 900(Black / Heavy) (API21 -black)
 const weights = new Set();
 [
-    FontWeight.THIN, 
+    FontWeight.THIN,
-    FontWeight.EXTRA_LIGHT, 
+    FontWeight.EXTRA_LIGHT,
-    FontWeight.LIGHT, 
+    FontWeight.LIGHT,
-    FontWeight.NORMAL, 
+    FontWeight.NORMAL,
-    "400", 
+    "400",
-    FontWeight.MEDIUM, 
+    FontWeight.MEDIUM,
-    FontWeight.SEMI_BOLD, 
+    FontWeight.SEMI_BOLD,
-    FontWeight.BOLD, 
+    FontWeight.BOLD,
-    "700", 
+    "700",
-    FontWeight.EXTRA_BOLD, 
+    FontWeight.EXTRA_BOLD,
     FontWeight.BLACK
 ].forEach((val, i, a) => weights.add(val));
 

tns-core-modules/ui/styling/font.android.ts

@@ -36,7 +36,7 @@ export class Font extends FontBase {
 
     public getAndroidTypeface(): android.graphics.Typeface {
         if (!this._typeface) {
-            var fontStyle = 0;
+            let fontStyle = 0;
             if (this.isBold) {
                 fontStyle |= android.graphics.Typeface.BOLD;
             }
@@ -44,7 +44,7 @@ export class Font extends FontBase {
                 fontStyle |= android.graphics.Typeface.ITALIC;
             }
 
-            var typeFace = createTypeface(this);
+            const typeFace = createTypeface(this);
             this._typeface = android.graphics.Typeface.create(typeFace, fontStyle);
         }
         return this._typeface;
@@ -66,8 +66,8 @@ function loadFontFromFile(fontFamily: string): android.graphics.Typeface {
     if (result === undefined) {
         result = null;
 
-        var fontAssetPath: string;
+        let fontAssetPath: string;
-        var basePath = fs.path.join(fs.knownFolders.currentApp().path, "fonts", fontFamily);
+        const basePath = fs.path.join(fs.knownFolders.currentApp().path, "fonts", fontFamily);
         if (fs.File.exists(basePath + ".ttf")) {
             fontAssetPath = FONTS_BASE_PATH + fontFamily + ".ttf";
         }
@@ -83,7 +83,7 @@ function loadFontFromFile(fontFamily: string): android.graphics.Typeface {
         if (fontAssetPath) {
             try {
                 fontAssetPath = fs.path.join(fs.knownFolders.currentApp().path, fontAssetPath);
-                result = android.graphics.Typeface.createFromFile(fontAssetPath)
+                result = android.graphics.Typeface.createFromFile(fontAssetPath);
             } catch (e) {
                 if (traceEnabled) {
                     traceWrite("Error loading font asset: " + fontAssetPath, traceCategories.Error, traceMessageType.error);
@@ -98,13 +98,13 @@ function loadFontFromFile(fontFamily: string): android.graphics.Typeface {
 
 function createTypeface(font: Font): android.graphics.Typeface {
     //http://stackoverflow.com/questions/19691530/valid-values-for-androidfontfamily-and-what-they-map-to
-    var fonts = parseFontFamily(font.fontFamily);
+    const fonts = parseFontFamily(font.fontFamily);
-    var result = null;
+    let result = null;
     if (fonts.length === 0) {
         return null;
     }
 
-    for (var i = 0; i < fonts.length; i++) {
+    for (let i = 0; i < fonts.length; i++) {
         switch (fonts[i].toLowerCase()) {
             case genericFontFamilies.serif:
                 result = android.graphics.Typeface.create("serif" + getFontWeightSuffix(font.fontWeight), 0);

tns-core-modules/ui/text-base/text-base.android.ts

@@ -1,7 +1,7 @@
 import {
-    TextBaseCommon, textProperty, formattedTextProperty, textAlignmentProperty, textDecorationProperty,
+    TextBaseCommon, formattedTextProperty, textAlignmentProperty, textDecorationProperty, fontSizeProperty,
-    textTransformProperty, letterSpacingProperty, colorProperty, fontInternalProperty, whiteSpaceProperty,
+    textProperty, textTransformProperty, letterSpacingProperty, colorProperty, fontInternalProperty,
-    Font, Color, FormattedString, TextDecoration, TextAlignment, TextTransform, WhiteSpace,
+    whiteSpaceProperty, Font, Color, FormattedString, TextDecoration, TextAlignment, TextTransform, WhiteSpace,
     paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, Length
 } from "./text-base-common";
 import { toUIString } from "utils/types";
@@ -64,6 +64,18 @@ export class TextBase extends TextBaseCommon {
         }
     }
 
+    //FontSize
+    get [fontSizeProperty.native](): { nativeSize: number } {
+        return { nativeSize: this._nativeView.getTextSize() };
+    }
+    set [fontSizeProperty.native](value: number | { nativeSize: number }) {
+        if (typeof value === "number") {
+            this._nativeView.setTextSize(value);
+        } else {
+            this._nativeView.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, value.nativeSize);
+        }
+    }
+
     //FontInternal
     get [fontInternalProperty.native](): { typeface: android.graphics.Typeface, fontSize: number } {
         let textView = this._nativeView;
@@ -75,14 +87,11 @@ export class TextBase extends TextBaseCommon {
     set [fontInternalProperty.native](value: Font | { typeface: android.graphics.Typeface, fontSize: number }) {
         let textView = this._nativeView;
         if (value instanceof Font) {
-            // Set value
+            // Set value. Note: Size is handled in fontSizeProperty.native
             textView.setTypeface(value.getAndroidTypeface());
-            if (value.fontSize !== undefined) {
-                textView.setTextSize(value.fontSize);
-            }
         }
         else {
-            // Reset value
+            // Reset value. Note: Resetting fontInternal will reset the size also.
             textView.setTypeface(value.typeface);
             textView.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, value.fontSize);
         }