[fix] Do not close "force reconnect" messages

If a "force reconnect" message is displayed to the user, it means the
only way to go back to a healthy state is to reload the pad. So we
cannot hide this kind of message, like what is done with other modals
(eg: "settings").

2 files changed, 129 insertions, 50 deletions

diff --git a/src/static/js/pad_editbar.js b/src/static/js/pad_editbar.js
index dd1c377a..b2aade46 100644
--- a/src/static/js/pad_editbar.js
+++ b/src/static/js/pad_editbar.js
@@ -259,18 +259,25 @@ var padeditbar = (function()
       // hide all modules and remove highlighting of all buttons
       if(moduleName == "none")
       {
-        var returned = false
+        var returned = false;
         for(var i=0;i<self.dropdowns.length;i++)
         {
+          var thisModuleName = self.dropdowns[i];
+
           //skip the userlist
-          if(self.dropdowns[i] == "users")
+          if(thisModuleName == "users")
             continue;
 
-          var module = $("#" + self.dropdowns[i]);
+          var module = $("#" + thisModuleName);
+
+          //skip any "force reconnect" message
+          var isAForceReconnectMessage = module.find('#forcereconnect').is(':visible');
+          if(isAForceReconnectMessage)
+            continue;
 
           if(module.css('display') != "none")
           {
-            $("li[data-key=" + self.dropdowns[i] + "] > a").removeClass("selected");
+            $("li[data-key=" + thisModuleName + "] > a").removeClass("selected");
             module.slideUp("fast", cb);
             returned = true;
           }
@@ -283,16 +290,17 @@ var padeditbar = (function()
         // respectively add highlighting to the corresponding button
         for(var i=0;i<self.dropdowns.length;i++)
         {
-          var module = $("#" + self.dropdowns[i]);
+          var thisModuleName = self.dropdowns[i];
+          var module = $("#" + thisModuleName);
 
           if(module.css('display') != "none")
           {
-            $("li[data-key=" + self.dropdowns[i] + "] > a").removeClass("selected");
+            $("li[data-key=" + thisModuleName + "] > a").removeClass("selected");
             module.slideUp("fast");
           }
-          else if(self.dropdowns[i]==moduleName)
+          else if(thisModuleName==moduleName)
           {
-            $("li[data-key=" + self.dropdowns[i] + "] > a").addClass("selected");
+            $("li[data-key=" + thisModuleName + "] > a").addClass("selected");
             module.slideDown("fast", cb);
           }
         }
diff --git a/tests/frontend/specs/pad_modal.js b/tests/frontend/specs/pad_modal.js
index d3afe107..15eb8ac8 100644
--- a/tests/frontend/specs/pad_modal.js
+++ b/tests/frontend/specs/pad_modal.js
@@ -1,64 +1,135 @@
 describe('Pad modal', function() {
-  var padId, $originalPadFrame;
-
-  beforeEach(function(done) {
-    padId = helper.newPad(function() {
-      // open same pad on another iframe, to force userdup error
-      var $otherIframeWithSamePad = $('<iframe src="/p/' + padId + '" style="height: 1px;"></iframe>');
-      $originalPadFrame = $('#iframe-container iframe');
-      $otherIframeWithSamePad.insertAfter($originalPadFrame);
-
-      // wait for modal to be displayed
-      var $errorMessageModal = helper.padChrome$('#connectivity .userdup');
-      helper.waitFor(function() {
-        return $errorMessageModal.is(':visible');
-      }, 50000).done(done);
+  context('when modal is a "force reconnect" message', function() {
+    var MODAL_SELECTOR = '#connectivity .userdup';
+
+    var padId, $originalPadFrame;
+
+    beforeEach(function(done) {
+      padId = helper.newPad(function() {
+        // open same pad on another iframe, to force userdup error
+        var $otherIframeWithSamePad = $('<iframe src="/p/' + padId + '" style="height: 1px;"></iframe>');
+        $originalPadFrame = $('#iframe-container iframe');
+        $otherIframeWithSamePad.insertAfter($originalPadFrame);
+
+        // wait for modal to be displayed
+        var $modal = helper.padChrome$(MODAL_SELECTOR);
+        helper.waitFor(function() {
+          return $modal.is(':visible');
+        }, 50000).done(done);
+      });
+
+      this.timeout(60000);
     });
 
-    this.timeout(60000);
-  });
+    it('disables editor', function(done) {
+      expect(isEditorDisabled()).to.be(true);
 
-  it('disables editor', function(done) {
-    var editorDocument = helper.padOuter$("iframe[name='ace_inner']").get(0).contentDocument;
-    var editorBody     = editorDocument.getElementById('innerdocbody');
+      done();
+    });
 
-    var editorIsEditable = editorBody.contentEditable === 'false' // IE/Safari
-                        || editorDocument.designMode === 'off'; // other browsers
+    context('and user clicks on editor', function() {
+      beforeEach(function() {
+        clickOnPadInner();
+      });
 
-    expect(editorIsEditable).to.be(true);
+      it('does not close the modal', function(done) {
+        var $modal = helper.padChrome$(MODAL_SELECTOR);
+        var modalIsVisible = $modal.is(':visible');
 
-    done();
-  });
+        expect(modalIsVisible).to.be(true);
 
-  context('and user clicks on editor', function() {
-    beforeEach(function() {
-      var $editor = helper.padInner$('#innerdocbody');
-      $editor.click();
+        done();
+      });
     });
 
-    it('closes the modal', function(done) {
-      var $errorMessageModal = helper.padChrome$('#connectivity .userdup');
-      var modalIsVisible = $errorMessageModal.is(':visible');
+    context('and user clicks on pad outer', function() {
+      beforeEach(function() {
+        clickOnPadOuter();
+      });
 
-      expect(modalIsVisible).to.be(false);
+      it('does not close the modal', function(done) {
+        var $modal = helper.padChrome$(MODAL_SELECTOR);
+        var modalIsVisible = $modal.is(':visible');
 
-      done();
+        expect(modalIsVisible).to.be(true);
+
+        done();
+      });
     });
   });
 
-  context('and user clicks on pad outer', function() {
-    beforeEach(function() {
-      var $lineNumbersColumn = helper.padOuter$('#sidedivinner');
-      $lineNumbersColumn.click();
-    });
+  // we use "settings" here, but other modals have the same behaviour
+  context('when modal is not an error message', function() {
+    var MODAL_SELECTOR = '#settings';
 
-    it('closes the modal', function(done) {
-      var $errorMessageModal = helper.padChrome$('#connectivity .userdup');
-      var modalIsVisible = $errorMessageModal.is(':visible');
+    beforeEach(function(done) {
+      helper.newPad(function() {
+        openSettingsAndWaitForModalToBeVisible(done);
+      });
 
-      expect(modalIsVisible).to.be(false);
+      this.timeout(60000);
+    });
 
+    it('does not disable editor', function(done) {
+      expect(isEditorDisabled()).to.be(false);
       done();
     });
+
+    context('and user clicks on editor', function() {
+      beforeEach(function() {
+        clickOnPadInner();
+      });
+
+      it('closes the modal', function(done) {
+        expect(isModalOpened(MODAL_SELECTOR)).to.be(false);
+        done();
+      });
+    });
+
+    context('and user clicks on pad outer', function() {
+      beforeEach(function() {
+        clickOnPadOuter();
+      });
+
+      it('closes the modal', function(done) {
+        expect(isModalOpened(MODAL_SELECTOR)).to.be(false);
+        done();
+      });
+    });
   });
+
+  var clickOnPadInner = function() {
+    var $editor = helper.padInner$('#innerdocbody');
+    $editor.click();
+  }
+
+  var clickOnPadOuter = function() {
+    var $lineNumbersColumn = helper.padOuter$('#sidedivinner');
+    $lineNumbersColumn.click();
+  }
+
+  var openSettingsAndWaitForModalToBeVisible = function(done) {
+    helper.padChrome$('.buttonicon-settings').click();
+
+    // wait for modal to be displayed
+    var modalSelector = '#settings';
+    helper.waitFor(function() {
+      return isModalOpened(modalSelector);
+    }, 10000).done(done);
+  }
+
+  var isEditorDisabled = function() {
+    var editorDocument = helper.padOuter$("iframe[name='ace_inner']").get(0).contentDocument;
+    var editorBody     = editorDocument.getElementById('innerdocbody');
+
+    var editorIsDisabled = editorBody.contentEditable === 'false' // IE/Safari
+                        || editorDocument.designMode === 'off'; // other browsers
+
+    return editorIsDisabled;
+  }
+
+  var isModalOpened = function(modalSelector) {
+    var $modal = helper.padChrome$(modalSelector);
+    return $modal.is(':visible');
+  }
 });