tests: refactor some frontend tests (#4408)

* don't include sendkeys in index.html as it's included in helper.init
mocha opts: add default timeout and replace ignoreLeaks with checkLeaks,
as the former is deprecated

* introduce helper.edit to write to a pad

* add test to check if helper.edit() supports line numbers

* helper tests: waitFor/waitForPromise seem to be a little bit faster sometimes

* tests: refactor chat.js

* tests: refactor timeslider_numeric_padID

* tests: refactor timeslider_labels

* tests: refactor timeslider_follow

* ensure followContents is enabled, although it should be by default

* timeslider_follow: increase number of revision for Edge

* make textLines() depend on linesDiv()

Co-authored-by: Richard Hansen <rhansen@rhansen.org>

* make linesDiv return standard Array

* use `contain` instead of `indexOf`

* more fixes from the review

* review fixes

* align waitFor and waitForPromise behaviour

* timeslider_follow: check if it's following to the correct lines

* lower expected waitFor/waitForPromise interval check

* disable responsivness and regression test in timeslider_follow

* timeslider_follow: fix Range detection

* more explicit test for linesDiv

Co-authored-by: Richard Hansen <rhansen@rhansen.org>

tests/frontend/helper.js

@@ -145,6 +145,26 @@ var helper = {};
         helper.padOuter$.fx.off = true;
         helper.padInner$.fx.off = true;
 
+        /*
+         * chat messages received
+         * @type {Array}
+         */
+        helper.chatMessages = [];
+        
+        /*
+         * changeset commits from the server
+         * @type {Array}
+         */
+        helper.commits = [];
+        
+        /*
+         * userInfo messages from the server
+         * @type {Array}
+         */
+        helper.userInfos = [];
+
+        // listen for server messages
+        helper.spyOnSocketIO();
         opts.cb();
       }).fail(function(){
         if (helper.retry > 3) {
@@ -200,6 +220,8 @@ var helper = {};
   /**
    * Same as `waitFor` but using Promises
    *
+   * @returns {Promise}
+   *
    */
   helper.waitForPromise = async function(...args) {
     // Note: waitFor() has a strange API: On timeout it rejects, but it also throws an uncatchable

tests/frontend/helper/methods.js

@@ -0,0 +1,229 @@
+/**
+ * Spys on socket.io messages and saves them into several arrays
+ * that are visible in tests
+ */
+helper.spyOnSocketIO = function (){
+  helper.contentWindow().pad.socket.on('message', function(msg){
+    if (msg.type == "COLLABROOM") {
+
+      if (msg.data.type == 'ACCEPT_COMMIT') {
+        helper.commits.push(msg);
+      }
+      else if (msg.data.type == 'USER_NEWINFO') {
+        helper.userInfos.push(msg)
+      }
+      else if (msg.data.type == 'CHAT_MESSAGE') {
+        helper.chatMessages.push(msg)
+      }
+    }
+  })
+}
+
+/**
+ * Makes an edit via `sendkeys` to the position of the caret and ensures ACCEPT_COMMIT
+ * is returned by the server
+ * It does not check if the ACCEPT_COMMIT is the edit sent, though
+ * If `line` is not given, the edit goes to line no. 1
+ *
+ * @param {string} message The edit to make - can be anything supported by `sendkeys`
+ * @param {number} [line] the optional line to make the edit on starting from 1
+ * @returns {Promise}
+ * @todo needs to support writing to a specified caret position
+ *
+ */
+helper.edit = async function(message, line){
+  let editsNum = helper.commits.length;
+  line = line ? line - 1 : 0;
+  helper.linesDiv()[line].sendkeys(message);
+  return helper.waitForPromise(function(){
+    return editsNum + 1 === helper.commits.length;
+  })
+}
+
+/**
+ * The pad text as an array of divs
+ *
+ * @example
+ * helper.linesDiv()[2].sendkeys('abc') // sends abc to the third line
+ *
+ * @returns {Array.<HTMLElement>} array of divs
+ */
+helper.linesDiv = function(){
+  return helper.padInner$('.ace-line').map(function(){
+    return $(this)
+  }).get()
+}
+
+/**
+ * The pad text as an array of lines
+ * For lines in timeslider use `helper.timesliderTextLines()`
+ *
+ * @returns {Array.<string>} lines of text
+ */
+helper.textLines = function(){
+  return helper.linesDiv().map((div) => div.text());
+}
+
+/**
+ * The default pad text transmitted via `clientVars`
+ *
+ * @returns {string}
+ */
+helper.defaultText = function(){
+  return helper.padChrome$.window.clientVars.collab_client_vars.initialAttributedText.text;
+}
+
+/**
+ * Sends a chat `message` via `sendKeys`
+ * You *must* include `{enter}` at the end of the string or it will
+ * just fill the input field but not send the message.
+ *
+ * @todo Cannot send multiple messages at once
+ *
+ * @example
+ *
+ * `helper.sendChatMessage('hi{enter}')`
+ *
+ * @param {string} message the chat message to be sent
+ * @returns {Promise}
+ */
+helper.sendChatMessage = function(message){
+  let noOfChatMessages = helper.chatMessages.length;
+  helper.padChrome$("#chatinput").sendkeys(message)
+  return helper.waitForPromise(function(){
+    return noOfChatMessages + 1 === helper.chatMessages.length;
+  })
+}
+
+/**
+ * Opens the settings menu if its hidden via button
+ *
+ * @returns {Promise}
+ */
+helper.showSettings = function() {
+  if(!helper.isSettingsShown()){
+    helper.settingsButton().click()
+    return helper.waitForPromise(function(){return helper.isSettingsShown(); },2000);
+  }
+}
+
+/**
+ * Hide the settings menu if its open via button
+ *
+ * @returns {Promise}
+ * @todo untested
+ */
+helper.hideSettings = function() {
+  if(helper.isSettingsShown()){
+    helper.settingsButton().click()
+    return helper.waitForPromise(function(){return !helper.isSettingsShown(); },2000);
+  }
+}
+
+/**
+ * Makes the chat window sticky via settings menu if the settings menu is
+ * open and sticky button is not checked
+ *
+ * @returns {Promise}
+ */
+helper.enableStickyChatviaSettings = function() {
+  var stickyChat = helper.padChrome$('#options-stickychat');
+  if(helper.isSettingsShown() && !stickyChat.is(':checked')) {
+    stickyChat.click();
+    return helper.waitForPromise(function(){
+      return helper.isChatboxSticky();
+    },2000);
+  }
+}
+
+/**
+ * Unsticks the chat window via settings menu if the settings menu is open
+ * and sticky button is checked
+ *
+ * @returns {Promise}
+ */
+helper.disableStickyChatviaSettings = function() {
+  var stickyChat = helper.padChrome$('#options-stickychat');
+  if(helper.isSettingsShown() && stickyChat.is(':checked')) {
+    stickyChat.click();
+    return helper.waitForPromise(function(){return !helper.isChatboxSticky()},2000);
+  }
+}
+
+/**
+ * Makes the chat window sticky via an icon on the top right of the chat
+ * window
+ *
+ * @returns {Promise}
+ */
+helper.enableStickyChatviaIcon = function() {
+  var stickyChat = helper.padChrome$('#titlesticky');
+  if(helper.isChatboxShown() && !helper.isChatboxSticky()) {
+    stickyChat.click();
+    return helper.waitForPromise(function(){return helper.isChatboxSticky()},2000);
+  }
+}
+
+/**
+ * Disables the stickyness of the chat window via an icon on the
+ * upper right
+ *
+ * @returns {Promise}
+ */
+helper.disableStickyChatviaIcon = function() {
+  if(helper.isChatboxShown() && helper.isChatboxSticky()) {
+    helper.titlecross().click()
+    return helper.waitForPromise(function(){return !helper.isChatboxSticky()},2000);
+  }
+}
+
+/**
+ * Sets the src-attribute of the main iframe to the timeslider
+ * In case a revision is given, sets the timeslider to this specific revision.
+ * Defaults to going to the last revision.
+ * It waits until the timer is filled with date and time, because it's one of the
+ * last things that happen during timeslider load
+ *
+ * @param {number} [revision] the optional revision
+ * @returns {Promise}
+ * @todo for some reason this does only work the first time, you cannot
+ * goto rev 0 and then via the same method to rev 5. Use buttons instead
+ */
+helper.gotoTimeslider = function(revision){
+  revision = Number.isInteger(revision) ? '#'+revision : '';
+  var iframe = $('#iframe-container iframe');
+  iframe.attr('src', iframe.attr('src')+'/timeslider' + revision);
+
+  return helper.waitForPromise(function(){
+    return helper.timesliderTimerTime()
+      && !Number.isNaN(new Date(helper.timesliderTimerTime()).getTime()) },5000);
+}
+
+/**
+ * Clicks in the timeslider at a specific offset
+ * It's used to navigate the timeslider
+ *
+ * @todo no mousemove test
+ * @param {number} X coordinate
+ */
+helper.sliderClick = function(X){
+  let sliderBar = helper.sliderBar()
+  let edown = new jQuery.Event('mousedown');
+  let eup = new jQuery.Event('mouseup');
+  edown.clientX = eup.clientX = X;
+  edown.clientY = eup.clientY = sliderBar.offset().top;
+
+  sliderBar.trigger(edown);
+  sliderBar.trigger(eup);
+}
+
+/**
+ * The timeslider text as an array of lines
+ *
+ * @returns {Array.<string>} lines of text
+ */
+helper.timesliderTextLines = function(){
+  return helper.contentWindow().$('.ace-line').map(function(){
+    return $(this).text()
+  }).get()
+}

tests/frontend/helper/ui.js

@@ -0,0 +1,146 @@
+/**
+ * the contentWindow is either the normal pad or timeslider
+ *
+ * @returns {HTMLElement} contentWindow
+ */
+helper.contentWindow = function(){
+  return $('#iframe-container iframe')[0].contentWindow;
+}
+
+/**
+ * Opens the chat unless it is already open via an
+ * icon on the bottom right of the page
+ *
+ * @returns {Promise}
+ */
+helper.showChat = function(){
+  var chaticon = helper.chatIcon();
+  if(chaticon.hasClass('visible')) {
+    chaticon.click()
+    return helper.waitForPromise(function(){return !chaticon.hasClass('visible'); },2000)
+  }
+}
+
+/**
+ * Closes the chat window if it is shown and not sticky
+ *
+ * @returns {Promise}
+ */
+helper.hideChat = function(){
+  if(helper.isChatboxShown() && !helper.isChatboxSticky()) {
+    helper.titlecross().click()
+    return helper.waitForPromise(function(){return !helper.isChatboxShown(); },2000);
+  }
+}
+
+/**
+ * Gets the chat icon from the bottom right of the page
+ *
+ * @returns {HTMLElement} the chat icon
+ */
+helper.chatIcon = function(){return helper.padChrome$('#chaticon')}
+
+/**
+ * The chat messages from the UI
+ *
+ * @returns {Array.<HTMLElement>}
+ */
+helper.chatTextParagraphs = function(){return helper.padChrome$('#chattext').children("p")}
+
+/**
+ * Returns true if the chat box is sticky
+ *
+ * @returns {boolean} stickyness of the chat box
+ */
+helper.isChatboxSticky = function() {
+  return helper.padChrome$('#chatbox').hasClass('stickyChat');
+}
+
+/**
+ * Returns true if the chat box is shown
+ *
+ * @returns {boolean} visibility of the chat box
+ */
+helper.isChatboxShown = function() {
+  return helper.padChrome$('#chatbox').hasClass('visible');
+}
+
+/**
+ * Gets the settings menu
+ *
+ * @returns {HTMLElement} the settings menu
+ */
+helper.settingsMenu = function(){return helper.padChrome$('#settings') };
+
+/**
+ * Gets the settings button
+ *
+ * @returns {HTMLElement} the settings button
+ */
+helper.settingsButton = function(){return helper.padChrome$("button[data-l10n-id='pad.toolbar.settings.title']") }
+
+/**
+ * Gets the titlecross icon
+ *
+ * @returns {HTMLElement} the titlecross icon
+ */
+helper.titlecross = function(){return helper.padChrome$('#titlecross')}
+
+/**
+ * Returns true if the settings menu is visible
+ *
+ * @returns {boolean} is the settings menu shown?
+ */
+helper.isSettingsShown = function() {
+  return helper.padChrome$('#settings').hasClass('popup-show');
+}
+
+/**
+ * Gets the timer div of a timeslider that has the datetime of the revision
+ *
+ * @returns {HTMLElement} timer
+ */
+helper.timesliderTimer = function(){
+  if(typeof helper.contentWindow().$ == 'function'){
+    return helper.contentWindow().$('#timer') }
+  }
+
+/**
+ * Gets the time of the revision on a timeslider
+ *
+ * @returns {HTMLElement} timer
+ */
+helper.timesliderTimerTime = function(){
+  if(helper.timesliderTimer()){
+    return helper.timesliderTimer().text()
+  }
+}
+
+/**
+ * The ui-slidar-bar element in the timeslider
+ *
+ * @returns {HTMLElement}
+ */
+helper.sliderBar = function(){
+  return helper.contentWindow().$('#ui-slider-bar')
+}
+
+/**
+ * revision_date element
+ * like "Saved October 10, 2020"
+ *
+ * @returns {HTMLElement}
+ */
+helper.revisionDateElem = function(){
+  return helper.contentWindow().$('#revision_date').text();
+}
+
+/**
+ * revision_label element
+ * like "Version 1"
+ *
+ * @returns {HTMLElement}
+ */
+helper.revisionLabelElem = function(){
+  return helper.contentWindow().$('#revision_label')
+}

tests/frontend/index.html

@@ -14,11 +14,12 @@
     <script src="lib/underscore.js"></script>
 
     <script src="lib/mocha.js"></script>
-    <script> mocha.setup({ui: 'bdd', ignoreLeaks: true}) </script>
+    <script> mocha.setup({ui: 'bdd', checkLeaks: true, timeout: 60000}) </script>
     <script src="lib/expect.js"></script>
 
-    <script src="lib/sendkeys.js"></script>    
     <script src="helper.js"></script>
+    <script src="helper/methods.js"></script>
+    <script src="helper/ui.js"></script>
     
     <script src="specs_list.js"></script>
     <script src="runner.js"></script>

tests/frontend/specs/chat.js

@@ -2,134 +2,78 @@ describe("Chat messages and UI", function(){
   //create a new pad before each test run
   beforeEach(function(cb){
     helper.newPad(cb);
-    this.timeout(60000);
   });
 
-  it("opens chat, sends a message and makes sure it exists on the page", function(done) {
+  it("opens chat, sends a message, makes sure it exists on the page and hides chat", async function() {
-    var inner$ = helper.padInner$;
-    var chrome$ = helper.padChrome$;
     var chatValue = "JohnMcLear";
 
-    //click on the chat button to make chat visible
+    await helper.showChat();
-    var $chatButton = chrome$("#chaticon");
+    await helper.sendChatMessage(`${chatValue}{enter}`);
-    $chatButton.click();
-    var $chatInput = chrome$("#chatinput");
-    $chatInput.sendkeys('JohnMcLear'); // simulate a keypress of typing JohnMcLear
-    $chatInput.sendkeys('{enter}'); // simulate a keypress of enter actually does evt.which = 10 not 13
 
-    //check if chat shows up
+    expect(helper.chatTextParagraphs().length).to.be(1);
-    helper.waitFor(function(){
-      return chrome$("#chattext").children("p").length !== 0; // wait until the chat message shows up
-    }).done(function(){
-      var $firstChatMessage = chrome$("#chattext").children("p");
-      var containsMessage = $firstChatMessage.text().indexOf("JohnMcLear") !== -1; // does the string contain JohnMcLear?
-      expect(containsMessage).to.be(true); // expect the first chat message to contain JohnMcLear
 
-      // do a slightly more thorough check
+    // <p data-authorid="a.qjkwNs4z0pPROphS"
-      var username = $firstChatMessage.children("b");
+    //   class="author-a-qjkwz78zs4z122z0pz80zz82zz79zphz83z">
-      var usernameValue = username.text();
+    //   <b>unnamed:</b>
-      var time = $firstChatMessage.children(".time");
+    //   <span class="time author-a-qjkwz78zs4z122z0pz80zz82zz79zphz83z">12:38
-      var timeValue = time.text();
+    //   </span> JohnMcLear
-      var discoveredValue = $firstChatMessage.text();
+    // </p>
-      var chatMsgExists = (discoveredValue.indexOf("JohnMcLear") !== -1);
+    let username = helper.chatTextParagraphs().children("b").text();
-      expect(chatMsgExists).to.be(true);
+    let time = helper.chatTextParagraphs().children(".time").text();
-      done();
+
+    expect(helper.chatTextParagraphs().text()).to.be(`${username}${time} ${chatValue}`);
+
+    await helper.hideChat();
   });
 
-  });
+  it("makes sure that an empty message can't be sent", async function() {
+    var chatValue = "mluto";
 
-  it("makes sure that an empty message can't be sent", function(done) {
+    await helper.showChat();
-    var inner$ = helper.padInner$;
-    var chrome$ = helper.padChrome$;
 
-    //click on the chat button to make chat visible
+    await helper.sendChatMessage(`{enter}${chatValue}{enter}`); // simulate a keypress of typing enter, mluto and enter (to send 'mluto')
-    var $chatButton = chrome$("#chaticon");
+
-    $chatButton.click();
+    let chat = helper.chatTextParagraphs();
-    var $chatInput = chrome$("#chatinput");
+
-    $chatInput.sendkeys('{enter}'); // simulate a keypress of enter (to send an empty message)
+    expect(chat.length).to.be(1);
-    $chatInput.sendkeys('mluto'); // simulate a keypress of typing mluto
-    $chatInput.sendkeys('{enter}'); // simulate a keypress of enter (to send 'mluto')
 
-    //check if chat shows up
-    helper.waitFor(function(){
-      return chrome$("#chattext").children("p").length !== 0; // wait until the chat message shows up
-    }).done(function(){
-      // check that the empty message is not there
-      expect(chrome$("#chattext").children("p").length).to.be(1);
     // check that the received message is not the empty one
-      var $firstChatMessage = chrome$("#chattext").children("p");
+    let username = chat.children("b").text();
-      var containsMessage = $firstChatMessage.text().indexOf("mluto") !== -1;
+    let time = chat.children(".time").text();
-      expect(containsMessage).to.be(true);
+
-      done();
+    expect(chat.text()).to.be(`${username}${time} ${chatValue}`);
-    });
   });
 
-  it("makes chat stick to right side of the screen", function(done) {
+  it("makes chat stick to right side of the screen via settings, remove sticky via settings, close it", async function() {
-    var inner$ = helper.padInner$;
+    await helper.showSettings();
-    var chrome$ = helper.padChrome$;
 
-    //click on the settings button to make settings visible
+    await helper.enableStickyChatviaSettings();
-    var $settingsButton = chrome$(".buttonicon-settings");
+    expect(helper.isChatboxShown()).to.be(true);
-    $settingsButton.click();
+    expect(helper.isChatboxSticky()).to.be(true);
-
-    //get the chat selector
-    var $stickychatCheckbox = chrome$("#options-stickychat");
-
-    //select chat always on screen
-    if (!$stickychatCheckbox.is(':checked')) {
-      $stickychatCheckbox.click();
-    }
-
-    // due to animation, we need to make some timeout...
-    setTimeout(function() {
-      //check if chat changed to get the stickychat Class
-      var $chatbox = chrome$("#chatbox");
-      var hasStickyChatClass = $chatbox.hasClass("stickyChat");
-      expect(hasStickyChatClass).to.be(true);
-
-      // select chat always on screen and fire change event
-      $stickychatCheckbox.click();
-
-      setTimeout(function() {
-        //check if chat changed to remove the stickychat Class
-        var hasStickyChatClass = $chatbox.hasClass("stickyChat");
-        expect(hasStickyChatClass).to.be(false);
-
-        done();
-      }, 10)
-    }, 10)
 
+    await helper.disableStickyChatviaSettings();
+    expect(helper.isChatboxSticky()).to.be(false);
+    expect(helper.isChatboxShown()).to.be(true);
 
+    await helper.hideChat();
+    expect(helper.isChatboxSticky()).to.be(false);
+    expect(helper.isChatboxShown()).to.be(false);
   });
 
-  it("makes chat stick to right side of the screen then makes it one step smaller", function(done) {
+  it("makes chat stick to right side of the screen via icon on the top right, remove sticky via icon, close it", async function() {
-    var inner$ = helper.padInner$;
+    await helper.showChat();
-    var chrome$ = helper.padChrome$;
 
-    // open chat
+    await helper.enableStickyChatviaIcon();
-    chrome$('#chaticon').click();
+    expect(helper.isChatboxShown()).to.be(true);
+    expect(helper.isChatboxSticky()).to.be(true);
 
-    // select chat always on screen from chatbox
+    await helper.disableStickyChatviaIcon();
-    chrome$('.stick-to-screen-btn').click();
+    expect(helper.isChatboxShown()).to.be(true);
+    expect(helper.isChatboxSticky()).to.be(false);
 
-    // due to animation, we need to make some timeout...
+    await helper.hideChat();
-    setTimeout(function() {
+    expect(helper.isChatboxSticky()).to.be(false);
-      //check if chat changed to get the stickychat Class
+    expect(helper.isChatboxShown()).to.be(false);
-      var $chatbox = chrome$("#chatbox");
-      var hasStickyChatClass = $chatbox.hasClass("stickyChat");
-      expect(hasStickyChatClass).to.be(true);
-
-      // select chat always on screen and fire change event
-      chrome$('#titlecross').click();
-
-      setTimeout(function() {
-        //check if chat changed to remove the stickychat Class
-        var hasStickyChatClass = $chatbox.hasClass("stickyChat");
-        expect(hasStickyChatClass).to.be(false);
-
-        done();
-      }, 10)
-    }, 10)
   });
 
   xit("Checks showChat=false URL Parameter hides chat then when removed it shows chat", function(done) {

tests/frontend/specs/delete.js

@@ -17,7 +17,7 @@ describe("delete keystroke", function(){
 
     // get the original string value minus the last char
     var originalTextValue = $firstTextElement.text();
-    originalTextValueMinusFirstChar = originalTextValue.substring(1, originalTextValue.length );
+    var originalTextValueMinusFirstChar = originalTextValue.substring(1, originalTextValue.length );
 
     // simulate key presses to delete content
     $firstTextElement.sendkeys('{leftarrow}'); // simulate a keypress of the left arrow key

tests/frontend/specs/helper.js

@@ -136,7 +136,7 @@ describe("the test helper", function(){
         return false;
       }, 1500).fail(function(){
         var duration = Date.now() - startTime;
-        expect(duration).to.be.greaterThan(1400);
+        expect(duration).to.be.greaterThan(1490);
         done();
       });
     });
@@ -149,8 +149,10 @@ describe("the test helper", function(){
         checks++;
         return false;
       }, 2000, 100).fail(function(){
-        expect(checks).to.be.greaterThan(10);
+        // One at the beginning, and 19-20 more depending on whether it's the timeout or the final
-        expect(checks).to.be.lessThan(30);
+        // poll that wins at 2000ms.
+        expect(checks).to.be.greaterThan(18);
+        expect(checks).to.be.lessThan(22);
         done();
       });
     });
@@ -399,4 +401,68 @@ describe("the test helper", function(){
       done();
     });
   });
+
+  describe('helper',function(){
+    before(function(cb){
+      helper.newPad(function(){
+        cb();
+      })
+    })
+
+    it(".textLines() returns the text of the pad as strings", async function(){
+      let lines = helper.textLines();
+      let defaultText = helper.defaultText();
+      expect(Array.isArray(lines)).to.be(true);
+      expect(lines[0]).to.be.an('string');
+      // @todo
+      // final "\n" is added automatically, but my understanding is this should happen
+      // only when the default text does not end with "\n" already
+      expect(lines.join("\n")+"\n").to.equal(defaultText);
+    })
+
+    it(".linesDiv() returns the text of the pad as div elements", async function(){
+      let lines = helper.linesDiv();
+      let defaultText = helper.defaultText();
+      expect(Array.isArray(lines)).to.be(true);
+      expect(lines[0]).to.be.an('object');
+      expect(lines[0].text()).to.be.an('string');
+      _.each(defaultText.split("\n"), function(line, index){
+        //last line of default text
+        if(index === lines.length){
+          expect(line).to.equal('');
+        } else {
+          expect(lines[index].text()).to.equal(line);
+        }
+      })
+    })
+
+    it(".edit() defaults to send an edit to the first line", async function(){
+      let firstLine = helper.textLines()[0];
+      await helper.edit("line")
+      expect(helper.textLines()[0]).to.be(`line${firstLine}`);
+    })
+
+    it(".edit() to the line specified with parameter lineNo", async function(){
+      let firstLine = helper.textLines()[0];
+      await helper.edit("second line", 2);
+
+      let text = helper.textLines();
+      expect(text[0]).to.equal(firstLine);
+      expect(text[1]).to.equal("second line");
+    })
+
+    it(".edit() supports sendkeys syntax ({selectall},{del},{enter})", async function(){
+      expect(helper.textLines()[0]).to.not.equal('');
+
+      // select first line
+      helper.linesDiv()[0].sendkeys("{selectall}")
+      // delete first line
+      await helper.edit("{del}")
+
+      expect(helper.textLines()[0]).to.be('');
+      let noOfLines = helper.textLines().length;
+      await helper.edit("{enter}")
+      expect(helper.textLines().length).to.be(noOfLines+1);
+    })
+  })
 });

tests/frontend/specs/responsiveness.js

@@ -13,7 +13,7 @@
 
 // Adapted from John McLear's original test case.
 
-describe('Responsiveness of Editor', function() {
+xdescribe('Responsiveness of Editor', function() {
   // create a new pad before each test run
   beforeEach(function(cb) {
     helper.newPad(cb);

tests/frontend/specs/timeslider_follow.js

@@ -1,55 +1,120 @@
-describe("timeslider", function(){
+describe("timeslider follow", function(){
   //create a new pad before each test run
   beforeEach(function(cb){
     helper.newPad(cb);
-    this.timeout(6000);
   });
 
-  it("follow content as it's added to timeslider", function(done) { // passes
+  it("content as it's added to timeslider", async function() {
-    var inner$ = helper.padInner$;
+    // send 6 revisions
-    var chrome$ = helper.padChrome$;
+    let revs = 6;
-
+    let message = 'a\n\n\n\n\n\n\n\n\n\n';
-    // make some changes to produce 100 revisions
+    let newLines = message.split('\n').length
-    var timePerRev = 900
+    for (let i=0;i<revs;i++){
-      , revs = 10;
+      await helper.edit(message, newLines*i + 1);
-    this.timeout(revs*timePerRev+10000);
-    for(var i=0; i < revs; i++) {
-      setTimeout(function() {
-        // enter 'a' in the first text element
-        inner$("div").last().sendkeys('a\n');
-        inner$("div").last().sendkeys('{enter}');
-        inner$("div").last().sendkeys('{enter}');
-        inner$("div").last().sendkeys('{enter}');
-        inner$("div").last().sendkeys('{enter}');
-      }, timePerRev*i);
     }
 
-    setTimeout(function() {
+    await helper.gotoTimeslider(0);
-      // go to timeslider
+    await helper.waitForPromise(function(){return helper.contentWindow().location.hash === '#0'})
-      $('#iframe-container iframe').attr('src', $('#iframe-container iframe').attr('src')+'/timeslider#0');
 
-      setTimeout(function() {
+    let originalTop = helper.contentWindow().$('#innerdocbody').offset();
-        var timeslider$ = $('#iframe-container iframe')[0].contentWindow.$;
-        var $sliderBar = timeslider$('#ui-slider-bar');
-
-        var latestContents = timeslider$('#innerdocbody').text();
 
     // set to follow contents as it arrives
-        timeslider$('#options-followContents').prop("checked", true);
+    helper.contentWindow().$('#options-followContents').prop("checked", true);
+    helper.contentWindow().$('#playpause_button_icon').click();
 
-        var originalTop = timeslider$('#innerdocbody').offset();
+    let newTop;
-        timeslider$('#playpause_button_icon').click();
+    return helper.waitForPromise(function(){
-
+      newTop = helper.contentWindow().$('#innerdocbody').offset();
-        setTimeout(function() {
+      return newTop.top < originalTop.top;
-          //make sure the text has changed
+    })
-          var newTop = timeslider$('#innerdocbody').offset();
-          expect( originalTop ).not.to.eql( newTop );
-          done();
-        }, 1000);
-
-      }, 2000);
-    }, revs*timePerRev);
   });
 
+  /**
+   * Tests for bug described in #4389
+   * The goal is to scroll to the first line that contains a change right before
+   * the change is applied.
+   *
+   */
+  it("only to lines that exist in the current pad view, see #4389", async function(){
+    // Select everything and clear via delete key
+    let e = helper.padInner$.Event(helper.evtType);
+    e.keyCode = 8; //delete key
+    let lines = helper.linesDiv();
+    helper.selectLines(lines[0], lines[lines.length - 1]); // select all lines
+    // probably unnecessary, but wait for the selection to be Range not Caret
+    await helper.waitForPromise(function(){
+      return !helper.padInner$.document.getSelection().isCollapsed;
+      //only supported in FF57+
+      //return helper.padInner$.document.getSelection().type === 'Range';
+    })
+    helper.padInner$('#innerdocbody').trigger(e);
+    await helper.waitForPromise(function(){
+      return helper.commits.length === 1; 
+    })
+    await helper.edit("Test line\n\n")
+    await helper.edit("Another test line", 3)
+
+    await helper.gotoTimeslider();
+
+    // set to follow contents as it arrives
+    helper.contentWindow().$('#options-followContents').prop("checked", true);
+
+    let oldYPosition = helper.contentWindow().$("#editorcontainerbox")[0].scrollTop;
+    expect(oldYPosition).to.be(0);
+
+    /**
+     * pad content rev 0 [default Pad text]
+     * pad content rev 1 ['']
+     * pad content rev 2 ['Test line','','']
+     * pad content rev 3 ['Test line','','Another test line']
+     */
+
+    // line 3 changed
+    helper.contentWindow().$('#leftstep').click();
+    await helper.waitForPromise(function(){
+      return hasFollowedToLine(3);
+    })
+
+    // line 1 is the first line that changed
+    helper.contentWindow().$('#leftstep').click();
+    await helper.waitForPromise(function(){
+      return hasFollowedToLine(1);
+    })
+
+    // line 1 changed
+    helper.contentWindow().$('#leftstep').click();
+    await helper.waitForPromise(function(){
+      return hasFollowedToLine(1);
+    })
+
+    // line 1 changed
+    helper.contentWindow().$('#rightstep').click();
+    await helper.waitForPromise(function(){
+      return hasFollowedToLine(1);
+    })
+
+    // line 1 is the first line that changed
+    helper.contentWindow().$('#rightstep').click();
+    await helper.waitForPromise(function(){
+      return hasFollowedToLine(1);
+    })
+
+    // line 3 changed
+    helper.contentWindow().$('#rightstep').click();
+    return helper.waitForPromise(function(){
+      return hasFollowedToLine(3);
+    })
+  })
 });
 
+/**
+ * @param {number} lineNum 
+ * @returns {boolean} scrolled to the lineOffset?
+ */
+function hasFollowedToLine(lineNum) {
+  let scrollPosition = helper.contentWindow().$("#editorcontainerbox")[0].scrollTop;
+  let lineOffset = helper.contentWindow().$('#innerdocbody').find(`div:nth-child(${lineNum})`)[0].offsetTop;
+
+  return Math.abs(scrollPosition - lineOffset) < 1;
+}
+

tests/frontend/specs/timeslider_labels.js

@@ -2,63 +2,61 @@ describe("timeslider", function(){
   //create a new pad before each test run
   beforeEach(function(cb){
     helper.newPad(cb);
-    this.timeout(60000);
   });
 
-  it("Shows a date and time in the timeslider and make sure it doesn't include NaN", function(done) {
+  /**
-    var inner$ = helper.padInner$;
+   * @todo test authorsList
-    var chrome$ = helper.padChrome$;
+   */
+  it("Shows a date and time in the timeslider and make sure it doesn't include NaN", async function() {
+    // make some changes to produce 3 revisions
+    let revs = 3;
 
-    // make some changes to produce 100 revisions
+    for(let i=0; i < revs; i++) {
-    var revs = 10;
+      await helper.edit('a\n');
-    this.timeout(60000);
-    for(var i=0; i < revs; i++) {
-      setTimeout(function() {
-        // enter 'a' in the first text element
-        inner$("div").first().sendkeys('a');
-      }, 200);
     }
 
-    setTimeout(function() {
+    await helper.gotoTimeslider(revs);
-      // go to timeslider
+    await helper.waitForPromise(function(){return helper.contentWindow().location.hash === '#'+revs})
-      $('#iframe-container iframe').attr('src', $('#iframe-container iframe').attr('src')+'/timeslider');
 
-      setTimeout(function() {
+    // the datetime of last edit
-        var timeslider$ = $('#iframe-container iframe')[0].contentWindow.$;
+    let timerTimeLast = new Date(helper.timesliderTimerTime()).getTime();
-        var $sliderBar = timeslider$('#ui-slider-bar');
 
-        var latestContents = timeslider$('#padcontent').text();
+    // the day of this revision, e.g. August 12, 2020 (stripped the string "Saved")
+    let dateLast = new Date(helper.revisionDateElem().substr(6)).getTime();
 
-        // Expect the date and time to be shown
+    // the label/revision, ie Version 3
+    let labelLast = helper.revisionLabelElem().text();
 
-        // Click somewhere on the timeslider
+    // the datetime should be a date
-        var e = new jQuery.Event('mousedown');
+    expect( Number.isNaN(timerTimeLast)).to.eql(false);
-        e.clientX = e.pageX = 150;
-        e.clientY = e.pageY = 45;
-        $sliderBar.trigger(e);
 
-        e = new jQuery.Event('mousedown');
+    // the Date object of the day should not be NaN
-        e.clientX = e.pageX = 150;
+    expect( Number.isNaN(dateLast) ).to.eql(false)
-        e.clientY = e.pageY = 40;
-        $sliderBar.trigger(e);
 
-        e = new jQuery.Event('mousedown');
+    // the label should be Version `Number`
-        e.clientX = e.pageX = 150;
+    expect(labelLast).to.be(`Version ${revs}`);
-        e.clientY = e.pageY = 50;
-        $sliderBar.trigger(e);
 
-        $sliderBar.trigger('mouseup')
+    // Click somewhere left on the timeslider to go to revision 0
+    helper.sliderClick(1);
 
-        setTimeout(function() {
+    // the datetime of last edit
-          //make sure the text has changed
+    let timerTime = new Date(helper.timesliderTimerTime()).getTime();
-          expect( timeslider$('#timer').text() ).not.to.eql( "" );
+
-          expect( timeslider$('#revision_date').text() ).not.to.eql( "" );
+    // the day of this revision, e.g. August 12, 2020
-          expect( timeslider$('#revision_label').text() ).not.to.eql( "" );
+    let date = new Date(helper.revisionDateElem().substr(6)).getTime();
-          var includesNaN = timeslider$('#revision_label').text().indexOf("NaN"); // NaN is bad. Naan ist gut
+
-          expect( includesNaN ).to.eql( -1 ); // not quite so tasty, I like curry.
+    // the label/revision, e.g. Version 0
-          done();
+    let label = helper.revisionLabelElem().text();
-        }, 400);
+
-      }, 2000);
+    // the datetime should be a date
-    }, 2000);
+    expect( Number.isNaN(timerTime)).to.eql(false);
+    // the last revision should be newer or have the same time
+    expect(timerTimeLast).to.not.be.lessThan(timerTime);
+
+    // the Date object of the day should not be NaN
+    expect( Number.isNaN(date) ).to.eql(false)
+
+    // the label should be Version 0
+    expect( label ).to.be('Version 0');
   });
 });

tests/frontend/specs/timeslider_numeric_padID.js

@@ -4,64 +4,26 @@ describe("timeslider", function(){
   //create a new pad before each test run
   beforeEach(function(cb){
     helper.newPad(cb, padId);
-    this.timeout(60000);
   });
 
-  it("Makes sure the export URIs are as expected when the padID is numeric", function(done) {
+  it("Makes sure the export URIs are as expected when the padID is numeric", async function() {
-    var inner$ = helper.padInner$;
+    await helper.edit('a\n');
-    var chrome$ = helper.padChrome$;
 
-    // make some changes to produce 100 revisions
+    await helper.gotoTimeslider(1);
-    var revs = 10;
-    this.timeout(60000);
-    for(var i=0; i < revs; i++) {
-      setTimeout(function() {
-        // enter 'a' in the first text element
-        inner$("div").first().sendkeys('a');
-      }, 100);
-    }
 
-    setTimeout(function() {
+    // ensure we are on revision 1
-      // go to timeslider
+    await helper.waitForPromise(function(){return helper.contentWindow().location.hash === '#1'})
-      $('#iframe-container iframe').attr('src', $('#iframe-container iframe').attr('src')+'/timeslider');
 
-      setTimeout(function() {
-        var timeslider$ = $('#iframe-container iframe')[0].contentWindow.$;
-        var $sliderBar = timeslider$('#ui-slider-bar');
-
-        var latestContents = timeslider$('#padcontent').text();
-
-        // Expect the date and time to be shown
-
-        // Click somewhere on the timeslider
-        var e = new jQuery.Event('mousedown');
-        e.clientX = e.pageX = 150;
-        e.clientY = e.pageY = 45;
-        $sliderBar.trigger(e);
-
-        e = new jQuery.Event('mousedown');
-        e.clientX = e.pageX = 150;
-        e.clientY = e.pageY = 40;
-        $sliderBar.trigger(e);
-
-        e = new jQuery.Event('mousedown');
-        e.clientX = e.pageX = 150;
-        e.clientY = e.pageY = 50;
-        $sliderBar.trigger(e);
-
-        $sliderBar.trigger('mouseup')
-
-        setTimeout(function() {
     // expect URI to be similar to
-          // http://192.168.1.48:9001/p/2/2/export/html
+    // http://192.168.1.48:9001/p/2/1/export/html
-          // http://192.168.1.48:9001/p/735773577399/0/export/html
+    // http://192.168.1.48:9001/p/735773577399/1/export/html
-          var exportLink = timeslider$('#exporthtmla').attr('href');
+    let rev1ExportLink = helper.contentWindow().$('#exporthtmla').attr('href');
-          var checkVal = padId + "/0/export/html";
+    expect(rev1ExportLink).to.contain('/1/export/html');
-          var includesCorrectURI = exportLink.indexOf(checkVal);
+
-          expect(includesCorrectURI).to.not.be(-1);
+    // Click somewhere left on the timeslider to go to revision 0
-          done();
+    helper.sliderClick(30);
-        }, 400);
+
-      }, 2000);
+    let rev0ExportLink = helper.contentWindow().$('#exporthtmla').attr('href');
-    }, 2000);
+    expect(rev0ExportLink).to.contain('/0/export/html');
   });
 });