Resizable: add some event tests (#12606)

DevExpress · Apr 9, 2020 · 40115d5 · 40115d5
1 parent 6cb5169
commit 40115d5
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 10 deletions.
diff --git a/js/ui/resizable.js b/js/ui/resizable.js
@@ -98,6 +98,7 @@ const Resizable = DOMComponent.inherit({
     },
 
     _renderHandles: function() {
+        this._handles = [];
         const handles = this.option('handles');
 
         if(handles === 'none') {
@@ -114,21 +115,19 @@ const Resizable = DOMComponent.inherit({
         inArray('bottom', directions) + 1 && inArray('left', directions) + 1 && this._renderHandle('corner-bottom-left');
         inArray('top', directions) + 1 && inArray('right', directions) + 1 && this._renderHandle('corner-top-right');
         inArray('top', directions) + 1 && inArray('left', directions) + 1 && this._renderHandle('corner-top-left');
+        this._attachEventHandlers();
     },
 
     _renderHandle: function(handleName) {
-        const $element = this.$element();
-        const $handle = $('<div>');
-
-        $handle
+        const $handle = $('<div>')
             .addClass(RESIZABLE_HANDLE_CLASS)
             .addClass(RESIZABLE_HANDLE_CLASS + '-' + handleName)
-            .appendTo($element);
+            .appendTo(this.$element());
 
-        this._attachEventHandlers($handle);
+        this._handles.push($handle);
     },
 
-    _attachEventHandlers: function($handle) {
+    _attachEventHandlers: function() {
         if(this.option('disabled')) {
             return;
         }
@@ -138,12 +137,24 @@ const Resizable = DOMComponent.inherit({
         handlers[DRAGSTART_EVENT_NAME] = this._dragHandler.bind(this);
         handlers[DRAGSTART_END_EVENT_NAME] = this._dragEndHandler.bind(this);
 
-        eventsEngine.on($handle, handlers, {
-            direction: 'both',
-            immediate: true
+        this._handles.forEach(function(handleElement) {
+            eventsEngine.on(handleElement, handlers, {
+                direction: 'both',
+                immediate: true
+            });
+        });
+    },
+
+    _detachEventHandlers: function() {
+        this._handles.forEach(function(handleElement) {
+            eventsEngine.off(handleElement);
         });
     },
 
+    _toggleEventHandlers: function(shouldAttachEvents) {
+        shouldAttachEvents ? this._attachEventHandlers() : this._detachEventHandlers();
+    },
+
     _dragStartHandler: function(e) {
         const $element = this.$element();
         if($element.is('.dx-state-disabled, .dx-state-disabled *')) {
@@ -412,6 +423,9 @@ const Resizable = DOMComponent.inherit({
     _optionChanged: function(args) {
         switch(args.name) {
             case 'disabled':
+                this._toggleEventHandlers(!args.value);
+                this.callBase(args);
+                break;
             case 'handles':
                 this._invalidate();
                 break;

diff --git a/testing/tests/DevExpress.ui.widgets/resizable.tests.js b/testing/tests/DevExpress.ui.widgets/resizable.tests.js
@@ -741,6 +741,32 @@ QUnit.module('actions', () => {
         pointer.dragStart();
     });
 
+    QUnit.test('onResizeStart - subscription by "on" method', function(assert) {
+        assert.expect(3);
+
+        const resizeStartHandler = function(e) {
+            assert.ok(true, 'onResizeStart action fired');
+
+            assert.equal(e.width, $resizable.outerWidth(), 'width passed as event argument');
+            assert.equal(e.height, $resizable.outerHeight(), 'height passed as event argument');
+        };
+
+        const resize = () => {
+            const $handle = $resizable.find('.' + RESIZABLE_HANDLE_CORNER_CLASS + '-bottom-right');
+            const pointer = pointerMock($handle).start();
+            pointer.dragStart();
+        };
+
+        const $resizable = $('#resizable').dxResizable();
+        const instance = $resizable.dxResizable('instance');
+
+        instance.on('resizeStart', resizeStartHandler);
+        resize();
+
+        instance.off('resizeStart', resizeStartHandler);
+        resize();
+    });
+
     QUnit.test('onResize action should be fired during resize', function(assert) {
         assert.expect(3);
 
@@ -758,6 +784,32 @@ QUnit.module('actions', () => {
         pointer.dragStart().drag(10, 0);
     });
 
+    QUnit.test('onResize action - subscription by "on" method', function(assert) {
+        assert.expect(3);
+
+        const resizeHandler = function(e) {
+            assert.ok(true, 'onResize action fired');
+
+            assert.equal(e.width, $resizable.outerWidth(), 'width passed as event argument');
+            assert.equal(e.height, $resizable.outerHeight(), 'height passed as event argument');
+        };
+
+        const resize = () => {
+            const $handle = $resizable.find('.' + RESIZABLE_HANDLE_CORNER_CLASS + '-bottom-right');
+            const pointer = pointerMock($handle).start();
+            pointer.dragStart().drag(10, 0);
+        };
+
+        const $resizable = $('#resizable').dxResizable();
+        const instance = $resizable.dxResizable('instance');
+
+        instance.on('resize', resizeHandler);
+        resize();
+
+        instance.off('resize', resizeHandler);
+        resize();
+    });
+
     QUnit.test('dxresize event should be fired during resize', function(assert) {
         const $resizable = $('#resizable').dxResizable(); const $handle = $resizable.find('.' + RESIZABLE_HANDLE_CORNER_CLASS + '-bottom-right'); const pointer = pointerMock($handle).start();
 
@@ -813,5 +865,29 @@ QUnit.module('actions', () => {
 
         pointer.dragStart().drag(10, 0).dragEnd();
     });
+
+    QUnit.test('onResizeEnd action - subscription by "on" method', function(assert) {
+        const resizeEndHandler = function(e) {
+            assert.ok(true, 'onResizeEnd action fired');
+
+            assert.equal(e.width, $resizable.outerWidth(), 'width passed as event argument');
+            assert.equal(e.height, $resizable.outerHeight(), 'height passed as event argument');
+        };
+
+        const resize = () => {
+            const $handle = $resizable.find('.' + RESIZABLE_HANDLE_CORNER_CLASS + '-bottom-right');
+            const pointer = pointerMock($handle).start();
+            pointer.dragStart().drag(10, 0).dragEnd();
+        };
+
+        const $resizable = $('#resizable').dxResizable();
+        const instance = $resizable.dxResizable('instance');
+
+        instance.on('resizeEnd', resizeEndHandler);
+        resize();
+
+        instance.off('resizeEnd', resizeEndHandler);
+        resize();
+    });
 });