瀏覽代碼

Extend maxWidth tests

panr 5 年之前
父節點
當前提交
6776542749
共有 1 個文件被更改,包括 68 次插入24 次删除
  1. 68 24
      packages/ckeditor5-ui/tests/toolbar/block/blocktoolbar.js

+ 68 - 24
packages/ckeditor5-ui/tests/toolbar/block/blocktoolbar.js

@@ -214,30 +214,6 @@ describe( 'BlockToolbar', () => {
 
 				expect( blockToolbar.panelView.isVisible ).to.be.false;
 			} );
-
-			it( 'should set a proper toolbar max-width', () => {
-				const viewElement = editor.ui.view.editable.element;
-
-				viewElement.style.width = '400px';
-
-				resizeCallback( [ {
-					target: viewElement,
-					contentRect: new Rect( viewElement )
-				} ] );
-
-				// The expected width should be a sum of the editable width and distance between
-				// block toolbar button and editable.
-				//           ---------------------------
-				//           |                         |
-				//   ___     |                         |
-				//  |__|     |        EDITABLE         |
-				//  button   |                         |
-				//           |                         |
-				//  <--------------max-width------------>
-				const expectedWidth = blockToolbar._getToolbarMaxWidth();
-
-				expect( blockToolbar.toolbarView.maxWidth ).to.be.equal( expectedWidth );
-			} );
 		} );
 
 		describe( 'buttonView', () => {
@@ -502,6 +478,74 @@ describe( 'BlockToolbar', () => {
 
 				sinon.assert.callOrder( panelViewShowSpy, maxWidthSetSpy.set, panelViewPinSpy );
 			} );
+
+			it( 'should set a proper toolbar max-width', () => {
+				const viewElement = editor.ui.getEditableElement();
+
+				testUtils.sinon.stub( viewElement, 'getBoundingClientRect' ).returns( {
+					left: 100,
+					width: 400
+				} );
+
+				testUtils.sinon.stub( blockToolbar.buttonView.element, 'getBoundingClientRect' ).returns( {
+					left: 60,
+					width: 40
+				} );
+
+				resizeCallback( [ {
+					target: viewElement,
+					contentRect: new Rect( viewElement )
+				} ] );
+
+				blockToolbar.buttonView.fire( 'execute' );
+
+				// The expected width should be equal the distance between
+				// left edge of the block toolbar button and right edge of the editable.
+				//            ---------------------------
+				//            |                         |
+				//  ____      |                         |
+				//  |__|      |        EDITABLE         |
+				//  button    |                         |
+				//            |                         |
+				//  <--------------max-width------------>
+
+				expect( blockToolbar.toolbarView.maxWidth ).to.be.equal( '440px' );
+			} );
+
+			it( 'should set a proper toolbar max-width in RTL', () => {
+				const viewElement = editor.ui.getEditableElement();
+
+				editor.locale.uiLanguageDirection = 'rtl';
+
+				testUtils.sinon.stub( viewElement, 'getBoundingClientRect' ).returns( {
+					right: 450,
+					width: 400
+				} );
+
+				testUtils.sinon.stub( blockToolbar.buttonView.element, 'getBoundingClientRect' ).returns( {
+					left: 450,
+					width: 40
+				} );
+
+				resizeCallback( [ {
+					target: viewElement,
+					contentRect: new Rect( viewElement )
+				} ] );
+
+				blockToolbar.buttonView.fire( 'execute' );
+
+				// The expected width should be equal the distance between
+				// left edge of the editable and right edge of the block toolbar button.
+				//  ---------------------------
+				//  |                         |
+				//  |                         |      ____
+				//  |        EDITABLE         |      |__|
+				//  |                         |    button
+				//  |                         |
+				//  <--------------max-width------------>
+
+				expect( blockToolbar.toolbarView.maxWidth ).to.be.equal( '440px' );
+			} );
 		} );
 
 		it( 'should reposition the #panelView when open on ui#update', () => {