Change toolbar max-width test by removing timeout

tests/inlineeditoruiview.js

@@ -13,15 +13,17 @@ import createRoot from '@ckeditor/ckeditor5-engine/tests/view/_utils/createroot.
 import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
 import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
 import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+import ResizeObserver from '@ckeditor/ckeditor5-utils/src/dom/resizeobserver';
 
 const toPx = toUnit( 'px' );
 
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 
-/* globals setTimeout */
+/* globals */
 
 describe( 'InlineEditorUIView', () => {
 	let locale, view, editingView, editingViewRoot;
+	let resizeCallback;
 
 	testUtils.createSinonSandbox();
 
@@ -31,6 +33,20 @@ describe( 'InlineEditorUIView', () => {
 		editingViewRoot = createRoot( editingView.document );
 		view = new InlineEditorUIView( locale, editingView );
 		view.editable.name = editingViewRoot.rootName;
+
+		// Make sure other tests of the editor do not affect tests that follow.
+		// Without it, if an instance of ResizeObserver already exists somewhere undestroyed
+		// in DOM, the following DOM mock will have no effect.
+		ResizeObserver._observerInstance = null;
+
+		testUtils.sinon.stub( global.window, 'ResizeObserver' ).callsFake( callback => {
+			resizeCallback = callback;
+
+			return {
+				observe: sinon.spy(),
+				unobserve: sinon.spy()
+			};
+		} );
 	} );
 
 	describe( 'constructor()', () => {
@@ -102,27 +118,25 @@ describe( 'InlineEditorUIView', () => {
 				expect( view.viewportTopOffset ).to.equal( 0 );
 			} );
 
-			// Sometimes this test can fail, due to the fact that it have to wait for async ResizeObserver execution.
-			it( 'max-width should be set to the width of the editable element', done => {
+			it( 'max-width should be set to the width of the editable element', () => {
 				const viewElement = view.editable.element;
 
+				// View element should be inside the body, otherwise the `Rect` instance will complain
+				// that it's not available in the DOM.
 				global.document.body.appendChild( viewElement );
-				expect( global.document.body.contains( viewElement ) ).to.be.true;
 
 				viewElement.style.width = '400px';
 
-				// Unfortunately we have to wait for async ResizeObserver execution.
-				// ResizeObserver which has been called after changing width of viewElement,
-				// needs 2x requestAnimationFrame or timeout to update a layout.
-				// See more: https://twitter.com/paul_irish/status/912693347315150849/photo/1
-				setTimeout( () => {
-					const editableWidthWithPadding = toPx( new Rect( viewElement ).width );
-					expect( view.toolbar.maxWidth ).to.be.equal( editableWidthWithPadding );
+				resizeCallback( [ {
+					target: viewElement,
+					contentRect: new Rect( viewElement )
+				} ] );
+
+				const editableWidthWithPadding = toPx( new Rect( viewElement ).width );
 
-					global.document.body.removeChild( viewElement );
+				expect( view.toolbar.maxWidth ).to.be.equal( editableWidthWithPadding );
 
-					done();
-				}, 500 );
+				viewElement.remove();
 			} );
 		} );