Tests: Refactoring in InlineEditorUIView tests.

tests/inlineeditoruiview.js

@@ -19,8 +19,6 @@ const toPx = toUnit( 'px' );
 
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 
-/* globals */
-
 describe( 'InlineEditorUIView', () => {
 	let locale, view, editingView, editingViewRoot;
 	let resizeCallback;
@@ -49,6 +47,10 @@ describe( 'InlineEditorUIView', () => {
 		} );
 	} );
 
+	afterEach( () => {
+		view.destroy();
+	} );
+
 	describe( 'constructor()', () => {
 		describe( '#toolbar', () => {
 			it( 'is created', () => {
@@ -62,6 +64,16 @@ describe( 'InlineEditorUIView', () => {
 			it( 'is not rendered', () => {
 				expect( view.toolbar.isRendered ).to.be.false;
 			} );
+
+			it( 'should have the shouldGroupWhenFull option set based on constructor options', () => {
+				const view = new InlineEditorUIView( locale, editingView, null, {
+					shouldToolbarGroupWhenFull: true
+				} );
+
+				expect( view.toolbar.options.shouldGroupWhenFull ).to.be.true;
+
+				view.destroy();
+			} );
 		} );
 
 		describe( '#panel', () => {
@@ -99,16 +111,9 @@ describe( 'InlineEditorUIView', () => {
 
 	describe( 'render()', () => {
 		beforeEach( () => {
-			// We need to set this option explicitly before render phase,
-			// otherwise it is `undefined` and toolbar items grouping will be skipped in tests.
-			view.toolbar.options.shouldGroupWhenFull = true;
 			view.render();
 		} );
 
-		afterEach( () => {
-			view.destroy();
-		} );
-
 		describe( '#toolbar', () => {
 			it( 'is given the right CSS classes', () => {
 				expect( view.toolbar.element.classList.contains( 'ck-toolbar_floating' ) ).to.be.true;
@@ -118,25 +123,46 @@ describe( 'InlineEditorUIView', () => {
 				expect( view.viewportTopOffset ).to.equal( 0 );
 			} );
 
-			it( 'max-width should be set to the width of the editable element', () => {
-				const viewElement = view.editable.element;
+			describe( 'automatic resizing when shouldToolbarGroupWhenFull is "true"', () => {
+				it( 'should set and update toolbar max-width according to the width of the editable element', () => {
+					const locale = new Locale();
+					const editingView = new EditingView();
+					const editingViewRoot = createRoot( editingView.document );
+					const view = new InlineEditorUIView( locale, editingView, null, {
+						shouldToolbarGroupWhenFull: true
+					} );
+					view.editable.name = editingViewRoot.rootName;
+					view.render();
 
-				// 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 );
+					const editableElement = view.editable.element;
 
-				viewElement.style.width = '400px';
+					// 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( editableElement );
 
-				resizeCallback( [ {
-					target: viewElement,
-					contentRect: new Rect( viewElement )
-				} ] );
+					editableElement.style.width = '400px';
 
-				const editableWidthWithPadding = toPx( new Rect( viewElement ).width );
+					resizeCallback( [ {
+						target: editableElement,
+						contentRect: new Rect( editableElement )
+					} ] );
 
-				expect( view.toolbar.maxWidth ).to.be.equal( editableWidthWithPadding );
+					// Include paddings.
+					expect( view.toolbar.maxWidth ).to.be.equal( toPx( new Rect( editableElement ).width ) );
 
-				viewElement.remove();
+					editableElement.style.width = '200px';
+
+					resizeCallback( [ {
+						target: editableElement,
+						contentRect: new Rect( editableElement )
+					} ] );
+
+					// Include paddings.
+					expect( view.toolbar.maxWidth ).to.be.equal( toPx( new Rect( editableElement ).width ) );
+
+					editableElement.remove();
+					view.destroy();
+				} );
 			} );
 		} );