import TKUnit = require("../../TKUnit");
import helper = require("../helper");
import viewModule = require("ui/core/view");
import pagesModule = require("ui/page");
import textViewTestsNative = require("./text-view-tests-native");
import colorModule = require("color");
import enums = require("ui/enums");
import platform = require("platform");
//
// # TextView
// Using a TextView requires the text-view module.
// ``` JavaScript
import textViewModule = require("ui/text-view");
// ```
// Other frequently used modules when working with buttons include:
// ``` JavaScript
import bindable = require("ui/core/bindable");
import observable = require("data/observable");
// ```
// ### Binding two TextViews text property to observable view-model property.
//``` XML
//
//
// {%raw%}
// {%endraw%}
//
//
//```
//``` JavaScript
// function pageLoaded(args) {
// var page = args.object;
// var obj = new observable.Observable();
// obj.set("someProperty", "Please change this text!");
// page.bindingContext = obj;
// }
// exports.pageLoaded = pageLoaded;
//```
//
var _createTextViewFunc = function (): textViewModule.TextView {
//
// ### Creating a TextView
// ``` JavaScript
var textView = new textViewModule.TextView();
// ```
//
textView.text = "textView";
return textView;
}
export var testSetText = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array) {
var textView = views[0];
//
// ### Setting the text of a TextView
// ``` JavaScript
textView.text = "Hello, world!";
// ```
//
var expectedValue = "Hello, world!";
var actualValue = textViewTestsNative.getNativeText(textView);
TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
});
}
export var testSetTextNull = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array) {
var textView = views[0];
textView.text = null;
var expectedValue = "";
var actualValue = textViewTestsNative.getNativeText(textView);
TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
});
}
export var testSetTextUndefined = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array) {
var textView = views[0];
textView.text = undefined;
var expectedValue = "";
var actualValue = textViewTestsNative.getNativeText(textView);
TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
});
}
// Supported for ios only.
if (platform.device.os === platform.platformNames.ios) {
exports.test_set_color = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array) {
var textView = views[0];
textView.color = new colorModule.Color("red");
TKUnit.assertEqual(textView.color.ios.CGColor, textView.ios.tintColor.CGColor, "textView.color");
});
}
}
export var testBindTextDirectlyToModel = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array) {
var textView = views[0];
//
// ### Binding text property directly to model
// ``` JavaScript
var model = new observable.Observable();
model.set("username", "john");
var options: bindable.BindingOptions = {
sourceProperty: "username",
targetProperty: "text"
}
textView.bind(options, model);
//// textView.text is now "john"
//
TKUnit.assert(textView.text === "john", "Actual: " + textView.text + "; Expected: " + "john");
TKUnit.assert(textViewTestsNative.getNativeText(textView) === "john", "Actual: " + textViewTestsNative.getNativeText(textView) + "; Expected: " + "john");
//
model.set("username", "mary");
//// textView.text is now "mary"
//
TKUnit.assert(textView.text === "mary", "Actual: " + textView.text + "; Expected: " + "mary");
TKUnit.assert(textViewTestsNative.getNativeText(textView) === "mary", "Actual: " + textViewTestsNative.getNativeText(textView) + "; Expected: " + "mary");
//
// ```
//
});
}
export var testBindTextToBindingContext = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array) {
var textView = views[0];
var page = views[1];
var model = new observable.Observable();
model.set("username", "john");
page.bindingContext = model;
var options: bindable.BindingOptions = {
sourceProperty: "username",
targetProperty: "text"
}
textView.bind(options);
TKUnit.assert(textView.text === "john", "Actual: " + textView.text + "; Expected: " + "john");
TKUnit.assert(textViewTestsNative.getNativeText(textView) === "john", "Actual: " + textViewTestsNative.getNativeText(textView) + "; Expected: " + "john");
model.set("username", "mary");
TKUnit.assert(textView.text === "mary", "Actual: " + textView.text + "; Expected: " + "mary");
TKUnit.assert(textViewTestsNative.getNativeText(textView) === "mary", "Actual: " + textViewTestsNative.getNativeText(textView) + "; Expected: " + "mary");
});
}
export var testTextIsUpdatedWhenUserTypes = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array) {
var textView = views[0];
textView.updateTextTrigger = enums.UpdateTextTrigger.focusLost;
var expectedValue = "Hello, world!";
textViewTestsNative.typeTextNatively(textView, expectedValue);
var actualValue = textView.text;
TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
});
}
export var testSetHint = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array) {
var textView = views[0];
textView.text = "";
//
// ### Setting the hint of a TextView
// ``` JavaScript
textView.hint = "type your username here";
// ```
//
var expectedValue = "type your username here";
var actualValue = textViewTestsNative.getNativeHint(textView);
TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
});
}
export var testBindHintDirectlyToModel = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array) {
var textView = views[0];
textView.text = "";
//
// ### Binding hint property directly to model
// ``` JavaScript
var model = new observable.Observable();
model.set("hint", "type your username here");
var options: bindable.BindingOptions = {
sourceProperty: "hint",
targetProperty: "hint"
}
textView.bind(options, model);
//// TextView.hint is now "type your username here"
//
TKUnit.assert(textView.hint === "type your username here", "Actual: " + textView.hint + "; Expected: " + "type your username here");
TKUnit.assert(textViewTestsNative.getNativeHint(textView) === "type your username here", "Actual: " + textViewTestsNative.getNativeHint(textView) + "; Expected: " + "type your username here");
//
model.set("hint", "type your password here");
//// TextView.hint is now "type your password here"
//
TKUnit.assert(textView.hint === "type your password here", "Actual: " + textView.hint + "; Expected: " + "type your password here");
TKUnit.assert(textViewTestsNative.getNativeHint(textView) === "type your password here", "Actual: " + textViewTestsNative.getNativeHint(textView) + "; Expected: " + "type your password here");
//
// ```
//
});
}
export var testBindHintToBindingConext = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array) {
var textView = views[0];
textView.text = "";
var page = views[1];
var model = new observable.Observable();
model.set("hint", "type your username here");
page.bindingContext = model;
var options: bindable.BindingOptions = {
sourceProperty: "hint",
targetProperty: "hint"
}
textView.bind(options);
TKUnit.assert(textView.hint === "type your username here", "Actual: " + textView.hint + "; Expected: " + "type your username here");
TKUnit.assert(textViewTestsNative.getNativeHint(textView) === "type your username here", "Actual: " + textViewTestsNative.getNativeHint(textView) + "; Expected: " + "type your username here");
model.set("hint", "type your password here");
TKUnit.assert(textView.hint === "type your password here", "Actual: " + textView.hint + "; Expected: " + "type your password here");
TKUnit.assert(textViewTestsNative.getNativeHint(textView) === "type your password here", "Actual: " + textViewTestsNative.getNativeHint(textView) + "; Expected: " + "type your password here");
});
}
export var testHintPlusTextiOS = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array) {
var textView = views[0];
if (!textView.ios) {
return;
}
var expectedValue;
var actualValue;
textView.hint = "hint";
textView.text = "text";
expectedValue = "text";
actualValue = textViewTestsNative.getNativeText(textView);
TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
textView.text = "";
expectedValue = "hint";
actualValue = textViewTestsNative.getNativeText(textView);
TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
});
}
export var testHintColoriOS = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array) {
var textView = views[0];
if (!textView.ios) {
return;
}
textView.text = "";
textView.color = new colorModule.Color("red");
textView.hint = "hint";
var expectedValue;
var actualValue;
// expectedValue = "#38.1999948ff0000"; // 22% red
// if (utils.ios.MajorVersion > 7) {
// expectedValue = "#38.19999999999aff0000"; // 22% red
// }
actualValue = textViewTestsNative.getNativeColor(textView).hex;
// TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
TKUnit.assert(actualValue.indexOf("#38.19999") === 0, "Expected hint color to start with #38.19999");
TKUnit.assert(actualValue.indexOf("ff0000") !== -1, "Expected hint color to end with ff0000");
textView.text = "text";
expectedValue = "#ffff0000"; // red
actualValue = textViewTestsNative.getNativeColor(textView).hex;
TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
});
}
export var testSetEditable = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array) {
var textView = views[0];
//
// ### Setting the editable property of a TextView
// ``` JavaScript
textView.editable = false;
// ```
//
var expectedValue = false;
var actualValue = textViewTestsNative.getNativeEditable(textView);
TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
});
}
export var testBindEditableDirectlyToModel = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array) {
var textView = views[0];
//
// ### Binding editable property directly to model
// ``` JavaScript
var model = new observable.Observable();
model.set("editable", false);
var options: bindable.BindingOptions = {
sourceProperty: "editable",
targetProperty: "editable"
}
textView.bind(options, model);
//// textView.editable is now false
//
TKUnit.assert(textView.editable === false, "Actual: " + textView.text + "; Expected: " + false);
TKUnit.assert(textViewTestsNative.getNativeEditable(textView) === false, "Actual: " + textViewTestsNative.getNativeEditable(textView) + "; Expected: " + false);
//
model.set("editable", true);
//// textView.editable is now true
//
TKUnit.assert(textView.editable === true, "Actual: " + textView.text + "; Expected: " + true);
TKUnit.assert(textViewTestsNative.getNativeEditable(textView) === true, "Actual: " + textViewTestsNative.getNativeEditable(textView) + "; Expected: " + true);
//
// ```
//
});
}
export var testBindEditableToBindingConext = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array) {
var textView = views[0];
var page = views[1];
var model = new observable.Observable();
model.set("editable", false);
page.bindingContext = model;
var options: bindable.BindingOptions = {
sourceProperty: "editable",
targetProperty: "editable"
}
textView.bind(options);
TKUnit.assert(textView.editable === false, "Actual: " + textView.text + "; Expected: " + false);
TKUnit.assert(textViewTestsNative.getNativeEditable(textView) === false, "Actual: " + textViewTestsNative.getNativeEditable(textView) + "; Expected: " + false);
model.set("editable", true);
TKUnit.assert(textView.editable === true, "Actual: " + textView.text + "; Expected: " + true);
TKUnit.assert(textViewTestsNative.getNativeEditable(textView) === true, "Actual: " + textViewTestsNative.getNativeEditable(textView) + "; Expected: " + true);
});
}
var expectedFontSize = 42;
export var testLocalFontSizeFromCss = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array) {
var textView = views[0];
var page = views[1];
page.css = "textview { font-size: " + expectedFontSize + "; }";
var actualResult = textView.style.fontSize;
TKUnit.assert(actualResult === expectedFontSize, "Actual: " + actualResult + "; Expected: " + expectedFontSize);
});
}
export var testNativeFontSizeFromCss = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array) {
var textView = views[0];
var page = views[1];
page.css = "textview { font-size: " + expectedFontSize + "; }";
var actualResult = textViewTestsNative.getNativeFontSize(textView);
helper.assertAreClose(actualResult, expectedFontSize, "FontSizeFromCss");
});
}
export var testNativeFontSizeFromLocal = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array) {
var textView = views[0];
textView.style.fontSize = expectedFontSize;
var actualResult = textViewTestsNative.getNativeFontSize(textView);
helper.assertAreClose(actualResult, expectedFontSize, "FontSizeFromLocal");
});
}
var expectedColorHex = "#ffff0000";
export var testLocalColorFromCss = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array) {
var textView = views[0];
var page = views[1];
page.css = "textview { color: " + expectedColorHex + "; }";
var actualResult = textView.style.color.hex;
TKUnit.assert(actualResult === expectedColorHex, "Actual: " + actualResult + "; Expected: " + expectedColorHex);
});
}
export var testNativeColorFromCss = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array) {
var textView = views[0];
var page = views[1];
page.css = "textview { color: " + expectedColorHex + "; }";
var actualResult = textViewTestsNative.getNativeColor(textView).hex;
TKUnit.assert(actualResult === expectedColorHex, "Actual: " + actualResult + "; Expected: " + expectedColorHex);
});
}
export var testNativeColorFromLocal = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array) {
var textView = views[0];
textView.style.color = new colorModule.Color(expectedColorHex);
var actualResult = textViewTestsNative.getNativeColor(textView).hex;
TKUnit.assert(actualResult === expectedColorHex, "Actual: " + actualResult + "; Expected: " + expectedColorHex);
});
}
var expectedBackgroundColorHex = "#ff00ff00";
export var testLocalBackgroundColorFromCss = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array) {
var textView = views[0];
var page = views[1];
page.css = "textview { background-color: " + expectedBackgroundColorHex + "; }";
var actualResult = textView.style.backgroundColor.hex;
TKUnit.assert(actualResult === expectedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedBackgroundColorHex);
});
}
export var testNativeBackgroundColorFromCss = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array) {
var textView = views[0];
var page = views[1];
page.css = "textview { background-color: " + expectedBackgroundColorHex + "; }";
var actualResult = textViewTestsNative.getNativeBackgroundColor(textView).hex;
TKUnit.assert(actualResult === expectedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedBackgroundColorHex);
});
}
export var testNativeBackgroundColorFromLocal = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array) {
var textView = views[0];
textView.style.backgroundColor = new colorModule.Color(expectedBackgroundColorHex);
var actualResult = textViewTestsNative.getNativeBackgroundColor(textView).hex;
TKUnit.assert(actualResult === expectedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedBackgroundColorHex);
});
}
var expectedTextAlignment = enums.TextAlignment.right;
export var testLocalTextAlignmentFromCss = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array) {
var view = views[0];
var page = views[1];
page.css = "textview { text-align: " + expectedTextAlignment + "; }";
var actualResult = view.style.textAlignment;
TKUnit.assert(actualResult === expectedTextAlignment, "Actual: " + actualResult + "; Expected: " + expectedTextAlignment);
});
}
export var testNativeTextAlignmentFromCss = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array) {
var view = views[0];
var page = views[1];
page.css = "textview { text-align: " + expectedTextAlignment + "; }";
var actualResult = textViewTestsNative.getNativeTextAlignment(view);
TKUnit.assert(actualResult === expectedTextAlignment, "Actual: " + actualResult + "; Expected: " + expectedTextAlignment);
});
}
export var testNativeTextAlignmentFromLocal = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array) {
var view = views[0];
view.style.textAlignment = expectedTextAlignment;
var actualResult = textViewTestsNative.getNativeTextAlignment(view);
TKUnit.assert(actualResult === expectedTextAlignment, "Actual: " + actualResult + "; Expected: " + expectedTextAlignment);
});
}
export var testMemoryLeak = function (done) {
helper.buildUIWithWeakRefAndInteract(_createTextViewFunc, function (textView) {
textViewTestsNative.typeTextNatively(textView, "Hello, world!");
}, done);
}