Explorar el Código

Code refactoring.

Aleksander Nowodzinski hace 6 años
padre
commit
4bb94489da

+ 131 - 102
packages/ckeditor5-ui/src/toolbar/toolbarview.js

@@ -216,7 +216,7 @@ export default class ToolbarView extends View {
 		// Start listening for the keystrokes coming from #element.
 		this.keystrokes.listenTo( this.element );
 
-		this._feature.render();
+		this._feature.render( this );
 	}
 
 	/**
@@ -330,9 +330,7 @@ class StaticLayout {
 	 * @inheritDoc
 	 */
 	constructor( view ) {
-		this.view = view;
-
-		const bind = this.view.bindTemplate;
+		const bind = view.bindTemplate;
 
 		// Static toolbar can be vertical when needed.
 		view.set( 'isVertical', false );
@@ -371,14 +369,14 @@ class StaticLayout {
  * that do not fit into visually into a single row of the toolbar (due to limited space).
  * Items that do not fit are aggregated in a dropdown displayed at the end of the toolbar.
  *
- *	┌──────────────────────────────────────── ToolbarView ──────────────────────────────────────────
- *	| ┌─────────────────────────────────────── #children ─────────────────────────────────────────┐ |
- *	| |   ┌─────── #itemsView ────────┐ ┌──────────────────────┐ ┌── #_groupedItemsDropdown ───┐   | |
- *	| |   |      #_ungroupedItems     | | ToolbarSeparatorView | |        #_groupedItems       |   | |
- *	| |   └──────────────────────────-┘ └──────────────────────┘ └────────────────────────────┘   | |
- *	| |                                  \---------- only when toolbar items overflow ---------/    | |
- *	| └───────────────────────────────────────────────────────────────────────────────────────────┘ |
- *	└───────────────────────────────────────────────────────────────────────────────────────────────
+ *	┌──────────────────────────────────────── ToolbarView ──────────────────────────────────────────┐
+ *	| ┌─────────────────────────────────────── #children ─────────────────────────────────────────┐ |
+ *	| |   ┌─────── #itemsView ────────┐ ┌──────────────────────┐ ┌── #groupedItemsDropdown ───┐   | |
+ *	| |   |       #ungroupedItems     | | ToolbarSeparatorView | |        #groupedItems       |   | |
+ *	| |   └──────────────────────────-┘ └──────────────────────┘ └────────────────────────────┘   | |
+ *	| |                                  \---------- only when toolbar items overflow --------/    | |
+ *	| └───────────────────────────────────────────────────────────────────────────────────────────┘ |
+ *	└───────────────────────────────────────────────────────────────────────────────────────────────┘
  *
  * @private
  * @implements module:ui/toolbar/toolbarview~ToolbarFeature
@@ -388,48 +386,90 @@ class DynamicGrouping {
 	 * @inheritDoc
 	 */
 	constructor( view ) {
-		this.view = view;
+		/**
+		 * Collection of toolbar children.
+		 *
+		 * @readonly
+		 * @member {module:ui/viewcollection~ViewCollection}
+		 */
+		this.viewChildren = view.children;
+
+		/**
+		 * Collection of toolbar focusable elements.
+		 *
+		 * @readonly
+		 * @member {module:ui/viewcollection~ViewCollection}
+		 */
+		this.viewFocusables = view.focusables;
+
+		/**
+		 * Collection of toolbar focusable elements.
+		 *
+		 * @readonly
+		 * @member {module:ui/toolbar/toolbarview~ItemsView}
+		 */
+		this.viewItemsView = view.itemsView;
+
+		/**
+		 * Focus tracker of the toolbar.
+		 *
+		 * @readonly
+		 * @member {module:utils/focustracker~FocusTracker}
+		 */
+		this.viewFocusTracker = view.focusTracker;
+
+		/**
+		 * Locale of the toolbar.
+		 *
+		 * @readonly
+		 * @member {module:utils/locale~Locale}
+		 */
+		this.viewLocale = view.locale;
+
+		/**
+		 * Element of the toolbar.
+		 *
+		 * @readonly
+		 * @member {HTMLElement} #viewElement
+		 */
 
 		/**
 		 * A subset of of toolbar {@link module:ui/toolbar/toolbarview~ToolbarView#items}.
-		 * Aggregates items that fit into a single row of the toolbar and were not {@link #_groupedItems grouped}
-		 * into a {@link #_groupedItemsDropdown dropdown}. Items of this collection are displayed in the
+		 * Aggregates items that fit into a single row of the toolbar and were not {@link #groupedItems grouped}
+		 * into a {@link #groupedItemsDropdown dropdown}. Items of this collection are displayed in the
 		 * {@link module:ui/toolbar/toolbarview~ToolbarView#itemsView}.
 		 *
 		 * When none of the {@link module:ui/toolbar/toolbarview~ToolbarView#items} were grouped, it
 		 * matches the {@link module:ui/toolbar/toolbarview~ToolbarView#items} collection in size and order.
 		 *
-		 * @protected
 		 * @readonly
 		 * @member {module:ui/viewcollection~ViewCollection}
 		 */
-		this._ungroupedItems = view.createCollection();
+		this.ungroupedItems = view.createCollection();
 
 		/**
 		 * A subset of of toolbar {@link module:ui/toolbar/toolbarview~ToolbarView#items}.
 		 * A collection of the toolbar items that do not fit into a single row of the toolbar.
-		 * Grouped items are displayed in a dedicated {@link #_groupedItemsDropdown dropdown}.
+		 * Grouped items are displayed in a dedicated {@link #groupedItemsDropdown dropdown}.
 		 *
 		 * When none of the {@link module:ui/toolbar/toolbarview~ToolbarView#items} were grouped,
 		 * this collection is empty.
 		 *
-		 * @protected
 		 * @readonly
 		 * @member {module:ui/viewcollection~ViewCollection}
 		 */
-		this._groupedItems = view.createCollection();
+		this.groupedItems = view.createCollection();
 
 		/**
-		 * The dropdown that aggregates {@link #_groupedItems grouped items} that do not fit into a single
+		 * The dropdown that aggregates {@link #groupedItems grouped items} that do not fit into a single
 		 * row of the toolbar. It is displayed on demand as the last of
 		 * {@link module:ui/toolbar/toolbarview~ToolbarView#children toolbar children} and offers another
 		 * (nested) toolbar which displays items that would normally overflow.
 		 *
-		 * @protected
 		 * @readonly
 		 * @member {module:ui/dropdown/dropdownview~DropdownView}
 		 */
-		this._groupedItemsDropdown = this._createGroupedItemsDropdown();
+		this.groupedItemsDropdown = this._createGroupedItemsDropdown();
 
 		/**
 		 * An instance of the resize observer that helps dynamically determine the geometry of the toolbar
@@ -438,10 +478,9 @@ class DynamicGrouping {
 		 * **Note:** Created in {@link #_enableGroupingOnResize}.
 		 *
 		 * @readonly
-		 * @private
 		 * @member {module:utils/dom/getresizeobserver~ResizeObserver}
 		 */
-		this._resizeObserver = null;
+		this.resizeObserver = null;
 
 		/**
 		 * A cached value of the horizontal padding style used by {@link #_updateGrouping}
@@ -450,34 +489,33 @@ class DynamicGrouping {
 		 * the padding will change and re–using `Window.getComputedStyle()` is expensive.
 		 *
 		 * @readonly
-		 * @private
 		 * @member {Number}
 		 */
-		this._cachedPadding = null;
+		this.cachedPadding = null;
 
 		// Only those items that were not grouped are visible to the user.
-		view.itemsView.children.bindTo( this._ungroupedItems ).using( item => item );
+		view.itemsView.children.bindTo( this.ungroupedItems ).using( item => item );
 
 		// Make sure all #items visible in the main space of the toolbar are "focuscycleable".
-		this._ungroupedItems.on( 'add', this._updateFocusCycleableItems.bind( this ) );
-		this._ungroupedItems.on( 'remove', this._updateFocusCycleableItems.bind( this ) );
+		this.ungroupedItems.on( 'add', this._updateFocusCycleableItems.bind( this ) );
+		this.ungroupedItems.on( 'remove', this._updateFocusCycleableItems.bind( this ) );
 
-		// Make sure the #_groupedItemsDropdown is also included in cycling when it appears.
+		// Make sure the #groupedItemsDropdown is also included in cycling when it appears.
 		view.children.on( 'add', this._updateFocusCycleableItems.bind( this ) );
 		view.children.on( 'remove', this._updateFocusCycleableItems.bind( this ) );
 
 		// ToolbarView#items is dynamic. When an item is added, it should be automatically
 		// represented in either grouped or ungrouped items at the right index.
-		// In other words #items == concat( #_ungroupedItems, #_groupedItems )
+		// In other words #items == concat( #ungroupedItems, #groupedItems )
 		// (in length and order).
 		view.items.on( 'add', ( evt, item, index ) => {
-			if ( index > this._ungroupedItems.length ) {
-				this._groupedItems.add( item, index - this._ungroupedItems.length );
+			if ( index > this.ungroupedItems.length ) {
+				this.groupedItems.add( item, index - this.ungroupedItems.length );
 			} else {
-				this._ungroupedItems.add( item, index );
+				this.ungroupedItems.add( item, index );
 			}
 
-			// When a new ungrouped item joins in and lands in #_ungroupedItems, there's a chance it causes
+			// When a new ungrouped item joins in and lands in #ungroupedItems, there's a chance it causes
 			// the toolbar to overflow.
 			this._updateGrouping();
 		} );
@@ -485,10 +523,10 @@ class DynamicGrouping {
 		// When an item is removed from ToolbarView#items, it should be automatically
 		// removed from either grouped or ungrouped items.
 		view.items.on( 'remove', ( evt, item, index ) => {
-			if ( index > this._ungroupedItems.length ) {
-				this._groupedItems.remove( item );
+			if ( index > this.ungroupedItems.length ) {
+				this.groupedItems.remove( item );
 			} else {
-				this._ungroupedItems.remove( item );
+				this.ungroupedItems.remove( item );
 			}
 
 			// Whether removed from grouped or ungrouped items, there is a chance
@@ -509,7 +547,9 @@ class DynamicGrouping {
 	/**
 	 * @inheritDoc
 	 */
-	render() {
+	render( view ) {
+		this.viewElement = view.element;
+
 		this._enableGroupingOnResize();
 	}
 
@@ -519,29 +559,27 @@ class DynamicGrouping {
 	destroy() {
 		// The dropdown may not be in ToolbarView#children at the moment of toolbar destruction
 		// so let's make sure it's actually destroyed along with the toolbar.
-		this._groupedItemsDropdown.destroy();
+		this.groupedItemsDropdown.destroy();
 
-		this._resizeObserver.disconnect();
+		this.resizeObserver.disconnect();
 	}
 
 	/**
-	 * When called, it will check if any of the {@link #_ungroupedItems} do not fit into a single row of the toolbar,
-	 * and it will move them to the {@link #_groupedItems} when it happens.
+	 * When called, it will check if any of the {@link #ungroupedItems} do not fit into a single row of the toolbar,
+	 * and it will move them to the {@link #groupedItems} when it happens.
 	 *
 	 * At the same time, it will also check if there is enough space in the toolbar for the first of the
-	 * {@link #_groupedItems} to be returned back to {@link #_ungroupedItems} and still fit into a single row
+	 * {@link #groupedItems} to be returned back to {@link #ungroupedItems} and still fit into a single row
 	 * without the toolbar wrapping.
 	 *
 	 * @protected
 	 */
 	_updateGrouping() {
-		const view = this.view;
-
 		// Do no grouping–related geometry analysis when the toolbar is detached from visible DOM,
 		// for instance before #render(), or after render but without a parent or a parent detached
 		// from DOM. DOMRects won't work anyway and there will be tons of warning in the console and
 		// nothing else.
-		if ( !view.element.ownerDocument.body.contains( view.element ) ) {
+		if ( !this.viewElement.ownerDocument.body.contains( this.viewElement ) ) {
 			return;
 		}
 
@@ -559,9 +597,9 @@ class DynamicGrouping {
 		// If none were grouped now but there were some items already grouped before,
 		// then, what the hell, maybe let's see if some of them can be ungrouped. This happens when,
 		// for instance, the toolbar is stretching and there's more space in it than before.
-		if ( !wereItemsGrouped && this._groupedItems && this._groupedItems.length ) {
+		if ( !wereItemsGrouped && this.groupedItems && this.groupedItems.length ) {
 			// Ungroup items as long as none are overflowing or there are none to ungroup left.
-			while ( this._groupedItems.length && !this._areItemsOverflowing ) {
+			while ( this.groupedItems.length && !this._areItemsOverflowing ) {
 				this._ungroupFirstItem();
 			}
 
@@ -576,11 +614,11 @@ class DynamicGrouping {
 	}
 
 	/**
-	 * Enables the functionality that prevents {@link #_ungroupedItems} from overflowing
+	 * Enables the functionality that prevents {@link #ungroupedItems} from overflowing
 	 * (wrapping to the next row) when there is little space available. Instead, the toolbar items are moved to the
-	 * {@link #_groupedItems} collection and displayed in a dropdown at the end of the space, which has its own nested toolbar.
+	 * {@link #groupedItems} collection and displayed in a dropdown at the end of the space, which has its own nested toolbar.
 	 *
-	 * When called, the toolbar will automatically analyze the location of its {@link #_ungroupedItems} and "group"
+	 * When called, the toolbar will automatically analyze the location of its {@link #ungroupedItems} and "group"
 	 * them in the dropdown if necessary. It will also observe the browser window for size changes in
 	 * the future and respond to them by grouping more items or reverting already grouped back, depending
 	 * on the visual space available.
@@ -588,12 +626,10 @@ class DynamicGrouping {
 	 * @private
 	 */
 	_enableGroupingOnResize() {
-		const view = this.view;
-
 		let previousWidth;
 
 		// TODO: Consider debounce.
-		this._resizeObserver = getResizeObserver( ( [ entry ] ) => {
+		this.resizeObserver = getResizeObserver( ( [ entry ] ) => {
 			if ( !previousWidth || previousWidth !== entry.contentRect.width ) {
 				this._updateGrouping();
 
@@ -601,7 +637,7 @@ class DynamicGrouping {
 			}
 		} );
 
-		this._resizeObserver.observe( view.element );
+		this.resizeObserver.observe( this.viewElement );
 
 		this._updateGrouping();
 	}
@@ -615,106 +651,100 @@ class DynamicGrouping {
 	 */
 	get _areItemsOverflowing() {
 		// An empty toolbar cannot overflow.
-		if ( !this._ungroupedItems.length ) {
+		if ( !this.ungroupedItems.length ) {
 			return false;
 		}
 
-		const view = this.view;
-		const element = view.element;
-		const uiLanguageDirection = view.locale.uiLanguageDirection;
+		const element = this.viewElement;
+		const uiLanguageDirection = this.viewLocale.uiLanguageDirection;
 		const lastChildRect = new Rect( element.lastChild );
 		const toolbarRect = new Rect( element );
 
-		if ( !this._cachedPadding ) {
+		if ( !this.cachedPadding ) {
 			const computedStyle = global.window.getComputedStyle( element );
 			const paddingProperty = uiLanguageDirection === 'ltr' ? 'paddingRight' : 'paddingLeft';
 
 			// parseInt() is essential because of quirky floating point numbers logic and DOM.
 			// If the padding turned out too big because of that, the grouped items dropdown would
 			// always look (from the Rect perspective) like it overflows (while it's not).
-			this._cachedPadding = Number.parseInt( computedStyle[ paddingProperty ] );
+			this.cachedPadding = Number.parseInt( computedStyle[ paddingProperty ] );
 		}
 
 		if ( uiLanguageDirection === 'ltr' ) {
-			return lastChildRect.right > toolbarRect.right - this._cachedPadding;
+			return lastChildRect.right > toolbarRect.right - this.cachedPadding;
 		} else {
-			return lastChildRect.left < toolbarRect.left + this._cachedPadding;
+			return lastChildRect.left < toolbarRect.left + this.cachedPadding;
 		}
 	}
 
 	/**
 	 * The opposite of {@link #_ungroupFirstItem}.
 	 *
-	 * When called it will remove the last item from {@link #_ungroupedItems} and move it to the
-	 * {@link #_groupedItems} collection.
+	 * When called it will remove the last item from {@link #ungroupedItems} and move it to the
+	 * {@link #groupedItems} collection.
 	 *
 	 * @private
 	 */
 	_groupLastItem() {
-		const view = this.view;
-
-		if ( !this._groupedItems.length ) {
-			view.children.add( new ToolbarSeparatorView() );
-			view.children.add( this._groupedItemsDropdown );
-			view.focusTracker.add( this._groupedItemsDropdown.element );
+		if ( !this.groupedItems.length ) {
+			this.viewChildren.add( new ToolbarSeparatorView() );
+			this.viewChildren.add( this.groupedItemsDropdown );
+			this.viewFocusTracker.add( this.groupedItemsDropdown.element );
 		}
 
-		this._groupedItems.add( this._ungroupedItems.remove( this._ungroupedItems.last ), 0 );
+		this.groupedItems.add( this.ungroupedItems.remove( this.ungroupedItems.last ), 0 );
 	}
 
 	/**
 	 * The opposite of {@link #_groupLastItem}.
 	 *
-	 * Moves the very first item from the toolbar belonging to {@link #_groupedItems} back
-	 * to the {@link #_ungroupedItems} collection.
+	 * Moves the very first item from the toolbar belonging to {@link #groupedItems} back
+	 * to the {@link #ungroupedItems} collection.
 	 *
 	 * @private
 	 */
 	_ungroupFirstItem() {
-		const view = this.view;
+		this.ungroupedItems.add( this.groupedItems.remove( this.groupedItems.first ) );
 
-		this._ungroupedItems.add( this._groupedItems.remove( this._groupedItems.first ) );
-
-		if ( !this._groupedItems.length ) {
-			view.children.remove( this._groupedItemsDropdown );
-			view.children.remove( view.children.last );
-			view.focusTracker.remove( this._groupedItemsDropdown.element );
+		if ( !this.groupedItems.length ) {
+			this.viewChildren.remove( this.groupedItemsDropdown );
+			this.viewChildren.remove( this.viewChildren.last );
+			this.viewFocusTracker.remove( this.groupedItemsDropdown.element );
 		}
 	}
 
 	/**
-	 * Creates the {@link #_groupedItemsDropdown} that hosts the members of the {@link #_groupedItems}
+	 * Creates the {@link #groupedItemsDropdown} that hosts the members of the {@link #groupedItems}
 	 * collection when there is not enough space in the toolbar to display all items in a single row.
 	 *
 	 * @private
 	 * @returns {module:ui/dropdown/dropdownview~DropdownView}
 	 */
 	_createGroupedItemsDropdown() {
-		const view = this.view;
-		const t = view.t;
-		const locale = view.locale;
-		const _groupedItemsDropdown = createDropdown( locale );
+		const locale = this.viewLocale;
+		const t = locale.t;
+		const dropdown = createDropdown( locale );
 
-		_groupedItemsDropdown.class = 'ck-toolbar__grouped-dropdown';
-		addToolbarToDropdown( _groupedItemsDropdown, [] );
+		dropdown.class = 'ck-toolbar__grouped-dropdown';
+		addToolbarToDropdown( dropdown, [] );
 
-		_groupedItemsDropdown.buttonView.set( {
+		dropdown.buttonView.set( {
 			label: t( 'Show more items' ),
 			tooltip: true,
 			icon: verticalDotsIcon
 		} );
 
 		// 1:1 pass–through binding.
-		_groupedItemsDropdown.toolbarView.items.bindTo( this._groupedItems ).using( item => item );
+		dropdown.toolbarView.items.bindTo( this.groupedItems ).using( item => item );
 
-		return _groupedItemsDropdown;
+		return dropdown;
 	}
 
 	/**
 	 * A method that updates the {@link module:ui/toolbar/toolbarview~ToolbarView#focusables focus–cycleable items}
 	 * collection so it represents the up–to–date state of the UI from the perspective of the user.
 	 *
-	 * For instance, the {@link #_groupedItemsDropdown} can show up and hide but when it is visible,
+	 * For instance, the {@link #groupedItemsDropdown} can show up and hide but when it is visible,
 	 * it must be subject to focus cycling in the toolbar.
 	 *
 	 * See the {@link module:ui/toolbar/toolbarview~ToolbarView#focusables collection} documentation
@@ -723,16 +753,14 @@ class DynamicGrouping {
 	 * @private
 	 */
 	_updateFocusCycleableItems() {
-		const view = this.view;
-
-		view.focusables.clear();
+		this.viewFocusables.clear();
 
-		this._ungroupedItems.map( item => {
-			view.focusables.add( item );
+		this.ungroupedItems.map( item => {
+			this.viewFocusables.add( item );
 		} );
 
-		if ( this._groupedItems.length ) {
-			view.focusables.add( this._groupedItemsDropdown );
+		if ( this.groupedItems.length ) {
+			this.viewFocusables.add( this.groupedItemsDropdown );
 		}
 	}
 }
@@ -771,7 +799,7 @@ class DynamicGrouping {
  * the toolbar, define extra toolbar properties, etc..
  *
  * @method #constructor
- * @param {module:ui/toolbar/toolbarview~ToolbarView} view An instance of the toolbar this feature
+ * @param {module:ui/toolbar/toolbarview~ToolbarView} view An instance of the toolbar this feature.
  * is added to.
  */
 
@@ -782,6 +810,7 @@ class DynamicGrouping {
  *
  * @readonly
  * @member {Function} #render
+ * @param {module:ui/toolbar/toolbarview~ToolbarView} view An instance of the toolbar being rendered.
  */
 
 /**

+ 13 - 12
packages/ckeditor5-ui/tests/toolbar/toolbarview.js

@@ -299,6 +299,7 @@ describe( 'ToolbarView', () => {
 
 			view.render();
 			sinon.assert.calledOnce( view._feature.render );
+			sinon.assert.calledWithExactly( view._feature.render, view );
 
 			view.destroy();
 		} );
@@ -451,9 +452,9 @@ describe( 'ToolbarView', () => {
 			view.element.style.width = '200px';
 			document.body.appendChild( view.element );
 
-			groupedItems = view._feature._groupedItems;
-			ungroupedItems = view._feature._ungroupedItems;
-			groupedItemsDropdown = view._feature._groupedItemsDropdown;
+			groupedItems = view._feature.groupedItems;
+			ungroupedItems = view._feature.ungroupedItems;
+			groupedItemsDropdown = view._feature.groupedItemsDropdown;
 		} );
 
 		afterEach( () => {
@@ -564,7 +565,7 @@ describe( 'ToolbarView', () => {
 			view.element.style.width = '350px';
 
 			// Some grouped items cannot be ungrouped because there is not enough space and they will
-			// land back in #_feature._groupedItems after an attempt was made.
+			// land back in #_feature.groupedItems after an attempt was made.
 			view._feature._updateGrouping();
 			expect( ungroupedItems.map( i => i ) ).to.have.ordered.members( [ itemA, itemB, itemC ] );
 			expect( groupedItems.map( i => i ) ).to.have.ordered.members( [ itemD ] );
@@ -609,8 +610,8 @@ describe( 'ToolbarView', () => {
 
 				view.render();
 
-				sinon.assert.calledOnce( view._feature._resizeObserver.observe );
-				sinon.assert.calledWithExactly( view._feature._resizeObserver.observe, view.element );
+				sinon.assert.calledOnce( view._feature.resizeObserver.observe );
+				sinon.assert.calledWithExactly( view._feature.resizeObserver.observe, view.element );
 
 				view.destroy();
 			} );
@@ -701,7 +702,7 @@ describe( 'ToolbarView', () => {
 
 				view.render();
 
-				view._feature._resizeObserver.callback( [
+				view._feature.resizeObserver.callback( [
 					{ contentRect: { width: 42 } }
 				] );
 
@@ -736,7 +737,7 @@ describe( 'ToolbarView', () => {
 				sinon.assert.calledOnce( groupedItemsDropdown.destroy );
 			} );
 
-			it( 'disconnects the #_resizeObserver', () => {
+			it( 'disconnects the #resizeObserver', () => {
 				view.element.style.width = '200px';
 
 				const itemA = focusable();
@@ -749,10 +750,10 @@ describe( 'ToolbarView', () => {
 				view.items.add( itemC );
 				view.items.add( itemD );
 
-				sinon.spy( view._feature._resizeObserver, 'disconnect' );
+				sinon.spy( view._feature.resizeObserver, 'disconnect' );
 
 				view.destroy();
-				sinon.assert.calledOnce( view._feature._resizeObserver.disconnect );
+				sinon.assert.calledOnce( view._feature.resizeObserver.disconnect );
 			} );
 		} );
 
@@ -789,7 +790,7 @@ describe( 'ToolbarView', () => {
 				view.items.add( focusable() );
 				view.items.add( focusable() );
 
-				expect( view._feature._groupedItems ).to.have.length( 1 );
+				expect( view._feature.groupedItems ).to.have.length( 1 );
 			} );
 
 			it( 'considers the left padding of the toolbar (RTL UI)', () => {
@@ -815,7 +816,7 @@ describe( 'ToolbarView', () => {
 				view.items.add( focusable() );
 				view.items.add( focusable() );
 
-				expect( view._feature._groupedItems ).to.have.length( 1 );
+				expect( view._feature.groupedItems ).to.have.length( 1 );
 
 				view.destroy();
 				view.element.remove();