From fb5c97cf5797b88f592cab4b285ba24bee9825bc Mon Sep 17 00:00:00 2001 From: Vladimir Amiorkov Date: Thu, 1 Mar 2018 15:55:21 +0200 Subject: [PATCH] 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 | 7 +- tests/app/ui/helper.ts | 5 ++ tests/app/ui/root-view/mymodule/MyControl.css | 3 + tests/app/ui/root-view/mymodule/MyControl.ts | 24 ++++++ tests/app/ui/root-view/mymodule/package.json | 2 + .../root-view}/reset-root-view-tests.ts | 4 +- .../root-modules/custom-component-root.css | 3 + .../root-modules/custom-component-root.xml | 2 + .../root-modules/gridlayout-root.css | 3 + .../root-modules/gridlayout-root.xml | 2 + .../root-view/root-modules/tabview-root.css | 3 + .../root-view/root-modules/tabview-root.xml | 17 +++++ tests/app/ui/root-view/root-view-tests.ts | 74 +++++++++++++++++++ tns-core-modules/ui/builder/builder.ts | 6 +- 14 files changed, 148 insertions(+), 7 deletions(-) create mode 100644 tests/app/ui/root-view/mymodule/MyControl.css create mode 100644 tests/app/ui/root-view/mymodule/MyControl.ts create mode 100644 tests/app/ui/root-view/mymodule/package.json rename tests/app/{navigation => ui/root-view}/reset-root-view-tests.ts (98%) create mode 100644 tests/app/ui/root-view/root-modules/custom-component-root.css create mode 100644 tests/app/ui/root-view/root-modules/custom-component-root.xml create mode 100644 tests/app/ui/root-view/root-modules/gridlayout-root.css create mode 100644 tests/app/ui/root-view/root-modules/gridlayout-root.xml create mode 100644 tests/app/ui/root-view/root-modules/tabview-root.css create mode 100644 tests/app/ui/root-view/root-modules/tabview-root.xml create mode 100644 tests/app/ui/root-view/root-view-tests.ts diff --git a/tests/app/testRunner.ts b/tests/app/testRunner.ts index c698ba581..1e753fe44 100644 --- a/tests/app/testRunner.ts +++ b/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, } diff --git a/tests/app/ui/helper.ts b/tests/app/ui/helper.ts index 3e35df99b..d96eebb95 100644 --- a/tests/app/ui/helper.ts +++ b/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 */ diff --git a/tests/app/ui/root-view/mymodule/MyControl.css b/tests/app/ui/root-view/mymodule/MyControl.css new file mode 100644 index 000000000..d701672c7 --- /dev/null +++ b/tests/app/ui/root-view/mymodule/MyControl.css @@ -0,0 +1,3 @@ +.MyStackLayout { + background-color: red; +} diff --git a/tests/app/ui/root-view/mymodule/MyControl.ts b/tests/app/ui/root-view/mymodule/MyControl.ts new file mode 100644 index 000000000..d6455b3ab --- /dev/null +++ b/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"; + } +} diff --git a/tests/app/ui/root-view/mymodule/package.json b/tests/app/ui/root-view/mymodule/package.json new file mode 100644 index 000000000..501894536 --- /dev/null +++ b/tests/app/ui/root-view/mymodule/package.json @@ -0,0 +1,2 @@ +{ "name" : "MyControl", + "main" : "MyControl.js" } diff --git a/tests/app/navigation/reset-root-view-tests.ts b/tests/app/ui/root-view/reset-root-view-tests.ts similarity index 98% rename from tests/app/navigation/reset-root-view-tests.ts rename to tests/app/ui/root-view/reset-root-view-tests.ts index 8d566eea3..f28f8aafa 100644 --- a/tests/app/navigation/reset-root-view-tests.ts +++ b/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"; diff --git a/tests/app/ui/root-view/root-modules/custom-component-root.css b/tests/app/ui/root-view/root-modules/custom-component-root.css new file mode 100644 index 000000000..846004e03 --- /dev/null +++ b/tests/app/ui/root-view/root-modules/custom-component-root.css @@ -0,0 +1,3 @@ +.MyStackLayoutRoot { + background-color: blue; +} \ No newline at end of file diff --git a/tests/app/ui/root-view/root-modules/custom-component-root.xml b/tests/app/ui/root-view/root-modules/custom-component-root.xml new file mode 100644 index 000000000..6f233546c --- /dev/null +++ b/tests/app/ui/root-view/root-modules/custom-component-root.xml @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/tests/app/ui/root-view/root-modules/gridlayout-root.css b/tests/app/ui/root-view/root-modules/gridlayout-root.css new file mode 100644 index 000000000..846004e03 --- /dev/null +++ b/tests/app/ui/root-view/root-modules/gridlayout-root.css @@ -0,0 +1,3 @@ +.MyStackLayoutRoot { + background-color: blue; +} \ No newline at end of file diff --git a/tests/app/ui/root-view/root-modules/gridlayout-root.xml b/tests/app/ui/root-view/root-modules/gridlayout-root.xml new file mode 100644 index 000000000..7f55539dc --- /dev/null +++ b/tests/app/ui/root-view/root-modules/gridlayout-root.xml @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/tests/app/ui/root-view/root-modules/tabview-root.css b/tests/app/ui/root-view/root-modules/tabview-root.css new file mode 100644 index 000000000..c6b90d531 --- /dev/null +++ b/tests/app/ui/root-view/root-modules/tabview-root.css @@ -0,0 +1,3 @@ +TabView { + selected-tab-text-color: blue; +} \ No newline at end of file diff --git a/tests/app/ui/root-view/root-modules/tabview-root.xml b/tests/app/ui/root-view/root-modules/tabview-root.xml new file mode 100644 index 000000000..588b8cea5 --- /dev/null +++ b/tests/app/ui/root-view/root-modules/tabview-root.xml @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/tests/app/ui/root-view/root-view-tests.ts b/tests/app/ui/root-view/root-view-tests.ts new file mode 100644 index 000000000..d45c593c8 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/tns-core-modules/ui/builder/builder.ts b/tns-core-modules/ui/builder/builder.ts index d5d5ca1cc..79ba2b259 100644 --- a/tns-core-modules/ui/builder/builder.ts +++ b/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;