diff --git a/tests/app/testRunner.ts b/tests/app/testRunner.ts index 0fb697935..9cee83918 100644 --- a/tests/app/testRunner.ts +++ b/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"); diff --git a/tests/app/ui/slider/slider-tests.ts b/tests/app/ui/slider/slider-tests.ts index b3c677750..f2e5e2aa3 100644 --- a/tests/app/ui/slider/slider-tests.ts +++ b/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 * as pagesModule from "ui/page"; -import * as bindable from "ui/core/bindable"; -import * as observable from "data/observable"; -import * as color from "color"; -import * as platform from "platform"; +import { View } from "ui/core/view"; +import { Page } from "ui/page"; +import { BindingOptions } from "ui/core/bindable"; +import { Observable, EventData, PropertyChangeData } from "data/observable"; +import { Color } from "color"; +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) { + function testAction(views: Array) { 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(); - function testAction(views: Array) { + const slider = new Slider(); + function testAction(views: Array) { 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(); - function testAction(views: Array) { - var valueChanged = false; - var allChanges = 0; - slider.on(observable.Observable.propertyChangeEvent, function (data: observable.EventData) { + const slider = new Slider(); + function testAction(views: Array) { + let valueChanged = false; + let allChanges = 0; + + slider.on(VALUE_EVENT, function (data: EventData) { allChanges++; - var propertyData = data; + const propertyData = 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(); - slider.color = new color.Color("red"); + const slider = new Slider(); + slider.color = new Color("red"); - function testAction(views: Array) { + function testAction(views: Array) { 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(); - slider.backgroundColor = new color.Color("red"); + const slider = new Slider(); + slider.backgroundColor = new Color("red"); - function testAction(views: Array) { + function testAction(views: Array) { 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) { + function testAction(views: Array) { 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) { + function testAction(views: Array) { 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) { + function testAction(views: Array) { 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) { + function testAction(views: Array) { 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() { - var slider = new sliderModule.Slider(); +export function test_set_maxValue_should_adjust_value_but_respect_minValue() { + 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) { + function testAction(views: Array) { slider.maxValue = 30; - TKUnit.assertEqual(slider.maxValue, 30, "slider.maxValue"); - TKUnit.assertEqual(slider.minValue, 30, "slider.minValue"); - TKUnit.assertEqual(slider.value, 30, "slider.value"); + TKUnit.assertEqual(slider.maxValue, 50, "slider.maxValue"); + TKUnit.assertEqual(slider.minValue, 50, "slider.minValue"); + 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) { + function testAction(views: Array) { 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) { + function testAction(views: Array) { 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) { - var changedProperties = {}; - var allChanges = 0; - slider.on(observable.Observable.propertyChangeEvent, function (data: observable.EventData) { + function testAction(views: Array) { + const changedProperties = {}; + let allChanges = 0; + + attachValueChangedEvents(slider, (data: EventData) => { allChanges++; - changedProperties[(data).propertyName] = true; + changedProperties[(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) { - var changedProperties = {}; - var allChanges = 0; - slider.on(observable.Observable.propertyChangeEvent, function (data: observable.EventData) { + function testAction(views: Array) { + const changedProperties = {}; + let allChanges = 0; + attachValueChangedEvents(slider, (data: EventData) => { allChanges++; - changedProperties[(data).propertyName] = true; + changedProperties[(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) { - var changedProperties = {}; - var allChanges = 0; - slider.on(observable.Observable.propertyChangeEvent, function (data: observable.EventData) { + function testAction(views: Array) { + const changedProperties = {}; + let allChanges = 0; + attachValueChangedEvents(slider, (data: EventData) => { allChanges++; - changedProperties[(data).propertyName] = true; + changedProperties[(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) { - var changedProperties = {}; - var allChanges = 0; - slider.on(observable.Observable.propertyChangeEvent, function (data: observable.EventData) { + function testAction(views: Array) { + const changedProperties = {}; + let allChanges = 0; + attachValueChangedEvents(slider, (data: EventData) => { allChanges++; - changedProperties[(data).propertyName] = true; + changedProperties[(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) { + function testAction(views: Array) { // >> 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) { - var page = views[1]; + function testAction(views: Array) { + const 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) { + function testAction(views: Array) { 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); } diff --git a/tns-core-modules/ui/slider/slider-common.ts b/tns-core-modules/ui/slider/slider-common.ts index eb04f0dd9..1f365b36c 100644 --- a/tns-core-modules/ui/slider/slider-common.ts +++ b/tns-core-modules/ui/slider/slider-common.ts @@ -15,8 +15,8 @@ export class SliderBase extends View implements SliderDefinition { */ export const valueProperty = new CoercibleProperty({ name: "value", defaultValue: 0, coerceValue: (target, value) => { - value = Math.max(value, this.minValue); - value = Math.min(value, this.maxValue); + value = Math.max(value, target.minValue); + value = Math.min(value, target.maxValue); return value; }, valueConverter: (v) => isIOS ? parseFloat(v) : parseInt(v) });