Sfoglia il codice sorgente

Internal: Aligned the ToolbarView class (and tests) to the ResizeObserver class that replaced the getResizeObserver() helper.

Aleksander Nowodzinski 6 anni fa
parent
commit
eb14637f31

+ 4 - 6
packages/ckeditor5-ui/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();
 	}
 

+ 51 - 23
packages/ckeditor5-ui/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 );
 			} );
 		} );