From 800f5bcfe4520cd1aeebf7bc84070299d3520f89 Mon Sep 17 00:00:00 2001
From: Martin Yankov <m.i.yankov@gmail.com>
Date: Thu, 21 Nov 2019 14:48:33 +0200
Subject: [PATCH] fix: tab navigations don't work with lowercase xml (#8016)

---
 api-reports/NativeScript.api.md               |  3 ++
 .../tab-navigation-base.ts                    | 10 +++---
 .../tab-strip-item/tab-strip-item.ts          | 13 ++++----
 .../tab-strip/tab-strip.ts                    |  4 +--
 .../ui/tab-view/tab-view-common.ts            |  2 +-
 tests/app/package.json                        |  3 +-
 tests/app/test-runner.ts                      |  9 +++++
 .../bottom-navigation-tests-new.ts            | 33 +++++++++++++++++++
 tests/app/ui/tab-view/tab-view-tests-new.ts   | 19 +++++++++++
 tests/app/ui/tabs/tabs-tests-new.ts           | 33 +++++++++++++++++++
 tests/webpack.config.js                       |  4 +--
 11 files changed, 116 insertions(+), 17 deletions(-)
 create mode 100644 tests/app/ui/bottom-navigation/bottom-navigation-tests-new.ts
 create mode 100644 tests/app/ui/tab-view/tab-view-tests-new.ts
 create mode 100644 tests/app/ui/tabs/tabs-tests-new.ts

diff --git a/api-reports/NativeScript.api.md b/api-reports/NativeScript.api.md
index c585fb21b..ecb5ddee9 100644
--- a/api-reports/NativeScript.api.md
+++ b/api-reports/NativeScript.api.md
@@ -2304,6 +2304,9 @@ export class TabStripItem extends View {
 
     image: Image;
 
+    // (undocumented)
+    _index: number;
+
     label: Label;
 
     on(eventNames: string, callback: (data: EventData) => void);
diff --git a/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts b/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts
index ddd1429de..eb8d96ed0 100644
--- a/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts
+++ b/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts
@@ -1,12 +1,12 @@
 // Types
 import { TabNavigationBase as TabNavigationBaseDefinition, SelectedIndexChangedEventData } from ".";
-import { TabContentItem } from "../tab-content-item";
-import { TabStrip } from "../tab-strip";
 import { TabStripItem } from "../tab-strip-item";
 import { ViewBase, AddArrayFromBuilder, AddChildFromBuilder, EventData } from "../../core/view";
 
 // Requires
-import { View, Property, CoercibleProperty, isIOS, Color } from "../../core/view";
+import { View, Property, CoercibleProperty, isIOS } from "../../core/view";
+import { TabContentItem } from "../tab-content-item";
+import { TabStrip } from "../tab-strip";
 
 // TODO: Impl trace
 // export const traceCategory = "TabView";
@@ -29,14 +29,14 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
     }
 
     public _addChildFromBuilder(name: string, value: any): void {
-        if (name === "TabContentItem") {
+        if (value instanceof TabContentItem) {
             if (!this.items) {
                 this.items = new Array<TabContentItem>();
             }
             this.items.push(<TabContentItem>value);
             this._addView(value);
             // selectedIndexProperty.coerce(this);
-        } else if (name === "TabStrip") {
+        } else if (value instanceof TabStrip) {
             // Setting tabStrip will trigger onTabStripChanged
             this.tabStrip = value;
         }
diff --git a/nativescript-core/ui/tab-navigation-base/tab-strip-item/tab-strip-item.ts b/nativescript-core/ui/tab-navigation-base/tab-strip-item/tab-strip-item.ts
index 09ea676e7..bab24db82 100644
--- a/nativescript-core/ui/tab-navigation-base/tab-strip-item/tab-strip-item.ts
+++ b/nativescript-core/ui/tab-navigation-base/tab-strip-item/tab-strip-item.ts
@@ -3,8 +3,6 @@ import { TabStripItem as TabStripItemDefinition } from ".";
 import { PropertyChangeData } from "../../../data/observable";
 import { TabNavigationBase } from "../tab-navigation-base";
 import { TabStrip } from "../tab-strip";
-import { Image } from "../../image/image";
-import { Label } from "../../label/label";
 import { Color } from "../../../color";
 import { AddChildFromBuilder } from "../../core/view";
 
@@ -12,8 +10,9 @@ import { AddChildFromBuilder } from "../../core/view";
 import {
     View, ViewBase, CSSType, backgroundColorProperty, backgroundInternalProperty, PseudoClassHandler
 } from "../../core/view";
-import { Tabs } from "../../tabs";
 import { isIOS } from "../../../platform";
+import { Image } from "../../image/image";
+import { Label } from "../../label/label";
 
 export * from "../../core/view";
 export const traceCategory = "TabView";
@@ -173,14 +172,14 @@ export class TabStripItem extends View implements TabStripItemDefinition, AddChi
     }
 
     public _addChildFromBuilder(name: string, value: any): void {
-        if (name === "Image") {
+        if (value instanceof Image) {
             this.image = <Image>value;
             this.iconSource = (<Image>value).src;
             this._addView(value);
             // selectedIndexProperty.coerce(this);
         }
 
-        if (name === "Label") {
+        if (value instanceof Label) {
             this.label = <Label>value;
             this.title = (<Label>value).text;
             this._addView(value);
@@ -213,7 +212,9 @@ export class TabStripItem extends View implements TabStripItemDefinition, AddChi
             const parent = <TabStrip>this.parent;
             const tabStripParent = parent && <TabNavigationBase>parent.parent;
             if (this._index === tabStripParent.selectedIndex &&
-                !(isIOS && tabStripParent instanceof Tabs)) {
+                !(isIOS && tabStripParent.cssType.toLowerCase() === "tabs")) {
+                // HACK: tabStripParent instanceof Tabs creates a circular dependency
+                // HACK: tabStripParent.cssType === "Tabs" is a hacky workaround
                 this._goToVisualState("highlighted");
             }
         } else {
diff --git a/nativescript-core/ui/tab-navigation-base/tab-strip/tab-strip.ts b/nativescript-core/ui/tab-navigation-base/tab-strip/tab-strip.ts
index deead4fb8..2b70e5439 100644
--- a/nativescript-core/ui/tab-navigation-base/tab-strip/tab-strip.ts
+++ b/nativescript-core/ui/tab-navigation-base/tab-strip/tab-strip.ts
@@ -2,7 +2,6 @@
 import { Color } from "../../../color";
 import { AddArrayFromBuilder, AddChildFromBuilder, EventData, ViewBase } from "../../core/view";
 import { TabNavigationBase } from "../tab-navigation-base";
-import { TabStripItem } from "../tab-strip-item";
 import { TabStripItemEventData, TabStrip as TabStripDefinition } from "./";
 
 // Requires
@@ -10,6 +9,7 @@ import {
     backgroundColorProperty, backgroundInternalProperty, booleanConverter,
     colorProperty, CSSType, fontInternalProperty, Property, View
 } from "../../core/view";
+import { TabStripItem } from "../tab-strip-item";
 import { textTransformProperty } from "../../text-base";
 
 export const traceCategory = "TabView";
@@ -44,7 +44,7 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu
     }
 
     public _addChildFromBuilder(name: string, value: any): void {
-        if (name === "TabStripItem") {
+        if (value instanceof TabStripItem) {
             if (!this.items) {
                 this.items = new Array<TabStripItem>();
             }
diff --git a/nativescript-core/ui/tab-view/tab-view-common.ts b/nativescript-core/ui/tab-view/tab-view-common.ts
index 7967155b6..f677b041a 100644
--- a/nativescript-core/ui/tab-view/tab-view-common.ts
+++ b/nativescript-core/ui/tab-view/tab-view-common.ts
@@ -140,7 +140,7 @@ export class TabViewBase extends View implements TabViewDefinition, AddChildFrom
     }
 
     public _addChildFromBuilder(name: string, value: any): void {
-        if (name === "TabViewItem") {
+        if (value instanceof TabViewItemBase) {
             if (!this.items) {
                 this.items = new Array<TabViewItemBase>();
             }
diff --git a/tests/app/package.json b/tests/app/package.json
index 24cb7bc4c..c13032ce6 100644
--- a/tests/app/package.json
+++ b/tests/app/package.json
@@ -1,6 +1,7 @@
 {
   "main": "app.js",
   "android": {
-    "v8Flags": "--expose_gc"
+    "v8Flags": "--expose_gc",
+    "markingMode": "none"
   }
 }
diff --git a/tests/app/test-runner.ts b/tests/app/test-runner.ts
index 060216722..bc3ca4f35 100644
--- a/tests/app/test-runner.ts
+++ b/tests/app/test-runner.ts
@@ -199,6 +199,9 @@ allTests["LABEL"] = labelTests;
 import * as bottomNavigationTests from "./ui/bottom-navigation/bottom-navigation-tests";
 allTests["BOTTOM-NAVIGATION"] = bottomNavigationTests;
 
+import * as bottomNavigationTestsNew from "./ui/bottom-navigation/bottom-navigation-tests-new";
+allTests["BOTTOM-NAVIGATION-NEW"] = bottomNavigationTestsNew;
+
 import * as bottomNavigationNavigationTests from "./ui/bottom-navigation/bottom-navigation-navigation-tests";
 // TODO: uncomment this
 // allTests["BOTTOM-NAVIGATION-NAVIGATION"] = bottomNavigationNavigationTests;
@@ -206,12 +209,18 @@ import * as bottomNavigationNavigationTests from "./ui/bottom-navigation/bottom-
 import * as tabsTests from "./ui/tabs/tabs-tests";
 allTests["TABS"] = tabsTests;
 
+import * as tabsTestsNew from "./ui/tabs/tabs-tests-new";
+allTests["TABS-NEW"] = tabsTestsNew;
+
 import * as tabsNavigationTests from "./ui/tabs/tabs-navigation-tests";
 allTests["TABS-NAVIGATION"] = tabsNavigationTests;
 
 import * as tabViewTests from "./ui/tab-view/tab-view-tests";
 allTests["TAB-VIEW"] = tabViewTests;
 
+import * as tabViewTestsNew from "./ui/tab-view/tab-view-tests-new";
+allTests["TAB-VIEW-NEW"] = tabViewTestsNew;
+
 import * as tabViewNavigationTests from "./ui/tab-view/tab-view-navigation-tests";
 allTests["TAB-VIEW-NAVIGATION"] = tabViewNavigationTests;
 
diff --git a/tests/app/ui/bottom-navigation/bottom-navigation-tests-new.ts b/tests/app/ui/bottom-navigation/bottom-navigation-tests-new.ts
new file mode 100644
index 000000000..50b2f5427
--- /dev/null
+++ b/tests/app/ui/bottom-navigation/bottom-navigation-tests-new.ts
@@ -0,0 +1,33 @@
+import { Image, Label, BottomNavigation, Builder, TabContentItem, TabStrip, TabStripItem } from "@nativescript/core/ui";
+import * as TKUnit from "../../tk-unit";
+
+export function test_lowercase_declaration() {
+    const root = Builder.parse(`
+        <bottom-navigation>
+            <tab-strip id="tab-strip">
+                <tab-strip-item id="tab-strip-item">
+                    <image src="res://icon"  id="tab-strip-item-image" />
+                    <label text="test" id="tab-strip-item-label" />
+                </tab-strip-item>
+            </tab-strip>
+            <tab-content-item id="tab-content-item">
+                <label text="test" id="tab-content-item-label" />
+            </tab-content-item>
+        </bottom-navigation>
+    `);
+
+    const tabStrip = root.getViewById("tab-strip");
+    const tabStripItem = root.getViewById("tab-strip-item");
+    const tabStripItemImage = root.getViewById("tab-strip-item-image");
+    const tabStripItemLabel = root.getViewById("tab-strip-item-label");
+    const tabContentItem = root.getViewById("tab-content-item");
+    const tabContentItemLabel = root.getViewById("tab-content-item-label");
+
+    TKUnit.assert(root instanceof BottomNavigation, "Expected result: BottomNavigation!; Actual result: " + root);
+    TKUnit.assert(tabStrip instanceof TabStrip, "Expected result: TabStrip!; Actual result: " + tabStrip);
+    TKUnit.assert(tabStripItem instanceof TabStripItem, "Expected result: TabStripItem!; Actual result: " + tabStripItem);
+    TKUnit.assert(tabStripItemImage instanceof Image, "Expected result: Image!; Actual result: " + tabStripItemImage);
+    TKUnit.assert(tabStripItemLabel instanceof Label, "Expected result: Label!; Actual result: " + tabStripItemLabel);
+    TKUnit.assert(tabContentItem instanceof TabContentItem, "Expected result: TabContentItem!; Actual result: " + tabContentItem);
+    TKUnit.assert(tabContentItemLabel instanceof Label, "Expected result: Label!; Actual result: " + tabContentItemLabel);
+}
diff --git a/tests/app/ui/tab-view/tab-view-tests-new.ts b/tests/app/ui/tab-view/tab-view-tests-new.ts
new file mode 100644
index 000000000..bc9c73e1b
--- /dev/null
+++ b/tests/app/ui/tab-view/tab-view-tests-new.ts
@@ -0,0 +1,19 @@
+import { Label, Builder, TabView, TabViewItem } from "@nativescript/core/ui";
+import * as TKUnit from "../../tk-unit";
+
+export function test_lowercase_declaration() {
+    const root = Builder.parse(`
+        <tab-view>
+            <tab-view-item id="tab-view-item">
+                <label text="test" id="tab-view-item-label" />
+            </tab-view-item>
+        </tab-view>
+    `);
+
+    const tabViewItem = root.getViewById("tab-view-item");
+    const tabViewItemLabel = root.getViewById("tab-view-item-label");
+
+    TKUnit.assert(root instanceof TabView, "Expected result: TabView!; Actual result: " + root);
+    TKUnit.assert(tabViewItem instanceof TabViewItem, "Expected result: TabViewItem!; Actual result: " + tabViewItem);
+    TKUnit.assert(tabViewItemLabel instanceof Label, "Expected result: Label!; Actual result: " + tabViewItemLabel);
+}
diff --git a/tests/app/ui/tabs/tabs-tests-new.ts b/tests/app/ui/tabs/tabs-tests-new.ts
new file mode 100644
index 000000000..0d61a2be3
--- /dev/null
+++ b/tests/app/ui/tabs/tabs-tests-new.ts
@@ -0,0 +1,33 @@
+import { Image, Label, Builder, TabContentItem, Tabs, TabStrip, TabStripItem } from "@nativescript/core/ui";
+import * as TKUnit from "../../tk-unit";
+
+export function test_lowercase_declaration() {
+    const root = Builder.parse(`
+        <tabs>
+            <tab-strip id="tab-strip">
+                <tab-strip-item id="tab-strip-item">
+                    <image src="res://icon"  id="tab-strip-item-image" />
+                    <label text="test" id="tab-strip-item-label" />
+                </tab-strip-item>
+            </tab-strip>
+            <tab-content-item id="tab-content-item">
+                <label text="test" id="tab-content-item-label" />
+            </tab-content-item>
+        </tabs>
+    `);
+
+    const tabStrip = root.getViewById("tab-strip");
+    const tabStripItem = root.getViewById("tab-strip-item");
+    const tabStripItemImage = root.getViewById("tab-strip-item-image");
+    const tabStripItemLabel = root.getViewById("tab-strip-item-label");
+    const tabContentItem = root.getViewById("tab-content-item");
+    const tabContentItemLabel = root.getViewById("tab-content-item-label");
+
+    TKUnit.assert(root instanceof Tabs, "Expected result: Tabs!; Actual result: " + root);
+    TKUnit.assert(tabStrip instanceof TabStrip, "Expected result: TabStrip!; Actual result: " + tabStrip);
+    TKUnit.assert(tabStripItem instanceof TabStripItem, "Expected result: TabStripItem!; Actual result: " + tabStripItem);
+    TKUnit.assert(tabStripItemImage instanceof Image, "Expected result: Image!; Actual result: " + tabStripItemImage);
+    TKUnit.assert(tabStripItemLabel instanceof Label, "Expected result: Label!; Actual result: " + tabStripItemLabel);
+    TKUnit.assert(tabContentItem instanceof TabContentItem, "Expected result: TabContentItem!; Actual result: " + tabContentItem);
+    TKUnit.assert(tabContentItemLabel instanceof Label, "Expected result: Label!; Actual result: " + tabContentItemLabel);
+}
diff --git a/tests/webpack.config.js b/tests/webpack.config.js
index a6f7b7bb3..03a2c79b3 100644
--- a/tests/webpack.config.js
+++ b/tests/webpack.config.js
@@ -12,8 +12,8 @@ const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeS
 const TerserPlugin = require("terser-webpack-plugin");
 const hashSalt = Date.now().toString();
 
-const ANDROID_MAX_CYCLES = 66;
-const IOS_MAX_CYCLES = 39;
+const ANDROID_MAX_CYCLES = 63;
+const IOS_MAX_CYCLES = 36;
 let numCyclesDetected = 0;
 
 module.exports = env => {