cypress_test/integration_tests/common/helper.js | 75 ++++++ cypress_test/integration_tests/common/impress.js | 60 +++++ cypress_test/integration_tests/mobile/impress/impress_focus_spec.js | 115 ++++++++-- loleaflet/.eslintrc | 8 loleaflet/src/map/Clipboard.js | 2 loleaflet/src/map/Map.js | 8 6 files changed, 250 insertions(+), 18 deletions(-)
New commits: commit b2ec95dcfddac03c9565762d7032c3d36dd53fe6 Author: Ashod Nakashian <ashod.nakash...@collabora.co.uk> AuthorDate: Sun Mar 1 10:48:10 2020 -0500 Commit: Ashod Nakashian <ashnak...@gmail.com> CommitDate: Tue Mar 17 22:53:11 2020 +0100 cypress: new impress editing tests Single- and double-click starts editing text-boxes in Impress. Single-clicking works only on text, not in the white-space. Merges an existing test with a new one to minimize redundancy where there is overlap. Improved helpers to minimize duplication and update a single place when there are changes to the common operations/checks. ESLint version set to 6 to support the inline closure syntax that 5 doesn't support. This is only used for tests, so perhaps we should have a different ESLint config for leaflet to avoid breaking IE11, which is pre-6. Change-Id: I14ee65b18e310f4ff6b93ce81580b3d6aba0fa03 Reviewed-on: https://gerrit.libreoffice.org/c/online/+/90360 Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoff...@gmail.com> Reviewed-by: Ashod Nakashian <ashnak...@gmail.com> diff --git a/cypress_test/integration_tests/common/helper.js b/cypress_test/integration_tests/common/helper.js index 8d1e6981c..01b3bbff5 100644 --- a/cypress_test/integration_tests/common/helper.js +++ b/cypress_test/integration_tests/common/helper.js @@ -46,6 +46,75 @@ function loadTestDoc(fileName, subFolder, mobile) { cy.get('.leaflet-tile-loaded', {timeout : 10000}); } +// Enable editing if we are in read-only mode. +function enableEditingMobile() { + cy.get('#mobile-edit-button') + .then(function(button) { + if (button.css('display') !== 'none') { + cy.get('#mobile-edit-button') + .click(); + } + }); +} + +// Assert that we have cursor and focus. +function assertCursorAndFocus() { + cy.log('Verifying Cursor and Focus.'); + + // In edit mode, we should have the blinking cursor. + cy.get('.leaflet-cursor.blinking-cursor') + .should('exist'); + cy.get('.leaflet-cursor-container') + .should('exist'); + + cy.log('Cursor and Focus verified.'); +} + +// Select all text via CTRL+A shortcut. +function selectAllText() { + assertCursorAndFocus(); + + cy.log('Select all text'); + + cy.get('textarea.clipboard') + .type('{ctrl}a').wait(300); +} + +// Clear all text by selecting all and deleting. +function clearAllText() { + assertCursorAndFocus(); + + cy.log('Clear all text'); + + cy.get('textarea.clipboard') + .type('{ctrl}a{del}').wait(300); +} + +// Returns the text that should go to the +// clipboard on Ctrl+C. +// So this isn't equivalent to reading the +// clipboard (which Cypress doesn't support). +// Takes a closure f that takes the text +// string as argument. Use as follows: +// helper.getTextForClipboard((htmlText, plainText) => { +// expect(plainText, 'Selection Text').to.equal(testText); +// }); +function getTextForClipboard(f) { + cy.window().then(win => { + var htmlText = win.map._clip._getHtmlForClipboard(); + var plainText = win.map._clip.stripHTML(htmlText); + f(htmlText, plainText); + }); +} + +// Expects getTextForClipboard return the given +// plain-text, and asserts equality. +function expectTextForClipboard(expectedPlainText) { + getTextForClipboard((htmlText, plainText) => { + expect(plainText, 'Selection Text').to.equal(expectedPlainText); + }); +} + function beforeAllMobile(fileName, subFolder) { loadTestDoc(fileName, subFolder, true); @@ -124,6 +193,12 @@ function longPressOnDocument(posX, posY) { } module.exports.loadTestDoc = loadTestDoc; +module.exports.enableEditingMobile = enableEditingMobile; +module.exports.assertCursorAndFocus = assertCursorAndFocus; +module.exports.selectAllText = selectAllText; +module.exports.clearAllText = clearAllText; +module.exports.getTextForClipboard = getTextForClipboard; +module.exports.expectTextForClipboard = expectTextForClipboard; module.exports.afterAll = afterAll; module.exports.beforeAllMobile = beforeAllMobile; module.exports.longPressOnDocument = longPressOnDocument; diff --git a/cypress_test/integration_tests/common/impress.js b/cypress_test/integration_tests/common/impress.js new file mode 100644 index 000000000..db06ea9ef --- /dev/null +++ b/cypress_test/integration_tests/common/impress.js @@ -0,0 +1,60 @@ +/* global cy require */ + +var helper = require('./helper'); + +// Assert that Impress is *not* in Text Edit Mode. +function assertNotInTextEditMode() { + cy.log('Verifying NO Text-Edit context.'); + + // In edit mode, we should have the blinking cursor. + cy.get('.leaflet-cursor.blinking-cursor') + .should('not.exist'); + cy.get('.leaflet-cursor-container') + .should('not.exist'); + + cy.log('NO Text-Edit context verified.'); +} + +// Assert that Impress is in Text Edit Mode. +function assertInTextEditMode() { + cy.log('Verifying Impress in Text-Edit context.'); + + // In edit mode, we should have the edit container. + cy.get('#doc-clipboard-container') + .should('exist'); + + cy.get('.leaflet-zoom-animated') + .should('exist'); + cy.get('.leaflet-interactive') + .should('exist'); + + cy.get('.leaflet-pane.leaflet-overlay-pane svg g') + .should('exist'); + + helper.assertCursorAndFocus(); + + cy.log('Impress Text-Edit context verified.'); +} + +// Enter some text and confirm we get it back. +function typeTextAndVerify(text, expected) { + if (!expected) + expected = text; + + assertInTextEditMode(); + + // Type some text. + cy.get('#document-container') + .type(text); + + // Still in edit mode. + assertInTextEditMode(); + + helper.selectAllText(); + + helper.expectTextForClipboard(expected); +} + +module.exports.assertNotInTextEditMode = assertNotInTextEditMode; +module.exports.assertInTextEditMode = assertInTextEditMode; +module.exports.typeTextAndVerify = typeTextAndVerify; diff --git a/cypress_test/integration_tests/mobile/impress/impress_focus_spec.js b/cypress_test/integration_tests/mobile/impress/impress_focus_spec.js index 46dbc7a9f..a33bede16 100644 --- a/cypress_test/integration_tests/mobile/impress/impress_focus_spec.js +++ b/cypress_test/integration_tests/mobile/impress/impress_focus_spec.js @@ -1,6 +1,7 @@ -/* global describe it cy beforeEach require afterEach*/ +/* global describe it cy beforeEach require afterEach expect */ var helper = require('../../common/helper'); +var impress = require('../../common/impress'); describe('Impress focus tests', function() { beforeEach(function() { @@ -11,9 +12,11 @@ describe('Impress focus tests', function() { helper.afterAll('focus.odp'); }); - it.skip('Basic document focus.', function() { - // Click on edit button - cy.get('#mobile-edit-button').click(); + it('Select text box, no editing', function() { + + helper.enableEditingMobile(); + + impress.assertNotInTextEditMode(); cy.get('#tb_actionbar_item_mobile_wizard') .should('not.have.class', 'disabled'); @@ -22,25 +25,109 @@ describe('Impress focus tests', function() { cy.document().its('activeElement.tagName') .should('be.eq', 'BODY'); - // One tap on a text shape does not grab the focus to the document + // One tap on a text shape, on the whitespace area, + // does not start editing. cy.get('#document-container') - .click(); + .then(function(items) { + expect(items).have.length(1); - // Shape selection - cy.get('.leaflet-pane.leaflet-overlay-pane svg g') - .should('exist'); + // Click in the left-bottom corner where there is no text. + let posX = items[0].getBoundingClientRect().left + items[0].getBoundingClientRect().width / 4; + let posY = items[0].getBoundingClientRect().top + items[0].getBoundingClientRect().height / 2; + cy.log('Got left-bottom quantile at (' + posX + ', ' + posY + ')'); + + cy.get('#document-container') + .click(posX, posY); + }); // No focus cy.document().its('activeElement.tagName') .should('be.eq', 'BODY'); - // Double tap on a text shape gives the focus to the document + // Shape selection. + cy.get('.leaflet-pane.leaflet-overlay-pane svg g') + .should('exist'); + + // But no editing. + impress.assertNotInTextEditMode(); + }); + + it('Double-click to edit', function() { + + helper.enableEditingMobile(); + + impress.assertNotInTextEditMode(); + + // Enter edit mode by double-clicking. + cy.get('#document-container') + .dblclick(); + + impress.typeTextAndVerify('Hello Impress'); + + // End editing. + cy.get('#document-container') + .type('{esc}').wait(500); + + impress.assertNotInTextEditMode(); + + // Enter edit mode by double-clicking again. cy.get('#document-container') .dblclick(); - // Document has the focus - // TODO: Focus is inconsistent here. - //cy.document().its('activeElement.className') - // .should('be.eq', 'clipboard'); + // Clear the text. + helper.clearAllText(); + + impress.typeTextAndVerify('Bazinga Impress'); + }); + + it('Single-click to edit', function() { + + helper.enableEditingMobile(); + + impress.assertNotInTextEditMode(); + + cy.get('#document-container') + .then(function(items) { + expect(items).have.length(1); + + // Click in the top left corner where there is no text. + let posX = items[0].getBoundingClientRect().width / 2; + let posY = items[0].getBoundingClientRect().height / 2; + cy.log('Got center coordinates at (' + posX + ', ' + posY + ')'); + + // Start editing; click on the text. + cy.get('#document-container') + .click(posX, posY); + + impress.typeTextAndVerify('Hello Impress'); + + // End editing. + cy.get('#document-container') + .type('{esc}').wait(500); + + impress.assertNotInTextEditMode(); + + // Single-click to re-edit. + cy.get('#document-container') + .then(function(items) { + expect(items).have.length(1); + + cy.get('#document-container') + .click(posX, posY).wait(500); + + impress.assertInTextEditMode(); + + // Clear the text. + helper.clearAllText(); + + impress.typeTextAndVerify('Bazinga Impress'); + + // End editing. + cy.get('#document-container') + .type('{esc}').wait(500); + + impress.assertNotInTextEditMode(); + }); + }); }); }); diff --git a/loleaflet/.eslintrc b/loleaflet/.eslintrc index a5a054eef..7a0d4747f 100644 --- a/loleaflet/.eslintrc +++ b/loleaflet/.eslintrc @@ -26,5 +26,11 @@ }, "env": { "browser": true - } + }, + "parserOptions": { + "ecmaVersion": 6, + "sourceType": "module", + "ecmaFeatures": { + } + }, } diff --git a/loleaflet/src/map/Clipboard.js b/loleaflet/src/map/Clipboard.js index 2a5056824..890c67fd5 100644 --- a/loleaflet/src/map/Clipboard.js +++ b/loleaflet/src/map/Clipboard.js @@ -610,7 +610,7 @@ L.Clipboard = L.Class.extend({ } else { - console.log('help did not arive for ' + operation); + console.log('help did not arrive for ' + operation); that._warnCopyPaste(); } }, 150 /* ms */); diff --git a/loleaflet/src/map/Map.js b/loleaflet/src/map/Map.js index 97a8eb6b6..4826cee18 100644 --- a/loleaflet/src/map/Map.js +++ b/loleaflet/src/map/Map.js @@ -97,6 +97,11 @@ L.Map = L.Evented.extend({ // lead to URL's of the form <webserver>//insertfile/... options.webserver = options.webserver.replace(/\/*$/, ''); + if (L.Browser.cypressTest) { + // Expose us in test mode. + window.map = this; + } + this._handlers = []; this._layers = {}; this._zoomBoundLayers = {}; @@ -188,8 +193,7 @@ L.Map = L.Evented.extend({ L.DomUtil.addClass(L.DomUtil.get('main-menu'), 'readonly'); L.DomUtil.addClass(L.DomUtil.get('presentation-controls-wrapper'), 'readonly'); L.DomUtil.addClass(L.DomUtil.get('spreadsheet-row-column-frame'), 'readonly'); - } - else { + } else { L.DomUtil.removeClass(this._container.parentElement, 'readonly'); if (!L.Browser.mobile) { L.DomUtil.removeClass(L.DomUtil.get('toolbar-wrapper'), 'readonly'); _______________________________________________ Libreoffice-commits mailing list libreoffice-comm...@lists.freedesktop.org https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits