From f2034ad36804db63d708620b8da35eb7f2d330e2 Mon Sep 17 00:00:00 2001 From: Guilherme Goncalves Date: Wed, 24 Mar 2021 17:17:43 -0300 Subject: [PATCH] tests: Add regression tests for character composition race See: https://github.com/ether/etherpad-lite/issues/4978 --- src/tests/frontend/helper/multipleUsers.js | 147 +++++++++++++++++++++ src/tests/frontend/index.html | 1 + src/tests/frontend/specs/collab_client.js | 102 ++++++++++++++ 3 files changed, 250 insertions(+) create mode 100644 src/tests/frontend/helper/multipleUsers.js create mode 100644 src/tests/frontend/specs/collab_client.js diff --git a/src/tests/frontend/helper/multipleUsers.js b/src/tests/frontend/helper/multipleUsers.js new file mode 100644 index 000000000..08ed50217 --- /dev/null +++ b/src/tests/frontend/helper/multipleUsers.js @@ -0,0 +1,147 @@ +'use strict'; + +helper.multipleUsers = { + thisUser: null, + otherUser: null, + + // open the same pad on different frames (allows concurrent editions to pad) + async init() { + // do some cleanup, in case any of the tests failed on the previous run + const currentToken = _createTokenForCurrentUser(); + const otherToken = _createTokenForAnotherUser(); + _removeExistingTokensFromCookie(); + + this.thisUser = { + $frame: $('#iframe-container iframe'), + token: currentToken, + // we'll switch between pads, need to store current values of helper.pad* + // to be able to restore those values later + padChrome$: helper.padChrome$, + padOuter$: helper.padOuter$, + padInner$: helper.padInner$, + }; + + this.otherUser = { + token: otherToken, + }; + + // need to perform as the other user, otherwise we'll get the userdup error message + await this.performAsOtherUser(this._createFrameForOtherUser.bind(this)); + }, + + async performAsOtherUser(action) { + _startActingLike(this.otherUser); + await action(); + // go back to initial state when we're done + _startActingLike(this.thisUser); + }, + + close() { + this.thisUser.$frame.attr('style', ''); // make the default ocopy the full height + this.otherUser.$frame.remove(); + }, + + async _loadJQueryCodeForOtherFrame() { + const code = await $.get('/static/js/jquery.js'); + + // make sure we don't override existing jquery + const jQueryCode = `if(typeof $ === "undefined") {\n${code}\n}`; + const sendkeysCode = await $.get('/tests/frontend/lib/sendkeys.js'); + const codesToLoad = [jQueryCode, sendkeysCode]; + + this.otherUser.padChrome$ = _getFrameJQuery(codesToLoad, this.otherUser.$frame); + this.otherUser.padOuter$ = + _getFrameJQuery(codesToLoad, this.otherUser.padChrome$('iframe[name="ace_outer"]')); + this.otherUser.padInner$ = + _getFrameJQuery(codesToLoad, this.otherUser.padOuter$('iframe[name="ace_inner"]')); + + // update helper vars now that they are available + helper.padChrome$ = this.otherUser.padChrome$; + helper.padOuter$ = this.otherUser.padOuter$; + helper.padInner$ = this.otherUser.padInner$; + }, + + async _createFrameForOtherUser() { + // create the iframe + const padUrl = this.thisUser.$frame.attr('src'); + this.otherUser.$frame = $(``); + + // place one iframe (visually) below the other + this.thisUser.$frame.attr('style', 'height: 50%'); + this.otherUser.$frame.attr('style', 'height: 50%; top: 50%'); + this.otherUser.$frame.insertAfter(this.thisUser.$frame); + + // wait for other pad to load + await new Promise((resolve) => this.otherUser.$frame.one('load', resolve)); + + const $editorLoadingMessage = this.otherUser.$frame.contents().find('#editorloadingbox'); + const $errorMessageModal = this.thisUser.$frame.contents().find('#connectivity .userdup'); + + await helper.waitForPromise(() => { + const finishedLoadingOtherFrame = !$editorLoadingMessage.is(':visible'); + // make sure we don't get the userdup by mistake + const didNotDetectUserDup = !$errorMessageModal.is(':visible'); + + return finishedLoadingOtherFrame && didNotDetectUserDup; + }, 50000); + + // need to get values for this.otherUser.pad* vars + await this._loadJQueryCodeForOtherFrame(); + }, +}; + +// adapted form helper.js on Etherpad code +const _getFrameJQuery = (codesToLoad, $iframe) => { + const win = $iframe[0].contentWindow; + const doc = win.document; + + for (let i = 0; i < codesToLoad.length; i++) { + win.eval(codesToLoad[i]); + } + + win.$.window = win; + win.$.document = doc; + + return win.$; +}; + +const _getDocumentWithCookie = () => ( + helper.padChrome$ + ? helper.padChrome$.document + : helper.multipleUsers.thisUser.$frame.get(0).contentDocument +); + +const _setTokenOnCookie = (token) => { + _getDocumentWithCookie().cookie = `token=${token};secure`; +}; + +const _getTokenFromCookie = () => { + const fullCookie = _getDocumentWithCookie().cookie; + return fullCookie.replace(/.*token=([^;]*).*/, '$1').trim(); +}; + +const _createTokenForCurrentUser = () => ( + _getTokenFromCookie().replace(/-other_user.*/g, '') +); + +const _createTokenForAnotherUser = () => { + const currentToken = _createTokenForCurrentUser(); + return `${currentToken}-other_user${helper.randomString(4)}`; +}; + +const _startActingLike = (user) => { + // update helper references, so other methods will act as if the main frame + // was the one we're using from now on + helper.padChrome$ = user.padChrome$; + helper.padOuter$ = user.padOuter$; + helper.padInner$ = user.padInner$; + + _setTokenOnCookie(user.token); +}; + +const _removeExistingTokensFromCookie = () => { + // Expire cookie, to make sure it is removed by the browser. + // See https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie#Example_4_Reset_the_previous_cookie + _getDocumentWithCookie().cookie = 'token=foo;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/p'; + _getDocumentWithCookie().cookie = 'token=foo;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/'; +}; diff --git a/src/tests/frontend/index.html b/src/tests/frontend/index.html index 3d806f626..e8a8012fb 100644 --- a/src/tests/frontend/index.html +++ b/src/tests/frontend/index.html @@ -20,6 +20,7 @@ + diff --git a/src/tests/frontend/specs/collab_client.js b/src/tests/frontend/specs/collab_client.js new file mode 100644 index 000000000..307e37908 --- /dev/null +++ b/src/tests/frontend/specs/collab_client.js @@ -0,0 +1,102 @@ +'use strict'; + +describe('Messages in the COLLABROOM', function () { + const user1Text = 'text created by user 1'; + const user2Text = 'text created by user 2'; + + const triggerEvent = (eventName) => { + const event = new helper.padInner$.Event(eventName); + helper.padInner$('#innerdocbody').trigger(event); + }; + + const replaceLineText = async (lineNumber, newText) => { + const inner$ = helper.padInner$; + + // get the line element + const $line = inner$('div').eq(lineNumber); + + // simulate key presses to delete content + $line.sendkeys('{selectall}'); // select all + $line.sendkeys('{del}'); // clear the first line + $line.sendkeys(newText); // insert the string + + await helper.waitForPromise(() => inner$('div').eq(lineNumber).text() === newText); + }; + + before(async function () { + this.timeout(10000); + await helper.aNewPad(); + await helper.multipleUsers.init(); + }); + + it('bug #4978 regression test', async function () { + // The bug was triggered by receiving a change from another user while simultaneously composing + // a character and waiting for an acknowledgement of a previously sent change. + + // User 1 starts sending a change to the server. + let sendStarted; + const finishSend = (() => { + const socketJsonObj = helper.padChrome$.window.pad.socket.json; + const sendBackup = socketJsonObj.send; + let startSend; + sendStarted = new Promise((resolve) => { startSend = resolve; }); + let finishSend; + const sendP = new Promise((resolve) => { finishSend = resolve; }); + socketJsonObj.send = (...args) => { + startSend(); + sendP.then(() => { + socketJsonObj.send = sendBackup; + socketJsonObj.send(...args); + }); + }; + return finishSend; + })(); + await replaceLineText(0, user1Text); + await sendStarted; + + // User 1 starts a character composition. + triggerEvent('compositionstart'); + + // User 1 receives a change from user 2. (User 1 will not incorporate the change until the + // composition is completed.) + const user2ChangeArrivedAtUser1 = new Promise((resolve) => { + const cc = helper.padChrome$.window.pad.collabClient; + const origHM = cc.handleMessageFromServer; + cc.handleMessageFromServer = (evt) => { + if (evt.type === 'COLLABROOM' && evt.data.type === 'NEW_CHANGES') { + cc.handleMessageFromServer = origHM; + resolve(); + } + return origHM.call(cc, evt); + }; + }); + await helper.multipleUsers.performAsOtherUser(async () => await replaceLineText(1, user2Text)); + await user2ChangeArrivedAtUser1; + + // User 1 finishes sending the change to the server. User 2 should see the changes right away. + finishSend(); + await helper.multipleUsers.performAsOtherUser(async () => await helper.waitForPromise( + () => helper.padInner$('div').eq(0).text() === user1Text)); + + // User 1 finishes the character composition. User 2's change should then become visible. + triggerEvent('compositionend'); + await helper.waitForPromise(() => helper.padInner$('div').eq(1).text() === user2Text); + + // Users 1 and 2 make some more changes. + await helper.multipleUsers.performAsOtherUser(async () => await replaceLineText(3, user2Text)); + await replaceLineText(2, user1Text); + + // All changes should appear in both views. + const assertContent = async () => await helper.waitForPromise(() => { + const expectedLines = [ + user1Text, + user2Text, + user1Text, + user2Text, + ]; + return expectedLines.every((txt, i) => helper.padInner$('div').eq(i).text() === txt); + }); + await assertContent(); + await helper.multipleUsers.performAsOtherUser(assertContent); + }); +});