import * as helper from "../../ui-helper"; import * as TKUnit from "../../tk-unit"; import { android, getRootView, ios } from "@nativescript/core/application"; import { isAndroid, isIOS, device } from "@nativescript/core/platform"; import { Button } from "@nativescript/core/ui/button/button"; import { Page } from "@nativescript/core/ui/page"; import { ShownModallyData, ShowModalOptions, View } from "@nativescript/core/ui/frame"; import { _rootModalViews } from "@nativescript/core/ui/core/view/view-common"; import { DeviceType } from "@nativescript/core/ui/enums/enums"; import { ios as iosUtils } from "@nativescript/core/utils/utils"; const CLASS_NAME = "class-name"; 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"; const DARK_SYSTEM_APPEARANCE_CSS_CLASS = "ns-dark"; const LIGHT_SYSTEM_APPEARANCE_CSS_CLASS = "ns-light"; function _test_root_css_class(view: View, isModal: boolean, shouldSetClassName: boolean) { if (shouldSetClassName) { view.className = CLASS_NAME; } const cssClass = isModal ? MODAL_CSS_CLASS : ROOT_CSS_CLASS; const viewCssClasses = view.cssClasses; TKUnit.assertTrue(viewCssClasses.has(cssClass), `${cssClass} CSS class is missing`); if (shouldSetClassName) { TKUnit.assertTrue(viewCssClasses.has(CLASS_NAME), `${CLASS_NAME} CSS class is missing`); } } function _test_platform_css_class(rootView: View, shouldSetClassName: boolean) { if (shouldSetClassName) { rootView.className = CLASS_NAME; } const cssClasses = rootView.cssClasses; if (isAndroid) { TKUnit.assertTrue(cssClasses.has(ANDROID_PLATFORM_CSS_CLASS), `${ANDROID_PLATFORM_CSS_CLASS} CSS class is missing`); TKUnit.assertFalse(cssClasses.has(IOS_PLATFORM_CSS_CLASS), `${IOS_PLATFORM_CSS_CLASS} CSS class is present`); } else { TKUnit.assertTrue(cssClasses.has(IOS_PLATFORM_CSS_CLASS), `${IOS_PLATFORM_CSS_CLASS} CSS class is missing`); TKUnit.assertFalse(cssClasses.has(ANDROID_PLATFORM_CSS_CLASS), `${ANDROID_PLATFORM_CSS_CLASS} CSS class is present`); } if (shouldSetClassName) { TKUnit.assertTrue(cssClasses.has(CLASS_NAME), `${CLASS_NAME} CSS class is missing`); } } function _test_device_type_css_class(rootView: View, shouldSetClassName: boolean) { if (shouldSetClassName) { rootView.className = CLASS_NAME; } const cssClasses = rootView.cssClasses; const deviceType = device.deviceType; if (deviceType === DeviceType.Phone) { TKUnit.assertTrue(cssClasses.has(PHONE_DEVICE_TYPE_CSS_CLASS), `${PHONE_DEVICE_TYPE_CSS_CLASS} CSS class is missing`); TKUnit.assertFalse(cssClasses.has(TABLET_DEVICE_TYPE_CSS_CLASS), `${TABLET_DEVICE_TYPE_CSS_CLASS} CSS class is present`); } else { TKUnit.assertTrue(cssClasses.has(TABLET_DEVICE_TYPE_CSS_CLASS), `${TABLET_DEVICE_TYPE_CSS_CLASS} CSS class is missing`); TKUnit.assertFalse(cssClasses.has(PHONE_DEVICE_TYPE_CSS_CLASS), `${PHONE_DEVICE_TYPE_CSS_CLASS} CSS class is present`); } if (shouldSetClassName) { TKUnit.assertTrue(cssClasses.has(CLASS_NAME), `${CLASS_NAME} CSS class is missing`); } } function _test_orientation_css_class(rootView: View, shouldSetClassName: boolean) { if (shouldSetClassName) { rootView.className = CLASS_NAME; } const cssClasses = rootView.cssClasses; let appOrientation; if (isAndroid) { appOrientation = android.orientation; } else { appOrientation = ios.orientation; } if (appOrientation === "portrait") { TKUnit.assertTrue(cssClasses.has(PORTRAIT_ORIENTATION_CSS_CLASS), `${PORTRAIT_ORIENTATION_CSS_CLASS} CSS class is missing`); TKUnit.assertFalse(cssClasses.has(LANDSCAPE_ORIENTATION_CSS_CLASS), `${LANDSCAPE_ORIENTATION_CSS_CLASS} CSS class is present`); TKUnit.assertFalse(cssClasses.has(UNKNOWN_ORIENTATION_CSS_CLASS), `${UNKNOWN_ORIENTATION_CSS_CLASS} CSS class is present`); } else if (appOrientation === "landscape") { TKUnit.assertTrue(cssClasses.has(LANDSCAPE_ORIENTATION_CSS_CLASS), `${LANDSCAPE_ORIENTATION_CSS_CLASS} CSS class is missing`); TKUnit.assertFalse(cssClasses.has(PORTRAIT_ORIENTATION_CSS_CLASS), `${PORTRAIT_ORIENTATION_CSS_CLASS} CSS class is present`); TKUnit.assertFalse(cssClasses.has(UNKNOWN_ORIENTATION_CSS_CLASS), `${UNKNOWN_ORIENTATION_CSS_CLASS} CSS class is present`); } else if (appOrientation === "landscape") { TKUnit.assertTrue(cssClasses.has(UNKNOWN_ORIENTATION_CSS_CLASS), `${UNKNOWN_ORIENTATION_CSS_CLASS} CSS class is missing`); TKUnit.assertFalse(cssClasses.has(LANDSCAPE_ORIENTATION_CSS_CLASS), `${LANDSCAPE_ORIENTATION_CSS_CLASS} CSS class is present`); TKUnit.assertFalse(cssClasses.has(PORTRAIT_ORIENTATION_CSS_CLASS), `${PORTRAIT_ORIENTATION_CSS_CLASS} CSS class is present`); } if (shouldSetClassName) { TKUnit.assertTrue(cssClasses.has(CLASS_NAME), `${CLASS_NAME} CSS class is missing`); } } function _test_system_appearance_css_class(rootView: View, shouldSetClassName: boolean) { if (shouldSetClassName) { rootView.className = CLASS_NAME; } const cssClasses = rootView.cssClasses; let systemAppearance; if (isAndroid) { systemAppearance = android.systemAppearance; } else { systemAppearance = ios.systemAppearance; } if (isIOS && iosUtils.MajorVersion <= 12) { TKUnit.assertFalse(cssClasses.has(DARK_SYSTEM_APPEARANCE_CSS_CLASS), `${DARK_SYSTEM_APPEARANCE_CSS_CLASS} CSS class is present`); TKUnit.assertFalse(cssClasses.has(LIGHT_SYSTEM_APPEARANCE_CSS_CLASS), `${LIGHT_SYSTEM_APPEARANCE_CSS_CLASS} CSS class is present`); } else if (systemAppearance === "dark") { TKUnit.assertTrue(cssClasses.has(DARK_SYSTEM_APPEARANCE_CSS_CLASS), `${DARK_SYSTEM_APPEARANCE_CSS_CLASS} CSS class is missing`); TKUnit.assertFalse(cssClasses.has(LIGHT_SYSTEM_APPEARANCE_CSS_CLASS), `${LIGHT_SYSTEM_APPEARANCE_CSS_CLASS} CSS class is present`); } else if (systemAppearance === "light") { TKUnit.assertTrue(cssClasses.has(LIGHT_SYSTEM_APPEARANCE_CSS_CLASS), `${LIGHT_SYSTEM_APPEARANCE_CSS_CLASS} CSS class is missing`); TKUnit.assertFalse(cssClasses.has(DARK_SYSTEM_APPEARANCE_CSS_CLASS), `${DARK_SYSTEM_APPEARANCE_CSS_CLASS} CSS class is present`); } if (shouldSetClassName) { TKUnit.assertTrue(cssClasses.has(CLASS_NAME), `${CLASS_NAME} CSS class is missing`); } } // Application root view export function test_root_view_root_css_class() { const rootView = getRootView(); _test_root_css_class(rootView, false, false); } export function test_root_view_class_name_preserve_root_css_class() { const rootView = getRootView(); _test_root_css_class(rootView, false, true); } export function test_root_view_platform_css_class() { const rootView = getRootView(); _test_platform_css_class(rootView, false); } export function test_root_view_class_name_preserve_platform_css_class() { const rootView = getRootView(); _test_platform_css_class(rootView, true); } export function test_root_view_device_type_css_class() { const rootView = getRootView(); _test_device_type_css_class(rootView, false); } export function test_root_view_class_name_preserve_device_type_css_class() { const rootView = getRootView(); _test_device_type_css_class(rootView, true); } export function test_root_view_orientation_css_class() { const rootView = getRootView(); _test_orientation_css_class(rootView, false); } export function test_root_view_class_name_preserve_orientation_css_class() { const rootView = getRootView(); _test_orientation_css_class(rootView, true); } export function test_root_view_system_appearance_css_class() { const rootView = getRootView(); _test_system_appearance_css_class(rootView, false); } export function test_root_view_class_name_preserve_system_appearance_css_class() { const rootView = getRootView(); _test_system_appearance_css_class(rootView, true); } // Modal root view function _test_modal_root_view_modal_css_class(shouldSetClassName: boolean) { let modalClosed = false; const modalCloseCallback = function () { modalClosed = true; }; const modalPageShownModallyEventHandler = function (args: ShownModallyData) { const page = args.object; page.off(View.shownModallyEvent, modalPageShownModallyEventHandler); const rootModalView = _rootModalViews[0]; _test_root_css_class(rootModalView, true, shouldSetClassName); args.closeCallback(); }; const hostNavigatedToEventHandler = function (args) { const page = args.object; page.off(Page.navigatedToEvent, hostNavigatedToEventHandler); const modalPage = new Page(); modalPage.on(View.shownModallyEvent, modalPageShownModallyEventHandler); const button =