fix(page-router-outlet): actionBarVisibility not applied (#1621)

* fix(p-r-o): actionBarVisibility has no effect when applied to nested lazy loaded named outlet

* tets: add tests for actionBarVisibility and lazy loaded named outlet

* chore: include images for ios

Author: ADjenkov

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

@@ -1,5 +1,5 @@
 import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
-import { NativeScriptRouterModule } from "nativescript-angular/router";
+import { NativeScriptRouterModule, NSEmptyOutletComponent } from "nativescript-angular/router";
 
 import { ActionBarDynamicItemsComponent } from "./action-bar/action-bar-dynamic-items.component";
 import { ActionBarExtensionComponent } from "./action-bar/action-bar-extension.component";
@@ -54,6 +54,16 @@ export const routes = [
             component: NestedPageComponent
         }]
     },
+    {
+        path: "action-bar-visibility-never-lazy",
+        component: ActionBarVisibilityNeverComponent,
+        children: [{
+            path: "nested",
+            outlet: "nested",
+            component: NSEmptyOutletComponent,
+            loadChildren:"~/page-router-outlet/nested-lazy-page.module#NestedLazyPageModule"
+        }]
+    },
     {
         path: "action-bar-dynamic",
         component: ActionBarDynamicItemsComponent,
@@ -111,7 +121,6 @@ export const navigatableComponents = [
     ActionBarVisibilityAlwaysComponent,
     ActionBarVisibilityNeverComponent,
     ActionBarVisibilityAutoComponent,
-    NestedPageComponent,
 
     TabItemBindingComponent,
 

e2e/renderer/app/app.module.ts

@@ -11,6 +11,8 @@ import { ItemsService } from "./items.service";
 
 import { rendererTraceCategory, viewUtilCategory, bootstrapCategory } from "nativescript-angular/trace";
 import { addCategories, enable, categories } from "tns-core-modules/trace";
+import { SharedModule } from "./shared.module";
+
 addCategories(bootstrapCategory);
 addCategories(rendererTraceCategory);
 addCategories(viewUtilCategory);
@@ -22,7 +24,7 @@ export class MyErrorHandler implements ErrorHandler {
         console.log("### ErrorHandler Error: " + error.toString());
         console.log("### ErrorHandler Stack: " + error.stack);
     }
-}  
+}
 
 
 @NgModule({
@@ -38,6 +40,7 @@ export class MyErrorHandler implements ErrorHandler {
     imports: [
         NativeScriptModule,
         AppRoutingModule,
+        SharedModule
     ],
     schemas: [NO_ERRORS_SCHEMA],
 })

e2e/renderer/app/list.component.ts

@@ -9,6 +9,7 @@ import { Component } from "@angular/core";
             <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="ActionBarVisibility Never Lazy" [nsRouterLink]="['/action-bar-visibility-never-lazy']"></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/nested-lazy-page.module.ts

@@ -0,0 +1,20 @@
+import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
+import { NativeScriptRouterModule } from "nativescript-angular/router";
+import { NativeScriptCommonModule } from "nativescript-angular/common";
+import { SharedModule } from "~/shared.module";
+import { NestedPageComponent } from "./nested-page.component";
+
+@NgModule({
+    imports: [
+        SharedModule,
+        NativeScriptCommonModule,
+        NativeScriptRouterModule,
+        NativeScriptRouterModule.forChild([
+            { path: "", component: NestedPageComponent }
+        ])
+    ],
+    providers: [
+    ],
+    schemas: [NO_ERRORS_SCHEMA]
+})
+export class NestedLazyPageModule { }

e2e/renderer/app/shared.module.ts

@@ -0,0 +1,14 @@
+import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
+import { NativeScriptRouterModule } from "nativescript-angular/router";
+import { NativeScriptCommonModule } from "nativescript-angular/common";
+import { NestedPageComponent } from "./page-router-outlet/nested-page.component";
+
+@NgModule({
+    imports: [
+        NativeScriptCommonModule,
+        NativeScriptRouterModule
+    ],
+    declarations:[NestedPageComponent],
+    schemas: [NO_ERRORS_SCHEMA]
+})
+export class SharedModule { }

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

@@ -93,6 +93,52 @@ describe("page-router-outlet-scenario", () => {
         });
     });
 
+    describe("actionBarVisibility 'never' doesn't show action bars in lazy module page", async () => {
+        let imagePostFix = "";
+        before(async () => {
+            driver = await createDriver();
+            await driver.driver.resetApp();
+            if (driver.isIOS && driver.nsCapabilities.device.name.toLowerCase().includes("x")) {
+                imagePostFix = "-lazy";
+            }
+        });
+
+        afterEach(async function () {
+            if (this.currentTest.state === "failed") {
+                await driver.logTestArtifacts(this.currentTest.title);
+            }
+        });
+
+        it("should navigate to page", async () => {
+            const navigationButton =
+                await driver.findElementByAutomationText("ActionBarVisibility Never Lazy");
+            await navigationButton.click();
+
+            await driver.findElementByAutomationText("ShowActionBar");
+        });
+
+        it("should hide action bar by default", async () => {
+            const screenMatches =  await driver.compareScreen(`actionBarVisibility-never-default${imagePostFix}`, 5);
+            assert(screenMatches);
+        });
+
+        it("should not show action bar when shown by page", async () => {
+            const showActionBarButton = await driver.findElementByAutomationText("ShowActionBar");
+            showActionBarButton.click();
+
+            const screenMatches =  await driver.compareScreen(`actionBarVisibility-never-shown${imagePostFix}`, 5);
+            assert(screenMatches);
+        });
+
+        it("should not do anything when hidden action bar by page", async () => {
+            const hideActionBarButton = await driver.findElementByAutomationText("HideActionBar");
+            hideActionBarButton.click();
+
+            const screenMatches =  await driver.compareScreen(`actionBarVisibility-never-hidden${imagePostFix}`, 5);
+            assert(screenMatches);
+        });
+    });
+
     describe("actionBarVisibility 'auto' shows action bars based on page", async () => {
         before(async () => {
             driver = await createDriver();

e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-never-default-lazy_actual.png

@@ -24,25 +24,25 @@
   },
   "devDependencies": {
     "@angular/compiler-cli": "~7.0.0",
-    "@types/chai": "^4.0.2",
-    "@types/mocha": "^2.2.41",
-    "@types/node": "^7.0.5",
+    "@ngtools/webpack": "~7.0.0",
+    "@types/chai": "~4.1.3",
+    "@types/mocha": "~5.2.1",
+    "@types/node": "10.11.4",
     "babel-traverse": "6.25.0",
     "babel-types": "6.25.0",
     "babylon": "6.17.4",
     "chai": "~4.1.1",
     "chai-as-promised": "~7.1.1",
     "colors": "^1.1.2",
     "lazy": "1.0.11",
-    "mocha": "~3.5.0",
-    "mocha-junit-reporter": "^1.13.0",
-    "mocha-multi": "^0.11.0",
+    "mocha": "~5.1.0",
+    "mocha-junit-reporter": "~1.17.0",
+    "mocha-multi": "~1.0.0",
     "nativescript-dev-appium": "next",
     "nativescript-dev-typescript": "~0.7.1",
     "nativescript-dev-webpack": "next",
     "tslib": "^1.7.1",
-    "typescript": "~3.1.1",
-    "@ngtools/webpack": "~7.0.0"
+    "typescript": "~3.1.1"
   },
   "scripts": {
     "e2e": "tsc -p e2e && mocha --opts ../config/mocha.opts --recursive e2e --appiumCapsLocation ../config/appium.capabilities.json",

e2e/renderer/e2e/resources/images/renderer/iPhone 7 110/actionBarVisibility-never-hidden-lazy_actual.png

@@ -1,15 +1,23 @@
-import { Component } from "@angular/core";
+import { Component, ViewChild } from "@angular/core";
 import { Page } from "tns-core-modules/ui/page";
+import { PageRouterOutlet } from "./page-router-outlet";
 @Component({
     // tslint:disable-next-line:component-selector
     selector: "ns-empty-outlet",
     moduleId: module.id,
     template: "<page-router-outlet isEmptyOutlet='true'></page-router-outlet>"
 })
 export class NSEmptyOutletComponent {
+    @ViewChild(PageRouterOutlet) pageRouterOutlet: PageRouterOutlet;
     constructor(private page: Page) {
         if (this.page) {
             this.page.actionBarHidden = true;
+
+            this.page.on("loaded", () => {
+                if (this.pageRouterOutlet && this.page.frame) {
+                    this.pageRouterOutlet.setActionBarVisibility(this.page.frame.actionBarVisibility);
+                }
+            });
         }
     }
 }