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

feat(styling): Added 2 functions to control applicationAdditionalSelectors (#6124)

Browse Source 
* Added getAdditionalSelectors function so that nativescript-theme can be functional again in NS 4.x

* Change to a better more extensible additional css system.

* removed redunant function on the name.

* Fix lint issues

* Adding mergeSelectors to the remove function

* Added test of new add/remove css functions.

* fix: revert testRunner.ts changes that disabled all tests except style

* refactor: fix typo

* chore: fix typo and change test to no not affect global styles
This commit is contained in:
Nathanael Anderson
2018-08-02 03:51:07 -05:00
committed by Alexander Vakrilov
parent cf034dd04d
commit 85b8c018a5
3 changed files with 67 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,7 +9,7 @@ import * as tabViewModule from "tns-core-modules/ui/tab-view";
import * as helper from "../../ui/helper";
import * as types from "tns-core-modules/utils/types";
import * as viewModule from "tns-core-modules/ui/core/view";
import { resolveFileNameFromUrl } from "tns-core-modules/ui/styling/style-scope";
import { resolveFileNameFromUrl, removeTaggedAdditionalCSS, addTaggedAdditionalCSS } from "tns-core-modules/ui/styling/style-scope";
import { unsetValue } from "tns-core-modules/ui/core/view";
import * as color from "tns-core-modules/color";
@@ -1479,6 +1479,36 @@ export function test_resolveFileNameFromUrl_unexisting_file() {
TKUnit.assertNull(result, "Shouldn't resolve unexisting file");
}
export function test_checkAddRemoveCSS() {
const css1 = "#test_checkAddRemoveCSS_label { color: #FF0000; }";
const css2 = "#test_checkAddRemoveCSS_label { color: #00FF00; }";
const label = new labelModule.Label();
label.text = "color coming from updated rules";
label.id = "test_checkAddRemoveCSS_label";
helper.buildUIAndRunTest(label, function (views: Array<viewModule.View>) {
const page = <pageModule.Page>views[1];
// Add Red, we have to then trigger the page's CSS state change, for it to refresh the label's css with the new global rule
addTaggedAdditionalCSS(css1, "red");
page._onCssStateChange();
helper.assertViewColor(label, "#FF0000");
// Add Green (should override red)
addTaggedAdditionalCSS(css2, "green");
page._onCssStateChange();
helper.assertViewColor(label, "#00FF00");
// Remove Green (Should revert to red, since we removed the green rule)
removeTaggedAdditionalCSS("green");
page._onCssStateChange();
helper.assertViewColor(label, "#FF0000");
//Cleanup
removeTaggedAdditionalCSS("red");
});
}
// <snippet module="ui/styling" title="styling">
// For information and example how to use style properties please refer to special [**Styling**](../../../styling.md) topic.
// </snippet>