|
|
@@ -47,9 +47,11 @@ describe( 'StickyToolbarView', () => {
|
|
|
it( 'sets view attributes', () => {
|
|
|
expect( view.isSticky ).to.be.false;
|
|
|
expect( view.limiterElement ).to.be.null;
|
|
|
- expect( view.limiterOffset ).to.equal( 50 );
|
|
|
+ expect( view.limiterBottomOffset ).to.equal( 50 );
|
|
|
+ expect( view.viewportTopOffset ).to.equal( 0 );
|
|
|
|
|
|
expect( view._isStickyToTheLimiter ).to.be.false;
|
|
|
+ expect( view._hasViewportTopOffset ).to.be.false;
|
|
|
expect( view._marginLeft ).to.be.null;
|
|
|
} );
|
|
|
|
|
|
@@ -83,6 +85,16 @@ describe( 'StickyToolbarView', () => {
|
|
|
expect( element.classList.contains( 'ck-toolbar_sticky_bottom-limit' ) ).to.be.true;
|
|
|
} );
|
|
|
|
|
|
+ it( 'update the styles.top on view#_hasViewportTopOffset change', () => {
|
|
|
+ view.viewportTopOffset = 100;
|
|
|
+
|
|
|
+ view._hasViewportTopOffset = false;
|
|
|
+ expect( element.style.top ).to.equal( '' );
|
|
|
+
|
|
|
+ view._hasViewportTopOffset = true;
|
|
|
+ expect( element.style.top ).to.equal( '100px' );
|
|
|
+ } );
|
|
|
+
|
|
|
it( 'update the styles.width on view#isSticky change', () => {
|
|
|
testUtils.sinon.stub( view._elementPlaceholder, 'getBoundingClientRect' ).returns( { width: 100 } );
|
|
|
|
|
|
@@ -151,13 +163,21 @@ describe( 'StickyToolbarView', () => {
|
|
|
expect( element.previousSibling ).to.equal( view._elementPlaceholder );
|
|
|
} );
|
|
|
|
|
|
+ it( 'checks if the toolbar should be sticky', () => {
|
|
|
+ const spy = testUtils.sinon.spy( view, '_checkIfShouldBeSticky' );
|
|
|
+ expect( spy.notCalled ).to.be.true;
|
|
|
+
|
|
|
+ view.init();
|
|
|
+ expect( spy.calledOnce ).to.be.true;
|
|
|
+ } );
|
|
|
+
|
|
|
it( 'listens to window#scroll event and calls view._checkIfShouldBeSticky', () => {
|
|
|
const spy = testUtils.sinon.spy( view, '_checkIfShouldBeSticky' );
|
|
|
+ expect( spy.notCalled ).to.be.true;
|
|
|
|
|
|
view.init();
|
|
|
global.window.fire( 'scroll' );
|
|
|
-
|
|
|
- expect( spy.calledOnce ).to.be.true;
|
|
|
+ expect( spy.calledTwice ).to.be.true;
|
|
|
} );
|
|
|
|
|
|
it( 'listens to view.isActive and calls view._checkIfShouldBeSticky', () => {
|
|
|
@@ -166,10 +186,10 @@ describe( 'StickyToolbarView', () => {
|
|
|
|
|
|
view.init();
|
|
|
view.isActive = true;
|
|
|
- expect( spy.calledOnce ).to.be.true;
|
|
|
+ expect( spy.calledTwice ).to.be.true;
|
|
|
|
|
|
view.isActive = false;
|
|
|
- expect( spy.calledTwice ).to.be.true;
|
|
|
+ expect( spy.calledThrice ).to.be.true;
|
|
|
} );
|
|
|
} );
|
|
|
|
|
|
@@ -236,10 +256,10 @@ describe( 'StickyToolbarView', () => {
|
|
|
expect( view.isSticky ).to.be.false;
|
|
|
} );
|
|
|
|
|
|
- it( 'is false if view.limiterElement is smaller than the toolbar and view.limiterOffset (toolbar is active)', () => {
|
|
|
+ it( 'is false if view.limiterElement is smaller than the toolbar and view.limiterBottomOffset (toolbar is active)', () => {
|
|
|
testUtils.sinon.stub( view.limiterElement, 'getBoundingClientRect' ).returns( { top: -10, height: 60 } );
|
|
|
view.isActive = true;
|
|
|
- view.limiterOffset = 50;
|
|
|
+ view.limiterBottomOffset = 50;
|
|
|
|
|
|
expect( view.isSticky ).to.be.false;
|
|
|
|
|
|
@@ -307,6 +327,71 @@ describe( 'StickyToolbarView', () => {
|
|
|
} );
|
|
|
} );
|
|
|
|
|
|
+ describe( 'view._hasViewportTopOffset', () => {
|
|
|
+ it( 'is true if view._isStickyToTheLimiter is false and view.viewportTopOffset has been specified', () => {
|
|
|
+ view.viewportTopOffset = 100;
|
|
|
+
|
|
|
+ testUtils.sinon.stub( view.limiterElement, 'getBoundingClientRect' ).returns( {
|
|
|
+ top: 90,
|
|
|
+ bottom: 190,
|
|
|
+ height: 100
|
|
|
+ } );
|
|
|
+
|
|
|
+ testUtils.sinon.stub( view.element, 'getBoundingClientRect' ).returns( {
|
|
|
+ height: 20
|
|
|
+ } );
|
|
|
+
|
|
|
+ view.isActive = true;
|
|
|
+
|
|
|
+ view._checkIfShouldBeSticky();
|
|
|
+ expect( view.isSticky ).to.be.true;
|
|
|
+ expect( view._isStickyToTheLimiter ).to.be.false;
|
|
|
+ expect( view._hasViewportTopOffset ).to.be.true;
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'is false if view._isStickyToTheLimiter is true and view.viewportTopOffset has been specified', () => {
|
|
|
+ view.viewportTopOffset = 100;
|
|
|
+
|
|
|
+ testUtils.sinon.stub( view.limiterElement, 'getBoundingClientRect' ).returns( {
|
|
|
+ top: 10,
|
|
|
+ bottom: 110,
|
|
|
+ height: 100
|
|
|
+ } );
|
|
|
+
|
|
|
+ testUtils.sinon.stub( view.element, 'getBoundingClientRect' ).returns( {
|
|
|
+ height: 20
|
|
|
+ } );
|
|
|
+
|
|
|
+ view.isActive = true;
|
|
|
+
|
|
|
+ view._checkIfShouldBeSticky();
|
|
|
+ expect( view.isSticky ).to.be.true;
|
|
|
+ expect( view._isStickyToTheLimiter ).to.be.true;
|
|
|
+ expect( view._hasViewportTopOffset ).to.be.false;
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'is false if view._isStickyToTheLimiter is false and view.viewportTopOffset is 0', () => {
|
|
|
+ view.viewportTopOffset = 100;
|
|
|
+
|
|
|
+ testUtils.sinon.stub( view.limiterElement, 'getBoundingClientRect' ).returns( {
|
|
|
+ top: 90,
|
|
|
+ bottom: 190,
|
|
|
+ height: 100
|
|
|
+ } );
|
|
|
+
|
|
|
+ testUtils.sinon.stub( view.element, 'getBoundingClientRect' ).returns( {
|
|
|
+ height: 20
|
|
|
+ } );
|
|
|
+
|
|
|
+ view.isActive = true;
|
|
|
+
|
|
|
+ view._checkIfShouldBeSticky();
|
|
|
+ expect( view.isSticky ).to.be.true;
|
|
|
+ expect( view._isStickyToTheLimiter ).to.be.false;
|
|
|
+ expect( view._hasViewportTopOffset ).to.be.true;
|
|
|
+ } );
|
|
|
+ } );
|
|
|
+
|
|
|
describe( 'view._marginLeft', () => {
|
|
|
it( 'is set if view.isSticky is true view._isStickyToTheLimiter is false', () => {
|
|
|
testUtils.sinon.stub( view.limiterElement, 'getBoundingClientRect' ).returns( {
|