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

fix-next(css): className to preserve root views classes (#7725)

Browse Source
This commit is contained in:
Vasil Chimev
2019-08-30 09:09:35 +03:00
committed by GitHub
parent 92c3338dd5
commit d23ffb8dbf
13 changed files with 263 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
tests/app/ui/styling/root-views-css-classes-tests.ts
View File

@@ -22,6 +22,7 @@ import {
} from "tns-core-modules/ui/core/view/view-common";
import { DeviceType } from "tns-core-modules/ui/enums/enums";
const CLASS_NAME = "class-name";
const ROOT_CSS_CLASS = "ns-root";
const MODAL_CSS_CLASS = "ns-modal";
const ANDROID_PLATFORM_CSS_CLASS = "ns-android";
@@ -32,18 +33,41 @@ const PORTRAIT_ORIENTATION_CSS_CLASS = "ns-portrait";
const LANDSCAPE_ORIENTATION_CSS_CLASS = "ns-landscape";
const UNKNOWN_ORIENTATION_CSS_CLASS = "ns-unknown";
export function test_root_view_root_css_class() {
const rootViewCssClasses = getRootView().cssClasses;
function _test_root_view_root_css_class(shouldSetClassName: boolean) {
const rootView = getRootView();
if (shouldSetClassName) {
rootView.className = CLASS_NAME;
}
const rootViewCssClasses = rootView.cssClasses;
TKUnit.assertTrue(rootViewCssClasses.has(
ROOT_CSS_CLASS),
`${ROOT_CSS_CLASS} CSS class is missing`
);
if (shouldSetClassName) {
TKUnit.assertTrue(rootViewCssClasses.has(
CLASS_NAME),
`${CLASS_NAME} CSS class is missing`
);
}
}
export function test_root_view_platform_css_class() {
const rootViewCssClasses = getRootView().cssClasses;
export function test_root_view_root_css_class() {
_test_root_view_root_css_class(false);
}
export function test_root_view_class_name_preserve_root_css_class() {
_test_root_view_root_css_class(true);
}
function _test_root_view_platform_css_class(shouldSetClassName: boolean) {
const rootView = getRootView();
if (shouldSetClassName) {
rootView.className = CLASS_NAME;
}
const rootViewCssClasses = rootView.cssClasses;
if (isAndroid) {
TKUnit.assertTrue(rootViewCssClasses.has(
ANDROID_PLATFORM_CSS_CLASS),
@@ -63,10 +87,30 @@ export function test_root_view_platform_css_class() {
`${ANDROID_PLATFORM_CSS_CLASS} CSS class is present`
);
}
if (shouldSetClassName) {
TKUnit.assertTrue(rootViewCssClasses.has(
CLASS_NAME),
`${CLASS_NAME} CSS class is missing`
);
}
}
export function test_root_view_device_type_css_class() {
const rootViewCssClasses = getRootView().cssClasses;
export function test_root_view_platform_css_class() {
_test_root_view_platform_css_class(false);
}
export function test_root_view_class_name_preserve_platform_css_class() {
_test_root_view_platform_css_class(true);
}
function _test_root_view_device_type_css_class(shouldSetClassName: boolean) {
const rootView = getRootView();
if (shouldSetClassName) {
rootView.className = CLASS_NAME;
}
const rootViewCssClasses = rootView.cssClasses;
const deviceType = device.deviceType;
if (deviceType === DeviceType.Phone) {
@@ -88,10 +132,30 @@ export function test_root_view_device_type_css_class() {
`${PHONE_DEVICE_TYPE_CSS_CLASS} CSS class is present`
);
}
if (shouldSetClassName) {
TKUnit.assertTrue(rootViewCssClasses.has(
CLASS_NAME),
`${CLASS_NAME} CSS class is missing`
);
}
}
export function test_root_view_orientation_css_class() {
const rootViewCssClasses = getRootView().cssClasses;
export function test_root_view_device_type_css_class() {
_test_root_view_device_type_css_class(false);
}
export function test_root_view_class_name_preserve_device_type_css_class() {
_test_root_view_device_type_css_class(true);
}
function _test_root_view_orientation_css_class(shouldSetClassName: boolean) {
const rootView = getRootView();
if (shouldSetClassName) {
rootView.className = CLASS_NAME;
}
const rootViewCssClasses = rootView.cssClasses;
let appOrientation;
if (isAndroid) {
@@ -140,9 +204,24 @@ export function test_root_view_orientation_css_class() {
`${PORTRAIT_ORIENTATION_CSS_CLASS} CSS class is present`
);
}
if (shouldSetClassName) {
TKUnit.assertTrue(rootViewCssClasses.has(
CLASS_NAME),
`${CLASS_NAME} CSS class is missing`
);
}
}
export function test_modal_root_view_modal_css_class() {
export function test_root_view_orientation_css_class() {
_test_root_view_orientation_css_class(false);
}
export function test_root_view_class_name_preserve_orientation_css_class() {
_test_root_view_orientation_css_class(true);
}
function _test_modal_root_view_modal_css_class(shouldSetClassName: boolean) {
let modalClosed = false;
const modalCloseCallback = function () {
@@ -153,7 +232,20 @@ export function test_modal_root_view_modal_css_class() {
const page = <Page>args.object;
page.off(View.shownModallyEvent, modalPageShownModallyEventHandler);
TKUnit.assertTrue(_rootModalViews[0].cssClasses.has(MODAL_CSS_CLASS));
const rootModalView = _rootModalViews[0];
if (shouldSetClassName) {
rootModalView.className = CLASS_NAME;
}
const rootModalViewCssClasses = rootModalView.cssClasses;
TKUnit.assertTrue(rootModalViewCssClasses.has(MODAL_CSS_CLASS),
`${MODAL_CSS_CLASS} CSS class is missing`);
if (shouldSetClassName) {
TKUnit.assertTrue(rootModalViewCssClasses.has(CLASS_NAME),
`${CLASS_NAME} CSS class is missing`);
}
args.closeCallback();
};
@@ -186,3 +278,11 @@ export function test_modal_root_view_modal_css_class() {
helper.navigate(hostPageFactory);
TKUnit.waitUntilReady(() => modalClosed);
}
export function test_modal_root_view_modal_css_class() {
_test_modal_root_view_modal_css_class(false);
}
export function test_modal_root_view_class_name_preserve_modal_css_class() {
_test_modal_root_view_modal_css_class(true);
}

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

@@ -225,7 +225,7 @@ export function test_multiple_class_selector() {
let page = helper.getClearCurrentPage();
let btnWithClasses: buttonModule.Button;
page.css = ".style1 { color: red; } .style2 { background-color: blue } ";
page.css = ".style1 { color: red; } .style2 { background-color: blue; } ";
//// Will be styled
btnWithClasses = new buttonModule.Button();
@@ -239,6 +239,24 @@ export function test_multiple_class_selector() {
helper.assertViewBackgroundColor(btnWithClasses, "#0000FF");
}
export function test_class_selector_overwriting() {
const page = helper.getClearCurrentPage();
page.css = ".first { color: red; } .second { background-color: blue; }";
const btnWithClass = new buttonModule.Button();
const stack = new stackModule.StackLayout();
page.content = stack;
stack.addChild(btnWithClass);
btnWithClass.className = "first";
helper.assertViewColor(btnWithClass, "#FF0000");
TKUnit.assert(btnWithClass.style.backgroundColor === undefined, " Background color should not have a value");
btnWithClass.className = "second";
TKUnit.assert(btnWithClass.style.color === undefined, "Color should not have a value");
helper.assertViewBackgroundColor(btnWithClass, "#0000FF");
}
export function test_id_selector() {
let page = helper.getClearCurrentPage();
page.style.color = unsetValue;
@@ -1497,7 +1515,7 @@ export function test_css_calc() {
TKUnit.assertEqual(stack.width as any, 125, "Stack - width === 125");
(stack as any).style = `width: calc(100% / 2)`;
TKUnit.assertDeepEqual(stack.width, { unit: "%", value: 0.5 }, "Stack - width === 50%");
TKUnit.assertDeepEqual(stack.width, { unit: "%", value: 0.5 }, "Stack - width === 50%");
// This should log an error for the invalid css-calc expression, but not cause a crash
stack.className = "invalid-css-calc";
@@ -1568,7 +1586,7 @@ export function test_nested_css_calc() {
(stack as any).style = `width: calc(100% * calc(1 / 2)`;
TKUnit.assertDeepEqual(stack.width, { unit: "%", value: 0.5 }, "Stack - width === 50%");
TKUnit.assertDeepEqual(stack.width, { unit: "%", value: 0.5 }, "Stack - width === 50%");
}
export function test_css_variables() {
@@ -1678,7 +1696,7 @@ export function test_css_calc_and_variables() {
// Test setting the CSS variable via the style-attribute, this should override any value set via css-class
(stack as any).style = `${cssVarName}: 0.5`;
TKUnit.assertDeepEqual(stack.width, { unit: "%", value: 0.5 }, "Stack - width === 50%");
TKUnit.assertDeepEqual(stack.width, { unit: "%", value: 0.5 }, "Stack - width === 50%");
}
export function test_css_variable_fallback() {
@@ -1819,10 +1837,10 @@ export function test_nested_css_calc_and_variables() {
// Test setting the CSS variable via the style-attribute, this should override any value set via css-class
stack.className = "wide";
(stack as any).style = `${cssVarName}: 0.25`;
TKUnit.assertDeepEqual(stack.width, { unit: "%", value: 0.5 }, "Stack - width === 50%");
TKUnit.assertDeepEqual(stack.width, { unit: "%", value: 0.5 }, "Stack - width === 50%");
stack.className = "nested";
TKUnit.assertDeepEqual(stack.width, { unit: "%", value: 1 }, "Stack - width === 100%");
TKUnit.assertDeepEqual(stack.width, { unit: "%", value: 1 }, "Stack - width === 100%");
}
export function test_css_variable_is_applied_to_normal_properties() {