e2e(tests-app-ng): add bottom-navigation component (#1894)

* chore: update package.json file

* e2e(tests-app-ng): add bottom-navigation component

Update tabs component.

Author: vchimev

Diff for: e2e/tests-app-ng/app/app.routes.ts

@@ -11,6 +11,7 @@ import { NavigationComponent, NAVIGATION_SUBROUTES } from "./router/router-outle
 import { LazyNavigationComponent } from "./router/lazy-module-navigation/lazy-navigation.component";
 
 import { BindingComponent } from "./binding/binding-page.component";
+import { BottomNavigation } from "./bottom-navigation/bottom-navigation.component"
 
 import { ListViewComponent } from "./list-view/list-view-page.component";
 import { ListViewControlComponent } from "./list-view/list-view-item-template.component";
@@ -61,6 +62,7 @@ export const routableComponents = [
     SecondActionBarComponent,
 
     BindingComponent,
+    BottomNavigation,
 
     ListViewMainPageComponent,
     ListViewComponent,
@@ -90,7 +92,7 @@ export const routableComponents = [
     ButtonTextAlignmentComponent,
 ];
 
-// Set isNavigatable: true if the page is a mian page to other sub pages
+// Set `isNavigatable: true` if the page is a main page to other sub pages
 export const routes = [
     { path: "", component: MainComponent, data: { title: "" } },
     { path: "", component: ModalContentComponent, data: { title: "" } },
@@ -119,6 +121,7 @@ export const routes = [
     },
 
     { path: "binding", component: BindingComponent, data: { title: "Binding", isNavigatable: true } },
+    { path: "bottom-navigation", component: BottomNavigation, data: { title: "BottomNavigation", isNavigatable: true } },
 
     {
         path: "ListViewExamples",
@@ -158,7 +161,7 @@ export const routes = [
     { path: "modal/lazy", component: LazyLoadModalComponent, data: { title: "modal(lazy)" } },
 
     { path: "tab-view", component: TabViewComponent, data: { title: "tab-view", isNavigatable: true } },
-    { path: "tabs", component: TabsComponent, data: { title: "tabs", isNavigatable: true } },
+    { path: "tabs", component: TabsComponent, data: { title: "Tabs", isNavigatable: true } },
 
     { path: "nav-options", component: NavigationOptionsComponent, data: { title: "nav-options", isNavigatable: true } },
     { path: "nav-info", component: NavigationInfoComponent, data: { title: "nav-info" } },

Diff for: e2e/tests-app-ng/app/bottom-navigation/bottom-navigation.component.ts

@@ -0,0 +1,68 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "bottom-navigation-component",
+  template: `
+<BottomNavigation #bottomNavigation>
+
+  <TabStrip>
+
+    <TabStripItem title="TabStripItem 0" iconSource="res://icon">
+    </TabStripItem>
+
+    <TabStripItem>
+      <Label text="TabStripItem 1">
+      </Label>
+      <Image src="res://icon">
+      </Image>
+    </TabStripItem>
+
+    <TabStripItem title="TabStripItem X" iconSource="res://x">
+      <Label text="TabStripItem 2">
+      </Label>
+      <Image src="res://icon">
+      </Image>
+    </TabStripItem>
+
+  </TabStrip>
+
+  <TabContentItem>
+    <StackLayout>
+      <Label text="TabContentItem 0">
+      </Label>
+      <Button (tap)="goTo(bottomNavigation, 1)" text="go to 1">
+      </Button>
+    </StackLayout>
+  </TabContentItem>
+
+  <TabContentItem>
+    <StackLayout>
+      <Label text="TabContentItem 1">
+      </Label>
+      <Button (tap)="goTo(bottomNavigation, 2)" text="go to 2">
+      </Button>
+    </StackLayout>
+  </TabContentItem>
+
+  <TabContentItem>
+    <StackLayout>
+      <Label text="TabContentItem 2">
+      </Label>
+      <Button (tap)="goTo(bottomNavigation, 0)" text="go to 0">
+      </Button>
+    </StackLayout>
+  </TabContentItem>
+
+</BottomNavigation>
+  `,
+})
+
+export class BottomNavigation implements OnInit {
+
+  public ngOnInit(): void { }
+
+  goTo(bottomNavigation: any, index: number) {
+    bottomNavigation.selectedIndex = index;
+  }
+
+}

Diff for: e2e/tests-app-ng/app/tabs/tabs.component.ts

@@ -3,43 +3,53 @@ import { Component, OnInit } from "@angular/core";
 @Component({
   selector: "tabs-component",
   template: `
-<Tabs id="tabs">
+<Tabs #tabs>
 
   <TabStrip>
 
-    <TabStripItem title="TabStripItem 1" iconSource="res://icon">
+    <TabStripItem title="TabStripItem 0" iconSource="res://icon">
     </TabStripItem>
 
     <TabStripItem>
-      <Label text="TabStripItem 2">
+      <Label text="TabStripItem 1">
       </Label>
       <Image src="res://icon">
       </Image>
     </TabStripItem>
 
-    <TabStripItem title="TabStripItem 3" iconSource="res://icon">
+    <TabStripItem title="TabStripItem X" iconSource="res://x">
+      <Label text="TabStripItem 2">
+      </Label>
+      <Image src="res://icon">
+      </Image>
     </TabStripItem>
 
   </TabStrip>
 
   <TabContentItem>
     <StackLayout>
-      <Label text="TabContentItem 1">
+      <Label text="TabContentItem 0">
       </Label>
+      <Button (tap)="goTo(tabs, 1)" text="go to 1">
+      </Button>
     </StackLayout>
   </TabContentItem>
 
   <TabContentItem>
     <StackLayout>
-      <Label text="TabContentItem 2">
+      <Label text="TabContentItem 1">
       </Label>
+      <Button (tap)="goTo(tabs, 2)" text="go to 2">
+      </Button>
     </StackLayout>
   </TabContentItem>
 
   <TabContentItem>
     <StackLayout>
-      <Label text="TabContentItem 3">
+      <Label text="TabContentItem 2">
       </Label>
+      <Button (tap)="goTo(tabs, 0)" text="go to 0">
+      </Button>
     </StackLayout>
   </TabContentItem>
 
@@ -48,5 +58,11 @@ import { Component, OnInit } from "@angular/core";
 })
 
 export class TabsComponent implements OnInit {
+
   public ngOnInit(): void { }
+
+  goTo(tabs: any, index: number) {
+    tabs.selectedIndex = index;
+  }
+
 }

Diff for: e2e/tests-app-ng/package.json

@@ -36,13 +36,6 @@
     "@ngtools/webpack": "~8.0.0"
   },
   "scripts": {
-    "tslint": "tslint --config tslint.json 'app/**/*.ts'",
-    "ns-bundle": "ns-bundle",
-    "start-android-bundle": "npm run ns-bundle --android --run-app",
-    "start-ios-bundle": "npm run ns-bundle --ios --run-app",
-    "build-android-bundle": "npm run ns-bundle --android --build-app",
-    "build-ios-bundle": "npm run ns-bundle --ios --build-app",
-    "publish-ios-bundle": "npm run ns-bundle --ios --publish-app",
-    "generate-android-snapshot": "generate-android-snapshot --targetArchs arm,arm64,ia32 --install"
+    "tslint": "tslint --config tslint.json 'app/**/*.ts'"
   }
 }