Răsfoiți Sursa

Merge branch 'master' into i/1053

Aleksander Nowodzinski 6 ani în urmă
părinte
comite
e93d73f573

+ 39 - 50
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, setTimeout */
+/* global document, Event, console */
 
 import ToolbarView from '../../src/toolbar/toolbarview';
 import ToolbarSeparatorView from '../../src/toolbar/toolbarseparatorview';
@@ -17,6 +17,7 @@ import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 import View from '../../src/view';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 import { add as addTranslations, _clear as clearTranslations } from '@ckeditor/ckeditor5-utils/src/translation-service';
+import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
 import Locale from '@ckeditor/ckeditor5-utils/src/locale';
 
 describe( 'ToolbarView', () => {
@@ -594,9 +595,11 @@ describe( 'ToolbarView', () => {
 		} );
 
 		describe( 'render()', () => {
-			it( 'starts observing toolbar resize immediatelly after render', () => {
+			let view, resizeObserverInstance, groupedItems, ungroupedItems;
+
+			beforeEach( () => {
 				function FakeResizeObserver( callback ) {
-					this.callback = callback;
+					this._callback = callback;
 				}
 
 				FakeResizeObserver.prototype.observe = sinon.spy();
@@ -604,19 +607,30 @@ describe( 'ToolbarView', () => {
 
 				testUtils.sinon.stub( global.window, 'ResizeObserver' ).value( FakeResizeObserver );
 
-				const view = new ToolbarView( locale, {
+				view = new ToolbarView( locale, {
 					shouldGroupWhenFull: true
 				} );
 
 				view.render();
 
-				sinon.assert.calledOnce( view._behavior.resizeObserver.observe );
-				sinon.assert.calledWithExactly( view._behavior.resizeObserver.observe, view.element );
+				resizeObserverInstance = view._behavior.resizeObserver;
+				groupedItems = view._behavior.groupedItems;
+				ungroupedItems = view._behavior.ungroupedItems;
 
+				document.body.appendChild( view.element );
+			} );
+
+			afterEach( () => {
+				view.element.remove();
 				view.destroy();
 			} );
 
-			it( 'updates the UI when the toolbar is being resized (expanding)', done => {
+			it( 'starts observing toolbar resize immediatelly after render', () => {
+				sinon.assert.calledOnce( resizeObserverInstance.observe );
+				sinon.assert.calledWithExactly( resizeObserverInstance.observe, view.element );
+			} );
+
+			it( 'updates the UI when the toolbar is being resized (expanding)', () => {
 				view.element.style.width = '200px';
 
 				view.items.add( focusable() );
@@ -625,20 +639,18 @@ describe( 'ToolbarView', () => {
 				view.items.add( focusable() );
 				view.items.add( focusable() );
 
+				resizeObserverInstance._callback( [ { 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 ) } ] );
 
-				setTimeout( () => {
-					expect( ungroupedItems ).to.have.length( 5 );
-					expect( groupedItems ).to.have.length( 0 );
-
-					done();
-				}, 100 );
+				expect( ungroupedItems ).to.have.length( 5 );
+				expect( groupedItems ).to.have.length( 0 );
 			} );
 
-			it( 'updates the UI when the toolbar is being resized (narrowing)', done => {
+			it( 'updates the UI when the toolbar is being resized (narrowing)', () => {
 				view.element.style.width = '500px';
 
 				view.items.add( focusable() );
@@ -647,20 +659,18 @@ describe( 'ToolbarView', () => {
 				view.items.add( focusable() );
 				view.items.add( focusable() );
 
+				resizeObserverInstance._callback( [ { 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 ) } ] );
 
-				setTimeout( () => {
-					expect( ungroupedItems ).to.have.length( 1 );
-					expect( groupedItems ).to.have.length( 4 );
-
-					done();
-				}, 100 );
+				expect( ungroupedItems ).to.have.length( 1 );
+				expect( groupedItems ).to.have.length( 4 );
 			} );
 
-			it( 'does not react to changes in height', done => {
+			it( 'does not react to changes in height', () => {
 				view.element.style.width = '500px';
 				view.element.style.height = '200px';
 
@@ -672,43 +682,22 @@ describe( 'ToolbarView', () => {
 
 				sinon.spy( view._behavior, '_updateGrouping' );
 				view.element.style.width = '500px';
+				resizeObserverInstance._callback( [ { contentRect: new Rect( view.element ) } ] );
 
-				setTimeout( () => {
-					sinon.assert.calledOnce( view._behavior._updateGrouping );
-					view.element.style.height = '500px';
+				sinon.assert.calledOnce( view._behavior._updateGrouping );
+				view.element.style.height = '500px';
+				resizeObserverInstance._callback( [ { contentRect: new Rect( view.element ) } ] );
 
-					setTimeout( () => {
-						sinon.assert.calledOnce( view._behavior._updateGrouping );
-						done();
-					}, 100 );
-				}, 100 );
+				sinon.assert.calledOnce( view._behavior._updateGrouping );
 			} );
 
 			it( 'updates the state of grouped items upon resize', () => {
-				function FakeResizeObserver( callback ) {
-					this.callback = callback;
-				}
-
-				FakeResizeObserver.prototype.observe = sinon.spy();
-				FakeResizeObserver.prototype.disconnect = sinon.spy();
-
-				testUtils.sinon.stub( global.window, 'ResizeObserver' ).value( FakeResizeObserver );
-
-				const view = new ToolbarView( locale, {
-					shouldGroupWhenFull: true
-				} );
-
 				testUtils.sinon.spy( view._behavior, '_updateGrouping' );
+				sinon.assert.notCalled( view._behavior._updateGrouping );
 
-				view.render();
-
-				view._behavior.resizeObserver.callback( [
-					{ contentRect: { width: 42 } }
-				] );
+				resizeObserverInstance._callback( [ { contentRect: new Rect( view.element ) } ] );
 
-				sinon.assert.calledTwice( view._behavior._updateGrouping );
-
-				view.destroy();
+				sinon.assert.calledOnce( view._behavior._updateGrouping );
 			} );
 		} );
 

+ 1 - 1
packages/ckeditor5-ui/theme/icons/color-tile-check.svg

@@ -1 +1 @@
-<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path class="ck-icon__fill" d="M6.193 17.02l-.102-.121-2.553-3.536a2 2 0 0 1 .956-3.3c.699-.182 1.442.026 2.005.614L7.642 12.1l6.515-8.164.074-.083c.757-.756 1.652-.65 2.38-.081.77.6.869 1.79.159 2.573L9.203 16.896l-.105.124c-.385.386-.91.597-1.453.586-.543.01-1.067-.2-1.452-.586z" fill-opacity=".8"/><path d="M7.645 16.606a.997.997 0 0 0 .745-.292l7.606-10.606c.391-.39.28-.93 0-1.148-.28-.219-.667-.39-1.058 0L7.645 13.7 5.72 11.304a1 1 0 1 0-1.414 1.414l2.596 3.596a.997.997 0 0 0 .744.292z"/></svg>
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g><path class="ck-icon__fill" d="M16.935 5.328a2 2 0 010 2.829l-7.778 7.778a2 2 0 01-2.829 0L3.5 13.107a1.999 1.999 0 112.828-2.829l.707.707a1 1 0 001.414 0l5.658-5.657a2 2 0 012.828 0z"/><path d="M14.814 6.035L8.448 12.4a1 1 0 01-1.414 0l-1.413-1.415A1 1 0 104.207 12.4l2.829 2.829a1 1 0 001.414 0l7.778-7.778a1 1 0 10-1.414-1.415z"/></g></svg>