javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

Style tests fixes

Browse Source
This commit is contained in:
vakrilov
2017-01-11 23:38:10 +02:00
parent 6cfe3601e0
commit e983295952
7 changed files with 114 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
tests/app/testRunner.ts
View File

@@ -66,7 +66,7 @@ allTests["FLEXBOXLAYOUT"] = require("./ui/layouts/flexbox-layout-tests");
allTests["STYLE-PROPERTIES"] = require("./ui/styling/style-properties-tests");
allTests["FRAME"] = require("./ui/frame/frame-tests");
allTests["VIEW"] = require("./ui/view/view-tests");
// allTests["STYLE"] = require("./ui/styling/style-tests");
allTests["STYLE"] = require("./ui/styling/style-tests");
// allTests["VISUAL-STATE"] = require("./ui/styling/visual-state-tests");
// allTests["VALUE-SOURCE"] = require("./ui/styling/value-source-tests");
allTests["CSS-SELECTOR-PARSER"] = require("./ui/styling/css-selector-parser");

164
tests/app/ui/styling/style-tests.ts
View File

@@ -13,13 +13,13 @@ import { resolveFileNameFromUrl } from "ui/styling/style-scope";
import { unsetValue } from "ui/core/view";
export function test_css_dataURI_is_applied_to_backgroundImageSource() {
var stack = new stackModule.StackLayout();
const stack = new stackModule.StackLayout();
helper.buildUIAndRunTest(stack, function (views: Array<viewModule.View>) {
var page = <pageModule.Page>views[1];
const page = <pageModule.Page>views[1];
page.css = "StackLayout { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC;') }";
var value = stack.style.backgroundInternal;
const value = stack.style.backgroundInternal;
TKUnit.assert(types.isDefined(value), "Style background-image not loaded correctly from data URI.");
TKUnit.assert(types.isDefined(value.image), "Style background-image not loaded correctly from data URI.");
@@ -27,22 +27,22 @@ export function test_css_dataURI_is_applied_to_backgroundImageSource() {
}
export function test_css_is_applied_to_normal_properties() {
var stack = new stackModule.StackLayout();
const stack = new stackModule.StackLayout();
helper.buildUIAndRunTest(stack, function (views: Array<viewModule.View>) {
var page = <pageModule.Page>views[1];
var expected = "horizontal";
const page = <pageModule.Page>views[1];
const expected = "horizontal";
page.css = `StackLayout { orientation: ${expected}; }`;
TKUnit.assertEqual(stack.orientation, expected);
});
}
export function test_css_is_applied_to_special_properties() {
var stack = new stackModule.StackLayout();
const stack = new stackModule.StackLayout();
helper.buildUIAndRunTest(stack, function (views: Array<viewModule.View>) {
var page = <pageModule.Page>views[1];
var expected = "test";
const page = <pageModule.Page>views[1];
const expected = "test";
page.css = `StackLayout { class: ${expected}; }`;
TKUnit.assertEqual(stack.className, expected);
});
@@ -86,44 +86,44 @@ export function test_applies_css_changes_to_application_rules_after_page_load_ne
// Test for inheritance in different containers
export function test_css_is_applied_inside_StackLayout() {
var testButton = new buttonModule.Button();
const testButton = new buttonModule.Button();
testButton.text = "Test";
var stack = new stackModule.StackLayout();
const stack = new stackModule.StackLayout();
stack.addChild(testButton);
helper.buildUIAndRunTest(stack, function (views: Array<viewModule.View>) {
var page = <pageModule.Page>views[1];
const page = <pageModule.Page>views[1];
page.css = "button { color: red; }";
helper.assertViewColor(testButton, "#FF0000");
});
}
export function test_css_is_applied_inside_TabView() {
var testButton = new buttonModule.Button();
const testButton = new buttonModule.Button();
testButton.text = "Test";
var tabView = new tabViewModule.TabView();
const tabView = new tabViewModule.TabView();
let item = new tabViewModule.TabViewItem();
item.title = "First tab";
item.view = testButton;
tabView.items = [item];
helper.buildUIAndRunTest(tabView, function (views: Array<viewModule.View>) {
var page = <pageModule.Page>views[1];
const page = <pageModule.Page>views[1];
page.css = "button { color: red; }";
helper.assertViewColor(testButton, "#FF0000");
});
}
export function test_css_is_applied_inside_NestedControls() {
var testButton = new buttonModule.Button();
const testButton = new buttonModule.Button();
testButton.text = "Test";
var rootLayout = new stackModule.StackLayout();
var nestedLayout = new stackModule.StackLayout();
const rootLayout = new stackModule.StackLayout();
const nestedLayout = new stackModule.StackLayout();
rootLayout.addChild(nestedLayout);
nestedLayout.addChild(testButton);
helper.buildUIAndRunTest(rootLayout, function (views: Array<viewModule.View>) {
var page = <pageModule.Page>views[1];
const page = <pageModule.Page>views[1];
page.css = "button { color: red; }";
helper.assertViewColor(testButton, "#FF0000");
});
@@ -132,7 +132,7 @@ export function test_css_is_applied_inside_NestedControls() {
// Basic selector tests
export function test_setting_css() {
// >> article-setting-css-page
var page = new pageModule.Page();
const page = new pageModule.Page();
page.css = ".title { font-size: 20 }";
// << article-setting-css-page
@@ -184,7 +184,7 @@ export function test_class_selector() {
btnWithNoClass = new buttonModule.Button();
// << article-using-class-selector
var stack = new stackModule.StackLayout();
const stack = new stackModule.StackLayout();
page.content = stack;
stack.addChild(btnWithClass);
stack.addChild(btnWithNoClass);
@@ -203,7 +203,7 @@ export function test_multiple_class_selector() {
btnWithClasses = new buttonModule.Button();
btnWithClasses.className = "style1 style2";
var stack = new stackModule.StackLayout();
const stack = new stackModule.StackLayout();
page.content = stack;
stack.addChild(btnWithClasses);
@@ -228,7 +228,7 @@ export function test_id_selector() {
btnWithNoId = new buttonModule.Button();
// << article-using-id-selector
var stack = new stackModule.StackLayout();
const stack = new stackModule.StackLayout();
page.content = stack;
stack.addChild(btnWithId);
stack.addChild(btnWithNoId);
@@ -242,7 +242,7 @@ export function test_state_selector() {
let page = helper.getClearCurrentPage();
page.style.color = unsetValue;
let btn: buttonModule.Button;
var testStack = new stackModule.StackLayout();
const testStack = new stackModule.StackLayout();
page.content = testStack;
btn = new buttonModule.Button();
@@ -256,7 +256,7 @@ export function test_state_selector() {
export function test_type_and_state_selector() {
let page = helper.getClearCurrentPage();
page.style.color = unsetValue;
var btn: buttonModule.Button;
let btn: buttonModule.Button;
// >>article-using-state-selector
page.css = "button:pressed { color: red; }";
@@ -264,7 +264,7 @@ export function test_type_and_state_selector() {
//// Will be red when pressed
btn = new buttonModule.Button();
// << article-using-state-selector
var stack = new stackModule.StackLayout();
const stack = new stackModule.StackLayout();
page.content = stack;
stack.addChild(btn);
@@ -337,18 +337,18 @@ export function test_restore_original_values_when_state_is_changed() {
helper.assertViewColor(btn, "#0000FF");
}
export var test_composite_selector_type_and_class = function () {
export const test_composite_selector_type_and_class = function () {
// Arrange
var testStack = new stackModule.StackLayout();
const testStack = new stackModule.StackLayout();
var btnWithClass = new buttonModule.Button();
const btnWithClass = new buttonModule.Button();
btnWithClass.className = "test";
testStack.addChild(btnWithClass);
var btnWithNoClass = new buttonModule.Button();
const btnWithNoClass = new buttonModule.Button();
testStack.addChild(btnWithNoClass);
var lblWithClass = new labelModule.Label();
const lblWithClass = new labelModule.Label();
lblWithClass.className = "test";
testStack.addChild(lblWithClass);
@@ -364,16 +364,16 @@ export var test_composite_selector_type_and_class = function () {
helper.buildUIAndRunTest(testStack, testFunc, testCss);
}
export var test_composite_selector_type_class_state = function () {
var testStack = new stackModule.StackLayout();
var btnWithClass = new buttonModule.Button();
export const test_composite_selector_type_class_state = function () {
const testStack = new stackModule.StackLayout();
const btnWithClass = new buttonModule.Button();
btnWithClass.className = "test";
testStack.addChild(btnWithClass);
var btnWithNoClass = new buttonModule.Button();
const btnWithNoClass = new buttonModule.Button();
testStack.addChild(btnWithNoClass);
var lblWithClass = new labelModule.Label();
const lblWithClass = new labelModule.Label();
lblWithClass.className = "test";
testStack.addChild(lblWithClass);
@@ -394,7 +394,7 @@ export var test_composite_selector_type_class_state = function () {
helper.buildUIAndRunTest(testStack, testFunc, testCss);
}
export var test_style_is_applied_when_control_is_added_after_load = function () {
export const test_style_is_applied_when_control_is_added_after_load = function () {
let page = helper.getClearCurrentPage();
let btn = new buttonModule.Button();
let testStack = new stackModule.StackLayout();
@@ -406,7 +406,7 @@ export var test_style_is_applied_when_control_is_added_after_load = function ()
TKUnit.assertEqual(btn.style.color.hex, "#FF0000", "Color property not applied correctly.");
}
var changeIdOrClassTestCss =
const changeIdOrClassTestCss =
"button { background-color: #111111 } " +
".button-class { background-color: #222222 } " +
".button-class-two { background-color: #333333 } " +
@@ -414,13 +414,13 @@ var changeIdOrClassTestCss =
"#myButtonTwo { background-color: #555555 } ";
export function test_styles_are_updated_when_cssClass_is_set() {
var testStack = new stackModule.StackLayout();
var btn = new buttonModule.Button();
var btn2 = new buttonModule.Button();
const testStack = new stackModule.StackLayout();
const btn = new buttonModule.Button();
const btn2 = new buttonModule.Button();
testStack.addChild(btn);
testStack.addChild(btn2);
var testFunc = () => {
const testFunc = () => {
helper.assertViewBackgroundColor(btn, "#111111");
helper.assertViewBackgroundColor(btn2, "#111111");
@@ -434,14 +434,14 @@ export function test_styles_are_updated_when_cssClass_is_set() {
}
export function test_styles_are_updated_when_cssClass_is_changed() {
var testStack = new stackModule.StackLayout();
var btn = new buttonModule.Button();
const testStack = new stackModule.StackLayout();
const btn = new buttonModule.Button();
btn.className = "button-class";
var btn2 = new buttonModule.Button();
const btn2 = new buttonModule.Button();
testStack.addChild(btn);
testStack.addChild(btn2);
var testFunc = () => {
const testFunc = () => {
helper.assertViewBackgroundColor(btn, "#222222");
helper.assertViewBackgroundColor(btn2, "#111111");
@@ -455,14 +455,14 @@ export function test_styles_are_updated_when_cssClass_is_changed() {
}
export function test_styles_are_updated_when_cssClass_is_cleared() {
var testStack = new stackModule.StackLayout();
var btn = new buttonModule.Button();
const testStack = new stackModule.StackLayout();
const btn = new buttonModule.Button();
btn.className = "button-class";
var btn2 = new buttonModule.Button();
const btn2 = new buttonModule.Button();
testStack.addChild(btn);
testStack.addChild(btn2);
var testFunc = () => {
const testFunc = () => {
helper.assertViewBackgroundColor(btn, "#222222");
helper.assertViewBackgroundColor(btn2, "#111111");
@@ -476,13 +476,13 @@ export function test_styles_are_updated_when_cssClass_is_cleared() {
}
export function test_styles_are_updated_when_id_is_set() {
var testStack = new stackModule.StackLayout();
var btn = new buttonModule.Button();
var btn2 = new buttonModule.Button();
const testStack = new stackModule.StackLayout();
const btn = new buttonModule.Button();
const btn2 = new buttonModule.Button();
testStack.addChild(btn);
testStack.addChild(btn2);
var testFunc = () => {
const testFunc = () => {
helper.assertViewBackgroundColor(btn, "#111111");
helper.assertViewBackgroundColor(btn2, "#111111");
@@ -496,14 +496,14 @@ export function test_styles_are_updated_when_id_is_set() {
}
export function test_styles_are_updated_when_id_is_changed() {
var testStack = new stackModule.StackLayout();
var btn = new buttonModule.Button();
const testStack = new stackModule.StackLayout();
const btn = new buttonModule.Button();
btn.id = "myButton";
var btn2 = new buttonModule.Button();
const btn2 = new buttonModule.Button();
testStack.addChild(btn);
testStack.addChild(btn2);
var testFunc = () => {
const testFunc = () => {
helper.assertViewBackgroundColor(btn, "#444444");
helper.assertViewBackgroundColor(btn2, "#111111");
@@ -517,14 +517,14 @@ export function test_styles_are_updated_when_id_is_changed() {
}
export function test_styles_are_updated_when_id_is_cleared() {
var testStack = new stackModule.StackLayout();
var btn = new buttonModule.Button();
const testStack = new stackModule.StackLayout();
const btn = new buttonModule.Button();
btn.id = "myButton";
var btn2 = new buttonModule.Button();
const btn2 = new buttonModule.Button();
testStack.addChild(btn);
testStack.addChild(btn2);
var testFunc = () => {
const testFunc = () => {
helper.assertViewBackgroundColor(btn, "#444444");
helper.assertViewBackgroundColor(btn2, "#111111");
@@ -537,9 +537,9 @@ export function test_styles_are_updated_when_id_is_cleared() {
helper.buildUIAndRunTest(testStack, testFunc, changeIdOrClassTestCss);
}
var typeSelector = "button { color: blue } ";
var classSelector = ".button-class { color: green } ";
var idSelector = "#myButton { color: red } ";
const typeSelector = "button { color: blue } ";
const classSelector = ".button-class { color: green } ";
const idSelector = "#myButton { color: red } ";
export function test_selector_priorities_1() {
testSelectorsPrioritiesTemplate(typeSelector + classSelector + idSelector);
@@ -572,7 +572,7 @@ function testSelectorsPrioritiesTemplate(css: string) {
let btnWithClass: buttonModule.Button;
let btnWithId: buttonModule.Button;
var testStack = new stackModule.StackLayout();
const testStack = new stackModule.StackLayout();
page.content = testStack;
btn = new buttonModule.Button();
@@ -608,9 +608,9 @@ function testButtonPressedStateIsRed(btn: buttonModule.Button) {
}
export function test_setInlineStyle_setsLocalValues() {
var testButton = new buttonModule.Button();
const testButton = new buttonModule.Button();
testButton.text = "Test";
var stack = new stackModule.StackLayout();
const stack = new stackModule.StackLayout();
stack.addChild(testButton);
helper.buildUIAndRunTest(stack, function (views: Array<viewModule.View>) {
@@ -620,7 +620,7 @@ export function test_setInlineStyle_setsLocalValues() {
}
export function test_setStyle_throws() {
var testButton = new buttonModule.Button();
const testButton = new buttonModule.Button();
TKUnit.assertThrows(function () {
(<any>testButton).style = "background-color: red;";
@@ -628,50 +628,50 @@ export function test_setStyle_throws() {
}
export function test_CSS_isAppliedOnPage() {
var testButton = new buttonModule.Button();
const testButton = new buttonModule.Button();
testButton.text = "Test";
helper.buildUIAndRunTest(testButton, function (views: Array<viewModule.View>) {
var page: pageModule.Page = <pageModule.Page>views[1];
const page: pageModule.Page = <pageModule.Page>views[1];
page.css = "page { background-color: red; }";
helper.assertViewBackgroundColor(page, "#FF0000");
});
}
export function test_CSS_isAppliedOnPage_From_Import() {
var testButton = new buttonModule.Button();
const testButton = new buttonModule.Button();
testButton.text = "Test";
helper.buildUIAndRunTest(testButton, function (views: Array<viewModule.View>) {
var page: pageModule.Page = <pageModule.Page>views[1];
const page: pageModule.Page = <pageModule.Page>views[1];
page.css = "@import url('~/ui/styling/test.css');";
helper.assertViewBackgroundColor(page, "#FF0000");
});
}
export function test_CSS_isAppliedOnPage_From_Import_Without_Url() {
var testButton = new buttonModule.Button();
const testButton = new buttonModule.Button();
testButton.text = "Test";
helper.buildUIAndRunTest(testButton, function (views: Array<viewModule.View>) {
var page: pageModule.Page = <pageModule.Page>views[1];
const page: pageModule.Page = <pageModule.Page>views[1];
page.css = "@import '~/ui/styling/test.css';";
helper.assertViewBackgroundColor(page, "#FF0000");
});
}
export function test_CSS_isAppliedOnPage_From_addCssFile() {
var testButton = new buttonModule.Button();
const testButton = new buttonModule.Button();
testButton.text = "Test";
helper.buildUIAndRunTest(testButton, function (views: Array<viewModule.View>) {
var page: pageModule.Page = <pageModule.Page>views[1];
const page: pageModule.Page = <pageModule.Page>views[1];
page.addCssFile("~/ui/styling/test.css");
helper.assertViewBackgroundColor(page, "#FF0000");
});
}
var invalidCSS = ".invalid { " +
const invalidCSS = ".invalid { " +
"color: invalidValue; " +
"background-color: invalidValue; " +
"border-color: invalidValue; " +
@@ -689,24 +689,24 @@ var invalidCSS = ".invalid { " +
"}";
export function test_set_invalid_CSS_values_dont_cause_crash() {
var testButton = new buttonModule.Button();
const testButton = new buttonModule.Button();
testButton.text = "Test";
testButton.className = "invalid";
helper.buildUIAndRunTest(testButton, function (views: Array<viewModule.View>) {
helper.buildUIAndRunTest(testButton, (views: Array<viewModule.View>) => {
TKUnit.assertEqual(30, testButton.style.fontSize);
}, invalidCSS);
}
// Check Mixed, Upper and lower case properties
var casedCSS = ".cased {" +
const casedCSS = ".cased {" +
"cOlOr: blue; " +
"FONT-SIZE: 30; " +
"background-color: red; " +
"}";
export function test_set_mixed_CSS_cases_works() {
var testButton = new buttonModule.Button();
const testButton = new buttonModule.Button();
testButton.text = "Test";
testButton.className = "cased";