From cb89b76c367c0da3313a7a82869e33027c56ff14 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 28 Jan 2020 10:51:25 +0100 Subject: [PATCH] Internal: Aligned the ToolbarView class (and tests) to the ResizeObserver class that replaced the getResizeObserver() helper. --- src/toolbar/toolbarview.js | 10 ++--- tests/toolbar/toolbarview.js | 74 +++++++++++++++++++++++++----------- 2 files changed, 55 insertions(+), 29 deletions(-) diff --git a/src/toolbar/toolbarview.js b/src/toolbar/toolbarview.js index ca06b4b4..990bbd34 100644 --- a/src/toolbar/toolbarview.js +++ b/src/toolbar/toolbarview.js @@ -14,7 +14,7 @@ import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker'; import FocusCycler from '../focuscycler'; import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler'; import ToolbarSeparatorView from './toolbarseparatorview'; -import getResizeObserver from '@ckeditor/ckeditor5-utils/src/dom/getresizeobserver'; +import ResizeObserver from '@ckeditor/ckeditor5-utils/src/dom/resizeobserver'; import preventDefault from '../bindings/preventdefault.js'; import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect'; import global from '@ckeditor/ckeditor5-utils/src/dom/global'; @@ -484,7 +484,7 @@ class DynamicGrouping { * **Note:** Created in {@link #_enableGroupingOnResize}. * * @readonly - * @member {module:utils/dom/getresizeobserver~ResizeObserver} + * @member {module:utils/dom/resizeobserver~ResizeObserver} */ this.resizeObserver = null; @@ -570,7 +570,7 @@ class DynamicGrouping { // so let's make sure it's actually destroyed along with the toolbar. this.groupedItemsDropdown.destroy(); - this.resizeObserver.disconnect(); + this.resizeObserver.destroy(); } /** @@ -673,7 +673,7 @@ class DynamicGrouping { let previousWidth; // TODO: Consider debounce. - this.resizeObserver = getResizeObserver( ( [ entry ] ) => { + this.resizeObserver = new ResizeObserver( this.viewElement, entry => { if ( !previousWidth || previousWidth !== entry.contentRect.width ) { this._updateGrouping(); @@ -681,8 +681,6 @@ class DynamicGrouping { } } ); - this.resizeObserver.observe( this.viewElement ); - this._updateGrouping(); } diff --git a/tests/toolbar/toolbarview.js b/tests/toolbar/toolbarview.js index aae2fec1..4362e7f4 100644 --- a/tests/toolbar/toolbarview.js +++ b/tests/toolbar/toolbarview.js @@ -443,12 +443,26 @@ describe( 'ToolbarView', () => { describe( 'toolbar with a dynamic item grouping', () => { let locale, view, groupedItems, ungroupedItems, groupedItemsDropdown; + let resizeCallback, observeSpy, unobserveSpy; beforeEach( () => { + observeSpy = sinon.spy(); + unobserveSpy = sinon.spy(); + + testUtils.sinon.stub( global.window, 'ResizeObserver' ).callsFake( callback => { + resizeCallback = callback; + + return { + observe: observeSpy, + unobserve: unobserveSpy + }; + } ); + locale = new Locale(); view = new ToolbarView( locale, { shouldGroupWhenFull: true } ); + view.render(); view.element.style.width = '200px'; document.body.appendChild( view.element ); @@ -595,25 +609,18 @@ describe( 'ToolbarView', () => { } ); describe( 'render()', () => { - let view, resizeObserverInstance, groupedItems, ungroupedItems; + let view, groupedItems, ungroupedItems; beforeEach( () => { - function FakeResizeObserver( callback ) { - this._callback = callback; - } - - FakeResizeObserver.prototype.observe = sinon.spy(); - FakeResizeObserver.prototype.disconnect = sinon.spy(); - - testUtils.sinon.stub( global.window, 'ResizeObserver' ).value( FakeResizeObserver ); - view = new ToolbarView( locale, { shouldGroupWhenFull: true } ); + observeSpy.resetHistory(); + unobserveSpy.resetHistory(); + view.render(); - resizeObserverInstance = view._behavior.resizeObserver; groupedItems = view._behavior.groupedItems; ungroupedItems = view._behavior.ungroupedItems; @@ -626,8 +633,8 @@ describe( 'ToolbarView', () => { } ); it( 'starts observing toolbar resize immediatelly after render', () => { - sinon.assert.calledOnce( resizeObserverInstance.observe ); - sinon.assert.calledWithExactly( resizeObserverInstance.observe, view.element ); + sinon.assert.calledOnce( observeSpy ); + sinon.assert.calledWithExactly( observeSpy, view.element ); } ); it( 'updates the UI when the toolbar is being resized (expanding)', () => { @@ -639,12 +646,18 @@ describe( 'ToolbarView', () => { view.items.add( focusable() ); view.items.add( focusable() ); - resizeObserverInstance._callback( [ { contentRect: new Rect( view.element ) } ] ); + resizeCallback( [ { + target: view.element, + contentRect: new Rect( view.element ) + } ] ); expect( ungroupedItems ).to.have.length( 1 ); expect( groupedItems ).to.have.length( 4 ); view.element.style.width = '500px'; - resizeObserverInstance._callback( [ { contentRect: new Rect( view.element ) } ] ); + resizeCallback( [ { + target: view.element, + contentRect: new Rect( view.element ) + } ] ); expect( ungroupedItems ).to.have.length( 5 ); expect( groupedItems ).to.have.length( 0 ); @@ -659,12 +672,18 @@ describe( 'ToolbarView', () => { view.items.add( focusable() ); view.items.add( focusable() ); - resizeObserverInstance._callback( [ { contentRect: new Rect( view.element ) } ] ); + resizeCallback( [ { + target: view.element, + contentRect: new Rect( view.element ) + } ] ); expect( ungroupedItems ).to.have.length( 5 ); expect( groupedItems ).to.have.length( 0 ); view.element.style.width = '200px'; - resizeObserverInstance._callback( [ { contentRect: new Rect( view.element ) } ] ); + resizeCallback( [ { + target: view.element, + contentRect: new Rect( view.element ) + } ] ); expect( ungroupedItems ).to.have.length( 1 ); expect( groupedItems ).to.have.length( 4 ); @@ -682,11 +701,17 @@ describe( 'ToolbarView', () => { sinon.spy( view._behavior, '_updateGrouping' ); view.element.style.width = '500px'; - resizeObserverInstance._callback( [ { contentRect: new Rect( view.element ) } ] ); + resizeCallback( [ { + target: view.element, + contentRect: new Rect( view.element ) + } ] ); sinon.assert.calledOnce( view._behavior._updateGrouping ); view.element.style.height = '500px'; - resizeObserverInstance._callback( [ { contentRect: new Rect( view.element ) } ] ); + resizeCallback( [ { + target: view.element, + contentRect: new Rect( view.element ) + } ] ); sinon.assert.calledOnce( view._behavior._updateGrouping ); } ); @@ -695,7 +720,10 @@ describe( 'ToolbarView', () => { testUtils.sinon.spy( view._behavior, '_updateGrouping' ); sinon.assert.notCalled( view._behavior._updateGrouping ); - resizeObserverInstance._callback( [ { contentRect: new Rect( view.element ) } ] ); + resizeCallback( [ { + target: view.element, + contentRect: new Rect( view.element ) + } ] ); sinon.assert.calledOnce( view._behavior._updateGrouping ); } ); @@ -726,7 +754,7 @@ describe( 'ToolbarView', () => { sinon.assert.calledOnce( groupedItemsDropdown.destroy ); } ); - it( 'disconnects the #resizeObserver', () => { + it( 'should destroy the #resizeObserver', () => { view.element.style.width = '200px'; const itemA = focusable(); @@ -739,10 +767,10 @@ describe( 'ToolbarView', () => { view.items.add( itemC ); view.items.add( itemD ); - sinon.spy( view._behavior.resizeObserver, 'disconnect' ); + sinon.spy( view._behavior.resizeObserver, 'destroy' ); view.destroy(); - sinon.assert.calledOnce( view._behavior.resizeObserver.disconnect ); + sinon.assert.calledOnce( view._behavior.resizeObserver.destroy ); } ); } );