From fb48bc374a362f058edcc43e28a698aa2d44e737 Mon Sep 17 00:00:00 2001 From: Ran Byron Date: Mon, 22 Apr 2019 10:07:22 +0300 Subject: [PATCH] Refactored dashboard drag/resize testing (#3726) --- .../integration/dashboard/dashboard_spec.js | 125 +++++++----------- 1 file changed, 47 insertions(+), 78 deletions(-) diff --git a/client/cypress/integration/dashboard/dashboard_spec.js b/client/cypress/integration/dashboard/dashboard_spec.js index 1e0db5f2c9..6f03ed618a 100644 --- a/client/cypress/integration/dashboard/dashboard_spec.js +++ b/client/cypress/integration/dashboard/dashboard_spec.js @@ -1,4 +1,3 @@ -const DRAG_PLACEHOLDER_SELECTOR = '.grid-stack-placeholder'; const RESIZE_HANDLE_SELECTOR = '.ui-resizable-se'; @@ -82,55 +81,24 @@ function addWidgetByAPI(dashId, queryData = {}) { }); } -function dragBy(wrapper, offsetLeft = 0, offsetTop = 0) { +function dragBy(wrapper, offsetLeft = 0, offsetTop = 0, force = false) { let start; - let end; return wrapper .then(($el) => { start = $el.offset(); return wrapper - .trigger('mousedown', { pageX: start.left, pageY: start.top, which: 1 }) - .trigger('mousemove', { pageX: start.left + offsetLeft, pageY: start.top + offsetTop, which: 1 }); - }) - .then(() => { - // getting end position from placeholder instead of $el - // cause on mouseup, $el animates back to position - // and this is simpler than waiting for animationend - end = Cypress.$(DRAG_PLACEHOLDER_SELECTOR).offset(); - return wrapper.trigger('mouseup'); - }) - .then(() => ({ - left: end.left - start.left, - top: end.top - start.top, - })); + .trigger('mouseover', { force }) + .trigger('mousedown', { pageX: start.left, pageY: start.top, which: 1, force }) + .trigger('mousemove', { pageX: start.left + offsetLeft, pageY: start.top + offsetTop, which: 1, force }) + .trigger('mouseup', { force }); + }); } function resizeBy(wrapper, offsetLeft = 0, offsetTop = 0) { - let start; - let end; - let from; - const getSize = $el => ({ height: $el.height(), width: $el.width() }); - return wrapper - .then(($el) => { - start = getSize($el); - }) - .within(() => cy.get(RESIZE_HANDLE_SELECTOR)) - .then(($handle) => { - from = $handle.show().offset(); // turn on handle and get it's position - return wrapper - .trigger('mouseover', { force: true }) - .trigger('mousedown', { pageX: from.left, pageY: from.top, force: true, which: 1 }) - .trigger('mousemove', { pageX: from.left + offsetLeft, pageY: from.top + offsetTop, force: true, which: 1 }); - }) - .then(() => { - end = getSize(Cypress.$(DRAG_PLACEHOLDER_SELECTOR)); // see comment in dragBy ^^ - return wrapper.trigger('mouseup', { force: true }); - }) - .then(() => ({ - height: end.height - start.height, - width: end.width - start.width, - })); + .within(() => { + dragBy(cy.get(RESIZE_HANDLE_SELECTOR), offsetLeft, offsetTop, true); + }); } describe('Dashboard', () => { @@ -342,21 +310,21 @@ describe('Dashboard', () => { }); it('stays put when dragged under snap threshold', () => { - dragBy(cy.get('@textboxEl'), 90).then((delta) => { - expect(delta.left).to.eq(0); - }); + dragBy(cy.get('@textboxEl'), 90) + .invoke('offset') + .should('have.property', 'left', 15); // no change, 15 -> 15 }); it('moves one column when dragged over snap threshold', () => { - dragBy(cy.get('@textboxEl'), 110).then((delta) => { - expect(delta.left).to.eq(200); - }); + dragBy(cy.get('@textboxEl'), 110) + .invoke('offset') + .should('have.property', 'left', 215); // moved by 200, 15 -> 215 }); it('moves two columns when dragged over snap threshold', () => { - dragBy(cy.get('@textboxEl'), 330).then((delta) => { - expect(delta.left).to.eq(400); - }); + dragBy(cy.get('@textboxEl'), 330) + .invoke('offset') + .should('have.property', 'left', 415); // moved by 400, 15 -> 415 }); }); @@ -365,9 +333,8 @@ describe('Dashboard', () => { cy.route('POST', 'api/widgets/*').as('WidgetSave'); editDashboard(); - dragBy(cy.get('@textboxEl'), 330).then(() => { - cy.wait('@WidgetSave'); - }); + dragBy(cy.get('@textboxEl'), 330); + cy.wait('@WidgetSave'); }); }); @@ -378,21 +345,24 @@ describe('Dashboard', () => { }); it('stays put when dragged under snap threshold', () => { - resizeBy(cy.get('@textboxEl'), 90).then((delta) => { - expect(delta.width).to.eq(0); - }); + resizeBy(cy.get('@textboxEl'), 90) + .then(() => cy.get('@textboxEl')) + .invoke('width') + .should('eq', 600); // no change, 600 -> 600 }); it('moves one column when dragged over snap threshold', () => { - resizeBy(cy.get('@textboxEl'), 110).then((delta) => { - expect(delta.width).to.eq(200); - }); + resizeBy(cy.get('@textboxEl'), 110) + .then(() => cy.get('@textboxEl')) + .invoke('width') + .should('eq', 800); // resized by 200, 600 -> 800 }); it('moves two columns when dragged over snap threshold', () => { - resizeBy(cy.get('@textboxEl'), 400).then((delta) => { - expect(delta.width).to.eq(400); - }); + resizeBy(cy.get('@textboxEl'), 400) + .then(() => cy.get('@textboxEl')) + .invoke('width') + .should('eq', 1000); // resized by 400, 600 -> 1000 }); }); @@ -402,26 +372,26 @@ describe('Dashboard', () => { }); it('stays put when dragged under snap threshold', () => { - resizeBy(cy.get('@textboxEl'), 0, 10).then((delta) => { - expect(delta.height).to.eq(0); - }); + resizeBy(cy.get('@textboxEl'), 0, 10) + .then(() => cy.get('@textboxEl')) + .invoke('height') + .should('eq', 135); // no change, 135 -> 135 }); it('moves one row when dragged over snap threshold', () => { - resizeBy(cy.get('@textboxEl'), 0, 30).then((delta) => { - expect(delta.height).to.eq(50); - }); + resizeBy(cy.get('@textboxEl'), 0, 30) + .then(() => cy.get('@textboxEl')) + .invoke('height') + .should('eq', 185); // resized by 50, , 135 -> 185 }); it('shrinks to minimum', () => { cy.get('@textboxEl') - .then(($el) => { - resizeBy(cy.get('@textboxEl'), -$el.width(), -$el.height()); // resize to 0,0 - return cy.get('@textboxEl'); - }) - .then(($el) => { - expect($el.width()).to.eq(200); - expect($el.height()).to.eq(35); + .then($el => resizeBy(cy.get('@textboxEl'), -$el.width(), -$el.height())) // resize to 0,0 + .then(() => cy.get('@textboxEl')) + .should(($el) => { + expect($el.width()).to.eq(200); // min textbox width + expect($el.height()).to.eq(35); // min textbox height }); }); }); @@ -431,9 +401,8 @@ describe('Dashboard', () => { cy.route('POST', 'api/widgets/*').as('WidgetSave'); editDashboard(); - resizeBy(cy.get('@textboxEl'), 200).then(() => { - cy.wait('@WidgetSave'); - }); + resizeBy(cy.get('@textboxEl'), 200); + cy.wait('@WidgetSave'); }); }); });