Merge pull request #3261 from NativeScript/issue-3147

Fix: Setting `setTypeface()` to null object

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

@@ -14,3 +14,16 @@ export function getNativeSelectedIndex(tabView: tabViewModule.TabView): number {
     var viewPager: android.support.v4.view.ViewPager = (<any>tabView)._viewPager;
     return viewPager.getCurrentItem();
 }
+
+export function getNativeFont(tabView: tabViewModule.TabView): any {
+        var tv: android.widget.TextView = tabView._getAndroidTabView().getTextViewForItemAt(0);
+        if (tv) {
+            return {
+                typeface: tv.getTypeface(),
+                size: tv.getTextSize()
+            }
+        }
+        else {
+            return null;
+        }
+}

tests/app/ui/tab-view/tab-view-tests-native.d.ts

@@ -4,3 +4,4 @@ import tabViewModule = require("ui/tab-view");
 export declare function getNativeTabCount(tabView: tabViewModule.TabView): number;
 export declare function selectNativeTab(tabView: tabViewModule.TabView, index: number): void;
 export declare function getNativeSelectedIndex(tabView: tabViewModule.TabView): number;
+export declare function getNativeFont(tabView: tabViewModule.TabView): any;

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

@@ -1,4 +1,6 @@
 import tabViewModule = require("ui/tab-view");
+import * as utils from "utils/utils";
+import getter = utils.ios.getter;
 
 export function getNativeTabCount(tabView: tabViewModule.TabView): number {
     if (!tabView.ios.viewControllers) {
@@ -16,3 +18,21 @@ export function selectNativeTab(tabView: tabViewModule.TabView, index: number):
 export function getNativeSelectedIndex(tabView: tabViewModule.TabView): number {
     return tabView.ios.selectedIndex;
 }
+
+export function getNativeFont(tabView: tabViewModule.TabView): any {
+    let tabBar = <UITabBar>tabView.ios.tabBar;
+    let currentFont;
+
+    if (tabBar.items.count > 0) {
+        let currentAttrs = tabBar.items[0].titleTextAttributesForState(UIControlState.Normal);
+        if (currentAttrs) {
+            currentFont = currentAttrs.objectForKey(NSFontAttributeName);
+        }
+    }
+
+    if (!currentFont) {
+        currentFont = UIFont.systemFontOfSize(getter(UIFont, UIFont.labelFontSize));
+    }
+
+    return currentFont;
+}

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

@@ -4,6 +4,7 @@ import helper = require("../helper");
 import labelModule = require("ui/label");
 import stackLayoutModule = require("ui/layouts/stack-layout");
 import tabViewTestsNative = require("./tab-view-tests-native");
+import style = require("ui/styling/style");
 
 // Using a TabView requires the "ui/tab-view" module.
 // >> article-require-tabview-module
@@ -276,102 +277,58 @@ export class TabViewTest extends testModule.UITest<tabViewModule.TabView> {
         TKUnit.assertEqual(actualNewIndex, expectedNewIndex, "expectedNewIndex");
     }
 
-//     public testAndroidOffscreenTabLimit_Default = function () {
+    public test_FontIsReappliedWhenTabItemsChange = function () {
-//         let tabView = this.testView;
+        // let fontToString = (font: any): string => {
-//         if (!tabView.android){
+        //     if (this.testView.ios){
-//             return;
+        //         return font.toString();
-//         }
-        
-//         tabView.androidOffscreenTabLimit = 1;
-//         tabView.items = this._createItems(20);
-//         this.waitUntilTestElementIsLoaded();
-//         for (let index = 0, length = tabView.items.length; index < length; index++){
-//             tabViewTestsNative.selectNativeTab(tabView, index);
-//             TKUnit.waitUntilReady(function () {
-//                 return tabView.selectedIndex === index;
-//             }, helper.ASYNC);
-//         }
-
-//         let viewsWithParent = 0;
-//         let viewsWithoutParent = 0;
-//         for (let i = 0, length = tabView.items.length; i < length; i++){
-//             if (tabView.items[i].view.parent) {
-//                 viewsWithParent++;
-//             }
-//             else {
-//                 viewsWithoutParent++;
-//             }
-//         }
-
-//         TKUnit.assertTrue(viewsWithoutParent > viewsWithParent, `Most of the views should be recycled: viewsWithoutParent = ${viewsWithoutParent}; viewsWithParent = ${viewsWithParent};`);
-//     }
-
-    // public testAndroidOffscreenTabLimit_KeepAllAlive = function () {
-    //     let tabView = this.testView;
-    //     if (!tabView.android){
-    //         return;
         //     }
-        
+        //     else {
-    //     tabView.androidOffscreenTabLimit = 20;
+        //          return `${font.typeface} ${font.size}`;
-        
-    //     tabView.items = this._createItems(20);
-    //     this.waitUntilTestElementIsLoaded();
-    //     for (let index = 0, length = tabView.items.length; index < length; index++){
-    //         tabViewTestsNative.selectNativeTab(tabView, index);
-    //         TKUnit.waitUntilReady(function () {
-    //             return tabView.selectedIndex === index;
-    //         }, helper.ASYNC);
-    //     }
-
-    //     for (let i = 0, length = tabView.items.length; i < length; i++){
-    //         TKUnit.assertNotNull(tabView.items[i].view.parent, `tabView.items[${i}].view should have a parent!`);
         //     }
         // }
         
-    /*
+        let assertFontsAreEqual = (actual: any, expected: any, message?: string) => {
-    public testBindingIsRefreshedWhenTabViewItemIsUnselectedAndThenSelectedAgain() {
+            if (this.testView.ios){
+                TKUnit.assertEqual(actual, expected, message);
+            }
+            else {
+                TKUnit.assertEqual(actual.typeface, expected.typeface, `${message} [typeface]`);
+                TKUnit.assertEqual(actual.size, expected.size, `${message} [size]`);
+            }
+        }
 
-        var viewModel = new observable.Observable();
+        //console.log(`>>>>>>>>>>>>> CREATE 3 ITEMS`);
-        viewModel.set("counter", 0);
+        this.testView.items = this._createItems(1);
-        this.testPage.bindingContext = viewModel;
+        this.waitUntilTestElementIsLoaded();
         
-        var tabView = this.testView;
+        let originalFont = tabViewTestsNative.getNativeFont(this.testView);
-        var items = this._createItems(10);
+        //console.log(`>>>>>>>>>>>>> originalFont: ${fontToString(originalFont)}`);
+        let nativeFont: any;
 
-        var StackLayout0 = new stackLayoutModule.StackLayout();
+        //console.log(`>>>>>>>>>>>>> PACIFICO`);
-        var label0 = new labelModule.Label();
+        this.testView.style.font = "20 Pacifico";
-        label0.text = "Tab 0";
+        nativeFont = tabViewTestsNative.getNativeFont(this.testView);
-        label0.id = "testLabel";
+        //console.log(`>>>>>>>>>>>>> nativeFont: ${fontToString(nativeFont)}`);
-        label0.bind({ sourceProperty: "counter", targetProperty: "text", twoWay: true });
-        StackLayout0.addChild(label0);
-        var tabEntry0 = new tabViewModule.TabViewItem({
-            title: "Tab 0",
-            view: StackLayout0
-        });
-        items.push(tabEntry0);
         
-        tabView.items = items;
+        //console.log(`>>>>>>>>>>>>> CREATE 3 ITEMS`);
-        tabView.selectedIndex = 10;
+        this.testView.items = this._createItems(2);
-        TKUnit.waitUntilReady(function () {
+        assertFontsAreEqual(tabViewTestsNative.getNativeFont(this.testView), nativeFont, "Font must be 20 Pacifico after rebinding items.");
-            return tabViewTestsNative.getNativeSelectedIndex(tabView) === tabView.selectedIndex;
+        //console.log(`>>>>>>>>>>>>> nativeFont: ${fontToString(nativeFont)}`);
-        }, helper.ASYNC);
         
-        TKUnit.assertEqual(label0.text, 0, "binding is not working!");
+        //console.log(`>>>>>>>>>>>>> MONOSPACE;`);
+        this.testView.style.font = "bold 12 monospace";
+        nativeFont = tabViewTestsNative.getNativeFont(this.testView);
+        //console.log(`>>>>>>>>>>>>> nativeFont: ${fontToString(nativeFont)}`);
         
-        tabView.selectedIndex = 0;
+        //console.log(`>>>>>>>>>>>>> CREATE 3 ITEMS`);
-        TKUnit.waitUntilReady(function () {
+        this.testView.items = this._createItems(3);
-            return tabViewTestsNative.getNativeSelectedIndex(tabView) === tabView.selectedIndex;
+        assertFontsAreEqual(tabViewTestsNative.getNativeFont(this.testView), nativeFont, "Font must be bold 12 monospace after rebinding items.");
-        }, helper.ASYNC);
+        //console.log(`>>>>>>>>>>>>> nativeFont: ${fontToString(nativeFont)}`);
 
-        tabView.selectedIndex = 10;
+        //console.log(`>>>>>>>>>>>>> RESET`);
-        TKUnit.waitUntilReady(function () {
+        this.testView.style._resetValue(style.fontInternalProperty);
-            return tabViewTestsNative.getNativeSelectedIndex(tabView) === tabView.selectedIndex;
+        assertFontsAreEqual(tabViewTestsNative.getNativeFont(this.testView), originalFont, "Font must be the original one after resetting the style.");
-        }, helper.ASYNC);
+    }
-
-        var expectedValue = 5;
-        viewModel.set("counter", expectedValue);
-        TKUnit.assertEqual(label0.text, expectedValue, "binding is not working!");
-    }*/
 }
 
 export function createTestCase(): TabViewTest {

tns-core-modules/ui/tab-view/tab-view.android.ts

@@ -277,6 +277,9 @@ export class TabView extends common.TabView {
         }
 
         this._updateSelectedIndexOnItemsPropertyChanged(data.newValue);
+        
+        // Style properties such as fonts need to re-applied on the newwly created native TextViews
+        this.style._syncNativeProperties();
     }
 
     public _updateTabForItem(item: TabViewItem) {
@@ -348,7 +351,6 @@ export class TabView extends common.TabView {
             }
         }
     }
-
 }
 
 export class TabViewStyler implements style.Styler {
@@ -358,42 +360,36 @@ export class TabViewStyler implements style.Styler {
         var tab = <definition.TabView>v;
         var fontValue = <font.Font>newValue;
         var typeface = fontValue.getAndroidTypeface();
-
-        if (tab.items && tab.items.length > 0) {
         var tabLayout = tab._getAndroidTabView();
-
+        let tabCount = tabLayout.getItemCount(); 
-            for (var i = 0; i < tab.items.length; i++) {
+        for (var i = 0; i < tabCount; i++) {
             let tv = tabLayout.getTextViewForItemAt(i);
             if (typeface) {
                 tv.setTypeface(typeface);
             }
-                else {
+            else if (nativeValue) {
                 tv.setTypeface(nativeValue.typeface);
             }
 
             if (fontValue.fontSize) {
                 tv.setTextSize(fontValue.fontSize);
             }
-                else {
+            else if (nativeValue) {
                 tv.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, nativeValue.size);
             }
         }
     }
-    }
 
     private static resetFontInternalProperty(v: view.View, nativeValue: any) {
         var tab = <definition.TabView>v;
-
-        if (tab.items && tab.items.length > 0) {
         var tabLayout = tab._getAndroidTabView();
-
+        let tabCount = tabLayout.getItemCount(); 
-            for (var i = 0; i < tab.items.length; i++) {
+        for (var i = 0; i < tabCount; i++) {
             let tv = tabLayout.getTextViewForItemAt(i);
             tv.setTypeface(nativeValue.typeface);
             tv.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, nativeValue.size);
         }
     }
-    }
 
     private static getNativeFontInternalValue(v: view.View): any {
         var tab = <definition.TabView>v;

tns-core-modules/ui/tab-view/tab-view.ios.ts

@@ -430,7 +430,7 @@ export class TabView extends common.TabView {
             return;
         }
 
-        var tabBar = this.ios.tabBar;
+        var tabBar = <UITabBar>this.ios.tabBar;
         var states = getTitleAttributesForStates(this);
         for (var i = 0; i < tabBar.items.count; i++) {
             var item = <UITabBarItem>tabBar.items[i];
@@ -496,12 +496,11 @@ export class TabViewStyler implements style.Styler {
     }
 
     private static getNativeFontValue(v: view.View) {
-        var tab = <definition.TabView>v;
+        var tabBar = <UITabBar>v.ios.tabBar;
-
         let currentFont;
 
-        if (tab.ios && tab.ios.items && tab.ios.items.length > 0) {
+        if (tabBar.items.count > 0) {
-            let currentAttrs = tab.ios.items[0].titleTextAttributesForState(UIControlState.Normal);
+            let currentAttrs = tabBar.items[0].titleTextAttributesForState(UIControlState.Normal);
             if (currentAttrs) {
                 currentFont = currentAttrs.objectForKey(NSFontAttributeName);
             }

tns-platform-declarations/android/org.nativescript.widgets.d.ts

@@ -360,6 +360,7 @@
 
                 getTextViewForItemAt(index: number): android.widget.TextView;
                 getViewForItemAt(index: number): android.widget.LinearLayout;
+                getItemCount(): number;
             }
 
             export class TabItemSpec {