Rename the files

tests/app/ui/button/button-tests-native.android.ts

@@ -0,0 +1,54 @@
+import buttonModule = require("ui/button");
+import colorModule = require("color");
+import utilsModule = require("utils/utils");
+import enums = require("ui/enums");
+import background = require("ui/styling/background");
+
+export function getNativeText(button: buttonModule.Button): string {
+    return button.android.getText();
+}
+
+export function getNativeTextWrap(button: buttonModule.Button): boolean {
+    return (<android.widget.Button>button.android).isSingleLine();
+}
+
+export function getNativeFontSize(button: buttonModule.Button): number {
+    var density = utilsModule.layout.getDisplayDensity();
+    return button.android.getTextSize() / density;
+}
+
+export function getNativeColor(button: buttonModule.Button): colorModule.Color {
+    return new colorModule.Color(button.android.getTextColors().getDefaultColor());
+}
+
+export function getNativeBackgroundColor(button: buttonModule.Button): colorModule.Color {
+    var bkg = <any>button.android.getBackground();
+    if (bkg instanceof background.ad.BorderDrawable) {
+        return (<background.ad.BorderDrawable>bkg).background.color;
+    }
+    else {
+        return new colorModule.Color(bkg.backgroundColor)
+    }
+}
+
+export function getNativeTextAlignment(button: buttonModule.Button): string {
+    var gravity = button.android.getGravity();
+
+    if ((gravity & android.view.Gravity.HORIZONTAL_GRAVITY_MASK) === android.view.Gravity.LEFT) {
+        return enums.TextAlignment.left;
+    }
+
+    if ((gravity & android.view.Gravity.HORIZONTAL_GRAVITY_MASK) === android.view.Gravity.CENTER_HORIZONTAL) {
+        return enums.TextAlignment.center;
+    }
+
+    if ((gravity & android.view.Gravity.HORIZONTAL_GRAVITY_MASK) === android.view.Gravity.RIGHT) {
+        return enums.TextAlignment.right;
+    }
+
+    return "unexpected value";
+}
+
+export function performNativeClick(button: buttonModule.Button): void {
+    button.android.performClick();
+}

tests/app/ui/button/button-tests-native.d.ts

@@ -0,0 +1,12 @@
+//@private
+import buttonModule = require("ui/button");
+import colorModule = require("color");
+
+export declare function getNativeText(button: buttonModule.Button): string;
+export declare function getNativeTextWrap(button: buttonModule.Button): boolean;
+export declare function getNativeFontSize(button: buttonModule.Button): number;
+export declare function getNativeColor(button: buttonModule.Button): colorModule.Color;
+export declare function getNativeBackgroundColor(button: buttonModule.Button): colorModule.Color;
+export declare function getNativeTextAlignment(button: buttonModule.Button): string;
+export declare function performNativeClick(button: buttonModule.Button): void;
+

tests/app/ui/button/button-tests-native.ios.ts

@@ -0,0 +1,41 @@
+import buttonModule = require("ui/button");
+import colorModule = require("color");
+import utilsModule = require("utils/utils");
+import enums = require("ui/enums");
+
+export function getNativeText(button: buttonModule.Button): string {
+    return button.ios.titleForState(UIControlState.UIControlStateNormal);
+}
+
+export function getNativeTextWrap(button: buttonModule.Button): boolean {
+    return (<UIButton>button.ios).titleLabel.lineBreakMode === NSLineBreakMode.NSLineBreakByWordWrapping;
+}
+
+export function getNativeFontSize(button: buttonModule.Button): number {
+    return button.ios.titleLabel.font.pointSize;
+}
+
+export function getNativeColor(button: buttonModule.Button): colorModule.Color {
+    return utilsModule.ios.getColor(button.ios.titleColorForState(UIControlState.UIControlStateNormal));
+}
+
+export function getNativeBackgroundColor(button: buttonModule.Button): colorModule.Color {
+    return utilsModule.ios.getColor(button.ios.backgroundColor);
+}
+
+export function getNativeTextAlignment(button: buttonModule.Button): string {
+    switch (button.ios.titleLabel.textAlignment) {
+        case NSTextAlignment.NSTextAlignmentLeft:
+            return enums.TextAlignment.left;
+        case NSTextAlignment.NSTextAlignmentCenter:
+            return enums.TextAlignment.center;
+        case NSTextAlignment.NSTextAlignmentRight:
+            return enums.TextAlignment.right;
+        default:
+            return "unexpected value";
+    }
+}
+
+export function performNativeClick(button: buttonModule.Button): void {
+    button.ios.sendActionsForControlEvents(UIControlEvents.UIControlEventTouchUpInside);
+}

tests/app/ui/button/button-tests.ts

@@ -0,0 +1,303 @@
+import TKUnit = require("../../TKUnit");
+import helper = require("../helper");
+import viewModule = require("ui/core/view");
+import pagesModule = require("ui/page");
+import buttonTestsNative = require("./button-tests-native");
+import colorModule = require("color");
+import enums = require("ui/enums");
+import formattedStringModule = require("text/formatted-string");
+import spanModule = require("text/span");
+
+// >> button-require
+import buttonModule = require("ui/button");
+// << button-require
+
+// >> button-require-others
+import bindable = require("ui/core/bindable");
+import observable = require("data/observable");
+// << button-require-others
+
+export var testSetText = function () {
+    helper.buildUIAndRunTest(_createButtonFunc(), _testSetText);
+}
+
+export var testOnClick = function () {
+    helper.buildUIAndRunTest(_createButtonFunc(), _testOnClick);
+}
+
+export var testBindTextDirectlyToModel = function () {
+    helper.buildUIAndRunTest(_createButtonFunc(), _testBindTextDirectlyToModel);
+}
+
+export var testBindTextToBindingContext = function () {
+    helper.buildUIAndRunTest(_createButtonFunc(), _testBindTextToBindingContext);
+}
+
+export var testLocalFontSizeFromCss = function () {
+    helper.buildUIAndRunTest(_createButtonFunc(), _testLocalFontSizeFromCss);
+}
+
+export var testNativeFontSizeFromCss = function () {
+    helper.buildUIAndRunTest(_createButtonFunc(), _testNativeFontSizeFromCss);
+}
+
+export var testNativeFontSizeFromLocal = function () {
+    helper.buildUIAndRunTest(_createButtonFunc(), _testNativeFontSizeFromLocal);
+}
+
+export var testLocalColorFromCss = function () {
+    helper.buildUIAndRunTest(_createButtonFunc(), _testLocalColorFromCss);
+}
+
+export var testNativeColorFromCss = function () {
+    helper.buildUIAndRunTest(_createButtonFunc(), _testNativeColorFromCss);
+}
+
+export var testNativeColorFromLocal = function () {
+    helper.buildUIAndRunTest(_createButtonFunc(), _testNativeColorFromLocal);
+}
+
+export var testLocalBackgroundColorFromCss = function () {
+    helper.buildUIAndRunTest(_createButtonFunc(), _testLocalBackgroundColorFromCss);
+}
+
+export var testNativeBackgroundColorFromCss = function () {
+    helper.buildUIAndRunTest(_createButtonFunc(), _testNativeBackgroundColorFromCss);
+}
+
+export var testNativeBackgroundColorFromLocal = function () {
+    helper.buildUIAndRunTest(_createButtonFunc(), _testNativeBackgroundColorFromLocal);
+}
+
+export var testMemoryLeak = function (done) {
+    helper.buildUIWithWeakRefAndInteract(_createButtonFunc, function (button) {
+        buttonTestsNative.performNativeClick(button);
+    }, done);
+}
+
+var _createButtonFunc = function (): buttonModule.Button {
+    // >>button-create
+    var button = new buttonModule.Button();
+    // << button-create
+    button.text = "Button";  
+    return button;
+}
+
+var _testSetText = function (views: Array<viewModule.View>) {
+    var button = <buttonModule.Button>views[0];
+    // >> button-settext
+    button.text = "Hello, world!";
+    // << button-settext
+
+    var expectedValue = button.text;
+    var actualValue = buttonTestsNative.getNativeText(button);
+
+    TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
+}
+
+var _testOnClick = function (views: Array<viewModule.View>) {
+    var button = <buttonModule.Button>views[0];
+
+    var actualValue = false;
+    // >> button-tap
+    button.on(buttonModule.Button.tapEvent, function (args: observable.EventData) {
+        // Do something
+        // >> (hide)
+        actualValue = true;
+        // << (hide)
+    });
+    // << button-tap
+
+    buttonTestsNative.performNativeClick(button);
+    TKUnit.assert(actualValue === true, "Actual: " + actualValue + "; Expected: " + true);
+}
+
+var _testBindTextDirectlyToModel = function (views: Array<viewModule.View>) {
+    var button = <buttonModule.Button>views[0];
+
+    // >> button-bind
+    var model = new observable.Observable();
+    model.set("buttonTitle", "OK");
+    var options: bindable.BindingOptions = {
+        sourceProperty: "buttonTitle",
+        targetProperty: "text"
+    }
+    button.bind(options, model);
+    // button.text is now "OK"
+    // >> (hide)
+    TKUnit.assert(button.text === "OK", "Actual: " + button.text + "; Expected: " + "OK");
+    // << (hide)
+    model.set("buttonTitle", "Cancel");
+    // button.text is now "Cancel"
+    // >> (hide)
+    TKUnit.assert(button.text === "Cancel", "Actual: " + button.text + "; Expected: " + "Cancel");
+    // << (hide)
+    // << button-bind
+}
+
+var _testBindTextToBindingContext = function (views: Array<viewModule.View>) {
+    var button = <buttonModule.Button>views[0];
+    var page = <pagesModule.Page>views[1];
+
+    var model = new observable.Observable();
+    model.set("buttonTitle", "OK");
+    page.bindingContext = model;
+
+    var options: bindable.BindingOptions = {
+        sourceProperty: "buttonTitle",
+        targetProperty: "text"
+    }
+    button.bind(options);
+
+    TKUnit.assert(button.text === "OK", "Actual: " + button.text + "; Expected: " + "OK");
+    model.set("buttonTitle", "Cancel");
+    TKUnit.assert(button.text === "Cancel", "Actual: " + button.text + "; Expected: " + "Cancel");
+}
+
+var expectedFontSize = 42;
+var _testLocalFontSizeFromCss = function (views: Array<viewModule.View>) {
+    var button = <buttonModule.Button>views[0];
+    var page = <pagesModule.Page>views[1];
+
+    page.css = "button { font-size: " + expectedFontSize + "; }";
+    var actualResult = button.style.fontSize;
+    TKUnit.assert(actualResult === expectedFontSize, "Actual: " + actualResult + "; Expected: " + 33);
+}
+
+var _testNativeFontSizeFromCss = function (views: Array<viewModule.View>) {
+    var button = <buttonModule.Button>views[0];
+    var page = <pagesModule.Page>views[1];
+    page.css = "button { font-size: " + expectedFontSize + "; }";
+
+    var actualResult = buttonTestsNative.getNativeFontSize(button);
+    helper.assertAreClose(actualResult, expectedFontSize, "FontSizeFromCss");
+}
+
+var _testNativeFontSizeFromLocal = function (views: Array<viewModule.View>) {
+    var button = <buttonModule.Button>views[0];
+    button.style.fontSize = expectedFontSize;
+
+    var actualResult = buttonTestsNative.getNativeFontSize(button);
+    helper.assertAreClose(actualResult, expectedFontSize, "FontSizeFromLocal");
+}
+
+var expectedColorHex = "#ffff0000";
+var _testLocalColorFromCss = function (views: Array<viewModule.View>) {
+    var button = <buttonModule.Button>views[0];
+    var page = <pagesModule.Page>views[1];
+    page.css = "button { color: " + expectedColorHex + "; }";
+
+    var actualResult = button.style.color.hex;
+    TKUnit.assert(actualResult === expectedColorHex, "Actual: " + actualResult + "; Expected: " + expectedColorHex);
+}
+
+var _testNativeColorFromCss = function (views: Array<viewModule.View>) {
+    var button = <buttonModule.Button>views[0];
+    var page = <pagesModule.Page>views[1];
+    page.css = "button { color: " + expectedColorHex + "; }";
+
+    var actualResult = buttonTestsNative.getNativeColor(button).hex;
+    TKUnit.assert(actualResult === expectedColorHex, "Actual: " + actualResult + "; Expected: " + expectedColorHex);
+}
+
+var _testNativeColorFromLocal = function (views: Array<viewModule.View>) {
+    var button = <buttonModule.Button>views[0];
+    button.style.color = new colorModule.Color(expectedColorHex);
+
+    var actualResult = buttonTestsNative.getNativeColor(button).hex;
+    TKUnit.assert(actualResult === expectedColorHex, "Actual: " + actualResult + "; Expected: " + expectedColorHex);
+}
+
+var expectedBackgroundColorHex = "#ff00ff00";
+var _testLocalBackgroundColorFromCss = function (views: Array<viewModule.View>) {
+    var button = <buttonModule.Button>views[0];
+    var page = <pagesModule.Page>views[1];
+    page.css = "button { background-color: " + expectedBackgroundColorHex + "; }";
+
+    var actualResult = button.style.backgroundColor.hex;
+    TKUnit.assert(actualResult === expectedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedBackgroundColorHex);
+}
+
+var _testNativeBackgroundColorFromCss = function (views: Array<viewModule.View>) {
+    var button = <buttonModule.Button>views[0];
+    var page = <pagesModule.Page>views[1];
+    page.css = "button { background-color: " + expectedBackgroundColorHex + "; }";
+
+    var actualResult = buttonTestsNative.getNativeBackgroundColor(button).hex;
+    TKUnit.assert(actualResult === expectedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedBackgroundColorHex);
+}
+
+var _testNativeBackgroundColorFromLocal = function (views: Array<viewModule.View>) {
+    var button = <buttonModule.Button>views[0];
+    button.style.backgroundColor = new colorModule.Color(expectedBackgroundColorHex);
+
+    var actualResult = buttonTestsNative.getNativeBackgroundColor(button).hex;
+    TKUnit.assert(actualResult === expectedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedBackgroundColorHex);
+}
+
+var expectedTextAlignment = enums.TextAlignment.right;
+export var testLocalTextAlignmentFromCss = function () {
+    helper.buildUIAndRunTest(_createButtonFunc(), function (views: Array<viewModule.View>) {
+        var view = <buttonModule.Button>views[0];
+        var page = <pagesModule.Page>views[1];
+        page.css = "button { text-align: " + expectedTextAlignment + "; }";
+
+        var actualResult = view.style.textAlignment;
+        TKUnit.assert(actualResult === expectedTextAlignment, "Actual: " + actualResult + "; Expected: " + expectedTextAlignment);
+    });
+}
+
+export var testNativeTextAlignmentFromCss = function () {
+    helper.buildUIAndRunTest(_createButtonFunc(), function (views: Array<viewModule.View>) {
+        var view = <buttonModule.Button>views[0];
+        var page = <pagesModule.Page>views[1];
+        page.css = "button { text-align: " + expectedTextAlignment + "; }";
+
+        var actualResult = buttonTestsNative.getNativeTextAlignment(view);
+        TKUnit.assert(actualResult === expectedTextAlignment, "Actual: " + actualResult + "; Expected: " + expectedTextAlignment);
+    });
+}
+
+export var testNativeTextAlignmentFromLocal = function () {
+    helper.buildUIAndRunTest(_createButtonFunc(), function (views: Array<viewModule.View>) {
+        var view = <buttonModule.Button>views[0];
+        view.style.textAlignment = expectedTextAlignment;
+
+        var actualResult = buttonTestsNative.getNativeTextAlignment(view);
+        TKUnit.assert(actualResult === expectedTextAlignment, "Actual: " + actualResult + "; Expected: " + expectedTextAlignment);
+    });
+}
+
+export var test_WhenFormattedTextPropertyChanges_TextIsUpdated_Button = function () {
+    var firstSpan = new spanModule.Span();
+    firstSpan.fontSize = 10;
+    firstSpan.text = "First";
+    var secondSpan = new spanModule.Span();
+    secondSpan.fontSize = 15;
+    secondSpan.text = "Second";
+    var thirdSpan = new spanModule.Span();
+    thirdSpan.fontSize = 20;
+    thirdSpan.text = "Third";
+    var formattedString1 = new formattedStringModule.FormattedString();
+    formattedString1.spans.push(firstSpan);
+    var formattedString2 = new formattedStringModule.FormattedString();
+    formattedString2.spans.push(secondSpan);
+    formattedString2.spans.push(thirdSpan);
+
+    var view = new buttonModule.Button();
+    helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) {
+        TKUnit.assertEqual(view.text, "");
+
+        view.formattedText = formattedString1;
+        TKUnit.assertEqual(view.text, "First");
+
+        view.formattedText = formattedString2;
+        TKUnit.assertEqual(view.text, "SecondThird");
+
+        formattedString2.spans.getItem(0).text = "Mecond";
+        TKUnit.assertEqual(view.text, "MecondThird");
+
+        view.formattedText = null;
+        TKUnit.assertEqual(view.text, "");
+    });
+}

tests/app/ui/button/button.md

@@ -0,0 +1,31 @@
+---
+nav-title: "button How-To"
+title: "button"
+description: "Examples for using button"
+previous_url: /ApiReference/ui/button/HOW-TO
+---
+# Button
+### Declaring button module
+Button module is required to use any button feature.
+<snippet id='button-require'/>
+
+Other frequently used modules when working with buttons include:
+<snippet id='button-require-others'/>
+
+### Attaching event handler for the button tap event.
+``` XML
+<Page>
+  <Button tap="buttonTap" />
+</Page>
+```
+### Creating a button
+<snippet id='button-create'/>
+
+### Setting the text of a button
+<snippet id='button-settext'/>
+
+### Responding to the tap event
+<snippet id='button-tap'/>
+
+### Binding text property directly to model
+<snippet id='button-bind'/>