refactor: ActionBar directive and patching of Views in renderer

e2e/renderer/app/action-bar/action-bar-dynamic-items.component.ts

@@ -0,0 +1,27 @@
+import { Component } from "@angular/core";
+
+@Component({
+  template: `
+    <ActionBar title="Action Bar Dynamic Items">
+        <NavigationButton
+            *ngIf="showNavigationButton"
+            android.systemIcon="ic_menu_back"
+        ></NavigationButton>
+
+        <ActionItem text="one" *ngIf="show1"></ActionItem>
+        <ActionItem text="two" *ngIf="show2"></ActionItem>
+    </ActionBar>
+
+    <StackLayout>
+        <Button text="toggle nav" (tap)="showNavigationButton = !showNavigationButton"></Button>
+        <Button text="toggle 1" (tap)="show1 = !show1"></Button>
+        <Button text="toggle 2" (tap)="show2 = !show2"></Button>
+    </StackLayout>
+  `
+})
+export class ActionBarDynamicItemsComponent {
+    public showNavigationButton = true;
+    public show1 = true;
+    public show2 = true;
+}
+

e2e/renderer/app/action-bar/action-bar-extension.component.ts

@@ -0,0 +1,16 @@
+import { Component } from "@angular/core";
+
+@Component({
+    template: `
+        <ActionBarExtension>
+            <ActionItem (tap)="show = !show" text="toggle">
+            </ActionItem>
+
+            <ActionItem *ngIf="show" text="conditional">
+            </ActionItem>
+        </ActionBarExtension>
+  `
+})
+export class ActionBarExtensionComponent {
+    public show = true;
+}

e2e/renderer/app/app-routing.module.ts

@@ -1,6 +1,9 @@
 import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptRouterModule } from "nativescript-angular/router";
 
+import { ActionBarDynamicItemsComponent } from "./action-bar/action-bar-dynamic-items.component";
+import { ActionBarExtensionComponent } from "./action-bar/action-bar-extension.component";
+
 import { ListComponent } from "./list.component";
 import { NgForComponent } from "./ngfor.component";
 import { NgForOfComponent } from "./ngforof.component";
@@ -17,6 +20,14 @@ export const routes = [
         redirectTo: "/list",
         pathMatch: "full"
     },
+    {
+        path: "action-bar-dynamic",
+        component: ActionBarDynamicItemsComponent,
+    },
+    {
+        path: "action-bar-extension",
+        component: ActionBarExtensionComponent,
+    },
     {
         path: "list",
         component: ListComponent,
@@ -56,6 +67,9 @@ export const routes = [
 ];
 
 export const navigatableComponents = [
+    ActionBarDynamicItemsComponent,
+    ActionBarExtensionComponent,
+
     ListComponent,
     NgForComponent,
     NgForOfComponent,

e2e/renderer/app/content-view.component.ts

@@ -1,7 +1,6 @@
 import { Component } from "@angular/core";
 
 @Component({
-  selector: "my-app",
   template: `
     <ActionBar title="Content View">
         <ActionItem (tap)="toggle()">

e2e/renderer/app/list.component.ts

@@ -3,6 +3,8 @@ import { Component } from "@angular/core";
 @Component({
     template: `
         <FlexboxLayout flexDirection="column">
+            <Button text="ActionBar dynamic" [nsRouterLink]="['/action-bar-dynamic']"></Button>
+            <Button text="ActionBarExtension" [nsRouterLink]="['/action-bar-extension']"></Button>
             <Button text="NgFor" [nsRouterLink]="['/ngfor']"></Button>
             <Button text="NgForOf" [nsRouterLink]="['/ngforof']"></Button>
             <Button text="NgIf no layout" [nsRouterLink]="['/ngif-no-layout']"></Button>

e2e/renderer/e2e/action-bar.e2e-spec.ts

@@ -0,0 +1,163 @@
+import {
+    AppiumDriver,
+    createDriver,
+    SearchOptions,
+    elementHelper,
+} from "nativescript-dev-appium";
+
+import { isOnTheLeft } from "./helpers/location";
+import { DriverWrapper, ExtendedUIElement } from "./helpers/appium-elements";
+
+describe("Action Bar scenario", () => {
+    let driver: AppiumDriver;
+    let driverWrapper: DriverWrapper;
+
+    describe("dynamically add/remove ActionItems", async () => {
+        let firstActionItem: ExtendedUIElement;
+        let secondActionItem: ExtendedUIElement;
+        let toggleFirstButton: ExtendedUIElement;
+        let toggleSecondButton: ExtendedUIElement;
+
+        before(async () => {
+            driver = await createDriver();
+            driverWrapper = new DriverWrapper(driver);
+        });
+
+        after(async () => {
+            await driver.quit();
+            console.log("Driver quits!");
+        });
+
+        it("should navigate to page", async () => {
+            const navigationButton =
+                await driverWrapper.findElementByText("ActionBar dynamic", SearchOptions.exact);
+            await navigationButton.click();
+
+            const actionBar =
+                await driverWrapper.findElementByText("Action Bar Dynamic Items", SearchOptions.exact);
+        });
+
+        it("should find elements", async () => {
+            firstActionItem = await driverWrapper.findElementByText("one");
+            secondActionItem = await driverWrapper.findElementByText("two");
+
+            toggleFirstButton = await driverWrapper.findElementByText("toggle 1");
+            toggleSecondButton = await driverWrapper.findElementByText("toggle 2");
+        });
+
+        it("should initially render the action items in the correct order", async () => {
+            await checkOrderIsCorrect();
+        });
+
+        it("should detach first element when its condition is false", done => {
+            (async () => {
+                await toggleFirst();
+
+                try {
+                    await driverWrapper.findElementByText("one", SearchOptions.exact);
+                } catch (e) {
+                    done();
+                }
+            })();
+        });
+
+        it("should attach first element in the correct position", async () => {
+            await toggleFirst();
+            await checkOrderIsCorrect();
+        });
+
+        it("should detach second element when its condition is false", done => {
+            (async () => {
+                await toggleSecond();
+
+                try {
+                    await driverWrapper.findElementByText("two", SearchOptions.exact);
+                } catch (e) {
+                    done();
+                }
+            })();
+        });
+
+        it("should attach second element in the correct position", async () => {
+            await toggleSecond();
+            await checkOrderIsCorrect();
+        });
+
+        it("should detach and then reattach both at correct places", async () => {
+            await toggleFirst();
+            await toggleSecond();
+
+            await toggleFirst();
+            await toggleSecond();
+
+            await checkOrderIsCorrect();
+        });
+
+        const checkOrderIsCorrect = async () => {
+            await isOnTheLeft(firstActionItem, secondActionItem);
+        };
+
+        const toggleFirst = async () => {
+            toggleFirstButton = await toggleFirstButton.refetch();
+            await toggleFirstButton.click();
+        };
+
+        const toggleSecond = async () => {
+            toggleSecondButton = await toggleSecondButton.refetch();
+            await toggleSecondButton.click();
+        };
+
+    });
+
+    describe("Action Bar extension with dynamic ActionItem", async () => {
+        let toggleButton: ExtendedUIElement;
+        let conditional: ExtendedUIElement;
+
+        before(async () => {
+            driver = await createDriver();
+            driverWrapper = new DriverWrapper(driver);
+        });
+
+        after(async () => {
+            await driver.quit();
+            console.log("Driver quits!");
+        });
+
+        it("should navigate to page", async () => {
+            const navigationButton =
+                await driverWrapper.findElementByText("ActionBarExtension", SearchOptions.exact);
+            await navigationButton.click();
+        });
+
+        it("should find elements", async () => {
+            toggleButton = await driverWrapper.findElementByText("toggle");
+            conditional = await driverWrapper.findElementByText("conditional");
+        });
+
+        it("should detach conditional action item when its condition is false", done => {
+            (async () => {
+                await toggle();
+
+                try {
+                    await driverWrapper.findElementByText("conditional", SearchOptions.exact);
+                } catch (e) {
+                    done();
+                }
+            })();
+        });
+
+        it("should reattach conditional action item at correct place", async () => {
+            await toggle();
+            await checkOrderIsCorrect();
+        });
+
+        const checkOrderIsCorrect = async () => {
+            await isOnTheLeft(toggleButton, conditional);
+        };
+
+        const toggle = async () => {
+            toggleButton = await toggleButton.refetch();
+            await toggleButton.click();
+        };
+    });
+});

e2e/renderer/e2e/helpers/appium-elements.ts

@@ -38,4 +38,25 @@ export class DriverWrapper {
 
         return result;
     }
+
+    @refetchable()
+    async findElementByXPath(...args: any[]): Promise<ExtendedUIElement> {
+        const result = await (<any>this.driver).findElementByXPath(...args);
+
+        return result;
+    }
+
+    @refetchable()
+    async findElementsByXPath(...args: any[]): Promise<ExtendedUIElement[]> {
+        const result = await (<any>this.driver).findElementsByXPath(...args);
+
+        return result || [];
+    }
+
+    @refetchable()
+    async findElementsByClassName(...args: any[]): Promise<ExtendedUIElement[]> {
+        const result = await (<any>this.driver).findElementsByClassName(...args);
+
+        return result || [];
+    }
 }

e2e/renderer/e2e/helpers/location.ts

@@ -11,3 +11,14 @@ export const isAbove = async (first: ExtendedUIElement, second: ExtendedUIElemen
 
     assert.isTrue(firstY < secondY);
 }
+
+export const isOnTheLeft = async (first: ExtendedUIElement, second: ExtendedUIElement) => {
+    first = await first.refetch();
+    second = await second.refetch();
+
+    const { x: firstX } = await first.location();
+    const { x: secondX } = await second.location();
+
+    assert.isTrue(firstX < secondX);
+}
+