diff --git a/cypress/e2e/resize-handle.component.cy.ts b/cypress/e2e/resize-handle.component.cy.ts index b281102..fbe773b 100644 --- a/cypress/e2e/resize-handle.component.cy.ts +++ b/cypress/e2e/resize-handle.component.cy.ts @@ -12,17 +12,37 @@ describe('ResizeHandleComponent', () => { cy.get('div[data-f-node-id=\'f-node-0\']').invoke('css', 'width') .should('equal', '120px'); - cy.get('div[data-f-node-id=\'f-node-0\'] div[data-f-resize-handle-type$=\'TOP\']') - .trigger('mousedown', { button: 0, force: true }) - .trigger('mousemove', { clientX: 0, clientY: 0 }) - .trigger('mousemove', { clientX: -50, clientY: -50 }) - .trigger('mouseup'); - - cy.get('div[data-f-node-id=\'f-node-0\']').invoke('css', 'transform') - .should('equal', 'matrix(1, 0, 0, 1, -50, -50)'); - - cy.get('div[data-f-node-id=\'f-node-0\']').invoke('css', 'width') - .should('equal', '170px'); + cy.get('div[data-f-node-id=\'f-node-0\'] div[data-f-resize-handle-type$=\'TOP\']').then(($target) => { + const targetRect = $target[ 0 ].getBoundingClientRect(); + const endY = targetRect.y; + const endX = targetRect.x; + + cy.log('YYY', endX, endY); + + cy.get('div[data-f-node-id=\'f-node-0\'] div[data-f-resize-handle-type$=\'TOP\']') + .trigger('mousedown', { button: 0, force: true }) + .trigger('mousemove', { clientX: 0 }) + .trigger('mousemove', { clientX: endY - 50 }) + .trigger('mouseup', { force: true }); + + cy.get('div[data-f-node-id=\'f-node-0\']').invoke('css', 'transform') + .should('equal', 'matrix(1, 0, 0, 1, 108, 0)'); + + cy.get('div[data-f-node-id=\'f-node-0\']').invoke('css', 'width') + .should('equal', '12px'); + }); + + + // cy.get('div[data-f-node-id=\'f-node-0\'] div[data-f-resize-handle-type$=\'TOP\']') + // .trigger('mousedown', { button: 0, force: true }) + // .trigger('mousemove', { clientX: -50, clientY: -50 }) + // .trigger('mouseup'); + // + // cy.get('div[data-f-node-id=\'f-node-0\']').invoke('css', 'transform') + // .should('equal', 'matrix(1, 0, 0, 1, -50, -50)'); + // + // cy.get('div[data-f-node-id=\'f-node-0\']').invoke('css', 'width') + // .should('equal', '170px'); }); });