Explorar el Código

Update balloontoolbar tests

panr hace 6 años
padre
commit
fb7686e640
Se han modificado 1 ficheros con 56 adiciones y 4 borrados
  1. 56 4
      packages/ckeditor5-ui/tests/toolbar/balloon/balloontoolbar.js

+ 56 - 4
packages/ckeditor5-ui/tests/toolbar/balloon/balloontoolbar.js

@@ -12,9 +12,11 @@ import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
 import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
+import Heading from '@ckeditor/ckeditor5-heading/src/heading';
 import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+import ResizeObserver from '@ckeditor/ckeditor5-utils/src/dom/resizeobserver';
 
 import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 import { stringify as viewStringify } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
@@ -235,9 +237,13 @@ describe( 'BalloonToolbar', () => {
 						defaultPositions.southEastArrowNorth,
 						defaultPositions.southEastArrowNorthEast,
 						defaultPositions.southEastArrowNorthWest,
+						defaultPositions.southEastArrowNorthMiddleEast,
+						defaultPositions.southEastArrowNorthMiddleWest,
 						defaultPositions.northEastArrowSouth,
 						defaultPositions.northEastArrowSouthEast,
-						defaultPositions.northEastArrowSouthWest
+						defaultPositions.northEastArrowSouthWest,
+						defaultPositions.northEastArrowSouthMiddleEast,
+						defaultPositions.northEastArrowSouthMiddleWest,
 					]
 				}
 			} );
@@ -294,9 +300,13 @@ describe( 'BalloonToolbar', () => {
 						defaultPositions.northWestArrowSouth,
 						defaultPositions.northWestArrowSouthWest,
 						defaultPositions.northWestArrowSouthEast,
+						defaultPositions.northWestArrowSouthMiddleEast,
+						defaultPositions.northWestArrowSouthMiddleWest,
 						defaultPositions.southWestArrowNorth,
 						defaultPositions.southWestArrowNorthWest,
-						defaultPositions.southWestArrowNorthEast
+						defaultPositions.southWestArrowNorthEast,
+						defaultPositions.southWestArrowNorthMiddleWest,
+						defaultPositions.southWestArrowNorthMiddleEast,
 					]
 				}
 			} );
@@ -372,7 +382,7 @@ describe( 'BalloonToolbar', () => {
 			sinon.assert.calledOnce( balloonAddSpy );
 		} );
 
-		it( 'should set the toolbar max-width to half of the editable width', done => {
+		it( 'should set the toolbar max-width to 90% of the editable width', done => {
 			const viewElement = editor.ui.view.editable.element;
 
 			setData( model, '<paragraph>b[ar]</paragraph>' );
@@ -387,7 +397,7 @@ describe( 'BalloonToolbar', () => {
 			// See more: https://twitter.com/paul_irish/status/912693347315150849/photo/1
 			setTimeout( () => {
 				// The expected width should be 2/3 of the editor's editable element's width.
-				const expectedWidth = toPx( new Rect( viewElement ).width * 0.66 );
+				const expectedWidth = toPx( new Rect( viewElement ).width * 0.9 );
 				expect( balloonToolbar.toolbarView.maxWidth ).to.be.equal( expectedWidth );
 
 				done();
@@ -452,6 +462,18 @@ describe( 'BalloonToolbar', () => {
 			clock.tick( 200 );
 			sinon.assert.notCalled( spy );
 		} );
+
+		it( 'should destroy #resizeObserver if is available', () => {
+			const editable = editor.ui.getEditableElement();
+			const resizeObserver = new ResizeObserver( editable, () => {} );
+			const destroySpy = sinon.spy( resizeObserver, 'destroy' );
+
+			balloonToolbar.resizeObserver = resizeObserver;
+
+			balloonToolbar.destroy();
+
+			sinon.assert.calledOnce( destroySpy );
+		} );
 	} );
 
 	describe( 'show and hide triggers', () => {
@@ -593,6 +615,36 @@ describe( 'BalloonToolbar', () => {
 		} );
 	} );
 
+	describe( 'has `Heading` plugin and editable width is less then 200px', () => {
+		let editor, balloonToolbar, viewElement;
+
+		beforeEach( () => {
+			return ClassicTestEditor.create( editorElement, {
+				plugins: [ Heading, BalloonToolbar ],
+				balloonToolbar: [ 'heading' ]
+			} ).then( newEditor => {
+				editor = newEditor;
+				balloonToolbar = editor.plugins.get( 'BalloonToolbar' );
+				viewElement = editor.ui.view.editable.element;
+			} );
+		} );
+
+		afterEach( () => {
+			editor.destroy();
+		} );
+
+		it( 'should contain `.ck-balloon-toolbar_min-width`', done => {
+			viewElement.style.width = '200px';
+
+			// We have to wait for a ResizeObserver to set the editable's width.
+			setTimeout( () => {
+				expect( balloonToolbar.toolbarView.element.classList.contains( 'ck-balloon-toolbar_min-width' ) ).to.be.true;
+
+				done();
+			}, 200 );
+		} );
+	} );
+
 	function stubSelectionRects( rects ) {
 		const originalViewRangeToDom = editingView.domConverter.viewRangeToDom;