tests: add tabs/bottom-navigation binding examples (#7437)

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

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>

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>
 

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

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

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

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

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>

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