fix-next(css): CSS not applied to "drawerContent" when RadSideDrawer is used as root (#5466)

* fix(XMLBuilder): Pass the "module path name" when building "custom component"
* test(root-view): root view css applied tests

tests/app/testRunner.ts

@@ -225,21 +225,24 @@ allTests["ANIMATION"] = animationTests;
 import * as lifecycle from "./ui/lifecycle/lifecycle-tests";
 allTests["LIFECYCLE"] = lifecycle;
 
-
 import * as cssAnimationTests from "./ui/animation/css-animation-tests";
 allTests["CSS-ANIMATION"] = cssAnimationTests;
 
 import * as transitionTests from "./navigation/transition-tests";
 allTests["TRANSITIONS"] = transitionTests;
+
 import * as searchBarTests from "./ui/search-bar/search-bar-tests";
 allTests["SEARCH-BAR"] = searchBarTests;
 
 import * as navigationTests from "./navigation/navigation-tests";
 allTests["NAVIGATION"] = navigationTests;
 
-import * as resetRootViewTests from "./navigation/reset-root-view-tests";
+import * as resetRootViewTests from "./ui/root-view/reset-root-view-tests";
 allTests["RESET-ROOT-VIEW"] = resetRootViewTests;
 
+import * as rootViewTests from "./ui/root-view/root-view-tests";
+allTests["ROOT-VIEW"] = rootViewTests;
+
 const testsSuitesWithLongDelay = {
     HTTP: 15 * 1000,
 }

tests/app/ui/helper.ts

@@ -215,6 +215,11 @@ export function assertViewBackgroundColor(testView: ViewBase, hexColor: string)
     TKUnit.assertEqual(testView.style.backgroundColor.hex, hexColor, "backgroundColor property");
 }
 
+export function assertTabSelectedTabTextColor(testView: ViewBase, hexColor: string) {
+    TKUnit.assert(testView.style.selectedTabTextColor, "selectedTabTextColor property not applied correctly. Style value is not defined.");
+    TKUnit.assertEqual(testView.style.selectedTabTextColor.hex, hexColor, "selectedTabTextColor property not applied correctly");
+}
+
 export function forceGC() {
     if (isIOS) {
         /* tslint:disable:no-unused-expression */

tests/app/ui/root-view/mymodule/MyControl.css

@@ -0,0 +1,3 @@
+.MyStackLayout {
+    background-color: red;
+}

tests/app/ui/root-view/mymodule/MyControl.ts

@@ -0,0 +1,24 @@
+import * as observable from "tns-core-modules/data/observable";
+import * as stackLayoutModule from "tns-core-modules/ui/layouts/stack-layout";
+import * as label from "tns-core-modules/ui/label";
+import * as button from "tns-core-modules/ui/button";
+
+export class MyControl extends stackLayoutModule.StackLayout {
+    constructor() {
+        super();
+
+        var counter: number = 0;
+
+        var lbl = new label.Label();
+        var btn = new button.Button();
+        btn.text = "Tap me!";
+        btn.on(button.Button.tapEvent, (args: observable.EventData) => {
+            lbl.text = "Tap " + counter++;
+        });
+
+        this.addChild(lbl);
+        this.addChild(btn);
+
+        this.className = "MyStackLayout";
+    }
+}

tests/app/ui/root-view/mymodule/package.json

@@ -0,0 +1,2 @@
+{ "name" : "MyControl",
+  "main" : "MyControl.js" }

tests/app/ui/root-view/reset-root-view-tests.ts

@@ -1,5 +1,5 @@
-import * as TKUnit from "../TKUnit";
-import * as helper from "../ui/helper";
+import * as TKUnit from "../../TKUnit";
+import * as helper from "../helper";
 import { Page } from "tns-core-modules/ui/page";
 import { Frame, NavigationEntry, stack } from "tns-core-modules/ui/frame";
 import { _resetRootView, getRootView } from "tns-core-modules/application";

tests/app/ui/root-view/root-modules/custom-component-root.css

@@ -0,0 +1,3 @@
+.MyStackLayoutRoot {
+    background-color: blue;
+}

tests/app/ui/root-view/root-modules/custom-component-root.xml

@@ -0,0 +1,2 @@
+<customControls:MyControl xmlns:customControls="ui/root-view/mymodule" class="MyStackLayoutRoot">
+</customControls:MyControl>

tests/app/ui/root-view/root-modules/gridlayout-root.css

@@ -0,0 +1,3 @@
+.MyStackLayoutRoot {
+    background-color: blue;
+}

tests/app/ui/root-view/root-modules/gridlayout-root.xml

@@ -0,0 +1,2 @@
+<GridLayout class="MyStackLayoutRoot">
+</GridLayout>

tests/app/ui/root-view/root-modules/tabview-root.css

@@ -0,0 +1,3 @@
+TabView {
+    selected-tab-text-color: blue;
+}

tests/app/ui/root-view/root-modules/tabview-root.xml

@@ -0,0 +1,17 @@
+<TabView>
+    <TabView.items>
+
+    <TabViewItem title="Tab">
+        <TabViewItem.view>
+            <Label text="Tab" />
+        </TabViewItem.view>
+    </TabViewItem>
+
+    <TabViewItem title="Tab">
+        <TabViewItem.view>
+            <Label text="Tab" />
+        </TabViewItem.view>
+    </TabViewItem>
+
+    </TabView.items>
+</TabView>

tests/app/ui/root-view/root-view-tests.ts

@@ -0,0 +1,74 @@
+import * as TKUnit from "../../TKUnit";
+import { Page } from "tns-core-modules/ui/page";
+import { Frame, NavigationEntry, stack } from "tns-core-modules/ui/frame";
+import { _resetRootView, getRootView } from "tns-core-modules/application";
+import { TabView, TabViewItem } from "tns-core-modules/ui/tab-view";
+import { GridLayout } from "tns-core-modules/ui/layouts/grid-layout";
+import * as myCustomControlWithoutXml from "./mymodule/MyControl";
+import * as helper from "../helper";
+
+function createTestFrameRootEntry() {
+    const page = new Page();
+    const frameRoot = new Frame();
+    frameRoot.navigate(() => page);
+
+    const entry: NavigationEntry = {
+        create: () => frameRoot
+    };
+
+    return {
+        entry: entry,
+        root: frameRoot,
+        page: page
+    };
+}
+
+export function test_custom_component_rootview_css_applied() {
+    var entry = {
+        moduleName: "ui/root-view/root-modules/custom-component-root"
+    };
+
+    _resetRootView(entry);
+
+    var rootView = getRootView();
+    TKUnit.waitUntilReady(() => rootView.isLoaded);
+
+    TKUnit.assert(rootView instanceof myCustomControlWithoutXml.MyControl);
+    helper.assertViewBackgroundColor(rootView, "#0000FF");
+};
+
+export function test_tabview_rootview_css_applied() {
+    var entry = {
+        moduleName: "ui/root-view/root-modules/tabview-root"
+    };
+
+    _resetRootView(entry);
+
+    var rootView = getRootView();
+    TKUnit.waitUntilReady(() => rootView.isLoaded);
+
+    TKUnit.assert(rootView instanceof TabView);
+    helper.assertTabSelectedTabTextColor(rootView, "#0000FF");
+};
+
+export function test_gridlayout_rootview_css_applied() {
+    var entry = {
+        moduleName: "ui/root-view/root-modules/gridlayout-root"
+    };
+
+    _resetRootView(entry);
+
+    var rootView = getRootView();
+    TKUnit.waitUntilReady(() => rootView.isLoaded);
+
+    TKUnit.assert(rootView instanceof GridLayout);
+    helper.assertViewBackgroundColor(rootView, "#0000FF");
+};
+
+export function tearDownModule() {
+    // reset the root to frame for other tests
+    const resetFrameRoot = createTestFrameRootEntry();
+
+    _resetRootView(resetFrameRoot.entry);
+    TKUnit.waitUntilReady(() => resetFrameRoot.page.isLoaded);
+}

tns-core-modules/ui/builder/builder.ts

@@ -158,7 +158,7 @@ function loadInternal(fileName: string, context?: any, moduleNamePath?: string):
     return componentModule;
 }
 
-function loadCustomComponent(componentPath: string, componentName?: string, attributes?: Object, context?: Object, parentPage?: View, isRootComponent: boolean = true): ComponentModule {
+function loadCustomComponent(componentPath: string, componentName?: string, attributes?: Object, context?: Object, parentPage?: View, isRootComponent: boolean = true, moduleNamePath?: string): ComponentModule {
     if (!parentPage && context) {
         // Read the parent page that was passed down below
         // https://github.com/NativeScript/NativeScript/issues/1639
@@ -211,7 +211,7 @@ function loadCustomComponent(componentPath: string, componentName?: string, attr
         }
     } else {
         // Custom components without XML
-        result = getComponentModule(componentName, componentPath, attributes, context, undefined, isRootComponent);
+        result = getComponentModule(componentName, componentPath, attributes, context, moduleNamePath, isRootComponent);
     }
 
     // webpack modules require paths to be relative to /app folder.
@@ -607,7 +607,7 @@ namespace xml2ui {
         private buildComponent(args: xml.ParserEvent): ComponentModule {
             if (args.prefix && args.namespace) {
                 // Custom components
-                return loadCustomComponent(args.namespace, args.elementName, args.attributes, this.context, this.currentRootView, !this.currentRootView);
+                return loadCustomComponent(args.namespace, args.elementName, args.attributes, this.context, this.currentRootView, !this.currentRootView, this.moduleNamePath);
             } else {
                 // Default components
                 let namespace = args.namespace;