Slider tests

tests/app/testRunner.ts

@@ -77,7 +77,7 @@ allTests["LABEL"] = require("./ui/label/label-tests");
 allTests["TAB-VIEW"] = require("./ui/tab-view/tab-view-tests");
 // allTests["TAB-VIEW-NAVIGATION"] = require("./ui/tab-view/tab-view-navigation-tests");
 // allTests["IMAGE"] = require("./ui/image/image-tests");
-// allTests["SLIDER"] = require("./ui/slider/slider-tests");
+allTests["SLIDER"] = require("./ui/slider/slider-tests");
 allTests["SWITCH"] = require("./ui/switch/switch-tests");
 allTests["PROGRESS"] = require("./ui/progress/progress-tests");
 // allTests["PLACEHOLDER"] = require("./ui/placeholder/placeholder-tests");

tests/app/ui/slider/slider-tests.ts

@@ -1,14 +1,14 @@
 import * as TKUnit from "../../TKUnit";
 import * as helper from "../helper";
-import * as viewModule from "ui/core/view";
+import { View } from "ui/core/view";
-import * as pagesModule from "ui/page";
+import { Page } from "ui/page";
-import * as bindable from "ui/core/bindable";
+import { BindingOptions } from "ui/core/bindable";
-import * as observable from "data/observable";
+import { Observable, EventData, PropertyChangeData } from "data/observable";
-import * as color from "color";
+import { Color } from "color";
-import * as platform from "platform";
+import { isIOS } from "platform";
 
 // >> article-require-slider
-import * as sliderModule from "ui/slider";
+import { Slider } from "ui/slider";
 // << article-require-slider
 
 // ### Binding the Progress and Slider value properties to a observable view-model property.
@@ -16,21 +16,36 @@ import * as sliderModule from "ui/slider";
 // >> article-binding-slider-properties
 // function pageLoaded(args) {
 //   var page = args.object;
-//   var obj = new observable.Observable();
+//   var obj = new Observable();
 //   obj.set("someProperty", 42);
 //   page.bindingContext = obj;
 // }
 // exports.pageLoaded = pageLoaded;
 // << article-binding-slider-properties
 
-var TEST_VALUE = 5;
+const TEST_VALUE = 5;
+const VALUE_EVENT = "valueChange";
+const MIN_VALUE_EVENT = "minValueChange";
+const MAX_VALUE_EVENT = "maxValueChange";
+
+function attachValueChangedEvents(slider: Slider, callback: (data: EventData) => void) {
+    slider.on(VALUE_EVENT, callback);
+    slider.on(MIN_VALUE_EVENT, callback);
+    slider.on(MAX_VALUE_EVENT, callback);
+}
+
+function detachValueChangedEvents(slider: Slider) {
+    slider.off(VALUE_EVENT);
+    slider.off(MIN_VALUE_EVENT);
+    slider.off(MAX_VALUE_EVENT);
+}
 
 export function test_set_TNS_value_updates_native_value() {
     // >> article-creating-slider
-    var slider = new sliderModule.Slider();
+    const slider = new Slider();
     // << article-creating-slider
 
-    function testAction(views: Array<viewModule.View>) {
+    function testAction(views: Array<View>) {
         slider.value = TEST_VALUE;
         TKUnit.assertEqual(getNativeValue(slider), TEST_VALUE, "Native value is different from TNS value.");
     };
@@ -39,8 +54,8 @@ export function test_set_TNS_value_updates_native_value() {
 }
 
 export function test_set_native_value_updates_TNS_value() {
-    var slider = new sliderModule.Slider();
+    const slider = new Slider();
-    function testAction(views: Array<viewModule.View>) {
+    function testAction(views: Array<View>) {
         setNativeValue(slider, TEST_VALUE);
         TKUnit.assertEqual(slider.value, TEST_VALUE, "Native value is different from TNS value.");
     };
@@ -49,13 +64,14 @@ export function test_set_native_value_updates_TNS_value() {
 }
 
 export function test_set_native_value_triggers_propertyChanged() {
-    var slider = new sliderModule.Slider();
+    const slider = new Slider();
-    function testAction(views: Array<viewModule.View>) {
+    function testAction(views: Array<View>) {
-        var valueChanged = false;
+        let valueChanged = false;
-        var allChanges = 0;
+        let allChanges = 0;
-        slider.on(observable.Observable.propertyChangeEvent, function (data: observable.EventData) {
+
+        slider.on(VALUE_EVENT, function (data: EventData) {
             allChanges++;
-            var propertyData = <observable.PropertyChangeData>data;
+            const propertyData = <PropertyChangeData>data;
             if (propertyData && propertyData.propertyName === "value" && propertyData.value === TEST_VALUE) {
                 valueChanged = true;
             }
@@ -63,7 +79,7 @@ export function test_set_native_value_triggers_propertyChanged() {
 
         setNativeValue(slider, TEST_VALUE);
 
-        slider.off(observable.Observable.propertyChangeEvent);
+        slider.off(VALUE_EVENT);
 
         TKUnit.assert(valueChanged, "Property changed for value not called.");
         TKUnit.assertEqual(allChanges, 1, "Property changed callbacks.");
@@ -73,41 +89,41 @@ export function test_set_native_value_triggers_propertyChanged() {
 };
 
 // Uncomment this when find way to check android Drawable color set by setColorFilter() method.
-if (platform.device.os === platform.platformNames.ios) {
+if (isIOS) {
     exports.test_set_color = function () {
-        var slider = new sliderModule.Slider();
+        const slider = new Slider();
-        slider.color = new color.Color("red");
+        slider.color = new Color("red");
 
-        function testAction(views: Array<viewModule.View>) {
+        function testAction(views: Array<View>) {
             TKUnit.assertEqual(slider.color.ios.CGColor, slider.ios.thumbTintColor.CGColor, "slider.color");
         };
 
         helper.buildUIAndRunTest(slider, testAction);
-    }
+    };
 
     exports.test_set_backgroundColor = function () {
-        var slider = new sliderModule.Slider();
+        const slider = new Slider();
-        slider.backgroundColor = new color.Color("red");
+        slider.backgroundColor = new Color("red");
 
-        function testAction(views: Array<viewModule.View>) {
+        function testAction(views: Array<View>) {
             TKUnit.assertEqual(slider.backgroundColor.ios.CGColor, slider.ios.minimumTrackTintColor.CGColor, "slider.backgroundColor");
         };
 
         helper.buildUIAndRunTest(slider, testAction);
-    }
+    };
 }
 
 export function test_default_TNS_values() {
-    var slider = new sliderModule.Slider();
+    const slider = new Slider();
     TKUnit.assertEqual(slider.value, 0, "Default slider.value");
     TKUnit.assertEqual(slider.minValue, 0, "Default slider.minValue");
     TKUnit.assertEqual(slider.maxValue, 100, "Default slider.maxValue");
 }
 
 export function test_default_native_values() {
-    var slider = new sliderModule.Slider();
+    const slider = new Slider();
 
-    function testAction(views: Array<viewModule.View>) {
+    function testAction(views: Array<View>) {
         TKUnit.assertEqual(getNativeValue(slider), 0, "Default native slider.value");
         TKUnit.assertEqual(getNativeMaxValue(slider), 100, "Default native slider.maxValue");
     };
@@ -116,9 +132,9 @@ export function test_default_native_values() {
 }
 
 export function test_set_value_less_than_min_should_set_value_to_min() {
-    var slider = new sliderModule.Slider();
+    const slider = new Slider();
 
-    function testAction(views: Array<viewModule.View>) {
+    function testAction(views: Array<View>) {
         slider.value = -10;
         TKUnit.assertEqual(slider.value, 0, "slider.value");
     };
@@ -127,9 +143,9 @@ export function test_set_value_less_than_min_should_set_value_to_min() {
 }
 
 export function test_set_value_greater_than_max_should_set_value_to_max() {
-    var slider = new sliderModule.Slider();
+    const slider = new Slider();
 
-    function testAction(views: Array<viewModule.View>) {
+    function testAction(views: Array<View>) {
         slider.maxValue = 10;
         slider.value = 20;
         TKUnit.assertEqual(slider.value, 10, "slider.value");
@@ -139,12 +155,12 @@ export function test_set_value_greater_than_max_should_set_value_to_max() {
 }
 
 export function test_set_maxValue_should_adjust_value() {
-    var slider = new sliderModule.Slider();
+    const slider = new Slider();
     slider.maxValue = 100;
     slider.value = 50;
     slider.minValue = 0;
 
-    function testAction(views: Array<viewModule.View>) {
+    function testAction(views: Array<View>) {
         slider.maxValue = 40;
 
         TKUnit.assertEqual(slider.maxValue, 40, "slider.maxValue");
@@ -154,8 +170,8 @@ export function test_set_maxValue_should_adjust_value() {
     helper.buildUIAndRunTest(slider, testAction);
 }
 
-export function test_set_maxValue_should_adjust_value_and_minValue() {
+export function test_set_maxValue_should_adjust_value_but_respect_minValue() {
-    var slider = new sliderModule.Slider();
+    const slider = new Slider();
 
     // >> article-setting-slider-values
     slider.maxValue = 120;
@@ -163,24 +179,24 @@ export function test_set_maxValue_should_adjust_value_and_minValue() {
     slider.minValue = 50;
     // << article-setting-slider-values
 
-    function testAction(views: Array<viewModule.View>) {
+    function testAction(views: Array<View>) {
         slider.maxValue = 30;
 
-        TKUnit.assertEqual(slider.maxValue, 30, "slider.maxValue");
+        TKUnit.assertEqual(slider.maxValue, 50, "slider.maxValue");
-        TKUnit.assertEqual(slider.minValue, 30, "slider.minValue");
+        TKUnit.assertEqual(slider.minValue, 50, "slider.minValue");
-        TKUnit.assertEqual(slider.value, 30, "slider.value");
+        TKUnit.assertEqual(slider.value, 50, "slider.value");
     };
 
     helper.buildUIAndRunTest(slider, testAction);
 }
 
 export function test_set_minValue_should_adjust_value() {
-    var slider = new sliderModule.Slider();
+    const slider = new Slider();
     slider.maxValue = 100;
     slider.value = 50;
     slider.minValue = 0;
 
-    function testAction(views: Array<viewModule.View>) {
+    function testAction(views: Array<View>) {
         slider.minValue = 60;
 
         TKUnit.assertEqual(slider.minValue, 60, "slider.minValue");
@@ -191,12 +207,12 @@ export function test_set_minValue_should_adjust_value() {
 }
 
 export function test_set_minValue_should_adjust_value_and_maxValue() {
-    var slider = new sliderModule.Slider();
+    const slider = new Slider();
     slider.maxValue = 100;
     slider.value = 50;
     slider.minValue = 0;
 
-    function testAction(views: Array<viewModule.View>) {
+    function testAction(views: Array<View>) {
         slider.minValue = 120;
 
         TKUnit.assertEqual(slider.minValue, 120, "slider.minValue");
@@ -208,22 +224,23 @@ export function test_set_minValue_should_adjust_value_and_maxValue() {
 }
 
 export function test_property_changed_event_when_setting_minValue_no_adjust() {
-    var slider = new sliderModule.Slider();
+    const slider = new Slider();
     slider.maxValue = 100;
     slider.value = 50;
     slider.minValue = 0;
 
-    function testAction(views: Array<viewModule.View>) {
+    function testAction(views: Array<View>) {
-        var changedProperties = {};
+        const changedProperties = {};
-        var allChanges = 0;
+        let allChanges = 0;
-        slider.on(observable.Observable.propertyChangeEvent, function (data: observable.EventData) {
+
+        attachValueChangedEvents(slider, (data: EventData) => {
             allChanges++;
-            changedProperties[(<observable.PropertyChangeData>data).propertyName] = true;
+            changedProperties[(<PropertyChangeData>data).propertyName] = true;
         });
 
         // Act
         slider.minValue = 10;
-        slider.off(observable.Observable.propertyChangeEvent);
+        detachValueChangedEvents(slider);
 
         // Assert
         TKUnit.assert(changedProperties["minValue"], "Property changed for minValue not called.");
@@ -234,22 +251,22 @@ export function test_property_changed_event_when_setting_minValue_no_adjust() {
 }
 
 export function test_property_changed_event_when_setting_minValue_with_adjust() {
-    var slider = new sliderModule.Slider();
+    const slider = new Slider();
     slider.maxValue = 100;
     slider.value = 50;
     slider.minValue = 0;
 
-    function testAction(views: Array<viewModule.View>) {
+    function testAction(views: Array<View>) {
-        var changedProperties = {};
+        const changedProperties = {};
-        var allChanges = 0;
+        let allChanges = 0;
-        slider.on(observable.Observable.propertyChangeEvent, function (data: observable.EventData) {
+        attachValueChangedEvents(slider, (data: EventData) => {
             allChanges++;
-            changedProperties[(<observable.PropertyChangeData>data).propertyName] = true;
+            changedProperties[(<PropertyChangeData>data).propertyName] = true;
         });
 
         // Act
         slider.minValue = 60;
-        slider.off(observable.Observable.propertyChangeEvent);
+        detachValueChangedEvents(slider);
 
         // Assert
         TKUnit.assert(changedProperties["value"], "Property changed for 'value' not called.");
@@ -261,22 +278,22 @@ export function test_property_changed_event_when_setting_minValue_with_adjust()
 }
 
 export function test_property_changed_event_when_setting_maxValue_no_adjust() {
-    var slider = new sliderModule.Slider();
+    const slider = new Slider();
     slider.maxValue = 100;
     slider.value = 50;
     slider.minValue = 0;
 
-    function testAction(views: Array<viewModule.View>) {
+    function testAction(views: Array<View>) {
-        var changedProperties = {};
+        const changedProperties = {};
-        var allChanges = 0;
+        let allChanges = 0;
-        slider.on(observable.Observable.propertyChangeEvent, function (data: observable.EventData) {
+        attachValueChangedEvents(slider, (data: EventData) => {
             allChanges++;
-            changedProperties[(<observable.PropertyChangeData>data).propertyName] = true;
+            changedProperties[(<PropertyChangeData>data).propertyName] = true;
         });
 
         // Act
         slider.maxValue = 200;
-        slider.off(observable.Observable.propertyChangeEvent);
+        detachValueChangedEvents(slider);
 
         // Assert
         TKUnit.assert(changedProperties["maxValue"], "Property changed for maxValue not called.");
@@ -287,22 +304,22 @@ export function test_property_changed_event_when_setting_maxValue_no_adjust() {
 }
 
 export function test_property_changed_event_when_setting_maxValue_with_adjust() {
-    var slider = new sliderModule.Slider();
+    const slider = new Slider();
     slider.maxValue = 100;
     slider.value = 50;
     slider.minValue = 0;
 
-    function testAction(views: Array<viewModule.View>) {
+    function testAction(views: Array<View>) {
-        var changedProperties = {};
+        const changedProperties = {};
-        var allChanges = 0;
+        let allChanges = 0;
-        slider.on(observable.Observable.propertyChangeEvent, function (data: observable.EventData) {
+        attachValueChangedEvents(slider, (data: EventData) => {
             allChanges++;
-            changedProperties[(<observable.PropertyChangeData>data).propertyName] = true;
+            changedProperties[(<PropertyChangeData>data).propertyName] = true;
         });
 
         // Act
         slider.maxValue = 40;
-        slider.off(observable.Observable.propertyChangeEvent);
+        slider.off(Observable.propertyChangeEvent);
 
         // Assert
         TKUnit.assert(changedProperties["value"], "Property changed for 'value' not called.");
@@ -314,13 +331,13 @@ export function test_property_changed_event_when_setting_maxValue_with_adjust()
 }
 
 export function test_binding_value_to_model() {
-    var slider = new sliderModule.Slider()
+    const slider = new Slider();
 
-    function testAction(views: Array<viewModule.View>) {
+    function testAction(views: Array<View>) {
         // >> article-binding-value-property
-        var model = new observable.Observable();
+        const model = new Observable();
         model.set("age", 21);
-        var options: bindable.BindingOptions = {
+        const options: BindingOptions = {
             sourceProperty: "age",
             targetProperty: "value"
         };
@@ -341,16 +358,16 @@ export function test_binding_value_to_model() {
 }
 
 export function test_binding_value_to_bindingContext() {
-    var slider = new sliderModule.Slider()
+    const slider = new Slider();
 
-    function testAction(views: Array<viewModule.View>) {
+    function testAction(views: Array<View>) {
-        var page = <pagesModule.Page>views[1];
+        const page = <Page>views[1];
 
-        var model = new observable.Observable();
+        const model = new Observable();
         model.set("age", 21);
         page.bindingContext = model;
 
-        var options: bindable.BindingOptions = {
+        const options: BindingOptions = {
             sourceProperty: "age",
             targetProperty: "value"
         };
@@ -365,12 +382,12 @@ export function test_binding_value_to_bindingContext() {
 }
 
 export function test_set_value_min_max_have_correct_values_after_load() {
-    var slider = new sliderModule.Slider();
+    const slider = new Slider();
     slider.minValue = 10;
     slider.maxValue = 300;
     slider.value = 250;
 
-    function testAction(views: Array<viewModule.View>) {
+    function testAction(views: Array<View>) {
         TKUnit.assertEqual(slider.minValue, 10, "slider.minValue");
         TKUnit.assertEqual(slider.value, 250, "slider.value");
         TKUnit.assertEqual(slider.maxValue, 300, "slider.maxValue");
@@ -379,7 +396,7 @@ export function test_set_value_min_max_have_correct_values_after_load() {
     helper.buildUIAndRunTest(slider, testAction);
 }
 
-function getNativeValue(slider: sliderModule.Slider): number {
+function getNativeValue(slider: Slider): number {
     if (slider.android) {
         return slider.android.getProgress();
     }
@@ -388,7 +405,7 @@ function getNativeValue(slider: sliderModule.Slider): number {
     }
 }
 
-function getNativeMaxValue(slider: sliderModule.Slider): number {
+function getNativeMaxValue(slider: Slider): number {
     if (slider.android) {
         return slider.android.getMax();
     }
@@ -397,7 +414,7 @@ function getNativeMaxValue(slider: sliderModule.Slider): number {
     }
 }
 
-function setNativeValue(slider: sliderModule.Slider, value: number) {
+function setNativeValue(slider: Slider, value: number) {
     if (slider.android) {
         slider.android.setProgress(value);
     }

tns-core-modules/ui/slider/slider-common.ts

@@ -15,8 +15,8 @@ export class SliderBase extends View implements SliderDefinition {
  */
 export const valueProperty = new CoercibleProperty<SliderBase, number>({
     name: "value", defaultValue: 0, coerceValue: (target, value) => {
-        value = Math.max(value, this.minValue);
+        value = Math.max(value, target.minValue);
-        value = Math.min(value, this.maxValue);
+        value = Math.min(value, target.maxValue);
         return value;
     }, valueConverter: (v) => isIOS ? parseFloat(v) : parseInt(v)
 });