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