From cf088ac0d019b7529cfd3d03516d74115f6a3e26 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Mon, 21 Oct 2019 16:03:47 +0200 Subject: [PATCH 1/2] Tests: Refactored ToolbarView tests so automatic items grouping assertions will no longer fail when browser window is not on the top. --- tests/toolbar/toolbarview.js | 89 ++++++++++++++++-------------------- 1 file changed, 39 insertions(+), 50 deletions(-) diff --git a/tests/toolbar/toolbarview.js b/tests/toolbar/toolbarview.js index da736da3..8a257beb 100644 --- a/tests/toolbar/toolbarview.js +++ b/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 ); } ); } ); From 28ea3a8c44ab0652f7c40297f2e312ba4d84790c Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Fri, 25 Oct 2019 16:15:38 +0200 Subject: [PATCH 2/2] Updated the color tile checkbox icon for better look, contrast and accessibility. --- theme/icons/color-tile-check.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme/icons/color-tile-check.svg b/theme/icons/color-tile-check.svg index 08ec83c0..17b144fd 100644 --- a/theme/icons/color-tile-check.svg +++ b/theme/icons/color-tile-check.svg @@ -1 +1 @@ - +