fix(hmr): close modal views during livesync #7668

chore: add unit tests to test that modal views are closed during hmr

Author: VladimirAmiorkov

tests/app/livesync/livesync-modal-view-page.css

@@ -0,0 +1,15 @@
+import { View, ShowModalOptions } from "tns-core-modules/ui/core/view";
+const LIVESYNC_FOLDER = "livesync/";
+const buttonPageModuleName = `${LIVESYNC_FOLDER}livesync-button-page`;
+
+export function onLoaded(args) {
+    const view = args.object as View;
+
+    let options: ShowModalOptions = {
+        context: "context",
+        closeCallback: () => console.log("modal view closeCallback raised."),
+        animated: false
+    };
+
+    view.showModal(buttonPageModuleName, options);
+}

tests/app/livesync/livesync-modal-view-page.scss

@@ -0,0 +1,3 @@
+<Page loaded="onLoaded">
+    
+</Page>

tests/app/livesync/livesync-modal-view-page.ts

@@ -30,6 +30,13 @@ const buttonTsPageFileName = `${LIVESYNC_FOLDER}livesync-button-page.ts`;
 const buttonScssPageFileName = `${LIVESYNC_FOLDER}livesync-button-page.scss`;
 const labelPageModuleName = `${LIVESYNC_FOLDER}livesync-label-page`;
 
+const modalViewPageModuleName = `${LIVESYNC_FOLDER}livesync-modal-view-page`;
+const modalViewXmlPageFileName = `${LIVESYNC_FOLDER}livesync-modal-view-page.xml`;
+const modalViewJsPageFileName = `${LIVESYNC_FOLDER}livesync-modal-view-page.js`;
+const modalViewTsPageFileName = `${LIVESYNC_FOLDER}livesync-modal-view-page.ts`;
+const modalViewScssPageFileName = `${LIVESYNC_FOLDER}livesync-modal-view-page.scss`;
+const modalViewCssFileName = `${LIVESYNC_FOLDER}livesync-modal-view-page.css`;
+
 const green = new Color("green");
 
 export function setUp() {
@@ -111,6 +118,26 @@ export function test_onLiveSync_ModuleContext_MarkupHtml_ScriptTs_StyleScss_File
     ]);
 }
 
+export function test_onLiveSync_ModalViewClosed_MarkupXml() {
+    _test_onLiveSync_ModalViewClosed({ type: "markup", path: modalViewXmlPageFileName });
+}
+
+export function test_onLiveSync_ModalViewClosed_ScriptTs() {
+    _test_onLiveSync_ModalViewClosed({ type: "script", path: modalViewTsPageFileName });
+}
+
+export function test_onLiveSync_ModalViewClosed_ScriptJs() {
+    _test_onLiveSync_ModalViewClosed({ type: "script", path: modalViewJsPageFileName });
+}
+
+export function test_onLiveSync_ModalViewClosed_StyleCss() {
+    _test_onLiveSync_ModalViewClosed({ type: "style", path: modalViewCssFileName });
+}
+
+export function test_onLiveSync_ModalViewClosed_StyleScss() {
+    _test_onLiveSync_ModalViewClosed({ type: "style", path: modalViewScssPageFileName });
+}
+
 function _test_onLiveSync_ModuleContext_AppStyle(appStyleFileName: string, livesyncStyleFileName: string) {
     const pageBeforeNavigation = helper.getCurrentPage();
     const buttonPage = <Page>createViewFromEntry(({ moduleName: buttonPageModuleName }));
@@ -209,6 +236,18 @@ function _test_onLiveSync_ModuleReplace_Multiple(context: ModuleContext[]) {
     TKUnit.assertEqual(pageBeforeNavigation, pageAfterBackNavigation, "Pages are different!");
 }
 
+function _test_onLiveSync_ModalViewClosed(context: ModuleContext) {
+    const modalViewPage = <Page>createViewFromEntry(({ moduleName: modalViewPageModuleName }));
+    helper.navigateWithHistory(() => modalViewPage);
+    livesync({ type: context.type, path: context.path });
+
+    TKUnit.waitUntilReady(() => !!frame.topmost());
+    const topmostFrame = frame.topmost();
+    TKUnit.waitUntilReady(() => topmostFrame.currentPage && topmostFrame.currentPage.isLoaded && topmostFrame.canGoBack());
+
+    TKUnit.assertTrue(topmostFrame._getRootModalViews().length === 0);
+}
+
 function livesync(context: ModuleContext) {
     const ls = (<any>global).__hmrSyncBackup || global.__onLiveSync;
     ls(context);

tests/app/livesync/livesync-modal-view-page.xml

@@ -152,11 +152,31 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         }
     }
 
+    public _closeAllModalViewsInternal(): boolean {
+        if (_rootModalViews && _rootModalViews.length > 0) {
+            _rootModalViews.forEach(v => {
+                v.closeModal();
+            });
+
+            return true;
+        }
+
+        return false;
+    }
+
+    public _getRootModalViews(): Array<ViewBase> {
+        return _rootModalViews;
+    }
+
     public _onLivesync(context?: ModuleContext): boolean {
         if (traceEnabled()) {
             traceWrite(`${this}._onLivesync(${JSON.stringify(context)})`, traceCategories.Livesync);
         }
 
+        if (this._closeAllModalViewsInternal()) {
+            return true;
+        }
+
         if (this._handleLivesync(context)) {
             return true;
         }

tests/app/livesync/livesync-tests.ts

@@ -610,6 +610,18 @@ export abstract class View extends ViewBase {
     // Lifecycle events
     _getNativeViewsCount(): number;
 
+    /**
+     * Internal method:
+     * Closes all modal views. Should be used by plugins like `nativescript-angular` which implement their own `modal views` service.
+     */
+    _closeAllModalViewsInternal(): boolean;
+
+    /**
+     * Internal method:
+     * Gets all modal views of the current view.
+     */
+    _getRootModalViews(): Array<ViewBase>
+
     _eachLayoutView(callback: (View) => void): void;
 
     /**