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: add CSS classes to app/modal root views to target platform/device/orientation/type (#7606)

Browse Source
This commit is contained in:
Vasil Chimev
2019-08-19 14:09:44 +03:00
committed by GitHub
parent 70f8d70f07
commit 3adba6826b
10 changed files with 284 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
tests/app/test-runner.ts
View File

@@ -154,6 +154,9 @@ if (platform.isIOS && ios.MajorVersion > 10) {
allTests["SAFEAREA-WEBVIEW"] = webViewSafeAreaTests;
}
import * as rootViewsCssClassesTests from "./ui/styling/root-views-css-classes-tests";
allTests["ROOT-VIEWS-CSS-CLASSES"] = rootViewsCssClassesTests;
import * as stylePropertiesTests from "./ui/styling/style-properties-tests";
allTests["STYLE-PROPERTIES"] = stylePropertiesTests;

48
tests/app/ui/page/page-tests-common.ts
View File

@@ -505,11 +505,6 @@ function _test_WhenInnerViewCallsCloseModal(closeModalGetter: (ShownModallyData)
helper.navigate(masterPageFactory);
TKUnit.waitUntilReady(() => modalClosedWithResult);
if (isIOS) {
// Remove this line when we have a good way to detect actual modal close on ios
TKUnit.waitUntilReady(() => !(<UIViewController>topmost().currentPage.viewController).presentedViewController);
}
}
export function test_WhenViewBaseCallsShowModal_WithArguments_ShouldOpenModal() {
@@ -572,11 +567,6 @@ export function test_WhenViewBaseCallsShowModal_WithArguments_ShouldOpenModal()
helper.navigate(masterPageFactory);
TKUnit.waitUntilReady(() => modalClosed);
if (isIOS) {
// Remove this line when we have a good way to detect actual modal close on ios
TKUnit.waitUntilReady(() => !(<UIViewController>topmost().currentPage.viewController).presentedViewController);
}
}
export function test_WhenViewBaseCallsShowModal_WithShowModalOptionsArguments_ShouldOpenModal() {
@@ -794,11 +784,6 @@ export function test_WhenRootTabViewShownModallyItCanCloseModal() {
helper.navigate(masterPageFactory);
TKUnit.waitUntilReady(() => modalClosed);
if (isIOS) {
// Remove this line when we have a good way to detect actual modal close on ios
TKUnit.waitUntilReady(() => !(<UIViewController>topmost().currentPage.viewController).presentedViewController);
}
}
export function test_WhenPageIsNavigatedToItCanShowAnotherPageAsModal() {
@@ -885,11 +870,6 @@ export function test_WhenPageIsNavigatedToItCanShowAnotherPageAsModal() {
TKUnit.assertEqual(modalUnloaded, 1, "modalUnloaded");
masterPage.off(Page.navigatedToEvent, navigatedToEventHandler);
if (isIOS) {
// Remove this line when we have a good way to detect actual modal close on ios
TKUnit.waitUntilReady(() => !(<UIViewController>topmost().currentPage.viewController).presentedViewController);
}
}
export function test_WhenModalPageShownHostPageNavigationEventsShouldNotBeRaised() {
@@ -967,11 +947,6 @@ export function test_WhenModalPageShownHostPageNavigationEventsShouldNotBeRaised
TKUnit.waitUntilReady(() => ready);
if (isIOS) {
// Remove this line when we have a good way to detect actual modal close on ios
TKUnit.waitUntilReady(() => !(<UIViewController>topmost().currentPage.viewController).presentedViewController);
}
// only raised by the initial navigation to the master page
TKUnit.assertTrue(hostNavigatingToCount === 1);
TKUnit.assertTrue(hostNavigatedToCount === 1);
@@ -1058,11 +1033,6 @@ export function test_WhenModalPageShownModalNavigationToEventsShouldBeRaised() {
TKUnit.waitUntilReady(() => ready && !modalFrame.isLoaded);
if (isIOS) {
// Remove this line when we have a good way to detect actual modal close on ios
TKUnit.waitUntilReady(() => !(<UIViewController>topmost().currentPage.viewController).presentedViewController);
}
// only raised by the initial show modal navigation
TKUnit.assertTrue(modalNavigatingToCount === 1);
TKUnit.assertTrue(modalNavigatedToCount === 1);
@@ -1138,12 +1108,6 @@ export function test_WhenModalFrameShownModalEventsRaisedOnRootModalFrame() {
helper.navigate(masterPageFactory);
TKUnit.waitUntilReady(() => ready && !modalFrame.isLoaded);
if (isIOS) {
// Remove this line when we have a good way to detect actual modal close on ios
TKUnit.waitUntilReady(() => !(<UIViewController>topmost().currentPage.viewController).presentedViewController);
}
TKUnit.assertTrue(showingModallyCount === 1);
TKUnit.assertTrue(shownModallyCount === 1);
}
@@ -1206,12 +1170,6 @@ export function test_WhenModalPageShownShowModalEventsRaisedOnRootModalPage() {
helper.navigate(masterPageFactory);
TKUnit.waitUntilReady(() => ready);
if (isIOS) {
// Remove this line when we have a good way to detect actual modal close on ios
TKUnit.waitUntilReady(() => !(<UIViewController>topmost().currentPage.viewController).presentedViewController);
}
TKUnit.assertTrue(showingModallyCount === 1);
TKUnit.assertTrue(shownModallyCount === 1);
}
@@ -1279,12 +1237,6 @@ export function test_WhenModalPageShownShowModalEventsRaisedOnRootModalTabView()
TKUnit.assertEqual(_stack().length, 2, "Host and modal tab frame should be instantiated at this point!");
TKUnit.waitUntilReady(() => ready);
if (isIOS) {
// Remove this line when we have a good way to detect actual modal close on ios
TKUnit.waitUntilReady(() => !(<UIViewController>topmost().currentPage.viewController).presentedViewController);
}
TKUnit.assertEqual(_stack().length, 1, "Single host frame should be instantiated at this point!");
TKUnit.assertTrue(showingModallyCount === 1);

188
tests/app/ui/styling/root-views-css-classes-tests.ts Normal file
View File

@@ -0,0 +1,188 @@
import * as helper from "../../ui-helper";
import * as TKUnit from "../../tk-unit";
import {
android,
getRootView,
ios
} from "tns-core-modules/application";
import {
isAndroid,
device
} from "tns-core-modules/platform";
import { Button } from "tns-core-modules/ui/button/button";
import { Page } from "tns-core-modules/ui/page";
import {
ShownModallyData,
ShowModalOptions,
View
} from "tns-core-modules/ui/frame";
import {
_rootModalViews
} from "tns-core-modules/ui/core/view/view-common";
import { DeviceType } from "tns-core-modules/ui/enums/enums";
const ROOT_CSS_CLASS = "ns-root";
const MODAL_CSS_CLASS = "ns-modal";
const ANDROID_PLATFORM_CSS_CLASS = "ns-android";
const IOS_PLATFORM_CSS_CLASS = "ns-ios";
const PHONE_DEVICE_TYPE_CSS_CLASS = "ns-phone";
const TABLET_DEVICE_TYPE_CSS_CLASS = "ns-tablet";
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;
TKUnit.assertTrue(rootViewCssClasses.has(
ROOT_CSS_CLASS),
`${ROOT_CSS_CLASS} CSS class is missing`
);
}
export function test_root_view_platform_css_class() {
const rootViewCssClasses = getRootView().cssClasses;
if (isAndroid) {
TKUnit.assertTrue(rootViewCssClasses.has(
ANDROID_PLATFORM_CSS_CLASS),
`${ANDROID_PLATFORM_CSS_CLASS} CSS class is missing`
);
TKUnit.assertFalse(rootViewCssClasses.has(
IOS_PLATFORM_CSS_CLASS),
`${IOS_PLATFORM_CSS_CLASS} CSS class is present`
);
} else {
TKUnit.assertTrue(rootViewCssClasses.has(
IOS_PLATFORM_CSS_CLASS),
`${IOS_PLATFORM_CSS_CLASS} CSS class is missing`
);
TKUnit.assertFalse(rootViewCssClasses.has(
ANDROID_PLATFORM_CSS_CLASS),
`${ANDROID_PLATFORM_CSS_CLASS} CSS class is present`
);
}
}
export function test_root_view_device_type_css_class() {
const rootViewCssClasses = getRootView().cssClasses;
const deviceType = device.deviceType;
if (deviceType === DeviceType.Phone) {
TKUnit.assertTrue(rootViewCssClasses.has(
PHONE_DEVICE_TYPE_CSS_CLASS),
`${PHONE_DEVICE_TYPE_CSS_CLASS} CSS class is missing`
);
TKUnit.assertFalse(rootViewCssClasses.has(
TABLET_DEVICE_TYPE_CSS_CLASS),
`${TABLET_DEVICE_TYPE_CSS_CLASS} CSS class is present`
);
} else {
TKUnit.assertTrue(rootViewCssClasses.has(
TABLET_DEVICE_TYPE_CSS_CLASS),
`${TABLET_DEVICE_TYPE_CSS_CLASS} CSS class is missing`
);
TKUnit.assertFalse(rootViewCssClasses.has(
PHONE_DEVICE_TYPE_CSS_CLASS),
`${PHONE_DEVICE_TYPE_CSS_CLASS} CSS class is present`
);
}
}
export function test_root_view_orientation_css_class() {
const rootViewCssClasses = getRootView().cssClasses;
let appOrientation;
if (isAndroid) {
appOrientation = android.orientation;
} else {
appOrientation = ios.orientation;
}
if (appOrientation === "portrait") {
TKUnit.assertTrue(rootViewCssClasses.has(
PORTRAIT_ORIENTATION_CSS_CLASS),
`${PORTRAIT_ORIENTATION_CSS_CLASS} CSS class is missing`
);
TKUnit.assertFalse(rootViewCssClasses.has(
LANDSCAPE_ORIENTATION_CSS_CLASS),
`${LANDSCAPE_ORIENTATION_CSS_CLASS} CSS class is present`
);
TKUnit.assertFalse(rootViewCssClasses.has(
UNKNOWN_ORIENTATION_CSS_CLASS),
`${UNKNOWN_ORIENTATION_CSS_CLASS} CSS class is present`
);
} else if (appOrientation === "landscape") {
TKUnit.assertTrue(rootViewCssClasses.has(
LANDSCAPE_ORIENTATION_CSS_CLASS),
`${LANDSCAPE_ORIENTATION_CSS_CLASS} CSS class is missing`
);
TKUnit.assertFalse(rootViewCssClasses.has(
PORTRAIT_ORIENTATION_CSS_CLASS),
`${PORTRAIT_ORIENTATION_CSS_CLASS} CSS class is present`
);
TKUnit.assertFalse(rootViewCssClasses.has(
UNKNOWN_ORIENTATION_CSS_CLASS),
`${UNKNOWN_ORIENTATION_CSS_CLASS} CSS class is present`
);
} else if (appOrientation === "landscape") {
TKUnit.assertTrue(rootViewCssClasses.has(
UNKNOWN_ORIENTATION_CSS_CLASS),
`${UNKNOWN_ORIENTATION_CSS_CLASS} CSS class is missing`
);
TKUnit.assertFalse(rootViewCssClasses.has(
LANDSCAPE_ORIENTATION_CSS_CLASS),
`${LANDSCAPE_ORIENTATION_CSS_CLASS} CSS class is present`
);
TKUnit.assertFalse(rootViewCssClasses.has(
PORTRAIT_ORIENTATION_CSS_CLASS),
`${PORTRAIT_ORIENTATION_CSS_CLASS} CSS class is present`
);
}
}
export function test_modal_root_view_modal_css_class() {
let modalClosed = false;
const modalCloseCallback = function () {
modalClosed = true;
};
const modalPageShownModallyEventHandler = function (args: ShownModallyData) {
const page = <Page>args.object;
page.off(View.shownModallyEvent, modalPageShownModallyEventHandler);
TKUnit.assertTrue(_rootModalViews[0].cssClasses.has(MODAL_CSS_CLASS));
args.closeCallback();
};
const hostNavigatedToEventHandler = function (args) {
const page = <Page>args.object;
page.off(Page.navigatedToEvent, hostNavigatedToEventHandler);
const modalPage = new Page();
modalPage.on(View.shownModallyEvent, modalPageShownModallyEventHandler);
const button = <Button>page.content;
const options: ShowModalOptions = {
context: {},
closeCallback: modalCloseCallback,
fullscreen: false,
animated: false
};
button.showModal(modalPage, options);
};
const hostPageFactory = function (): Page {
const hostPage = new Page();
hostPage.on(Page.navigatedToEvent, hostNavigatedToEventHandler);
const button = new Button();
hostPage.content = button;
return hostPage;
};
helper.navigate(hostPageFactory);
TKUnit.waitUntilReady(() => modalClosed);
}