Merge pull request #185 from NativeScript/sg-tests

segmented-bar tests & fixes

CrossPlatformModules.csproj

@@ -123,6 +123,14 @@
     <TypeScriptCompile Include="apps\tests\ui\dialogs\dialog-tests.ts" />
     <TypeScriptCompile Include="apps\tests\ui\image-cache\image-cache-tests.ts" />
     <TypeScriptCompile Include="apps\tests\ui\border\border-tests.ts" />
+    <TypeScriptCompile Include="apps\tests\ui\segmented-bar\segmented-bar-tests-native.android.ts">
+      <DependentUpon>segmented-bar-tests-native.d.ts</DependentUpon>
+    </TypeScriptCompile>
+    <TypeScriptCompile Include="apps\tests\ui\segmented-bar\segmented-bar-tests-native.d.ts" />
+    <TypeScriptCompile Include="apps\tests\ui\segmented-bar\segmented-bar-tests-native.ios.ts">
+      <DependentUpon>segmented-bar-tests-native.d.ts</DependentUpon>
+    </TypeScriptCompile>
+    <TypeScriptCompile Include="apps\tests\ui\segmented-bar\segmented-bar-tests.ts" />
     <TypeScriptCompile Include="apps\tests\ui\list-picker\list-picker-tests-native.d.ts" />
     <TypeScriptCompile Include="apps\tests\ui\list-picker\list-picker-tests-native.android.ts">
       <DependentUpon>list-picker-tests-native.d.ts</DependentUpon>
@@ -1475,7 +1483,7 @@
           <SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
         </WebProjectProperties>
       </FlavorProperties>
-      <UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
+      <UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
     </VisualStudio>
   </ProjectExtensions>
 </Project>

apps/tests/ui/segmented-bar/segmented-bar-tests-native.android.ts

@@ -0,0 +1,5 @@
+import segmentedBarModule = require("ui/segmented-bar");
+
+export function getNativeItemsCount(bar: segmentedBarModule.SegmentedBar): number {
+    return (<android.widget.TabHost>bar.android).getTabWidget().getTabCount();
+}

apps/tests/ui/segmented-bar/segmented-bar-tests-native.d.ts

@@ -0,0 +1,4 @@
+//@private
+import segmentedBarModule = require("ui/segmented-bar");
+
+export declare function getNativeItemsCount(bar: segmentedBarModule.SegmentedBar): number;

apps/tests/ui/segmented-bar/segmented-bar-tests-native.ios.ts

@@ -0,0 +1,5 @@
+import segmentedBarModule = require("ui/segmented-bar");
+
+export function getNativeItemsCount(bar: segmentedBarModule.SegmentedBar): number {
+    return (<UISegmentedControl>bar.ios).numberOfSegments;
+}

apps/tests/ui/segmented-bar/segmented-bar-tests.ts

@@ -0,0 +1,171 @@
+import TKUnit = require("../../TKUnit");
+import helper = require("../helper");
+import viewModule = require("ui/core/view");
+import segmentedBarTestsNative = require("./segmented-bar-tests-native");
+
+// <snippet module="ui/segmented-bar" title="SegmentedBar">
+// # SegmentedBar
+
+// Using a SegmentedBar requires the "ui/segmented-bar" module.
+// ``` JavaScript
+import segmentedBarModule = require("ui/segmented-bar");
+
+function _createSegmentedBar(): segmentedBarModule.SegmentedBar {
+    // <snippet module="ui/segmented-bar" title="SegmentedBar">
+    // ## Creating a SegmentedBar
+    // ``` JavaScript
+    var segmentedBar = new segmentedBarModule.SegmentedBar();
+    // ```
+    // </snippet>
+    segmentedBar.id = "SegmentedBar";
+    return segmentedBar;
+}
+
+function _createItems(count: number): Array<segmentedBarModule.SegmentedBarItem> {
+    var items = new Array<segmentedBarModule.SegmentedBarItem>();
+    for (var i = 0; i < count; i++) {
+        items.push({ title: i + "" });
+    }
+    return items;
+}
+
+export var testWhenSegmentedBarIsCreatedItemsAreUndefined = function () {
+    helper.buildUIAndRunTest(_createSegmentedBar(), function (views: Array<viewModule.View>) {
+        var segmentedBar = <segmentedBarModule.SegmentedBar>views[0];
+        var expectedValue = undefined;
+        var actualValue = segmentedBar.items;
+        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
+    });
+}
+
+export var testWhenSegmentedBarIsCreatedSelectedIndexIsUndefined = function () {
+    helper.buildUIAndRunTest(_createSegmentedBar(), function (views: Array<viewModule.View>) {
+        var segmentedBar = <segmentedBarModule.SegmentedBar>views[0];
+        var expectedValue = undefined;
+        var actualValue = segmentedBar.selectedIndex;
+        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
+    });
+}
+
+export var testWhenSettingItemsToNonEmptyArrayTheSameAmountOfNativeItemsIsCreated = function () {
+    helper.buildUIAndRunTest(_createSegmentedBar(), function (views: Array<viewModule.View>) {
+        var segmentedBar = <segmentedBarModule.SegmentedBar>views[0];
+        segmentedBar.items = _createItems(10);
+        var expectedValue = segmentedBar.items.length;
+        var actualValue = segmentedBarTestsNative.getNativeItemsCount(segmentedBar);
+        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
+    });
+}
+
+export var testWhenSettingItemsToEmptyArrayZeroNativeItemsAreCreated = function () {
+    helper.buildUIAndRunTest(_createSegmentedBar(), function (views: Array<viewModule.View>) {
+        var segmentedBar = <segmentedBarModule.SegmentedBar>views[0];
+        segmentedBar.items = [];
+        var expectedValue = segmentedBar.items.length;
+        var actualValue = segmentedBarTestsNative.getNativeItemsCount(segmentedBar);
+        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
+    });
+}
+
+export var testSelectedIndexBecomesZeroWhenItemsBoundToNonEmptyArray = function () {
+    helper.buildUIAndRunTest(_createSegmentedBar(), function (views: Array<viewModule.View>) {
+        var segmentedBar = <segmentedBarModule.SegmentedBar>views[0];
+        // <snippet module="ui/segmented-bar" title="SegmentedBar">
+        // ### Binding segmentedBar.items
+        // ``` JavaScript
+        segmentedBar.items = _createItems(3);
+        // ```
+        // </snippet>
+        var expectedValue = 0;
+        var actualValue = segmentedBar.selectedIndex;
+        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
+    });
+}
+
+export var testSelectedIndexBecomesUndefinedWhenItemsBoundToEmptyArray = function () {
+    helper.buildUIAndRunTest(_createSegmentedBar(), function (views: Array<viewModule.View>) {
+        var segmentedBar = <segmentedBarModule.SegmentedBar>views[0];
+        segmentedBar.items = _createItems(10);
+        // <snippet module="ui/segmented-bar" title="SegmentedBar">
+        // ### Selecting an item programmatically
+        // ``` JavaScript
+        segmentedBar.selectedIndex = 9;
+        // ```
+        // </snippet>
+        segmentedBar.items = [];
+        var expectedValue = undefined;
+        var actualValue = segmentedBar.selectedIndex;
+        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
+    });
+}
+
+export var testSelectedIndexBecomesUndefinedWhenItemsBoundToUndefined = function () {
+    helper.buildUIAndRunTest(_createSegmentedBar(), function (views: Array<viewModule.View>) {
+        var segmentedBar = <segmentedBarModule.SegmentedBar>views[0];
+        segmentedBar.items = _createItems(10);
+        segmentedBar.selectedIndex = 9;
+        segmentedBar.items = undefined;
+        var expectedValue = undefined;
+        var actualValue = segmentedBar.selectedIndex;
+        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
+    });
+}
+
+export var testSelectedIndexBecomesUndefinedWhenItemsBoundToNull = function () {
+    helper.buildUIAndRunTest(_createSegmentedBar(), function (views: Array<viewModule.View>) {
+        var segmentedBar = <segmentedBarModule.SegmentedBar>views[0];
+        segmentedBar.items = _createItems(10);
+        segmentedBar.selectedIndex = 9;
+        segmentedBar.items = null;
+        var expectedValue = undefined;
+        var actualValue = segmentedBar.selectedIndex;
+        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
+    });
+}
+
+export var testItemsIsResolvedCorrectlyIfSetBeforeViewIsLoaded = function () {
+    var segmentedBar = _createSegmentedBar();
+    var expectedValue = 10;
+    segmentedBar.items = _createItems(expectedValue);
+    segmentedBar.selectedIndex = 9;
+    helper.buildUIAndRunTest(segmentedBar, function (views: Array<viewModule.View>) {
+        var segmentedBar = <segmentedBarModule.SegmentedBar>views[0];
+        var actualValue = segmentedBar.items.length;
+        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
+    });
+}
+
+export var testSelectedIndexIsResolvedCorrectlyIfSetBeforeViewIsLoaded = function () {
+    var segmentedBar = _createSegmentedBar();
+    segmentedBar.items = _createItems(10);
+    var expectedValue = 9;
+    segmentedBar.selectedIndex = expectedValue;
+    helper.buildUIAndRunTest(segmentedBar, function (views: Array<viewModule.View>) {
+        var segmentedBar = <segmentedBarModule.SegmentedBar>views[0];
+        var actualValue = segmentedBar.selectedIndex;
+        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
+    });
+}
+
+export var testSettingNegativeSelectedIndexShouldThrow = function () {
+    var segmentedBar = _createSegmentedBar();
+    helper.buildUIAndRunTest(segmentedBar, function (views: Array<viewModule.View>) {
+        var segmentedBar = <segmentedBarModule.SegmentedBar>views[0];
+        segmentedBar.items = _createItems(10);
+
+        TKUnit.assertThrows(function () {
+            segmentedBar.selectedIndex = -1;
+        }, "Setting selectedIndex to a negative number should throw.");
+    });
+}
+
+export var testSettingSelectedIndexLargerThanCountShouldThrow = function () {
+    var segmentedBar = _createSegmentedBar();
+    helper.buildUIAndRunTest(segmentedBar, function (views: Array<viewModule.View>) {
+        var segmentedBar = <segmentedBarModule.SegmentedBar>views[0];
+        segmentedBar.items = _createItems(10);
+        TKUnit.assertThrows(function () {
+            segmentedBar.selectedIndex = 10;
+        }, "Setting selectedIndex to a larger number should throw.");
+    });
+}

ui/segmented-bar/segmented-bar-common.ts

@@ -3,6 +3,7 @@ import view = require("ui/core/view");
 import proxy = require("ui/core/proxy");
 import dependencyObservable = require("ui/core/dependency-observable");
 import color = require("color");
+import types = require("utils/types");
 
 export module knownCollections {
     export var items = "items";
@@ -15,9 +16,17 @@ export class SegmentedBar extends view.View implements definition.SegmentedBar {
         }
     }
 
-    public _adjustSelectedIndex() {
+    public _adjustSelectedIndex(items: Array<definition.SegmentedBarItem>) {
-        if (this.selectedIndex > this.items.length - 1) {
+        if (this.items) {
-            this._setValue(SegmentedBar.selectedIndexProperty, this.items.length - 1);
+            if (this.items.length > 0) {
+                if (types.isUndefined(this.selectedIndex) || (this.selectedIndex > this.items.length - 1)) {
+                    this._setValue(SegmentedBar.selectedIndexProperty, 0);
+                }
+            } else {
+                this._setValue(SegmentedBar.selectedIndexProperty, undefined);
+            }
+        } else {
+            this._setValue(SegmentedBar.selectedIndexProperty, undefined);
         }
     }
 
@@ -44,6 +53,6 @@ export class SegmentedBar extends view.View implements definition.SegmentedBar {
     }
 
     public static selectedBackgroundColorProperty = new dependencyObservable.Property("selectedBackgroundColor", "SegmentedBar", new proxy.PropertyMetadata(undefined))
-    public static selectedIndexProperty = new dependencyObservable.Property("selectedIndex", "SegmentedBar", new proxy.PropertyMetadata(0))
+    public static selectedIndexProperty = new dependencyObservable.Property("selectedIndex", "SegmentedBar", new proxy.PropertyMetadata(undefined))
     public static itemsProperty = new dependencyObservable.Property("items", "SegmentedBar", new proxy.PropertyMetadata(undefined))
 }

ui/segmented-bar/segmented-bar.android.ts

@@ -1,4 +1,5 @@
-import common = require("ui/segmented-bar/segmented-bar-common");
+import definition = require("ui/segmented-bar");
+import common = require("ui/segmented-bar/segmented-bar-common");
 import dependencyObservable = require("ui/core/dependency-observable");
 import proxy = require("ui/core/proxy");
 import types = require("utils/types");
@@ -15,8 +16,13 @@ function onSelectedIndexPropertyChanged(data: dependencyObservable.PropertyChang
 
     var index = <number>data.newValue;
 
-    if (types.isNumber(index) && index >= 0 && index <= view.items.length - 1) {
+    if (types.isNumber(index)) {
+        if (index >= 0 && index <= view.items.length - 1) {
             view.android.setCurrentTab(index);
+        } else {
+            view.selectedIndex = undefined;
+            throw new Error("selectedIndex should be between [0, items.length - 1]");
+        }
     }
 }
 (<proxy.PropertyMetadata>common.SegmentedBar.selectedIndexProperty.metadata).onSetNativeValue = onSelectedIndexPropertyChanged;
@@ -29,7 +35,9 @@ function onItemsPropertyChanged(data: dependencyObservable.PropertyChangeData) {
 
     view.android.clearAllTabs();
 
-    var newItems = <Array<any>>data.newValue;
+    var newItems = <Array<definition.SegmentedBarItem>>data.newValue;
+
+    view._adjustSelectedIndex(newItems);
 
     if (newItems && newItems.length) {
         for (var i = 0; i < newItems.length; i++) {
@@ -49,8 +57,6 @@ function onItemsPropertyChanged(data: dependencyObservable.PropertyChangeData) {
             view.android.addTab(tab);
         }
 
-        view._adjustSelectedIndex();
-
         if (view.android.getCurrentTab() !== view.selectedIndex) {
             view.android.setCurrentTab(view.selectedIndex);
         }

ui/segmented-bar/segmented-bar.ios.ts

@@ -1,4 +1,5 @@
-import common = require("ui/segmented-bar/segmented-bar-common");
+import definition = require("ui/segmented-bar");
+import common = require("ui/segmented-bar/segmented-bar-common");
 import dependencyObservable = require("ui/core/dependency-observable");
 import proxy = require("ui/core/proxy");
 import types = require("utils/types");
@@ -15,8 +16,13 @@ function onSelectedIndexPropertyChanged(data: dependencyObservable.PropertyChang
     }
 
     var index = <number>data.newValue;
-    if (types.isNumber(index) && index >= 0 && index <= view.items.length - 1) {
+    if (types.isNumber(index)) {
+        if (index >= 0 && index <= view.items.length - 1) {
             view.ios.selectedSegmentIndex = index;
+        } else {
+            view.selectedIndex = undefined;
+            throw new Error("selectedIndex should be between [0, items.length - 1]");
+        }
     }
 }
 (<proxy.PropertyMetadata>common.SegmentedBar.selectedIndexProperty.metadata).onSetNativeValue = onSelectedIndexPropertyChanged;
@@ -27,18 +33,24 @@ function onItemsPropertyChanged(data: dependencyObservable.PropertyChangeData) {
         return;
     }
 
+    var newItems = <Array<definition.SegmentedBarItem>>data.newValue;
+
+    console.log("SET ITEMS BEFORE: " + view.selectedIndex);
+    view._adjustSelectedIndex(newItems);
+    console.log("SET ITEMS AFTER: " + view.selectedIndex);
+
     view.ios.removeAllSegments();
 
-    for (var i = 0; i < view.items.length; i++) {
+    if (newItems && newItems.length) {
-        view.ios.insertSegmentWithTitleAtIndexAnimated(view.items[i].title, i, false);
+        for (var i = 0; i < newItems.length; i++) {
+            view.ios.insertSegmentWithTitleAtIndexAnimated(newItems[i].title, i, false);
         }
 
-    view._adjustSelectedIndex();
-
         if (view.ios.selectedSegmentIndex !== view.selectedIndex) {
             view.ios.selectedSegmentIndex = view.selectedIndex;
         }
     }
+}
 (<proxy.PropertyMetadata>common.SegmentedBar.itemsProperty.metadata).onSetNativeValue = onItemsPropertyChanged;
 
 function onSelectedBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
@@ -60,6 +72,7 @@ export class SegmentedBar extends common.SegmentedBar {
     constructor() {
         super();
         this._ios = UISegmentedControl.new();
+        console.log("CREATE: " + this.selectedIndex);
 
         this._selectionHandler = SelectionHandlerImpl.new().initWithOwner(this);
         this._ios.addTargetActionForControlEvents(this._selectionHandler, "selected", UIControlEvents.UIControlEventValueChanged);