NativeScript/tests/app/ui/styling/root-views-css-classes-tests.ts

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 = <Page>args.object;
        page.off(View.shownModallyEvent, modalPageShownModallyEventHandler);

        const rootModalView = <View>_rootModalViews[0];
        _test_root_css_class(rootModalView, true, shouldSetClassName);
        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);
}

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);
}

function _test_root_modal_view_platform_css_class(shouldSetClassName: boolean) {
    let modalClosed = false;

    const modalCloseCallback = function () {
        modalClosed = true;
    };

    const modalPageShownModallyEventHandler = function (args: ShownModallyData) {
        const page = <Page>args.object;
        page.off(View.shownModallyEvent, modalPageShownModallyEventHandler);

        const rootModalView = <View>_rootModalViews[0];
        _test_platform_css_class(rootModalView, shouldSetClassName);
        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);
}

export function test_modal_root_view_platform_css_class() {
    _test_root_modal_view_platform_css_class(false);
}

export function test_modal_root_view_class_name_preserve_platform_css_class() {
    _test_root_modal_view_platform_css_class(true);
}

function _test_root_modal_view_device_type_css_class(shouldSetClassName: boolean) {
    let modalClosed = false;

    const modalCloseCallback = function () {
        modalClosed = true;
    };

    const modalPageShownModallyEventHandler = function (args: ShownModallyData) {
        const page = <Page>args.object;
        page.off(View.shownModallyEvent, modalPageShownModallyEventHandler);

        const rootModalView = <View>_rootModalViews[0];
        _test_device_type_css_class(rootModalView, shouldSetClassName);
        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);
}

export function test_modal_root_view_device_type_css_class() {
    _test_root_modal_view_device_type_css_class(false);
}

export function test_modal_root_view_class_name_preserve_device_type_css_class() {
    _test_root_modal_view_device_type_css_class(true);
}

function _test_root_modal_view_orientation_css_class(shouldSetClassName: boolean) {
    let modalClosed = false;

    const modalCloseCallback = function () {
        modalClosed = true;
    };

    const modalPageShownModallyEventHandler = function (args: ShownModallyData) {
        const page = <Page>args.object;
        page.off(View.shownModallyEvent, modalPageShownModallyEventHandler);

        const rootModalView = <View>_rootModalViews[0];
        _test_orientation_css_class(rootModalView, shouldSetClassName);
        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);
}

export function test_modal_root_view_orientation_css_class() {
    _test_root_modal_view_orientation_css_class(false);
}

export function test_modal_root_view_class_name_preserve_orientation_css_class() {
    _test_root_modal_view_orientation_css_class(true);
}

function _test_root_modal_view_system_appearance_css_class(shouldSetClassName: boolean) {
    let modalClosed = false;

    const modalCloseCallback = function () {
        modalClosed = true;
    };

    const modalPageShownModallyEventHandler = function (args: ShownModallyData) {
        const page = <Page>args.object;
        page.off(View.shownModallyEvent, modalPageShownModallyEventHandler);

        const rootModalView = <View>_rootModalViews[0];
        _test_system_appearance_css_class(rootModalView, shouldSetClassName);
        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);
}

export function test_modal_root_view_system_appearance_css_class() {
    _test_root_modal_view_system_appearance_css_class(false);
}

export function test_modal_root_view_class_name_preserve_system_appearance_css_class() {
    _test_root_modal_view_system_appearance_css_class(true);
}