diff --git a/tests/toolbar/toolbarview.js b/tests/toolbar/toolbarview.js index 71c99e3f..7ef2491e 100644 --- a/tests/toolbar/toolbarview.js +++ b/tests/toolbar/toolbarview.js @@ -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 ); @@ -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; @@ -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)', () => { @@ -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 ); @@ -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 ); @@ -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 ); } ); @@ -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 ); } ); @@ -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(); @@ -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 ); } ); } );