feat(): add actionBarVisibility property to p-r-o (#1573)

Author: MartoYankov

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

@@ -4,6 +4,11 @@ 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 { ActionBarVisibilityAlwaysComponent } from "./page-router-outlet/action-bar-visibility-always.component";
+import { ActionBarVisibilityAutoComponent } from "./page-router-outlet/action-bar-visibility-auto.component"
+import { ActionBarVisibilityNeverComponent } from "./page-router-outlet/action-bar-visibility-never.component"
+import { NestedPageComponent } from "./page-router-outlet/nested-page.component"
+
 import { TabItemBindingComponent } from "./tab-view/tab-item-binding.component";
 
 import { ListComponent } from "./list.component";
@@ -22,6 +27,33 @@ export const routes = [
         redirectTo: "/list",
         pathMatch: "full"
     },
+    {
+        path: "action-bar-visibility-always",
+        component: ActionBarVisibilityAlwaysComponent,
+        children: [{
+            path: "nested",
+            outlet: "nested",
+            component: NestedPageComponent
+        }]
+    },
+    {
+        path: "action-bar-visibility-never",
+        component: ActionBarVisibilityNeverComponent,
+        children: [{
+            path: "nested",
+            outlet: "nested",
+            component: NestedPageComponent
+        }]
+    },
+    {
+        path: "action-bar-visibility-auto",
+        component: ActionBarVisibilityAutoComponent,
+        children: [{
+            path: "nested",
+            outlet: "nested",
+            component: NestedPageComponent
+        }]
+    },
     {
         path: "action-bar-dynamic",
         component: ActionBarDynamicItemsComponent,
@@ -76,6 +108,11 @@ export const navigatableComponents = [
     ActionBarDynamicItemsComponent,
     ActionBarExtensionComponent,
 
+    ActionBarVisibilityAlwaysComponent,
+    ActionBarVisibilityNeverComponent,
+    ActionBarVisibilityAutoComponent,
+    NestedPageComponent,
+
     TabItemBindingComponent,
 
     ListComponent,

e2e/renderer/app/list.component.ts

@@ -5,6 +5,9 @@ import { Component } from "@angular/core";
         <FlexboxLayout flexDirection="column">
             <Button text="ActionBar dynamic" [nsRouterLink]="['/action-bar-dynamic']"></Button>
             <Button text="ActionBarExtension" [nsRouterLink]="['/action-bar-extension']"></Button>
+            <Button text="ActionBarVisibility Always" [nsRouterLink]="['/action-bar-visibility-always']"></Button>
+            <Button text="ActionBarVisibility Never" [nsRouterLink]="['/action-bar-visibility-never']"></Button>
+            <Button text="ActionBarVisibility Auto" [nsRouterLink]="['/action-bar-visibility-auto']"></Button>
             <Button text="TabItem Binding" [nsRouterLink]="['/tab-item-binding']"></Button>
             <Button text="NgFor" [nsRouterLink]="['/ngfor']"></Button>
             <Button text="NgForOf" [nsRouterLink]="['/ngforof']"></Button>

e2e/renderer/app/page-router-outlet/action-bar-visibility-always.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from "@angular/core";
+import { RouterExtensions } from "nativescript-angular/router";
+import { ActivatedRoute } from "@angular/router";
+
+@Component({
+  template: `
+    <ActionBar title="Action Bar Visibility Always">
+    </ActionBar>
+    
+    <GridLayout rows="200, *" backgroundColor="salmon">
+        <GridLayout row="1">
+            <page-router-outlet name="nested" actionBarVisibility="always"></page-router-outlet>
+        </GridLayout>
+    </GridLayout>
+  `
+})
+export class ActionBarVisibilityAlwaysComponent implements OnInit {
+    constructor(
+        private routerExtension: RouterExtensions,
+        private activeRoute: ActivatedRoute) {
+    }
+
+    ngOnInit(): void {
+        this.routerExtension.navigate([{outlets: { nested: ["nested"]}}], { relativeTo: this.activeRoute });
+    }
+}

e2e/renderer/app/page-router-outlet/action-bar-visibility-auto.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from "@angular/core";
+import { RouterExtensions } from "nativescript-angular/router";
+import { ActivatedRoute } from "@angular/router";
+
+@Component({
+  template: `
+    <ActionBar title="Action Bar Visibility Auto">
+    </ActionBar>
+    
+    <GridLayout rows="200, *" backgroundColor="salmon">
+        <GridLayout row="1">
+            <page-router-outlet name="nested" actionBarVisibility="auto"></page-router-outlet>
+        </GridLayout>
+    </GridLayout>
+  `
+})
+export class ActionBarVisibilityAutoComponent implements OnInit {
+    constructor(
+      private routerExtension: RouterExtensions,
+      private activeRoute: ActivatedRoute) {
+    }
+
+    ngOnInit(): void {
+      this.routerExtension.navigate([{ outlets: { nested: ["nested"] } }], { relativeTo: this.activeRoute });
+    }
+}

e2e/renderer/app/page-router-outlet/action-bar-visibility-never.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from "@angular/core";
+import { RouterExtensions } from "nativescript-angular/router";
+import { ActivatedRoute } from "@angular/router";
+
+@Component({
+  template: `
+    <ActionBar title="Action Bar Visibility Never">
+    </ActionBar>
+    
+    <GridLayout rows="200, *" backgroundColor="salmon">
+        <GridLayout row="1">
+            <page-router-outlet name="nested" actionBarVisibility="never"></page-router-outlet>
+        </GridLayout>
+    </GridLayout>
+  `
+})
+export class ActionBarVisibilityNeverComponent implements OnInit {
+  constructor(
+    private routerExtension: RouterExtensions,
+    private activeRoute: ActivatedRoute) {
+  }
+
+  ngOnInit(): void {
+    this.routerExtension.navigate([{ outlets: { nested: ["nested"] } }], { relativeTo: this.activeRoute });
+  }
+}

e2e/renderer/app/page-router-outlet/nested-page.component.ts

@@ -0,0 +1,24 @@
+import { Component } from "@angular/core";
+
+@Component({
+  template: `
+    <ActionBar title="Nested Page">
+    </ActionBar>
+
+    <GridLayout backgroundColor="gold">
+        <StackLayout>
+            <Button text="ShowActionBar" (tap)="showActionBar($event)"></Button>
+            <Button text="HideActionBar" (tap)="hideActionBar($event)"></Button>
+        </StackLayout>
+    </GridLayout>
+  `
+})
+export class NestedPageComponent {
+    showActionBar(args): void {
+        args.object.page.actionBarHidden = false;
+    }
+
+    hideActionBar(args): void {
+        args.object.page.actionBarHidden = true;
+    }
+}

e2e/renderer/e2e/page-router-outlet.e2e-spec.ts

@@ -0,0 +1,119 @@
+import {
+    AppiumDriver,
+    createDriver,
+    SearchOptions,
+    UIElement
+} from "nativescript-dev-appium";
+import { assert } from "chai";
+
+describe("page-router-outlet-scenario", () => {
+    let driver: AppiumDriver;
+
+    describe("actionBarVisibility 'always' shows action bars", async () => {
+        before(async () => {
+            driver = await createDriver();
+            await driver.driver.resetApp();
+        });
+
+        it("should navigate to page", async () => {
+            const navigationButton =
+                await driver.findElementByText("ActionBarVisibility Always", SearchOptions.exact);
+            await navigationButton.click();
+
+            await driver.findElementByText("ShowActionBar", SearchOptions.exact);
+        });
+
+        it("should not hide action bar by default", async () => {
+            const screenMatches =  await driver.compareScreen("actionBarVisibility-always-default", 5);
+            assert(screenMatches);
+        });
+
+        it("should not hide action bar when hidden by page", async () => {
+            const hideActionBarButton = await driver.findElementByText("HideActionBar");
+            hideActionBarButton.click();
+
+            const screenMatches =  await driver.compareScreen("actionBarVisibility-always-hidden", 5);
+            assert(screenMatches);
+        });
+
+        it("should not do anything when shown action bar by page", async () => {
+            const showActionBarButton = await driver.findElementByText("ShowActionBar");
+            showActionBarButton.click();
+
+            const screenMatches =  await driver.compareScreen("actionBarVisibility-always-shown", 5);
+            assert(screenMatches);
+        });
+    });
+
+    describe("actionBarVisibility 'never' doesn't show action bars", async () => {
+        before(async () => {
+            driver = await createDriver();
+            await driver.driver.resetApp();
+        });
+
+        it("should navigate to page", async () => {
+            const navigationButton =
+                await driver.findElementByText("ActionBarVisibility Never", SearchOptions.exact);
+            await navigationButton.click();
+
+            await driver.findElementByText("ShowActionBar", SearchOptions.exact);
+        });
+
+        it("should hide action bar by default", async () => {
+            const screenMatches =  await driver.compareScreen("actionBarVisibility-never-default", 5);
+            assert(screenMatches);
+        });
+
+        it("should not show action bar when shown by page", async () => {
+            const showActionBarButton = await driver.findElementByText("ShowActionBar");
+            showActionBarButton.click();
+
+            const screenMatches =  await driver.compareScreen("actionBarVisibility-never-shown", 5);
+            assert(screenMatches);
+        });
+
+        it("should not do anything when hidden action bar by page", async () => {
+            const hideActionBarButton = await driver.findElementByText("HideActionBar");
+            hideActionBarButton.click();
+
+            const screenMatches =  await driver.compareScreen("actionBarVisibility-never-hidden", 5);
+            assert(screenMatches);
+        });
+    });
+
+    describe("actionBarVisibility 'auto' shows action bars based on page", async () => {
+        before(async () => {
+            driver = await createDriver();
+            await driver.driver.resetApp();
+        });
+
+        it("should navigate to page", async () => {
+            const navigationButton =
+                await driver.findElementByText("ActionBarVisibility Auto", SearchOptions.exact);
+            await navigationButton.click();
+
+            await driver.findElementByText("ShowActionBar", SearchOptions.exact);
+        });
+
+        it("should show action bar by default", async () => {
+            const screenMatches =  await driver.compareScreen("actionBarVisibility-auto-default", 5);
+            assert(screenMatches);
+        });
+
+        it("should hide action bar when hidden by page", async () => {
+            const hideActionBarButton = await driver.findElementByText("HideActionBar");
+            hideActionBarButton.click();
+
+            const screenMatches =  await driver.compareScreen("actionBarVisibility-auto-hidden", 5);
+            assert(screenMatches);
+        });
+
+        it("should show action bar when shown by page", async () => {
+            const showActionBarButton = await driver.findElementByText("ShowActionBar");
+            showActionBarButton.click();
+
+            const screenMatches =  await driver.compareScreen("actionBarVisibility-auto-shown", 5);
+            assert(screenMatches);
+        });
+    });
+});

e2e/renderer/e2e/resources/images/renderer/Emulator-Api23-Default/actionBarVisibility-always-default.png

@@ -150,6 +150,7 @@ export class PageRouterOutlet implements OnDestroy { // tslint:disable-line:dire
         private parentContexts: ChildrenOutletContexts,
         private location: ViewContainerRef,
         @Attribute("name") name: string,
+        @Attribute("actionBarVisibility") actionBarVisibility: string,
         @Attribute("isEmptyOutlet") isEmptyOutlet: boolean,
         private locationStrategy: NSLocationStrategy,
         private componentFactoryResolver: ComponentFactoryResolver,
@@ -162,6 +163,7 @@ export class PageRouterOutlet implements OnDestroy { // tslint:disable-line:dire
     ) {
         this.isEmptyOutlet = isEmptyOutlet;
         this.frame = elRef.nativeElement;
+        this.setActionBarVisibility(actionBarVisibility);
         if (isLogEnabled()) {
             log(`PageRouterOutlet.constructor frame: ${this.frame}`);
         }
@@ -173,6 +175,18 @@ export class PageRouterOutlet implements OnDestroy { // tslint:disable-line:dire
         this.detachedLoaderFactory = resolver.resolveComponentFactory(DetachedLoader);
     }
 
+    setActionBarVisibility(actionBarVisibility: string): void {
+        switch (actionBarVisibility) {
+            case "always":
+            case "never":
+                this.frame.actionBarVisibility = actionBarVisibility;
+                return;
+
+            default:
+                this.frame.actionBarVisibility = "auto";
+        }
+    }
+
     ngOnDestroy(): void {
         // Clear accumulated modal view page cache when page-router-outlet
         // destroyed on modal view closing