Browse Source

More tests in ToolbarView.

Aleksander Nowodzinski 6 years ago
parent
commit
8a2d7c5570

+ 26 - 29
packages/ckeditor5-ui/src/toolbar/toolbarview.js

@@ -333,14 +333,18 @@ export default class ToolbarView extends View {
 	}
 
 	/**
-	 * Focuses the first focusable in {@link #items}.
+	 * Focuses the first focusable in element in the toolbar.
 	 */
 	focus() {
-		this._componentsFocusCycler.focusFirst();
+		if ( this._itemsFocusCycler.first ) {
+			this._itemsFocusCycler.focusFirst();
+		} else if ( this.groupedItems && this.groupedItems.length ) {
+			this.groupedItemsDropdown.focus();
+		}
 	}
 
 	/**
-	 * Focuses the last focusable in {@link #items}.
+	 * Focuses the last focusable element in the toolbar.
 	 */
 	focusLast() {
 		const last = this._componentsFocusCycler.last;
@@ -554,16 +558,19 @@ export default class ToolbarView extends View {
 	 *	+────────────────────────────────────────────────────────────────────────────────────┘
 	 */
 	_focusNext( keyEvtData, cancel ) {
+		const itemsFocusCycler = this._itemsFocusCycler;
+		const componentsFocusCycler = this._componentsFocusCycler;
+
 		if ( this.itemsView.focusTracker.isFocused ) {
-			if ( !this._itemsFocusCycler.next || this._itemsFocusCycler.next === this._itemsFocusCycler.first ) {
-				this._componentsFocusCycler.focusNext();
+			if ( !itemsFocusCycler.next || itemsFocusCycler.next === itemsFocusCycler.first ) {
+				componentsFocusCycler.focusNext();
 			} else {
-				this._itemsFocusCycler.focusNext();
+				itemsFocusCycler.focusNext();
 			}
 
 			cancel();
 		} else {
-			this._componentsFocusCycler.focusNext();
+			componentsFocusCycler.focusNext();
 
 			cancel();
 		}
@@ -588,24 +595,21 @@ export default class ToolbarView extends View {
 	 *	+────────────────────────────────────────────────────────────────────────────────────┘
 	 */
 	_focusPrevious( keyEvtData, cancel ) {
+		const itemsFocusCycler = this._itemsFocusCycler;
+		const componentsFocusCycler = this._componentsFocusCycler;
+
 		if ( this.itemsView.focusTracker.isFocused ) {
-			if ( !this._itemsFocusCycler.next || this._itemsFocusCycler.previous === this._itemsFocusCycler.last ) {
-				if ( this.groupedItems && this.groupedItems.length ) {
-					this._componentsFocusCycler.focusLast();
-				} else {
-					this._itemsFocusCycler.focusPrevious();
-				}
+			const hasGroupedItems = this.groupedItems && this.groupedItems.length;
+
+			if ( hasGroupedItems && ( !itemsFocusCycler.previous || itemsFocusCycler.previous === itemsFocusCycler.last ) ) {
+				componentsFocusCycler.focusLast();
 			} else {
-				this._itemsFocusCycler.focusPrevious();
+				itemsFocusCycler.focusPrevious();
 			}
 
 			cancel();
 		} else {
-			if ( this._componentsFocusCycler.previous === this.itemsView ) {
-				this._itemsFocusCycler.focusLast();
-			} else {
-				this._componentsFocusCycler.focusPrevious();
-			}
+			itemsFocusCycler.focusLast();
 
 			cancel();
 		}
@@ -631,11 +635,11 @@ export default class ToolbarView extends View {
 
 		// TODO: Consider debounce.
 		this._resizeObserver = getResizeObserver( ( [ entry ] ) => {
-			if ( !previousWidth || previousWidth.width !== entry.contentRect.width ) {
+			if ( !previousWidth || previousWidth !== entry.contentRect.width ) {
 				this.updateGroupedItems();
-			}
 
-			previousWidth = entry.contentRect.width;
+				previousWidth = entry.contentRect.width;
+			}
 		} );
 
 		this._resizeObserver.observe( this.element );
@@ -759,11 +763,4 @@ class ToolbarItemsView extends View {
 	focus() {
 		this._focusCycler.focusFirst();
 	}
-
-	/**
-	 * Focuses the last focusable in {@link #items}.
-	 */
-	focusLast() {
-		this._focusCycler.focusLast();
-	}
 }

+ 93 - 8
packages/ckeditor5-ui/tests/toolbar/toolbarview.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* global document, Event, console */
+/* global document, Event, console, setTimeout */
 
 import ToolbarView from '../../src/toolbar/toolbarview';
 import ToolbarSeparatorView from '../../src/toolbar/toolbarseparatorview';
@@ -470,10 +470,8 @@ describe( 'ToolbarView', () => {
 			view.items.add( itemC );
 			view.items.add( itemD );
 
-			view.shouldGroupWhenFull = true;
-
 			// The dropdown shows up.
-			view.updateGroupedItems();
+			view.shouldGroupWhenFull = true;
 			sinon.spy( view.groupedItemsDropdown, 'destroy' );
 
 			view.element.style.width = '500px';
@@ -524,6 +522,20 @@ describe( 'ToolbarView', () => {
 
 			sinon.assert.calledOnce( view.items.get( 1 ).focus );
 		} );
+
+		it( 'if no items  the first focusable of #items in DOM', () => {
+			document.body.appendChild( view.element );
+			view.element.style.width = '10px';
+
+			view.items.add( focusable() );
+			view.items.add( focusable() );
+
+			view.shouldGroupWhenFull = true;
+			sinon.spy( view.groupedItemsDropdown, 'focus' );
+
+			view.focus();
+			sinon.assert.calledOnce( view.groupedItemsDropdown.focus );
+		} );
 	} );
 
 	describe( 'focusLast()', () => {
@@ -790,6 +802,15 @@ describe( 'ToolbarView', () => {
 	} );
 
 	describe( 'automatic toolbar grouping (#shouldGroupWhenFull = true)', () => {
+		beforeEach( () => {
+			document.body.appendChild( view.element );
+			view.element.style.width = '200px';
+		} );
+
+		afterEach( () => {
+			view.element.remove();
+		} );
+
 		it( 'updates the UI as new #items are added', () => {
 			sinon.spy( view, 'updateGroupedItems' );
 			sinon.assert.notCalled( view.updateGroupedItems );
@@ -810,12 +831,76 @@ describe( 'ToolbarView', () => {
 			sinon.assert.calledTwice( view.updateGroupedItems );
 		} );
 
-		it( 'updates the UI when the toolbar is being resized (expanding)', () => {
-			// TODO
+		it( 'updates the UI when the toolbar is being resized (expanding)', done => {
+			view.items.add( focusable() );
+			view.items.add( focusable() );
+			view.items.add( focusable() );
+			view.items.add( focusable() );
+			view.items.add( focusable() );
+
+			view.element.style.width = '200px';
+			view.shouldGroupWhenFull = true;
+
+			expect( view.items ).to.have.length( 1 );
+			expect( view.groupedItems ).to.have.length( 4 );
+
+			view.element.style.width = '500px';
+
+			setTimeout( () => {
+				expect( view.items ).to.have.length( 5 );
+				expect( view.groupedItems ).to.have.length( 0 );
+
+				done();
+			}, 100 );
+		} );
+
+		it( 'updates the UI when the toolbar is being resized (narrowing)', done => {
+			view.items.add( focusable() );
+			view.items.add( focusable() );
+			view.items.add( focusable() );
+			view.items.add( focusable() );
+			view.items.add( focusable() );
+
+			view.element.style.width = '500px';
+			view.shouldGroupWhenFull = true;
+
+			expect( view.items ).to.have.length( 5 );
+			expect( view.groupedItems ).to.be.null;
+
+			view.element.style.width = '200px';
+
+			setTimeout( () => {
+				expect( view.items ).to.have.length( 1 );
+				expect( view.groupedItems ).to.have.length( 4 );
+
+				done();
+			}, 100 );
 		} );
 
-		it( 'updates the UI when the toolbar is being resized (narrowing)', () => {
-			// TODO
+		it( 'does not react to changes in height', done => {
+			view.element.style.width = '500px';
+			view.element.style.height = '200px';
+
+			view.items.add( focusable() );
+			view.items.add( focusable() );
+			view.items.add( focusable() );
+			view.items.add( focusable() );
+			view.items.add( focusable() );
+
+			view.shouldGroupWhenFull = true;
+			sinon.spy( view, 'updateGroupedItems' );
+
+			expect( view.items ).to.have.length( 5 );
+			expect( view.groupedItems ).to.be.null;
+
+			setTimeout( () => {
+				view.element.style.height = '500px';
+
+				setTimeout( () => {
+					sinon.assert.calledOnce( view.updateGroupedItems );
+					done();
+				}, 100 );
+			}, 100 );
 		} );
 	} );
 } );