瀏覽代碼

Added unit tests for fake panels.

Oskar Wróbel 6 年之前
父節點
當前提交
07049a8a87

+ 3 - 1
packages/ckeditor5-ui/src/panel/balloon/contextualballoon.js

@@ -147,7 +147,7 @@ export default class ContextualBalloon extends Plugin {
 		this._rotatorView = this._createRotatorView();
 
 		/**
-		 * Displays fake panels under the balloon panel view.
+		 * Displays fake panels under the balloon panel view when multiple stacks are added to the balloon.
 		 *
 		 * @private
 		 * @type {module:ui/view~View}
@@ -633,6 +633,8 @@ class RotatorView extends View {
 	}
 }
 
+// Displays additional layers under the balloon when multiple stacks are added to the balloon.
+//
 // @private
 // @extends module:ui/view~View
 class FakePanelsView extends View {

+ 133 - 0
packages/ckeditor5-ui/tests/panel/balloon/contextualballoon.js

@@ -876,5 +876,138 @@ describe( 'ContextualBalloon', () => {
 
 			sinon.assert.calledOnce( editableFocusSpy );
 		} );
+
+		it( 'should add hidden view with fake panels to editor body collection', () => {
+			const fakePanelsView = editor.ui.view.body.last;
+
+			expect( fakePanelsView.element.classList.contains( 'ck-fake-panel' ) ).to.equal( true );
+			expect( fakePanelsView.element.classList.contains( 'ck-hidden' ) ).to.equal( true );
+			expect( fakePanelsView.element.childElementCount ).to.equal( 0 );
+		} );
+
+		it( 'should show fake panels when more than one stack is added to the balloon (max to 3 panels)', () => {
+			const fakePanelsView = editor.ui.view.body.last;
+			const viewD = new View();
+			const viewE = new View();
+
+			balloon.add( {
+				view: viewB,
+				stackId: 'second'
+			} );
+
+			expect( fakePanelsView.element.classList.contains( 'ck-hidden' ) ).to.equal( false );
+			expect( fakePanelsView.element.childElementCount ).to.equal( 1 );
+
+			balloon.add( {
+				view: viewC,
+				stackId: 'third'
+			} );
+
+			expect( fakePanelsView.element.classList.contains( 'ck-hidden' ) ).to.equal( false );
+			expect( fakePanelsView.element.childElementCount ).to.equal( 2 );
+
+			balloon.add( {
+				view: viewD,
+				stackId: 'fourth'
+			} );
+
+			expect( fakePanelsView.element.classList.contains( 'ck-hidden' ) ).to.equal( false );
+			expect( fakePanelsView.element.childElementCount ).to.equal( 3 );
+
+			balloon.add( {
+				view: viewE,
+				stackId: 'fifth'
+			} );
+
+			expect( fakePanelsView.element.classList.contains( 'ck-hidden' ) ).to.equal( false );
+			expect( fakePanelsView.element.childElementCount ).to.equal( 3 );
+
+			balloon.remove( viewE );
+
+			expect( fakePanelsView.element.classList.contains( 'ck-hidden' ) ).to.equal( false );
+			expect( fakePanelsView.element.childElementCount ).to.equal( 3 );
+
+			balloon.remove( viewD );
+
+			expect( fakePanelsView.element.classList.contains( 'ck-hidden' ) ).to.equal( false );
+			expect( fakePanelsView.element.childElementCount ).to.equal( 2 );
+
+			balloon.remove( viewC );
+
+			expect( fakePanelsView.element.classList.contains( 'ck-hidden' ) ).to.equal( false );
+			expect( fakePanelsView.element.childElementCount ).to.equal( 1 );
+
+			balloon.remove( viewB );
+
+			expect( fakePanelsView.element.classList.contains( 'ck-hidden' ) ).to.equal( true );
+			expect( fakePanelsView.element.childElementCount ).to.equal( 0 );
+		} );
+
+		it( 'should keep position of fake panels up to date with balloon position when panels are visible', () => {
+			const fakePanelsView = editor.ui.view.body.last;
+
+			let width = 30;
+			let height = 40;
+
+			balloon.view.top = 10;
+			balloon.view.left = 20;
+
+			sinon.stub( balloon.view.element, 'clientWidth' ).get( () => width );
+			sinon.stub( balloon.view.element, 'clientHeight' ).get( () => height );
+
+			balloon.add( {
+				view: viewB,
+				stackId: 'second'
+			} );
+
+			expect( fakePanelsView.element.style.top ).to.equal( '10px' );
+			expect( fakePanelsView.element.style.left ).to.equal( '20px' );
+			expect( fakePanelsView.element.style.width ).to.equal( '30px' );
+			expect( fakePanelsView.element.style.height ).to.equal( '40px' );
+
+			balloon.view.top = 15;
+			balloon.view.left = 25;
+			width = 35;
+			height = 45;
+
+			balloon.add( {
+				view: viewC,
+				stackId: 'third'
+			} );
+
+			expect( fakePanelsView.element.style.top ).to.equal( '15px' );
+			expect( fakePanelsView.element.style.left ).to.equal( '25px' );
+			expect( fakePanelsView.element.style.width ).to.equal( '35px' );
+			expect( fakePanelsView.element.style.height ).to.equal( '45px' );
+
+			balloon.view.top = 10;
+			balloon.view.left = 20;
+			width = 30;
+			height = 40;
+
+			balloon.updatePosition();
+
+			expect( fakePanelsView.element.style.top ).to.equal( '10px' );
+			expect( fakePanelsView.element.style.left ).to.equal( '20px' );
+			expect( fakePanelsView.element.style.width ).to.equal( '30px' );
+			expect( fakePanelsView.element.style.height ).to.equal( '40px' );
+
+			// Hide fake panels by removing additional stacks.
+			balloon.remove( viewC );
+			balloon.remove( viewB );
+
+			balloon.view.top = 15;
+			balloon.view.left = 25;
+			width = 35;
+			height = 45;
+
+			balloon.updatePosition();
+
+			// Old values because fake panels are hidden.
+			expect( fakePanelsView.element.style.top ).to.equal( '10px' );
+			expect( fakePanelsView.element.style.left ).to.equal( '20px' );
+			expect( fakePanelsView.element.style.width ).to.equal( '30px' );
+			expect( fakePanelsView.element.style.height ).to.equal( '40px' );
+		} );
 	} );
 } );