From 22e62daae53c46e605d648fc15fb669184a2b48e Mon Sep 17 00:00:00 2001
From: Alexander Djenkov <a.djenkov90@gmail.com>
Date: Wed, 3 Jul 2019 09:32:14 +0300
Subject: [PATCH] tests: add tabs/bottom-navigation binding examples (#7437)

---
 .../app/bottom-navigation/binding-page.ts     | 12 +++++
 .../app/bottom-navigation/binding-page.xml    | 15 ++++++
 .../bottom-navigation-page.xml                |  7 +++
 .../bottom-navigation-view-model.ts           | 53 +++++++++++++++++++
 .../app/bottom-navigation/main-page.ts        |  1 +
 e2e/ui-tests-app/app/tabs/main-page.ts        |  3 +-
 .../app/tabs/tabs-binding-page.ts             | 12 +++++
 .../app/tabs/tabs-binding-page.xml            | 14 +++++
 .../app/tabs/tabs-binding-view-model.ts       | 53 +++++++++++++++++++
 9 files changed, 169 insertions(+), 1 deletion(-)
 create mode 100644 e2e/ui-tests-app/app/bottom-navigation/binding-page.ts
 create mode 100644 e2e/ui-tests-app/app/bottom-navigation/binding-page.xml
 create mode 100644 e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-view-model.ts
 create mode 100644 e2e/ui-tests-app/app/tabs/tabs-binding-page.ts
 create mode 100644 e2e/ui-tests-app/app/tabs/tabs-binding-page.xml
 create mode 100644 e2e/ui-tests-app/app/tabs/tabs-binding-view-model.ts

diff --git a/e2e/ui-tests-app/app/bottom-navigation/binding-page.ts b/e2e/ui-tests-app/app/bottom-navigation/binding-page.ts
new file mode 100644
index 000000000..d2f8710f9
--- /dev/null
+++ b/e2e/ui-tests-app/app/bottom-navigation/binding-page.ts
@@ -0,0 +1,12 @@
+import * as vmModule from "./bottom-navigation-view-model";
+
+var viewModel = vmModule.bottomNavigationViewModel;
+
+export function bottomNavigaitonLoaded(args) {
+    let bottomNav = args.object;
+    bottomNav.bindingContext = viewModel;
+}
+
+export function addTabs(args) {
+    viewModel.createItems();
+}
\ No newline at end of file
diff --git a/e2e/ui-tests-app/app/bottom-navigation/binding-page.xml b/e2e/ui-tests-app/app/bottom-navigation/binding-page.xml
new file mode 100644
index 000000000..84c90e8fb
--- /dev/null
+++ b/e2e/ui-tests-app/app/bottom-navigation/binding-page.xml
@@ -0,0 +1,15 @@
+<Page class="page">
+
+  <ActionBar title="BottomNavigation background-color" icon="" class="action-bar">
+  </ActionBar>
+
+    <GridLayout rows="auto,*">
+        <Button row="0" text="Add Tab" tap="addTabs"/>
+        <GridLayout row="1">
+            <BottomNavigation loaded="bottomNavigaitonLoaded" items="{{ tabContentItems }}">
+                <TabStrip items="{{ tabStripItems }}">
+                </TabStrip>
+            </BottomNavigation> 
+        </GridLayout>
+    </GridLayout>
+</Page>
\ No newline at end of file
diff --git a/e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-page.xml b/e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-page.xml
index 1024900c0..e902e92ba 100644
--- a/e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-page.xml
+++ b/e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-page.xml
@@ -31,6 +31,7 @@
         <Label text="Places" />
       </TabStripItem>
       <TabStripItem title="Music" iconSource="res://icon"></TabStripItem>
+            <TabStripItem title="Music" iconSource="res://icon"></TabStripItem>
     </TabStrip>
 
     <TabContentItem>
@@ -62,6 +63,12 @@
         <Label text="First View"/>
         <Button tap="goToSecond" text="go to second" />
       </StackLayout>
+    </TabContentItem>
+        <TabContentItem>
+      <StackLayout>
+        <Label text="First View"/>
+        <Button tap="goToSecond" text="go to second" />
+      </StackLayout>
     </TabContentItem>
   </BottomNavigation>
 
diff --git a/e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-view-model.ts b/e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-view-model.ts
new file mode 100644
index 000000000..3f2be605d
--- /dev/null
+++ b/e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-view-model.ts
@@ -0,0 +1,53 @@
+
+import { GridLayout } from "tns-core-modules/ui/layouts/grid-layout";
+import { Label } from "tns-core-modules/ui/label";
+import { Observable } from "tns-core-modules/data/observable";
+import { ObservableArray } from "tns-core-modules/data/observable-array";
+import { TabStripItem } from "tns-core-modules/ui/tab-navigation-base/tab-strip-item";
+import { TabContentItem } from "tns-core-modules/ui/tab-navigation-base/tab-content-item";
+
+export class BottomNavigationViewModel extends Observable {
+    private itemsCount: number = 1;
+    public tabStripItems = new Array<TabStripItem>();
+    public tabContentItems = new Array<TabContentItem>();
+
+    constructor() {
+        super();
+        this.createItems();
+        this.createItems();
+    }
+
+    createItems() {
+        const _tabStripItems = new Array<TabStripItem>();
+        const _tabContentItems = new Array<TabContentItem>();
+
+        for (let index = 0; index < this.itemsCount; index++) {
+            _tabStripItems.push(this.createTabStripItem(index));
+            _tabContentItems.push(this.createContentStripItem(index));
+        }
+
+        this.tabStripItems = _tabStripItems;
+        this.tabContentItems = _tabContentItems;
+        this.itemsCount++;
+    }
+
+    private createTabStripItem(index: number): TabStripItem {
+        const item = new TabStripItem();
+        item.title = "Item " + index;
+        item.iconSource = "res://icon";
+
+        return item;
+    }
+
+    private createContentStripItem(index: number): TabContentItem {
+        const contentItem = new TabContentItem();
+        const label = new Label();
+        const gridlayout = new GridLayout();
+        label.text = "Content Item " + index;
+        gridlayout.addChild(label);
+        contentItem.view = gridlayout;
+
+        return contentItem;
+    }
+}
+export var bottomNavigationViewModel = new BottomNavigationViewModel();
diff --git a/e2e/ui-tests-app/app/bottom-navigation/main-page.ts b/e2e/ui-tests-app/app/bottom-navigation/main-page.ts
index 8fd2f974e..42e5a6d72 100644
--- a/e2e/ui-tests-app/app/bottom-navigation/main-page.ts
+++ b/e2e/ui-tests-app/app/bottom-navigation/main-page.ts
@@ -17,6 +17,7 @@ export function loadExamples() {
     examples.set("color", "bottom-navigation/color-page");
     examples.set("icon-title-placement", "bottom-navigation/icon-title-placement-page");
     examples.set("icon-change", "bottom-navigation/icon-change-page");
+    examples.set("binding", "bottom-navigation/binding-page");
     
     return examples;
 }
diff --git a/e2e/ui-tests-app/app/tabs/main-page.ts b/e2e/ui-tests-app/app/tabs/main-page.ts
index b7d492781..625fa25c6 100644
--- a/e2e/ui-tests-app/app/tabs/main-page.ts
+++ b/e2e/ui-tests-app/app/tabs/main-page.ts
@@ -18,7 +18,8 @@ export function loadExamples() {
     examples.set("icon-title-placement", "tabs/icon-title-placement");
     examples.set("icon-change", "tabs/icon-change");
     examples.set("swipe-enabled", "tabs/swipe-enabled");
-    examples.set("tabs-position", "tabs/tabs-position");
+    examples.set("tabs-position", "tabs/tabs-position-page");
+    examples.set("tabs-binding", "tabs/tabs-binding-page");
     
     return examples;
 }
diff --git a/e2e/ui-tests-app/app/tabs/tabs-binding-page.ts b/e2e/ui-tests-app/app/tabs/tabs-binding-page.ts
new file mode 100644
index 000000000..2d4491834
--- /dev/null
+++ b/e2e/ui-tests-app/app/tabs/tabs-binding-page.ts
@@ -0,0 +1,12 @@
+import * as vmModule from "./tabs-binding-view-model";
+
+var viewModel = vmModule.tabsBindingNavigationViewModel;
+
+export function tabsLoaded(args) {
+    let tabs = args.object;
+    tabs.bindingContext = viewModel;
+}
+
+export function addTabs(args) {
+    viewModel.createItems();
+}
\ No newline at end of file
diff --git a/e2e/ui-tests-app/app/tabs/tabs-binding-page.xml b/e2e/ui-tests-app/app/tabs/tabs-binding-page.xml
new file mode 100644
index 000000000..2293cae68
--- /dev/null
+++ b/e2e/ui-tests-app/app/tabs/tabs-binding-page.xml
@@ -0,0 +1,14 @@
+<Page class="page">
+
+  <ActionBar title="Tabs background-color" icon="" class="action-bar">
+  </ActionBar>
+
+ <GridLayout rows="auto,*">
+    <Button row="0" text="Add Tab" tap="addTabs"/>
+    <GridLayout row="1">
+        <Tabs loaded="tabsLoaded" items="{{ tabContentItems }}">
+            <TabStrip items="{{ tabStripItems }}"></TabStrip>
+        </Tabs>
+    </GridLayout>
+  </GridLayout>
+</Page>
\ No newline at end of file
diff --git a/e2e/ui-tests-app/app/tabs/tabs-binding-view-model.ts b/e2e/ui-tests-app/app/tabs/tabs-binding-view-model.ts
new file mode 100644
index 000000000..4663e428b
--- /dev/null
+++ b/e2e/ui-tests-app/app/tabs/tabs-binding-view-model.ts
@@ -0,0 +1,53 @@
+
+import { GridLayout } from "tns-core-modules/ui/layouts/grid-layout";
+import { Label } from "tns-core-modules/ui/label";
+import { Observable } from "tns-core-modules/data/observable";
+import { ObservableArray } from "tns-core-modules/data/observable-array";
+import { TabStripItem } from "tns-core-modules/ui/tab-navigation-base/tab-strip-item";
+import { TabContentItem } from "tns-core-modules/ui/tab-navigation-base/tab-content-item";
+
+export class TabsBindingNavigationViewModel extends Observable {
+    private itemsCount: number = 1;
+    public tabStripItems = new Array<TabStripItem>();
+    public tabContentItems = new Array<TabContentItem>();
+
+    constructor() {
+        super();
+        this.createItems();
+        this.createItems();
+    }
+
+    createItems() {
+        const _tabStripItems = new Array<TabStripItem>();
+        const _tabContentItems = new Array<TabContentItem>();
+
+        for (let index = 0; index < this.itemsCount; index++) {
+            _tabStripItems.push(this.createTabStripItem(index));
+            _tabContentItems.push(this.createContentStripItem(index));
+        }
+
+        this.tabStripItems = _tabStripItems;
+        this.tabContentItems = _tabContentItems;
+        this.itemsCount++;
+    }
+
+    private createTabStripItem(index: number): TabStripItem {
+        const item = new TabStripItem();
+        item.title = "Item " + index;
+        item.iconSource = "res://icon";
+
+        return item;
+    }
+
+    private createContentStripItem(index: number): TabContentItem {
+        const contentItem = new TabContentItem();
+        const label = new Label();
+        const gridlayout = new GridLayout();
+        label.text = "Content Item " + index;
+        gridlayout.addChild(label);
+        contentItem.view = gridlayout;
+
+        return contentItem;
+    }
+}
+export var tabsBindingNavigationViewModel = new TabsBindingNavigationViewModel();