fix: race, only one banner should be on screen at a time even in rerender

Author: abose

src/extensionsIntegrated/InAppNotifications/banner.js

@@ -19,7 +19,7 @@
  *
  */
 
-/*global Phoenix*/
+/*global*/
 /**
  *  module for displaying in-app banner notifications
  *
@@ -31,10 +31,14 @@ define(function (require, exports, module) {
         ExtensionUtils       = require("utils/ExtensionUtils"),
         Metrics = require("utils/Metrics"),
         semver = require("thirdparty/semver.browser"),
-        NotificationBarHtml  = require("text!./htmlContent/notificationContainer.html");
+        NotificationBarHtml  = require("text!./htmlContent/notificationContainer.html"),
+        ExtensionInterface = require("utils/ExtensionInterface");
 
     ExtensionUtils.loadStyleSheet(module, "styles/styles.css");
 
+    const IN_APP_NOTIFICATION_INTERFACE = "Extn.Phoenix.inAppNotification";
+    ExtensionInterface.registerExtensionInterface(IN_APP_NOTIFICATION_INTERFACE, exports);
+
     let latestBannerJSON;
     let customFilterCallback;
 
@@ -193,13 +197,22 @@ define(function (require, exports, module) {
             });
     }
 
+    let reRenderInProgress = Promise.resolve();
+
     /**
      * Re-renders notifications using the latest cached banner JSON
+     * Ensures renders are strictly serialized
      */
     function reRenderNotifications() {
-        if(latestBannerJSON) {
-            _renderNotifications(latestBannerJSON);
+        if (!latestBannerJSON) {
+            return Promise.resolve();
         }
+
+        reRenderInProgress = reRenderInProgress
+            .catch(() => {}) // prevent lock break on error
+            .then(() => _renderNotifications(latestBannerJSON));
+
+        return reRenderInProgress;
     }
 
 

test/spec/Extn-InAppNotifications-integ-test.js

@@ -330,5 +330,48 @@ define(function (require, exports, module) {
             banner.registerCustomFilter(null);
             banner.cleanNotificationBanner();
         });
+
+        it("Should serialize multiple concurrent reRenderNotifications calls", async function () {
+            banner.cleanNotificationBanner();
+
+            const {notification} = getRandomNotification("all", true);
+            let renderCount = 0;
+
+            // Set cache
+            banner._setBannerCache(notification);
+
+            // Register filter to track render calls
+            banner.registerCustomFilter(async () => {
+                renderCount++;
+                return true;
+            });
+
+            // Make 3 concurrent calls
+            const promise1 = banner.reRenderNotifications();
+            const promise2 = banner.reRenderNotifications();
+            const promise3 = banner.reRenderNotifications();
+
+            // First render: wait for banner, close it, wait for promise to resolve
+            await _waitForBannerShown();
+            expect(renderCount).toEqual(1);
+            testWindow.$('.close-icon').click();
+            await promise1;
+
+            // Second render: wait for banner, close it, wait for promise to resolve
+            await _waitForBannerShown();
+            expect(renderCount).toEqual(2);
+            testWindow.$('.close-icon').click();
+            await promise2;
+
+            // Third render: wait for banner, close it, wait for promise to resolve
+            await _waitForBannerShown();
+            expect(renderCount).toEqual(3);
+            testWindow.$('.close-icon').click();
+            await promise3;
+
+            // Cleanup
+            banner.registerCustomFilter(null);
+            banner.cleanNotificationBanner();
+        });
     });
 });