Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Commit

Permalink
Merge pull request #538 from ckeditor/i/6145
Browse files Browse the repository at this point in the history 
Internal: Aligned the ToolbarView class (and tests) to the ResizeObserver that replaced the getResizeObserver() helper (see ckeditor/ckeditor5#6145).
  • Loading branch information
@panr
panr authored Feb 6, 2020
2 parents be98aa4 + cb89b76 commit 33a205d
Showing 1 changed file with 51 additions and 23 deletions.
74 changes: 51 additions & 23 deletions tests/toolbar/toolbarview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -455,12 +455,26 @@ describe( 'ToolbarView', () => {

describe( 'toolbar with a dynamic item grouping', () => {
let locale, view, groupedItems, ungroupedItems, groupedItemsDropdown;
let resizeCallback, observeSpy, unobserveSpy;

beforeEach( () => {
observeSpy = sinon.spy();
unobserveSpy = sinon.spy();

testUtils.sinon.stub( global.window, 'ResizeObserver' ).callsFake( callback => {
resizeCallback = callback;

return {
observe: observeSpy,
unobserve: unobserveSpy
};
} );

locale = new Locale();
view = new ToolbarView( locale, {
shouldGroupWhenFull: true
} );

view.render();
view.element.style.width = '200px';
document.body.appendChild( view.element );
Expand Down Expand Up @@ -607,25 +621,18 @@ describe( 'ToolbarView', () => {
} );

describe( 'render()', () => {
let view, resizeObserverInstance, groupedItems, ungroupedItems;
let view, groupedItems, ungroupedItems;

beforeEach( () => {
function FakeResizeObserver( callback ) {
this._callback = callback;
}

FakeResizeObserver.prototype.observe = sinon.spy();
FakeResizeObserver.prototype.disconnect = sinon.spy();

testUtils.sinon.stub( global.window, 'ResizeObserver' ).value( FakeResizeObserver );

view = new ToolbarView( locale, {
shouldGroupWhenFull: true
} );

observeSpy.resetHistory();
unobserveSpy.resetHistory();

view.render();

resizeObserverInstance = view._behavior.resizeObserver;
groupedItems = view._behavior.groupedItems;
ungroupedItems = view._behavior.ungroupedItems;

Expand All @@ -638,8 +645,8 @@ describe( 'ToolbarView', () => {
} );

it( 'starts observing toolbar resize immediatelly after render', () => {
sinon.assert.calledOnce( resizeObserverInstance.observe );
sinon.assert.calledWithExactly( resizeObserverInstance.observe, view.element );
sinon.assert.calledOnce( observeSpy );
sinon.assert.calledWithExactly( observeSpy, view.element );
} );

it( 'updates the UI when the toolbar is being resized (expanding)', () => {
Expand All @@ -651,12 +658,18 @@ describe( 'ToolbarView', () => {
view.items.add( focusable() );
view.items.add( focusable() );

resizeObserverInstance._callback( [ { contentRect: new Rect( view.element ) } ] );
resizeCallback( [ {
target: view.element,
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 ) } ] );
resizeCallback( [ {
target: view.element,
contentRect: new Rect( view.element )
} ] );

expect( ungroupedItems ).to.have.length( 5 );
expect( groupedItems ).to.have.length( 0 );
Expand All @@ -671,12 +684,18 @@ describe( 'ToolbarView', () => {
view.items.add( focusable() );
view.items.add( focusable() );

resizeObserverInstance._callback( [ { contentRect: new Rect( view.element ) } ] );
resizeCallback( [ {
target: view.element,
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 ) } ] );
resizeCallback( [ {
target: view.element,
contentRect: new Rect( view.element )
} ] );

expect( ungroupedItems ).to.have.length( 1 );
expect( groupedItems ).to.have.length( 4 );
Expand All @@ -694,11 +713,17 @@ describe( 'ToolbarView', () => {

sinon.spy( view._behavior, '_updateGrouping' );
view.element.style.width = '500px';
resizeObserverInstance._callback( [ { contentRect: new Rect( view.element ) } ] );
resizeCallback( [ {
target: view.element,
contentRect: new Rect( view.element )
} ] );

sinon.assert.calledOnce( view._behavior._updateGrouping );
view.element.style.height = '500px';
resizeObserverInstance._callback( [ { contentRect: new Rect( view.element ) } ] );
resizeCallback( [ {
target: view.element,
contentRect: new Rect( view.element )
} ] );

sinon.assert.calledOnce( view._behavior._updateGrouping );
} );
Expand All @@ -707,7 +732,10 @@ describe( 'ToolbarView', () => {
testUtils.sinon.spy( view._behavior, '_updateGrouping' );
sinon.assert.notCalled( view._behavior._updateGrouping );

resizeObserverInstance._callback( [ { contentRect: new Rect( view.element ) } ] );
resizeCallback( [ {
target: view.element,
contentRect: new Rect( view.element )
} ] );

sinon.assert.calledOnce( view._behavior._updateGrouping );
} );
Expand Down Expand Up @@ -738,7 +766,7 @@ describe( 'ToolbarView', () => {
sinon.assert.calledOnce( groupedItemsDropdown.destroy );
} );

it( 'disconnects the #resizeObserver', () => {
it( 'should destroy the #resizeObserver', () => {
view.element.style.width = '200px';

const itemA = focusable();
Expand All @@ -751,10 +779,10 @@ describe( 'ToolbarView', () => {
view.items.add( itemC );
view.items.add( itemD );

sinon.spy( view._behavior.resizeObserver, 'disconnect' );
sinon.spy( view._behavior.resizeObserver, 'destroy' );

view.destroy();
sinon.assert.calledOnce( view._behavior.resizeObserver.disconnect );
sinon.assert.calledOnce( view._behavior.resizeObserver.destroy );
} );
} );

Expand Down

0 comments on commit 33a205d

Please sign in to comment.