Explorar el Código

Updated ImageToolbar tests.

Szymon Kupś hace 9 años
padre
commit
38e255f372
Se han modificado 1 ficheros con 20 adiciones y 83 borrados
  1. 20 83
      packages/ckeditor5-image/tests/imagetoolbar.js

+ 20 - 83
packages/ckeditor5-image/tests/imagetoolbar.js

@@ -3,19 +3,17 @@
  * For licensing, see LICENSE.md.
  */
 
-/* global Event */
-
 import ClassicEditor from 'ckeditor5-editor-classic/src/classic';
 import ImageToolbar from 'ckeditor5-image/src/imagetoolbar';
 import Image from 'ckeditor5-image/src/image';
 import global from 'ckeditor5-utils/src/dom/global';
-import BalloonPanelView from 'ckeditor5-ui/src/balloonpanel/balloonpanelview';
+import ImageBalloonPanel from 'ckeditor5-image/src/ui/imageballoonpanel';
 import Plugin from 'ckeditor5-core/src/plugin';
 import ButtonView from 'ckeditor5-ui/src/button/buttonview';
 import { setData } from 'ckeditor5-engine/src/dev-utils/model';
 
 describe( 'ImageToolbar', () => {
-	let editor, button, editingView, doc, panel;
+	let editor, button, editingView, doc, panel, plugin;
 
 	beforeEach( () => {
 		const editorElement = global.document.createElement( 'div' );
@@ -31,7 +29,8 @@ describe( 'ImageToolbar', () => {
 			editor = newEditor;
 			editingView = editor.editing.view;
 			doc = editor.document;
-			panel = getBalloonPanelView( editor.ui.view.body );
+			plugin = editor.plugins.get( ImageToolbar );
+			panel = plugin._panel;
 		} );
 	} );
 
@@ -55,8 +54,7 @@ describe( 'ImageToolbar', () => {
 			plugins: [ ImageToolbar ],
 		} )
 			.then( newEditor => {
-				const viewBody = newEditor.ui.view.body;
-				expect( getBalloonPanelView( viewBody ) ).to.be.undefined;
+				expect( newEditor.plugins.get( ImageToolbar )._panel ).to.be.undefined;
 
 				newEditor.destroy();
 			} );
@@ -70,7 +68,7 @@ describe( 'ImageToolbar', () => {
 			plugins: [ ImageToolbar, FakeButton, AlterDefaultConfig ]
 		} )
 			.then( newEditor => {
-				const panel = getBalloonPanelView( newEditor.ui.view.body );
+				const panel = newEditor.plugins.get( ImageToolbar )._panel;
 				const toolbar = panel.content.get( 0 );
 				const button = toolbar.items.get( 0 );
 
@@ -81,95 +79,34 @@ describe( 'ImageToolbar', () => {
 			} );
 	} );
 
-	it( 'should add BalloonPanelView to view body', () => {
-		expect( panel ).to.be.instanceOf( BalloonPanelView );
-	} );
-
-	it( 'should attach toolbar when image is selected', () => {
-		const spy = sinon.spy( panel, 'attachTo' );
-		setData( doc, '[<image src=""></image>]' );
-
-		testPanelAttach( spy );
+	it( 'should add ImageBalloonPanel to view body', () => {
+		expect( panel ).to.be.instanceOf( ImageBalloonPanel );
 	} );
 
-	it( 'should calculate panel position on scroll event', () => {
+	it( 'should show the panel when editor gains focus and image is selected', () => {
 		setData( doc, '[<image src=""></image>]' );
-		const spy = sinon.spy( panel, 'attachTo' );
-
-		global.window.dispatchEvent( new Event( 'scroll' ) );
-
-		testPanelAttach( spy );
-	} );
-
-	it( 'should calculate panel position on resize event', () => {
-		setData( doc, '[<image src=""></image>]' );
-		const spy = sinon.spy( panel, 'attachTo' );
-
-		global.window.dispatchEvent( new Event( 'resize' ) );
-
-		testPanelAttach( spy );
-	} );
-
-	it( 'should not calculate panel position on scroll if no image is selected', () => {
-		setData( doc, '<image src=""></image>' );
-		const spy = sinon.spy( panel, 'attachTo' );
-
-		global.window.dispatchEvent( new Event( 'scroll' ) );
 
-		sinon.assert.notCalled( spy );
-	} );
-
-	it( 'should not calculate panel position on resize if no image is selected', () => {
-		setData( doc, '<image src=""></image>' );
-		const spy = sinon.spy( panel, 'attachTo' );
-
-		global.window.dispatchEvent( new Event( 'resize' ) );
+		editor.ui.focusTracker.isFocused = false;
+		const spy = sinon.spy( plugin, 'show' );
+		editor.ui.focusTracker.isFocused = true;
 
-		sinon.assert.notCalled( spy );
+		sinon.assert.calledOnce( spy );
 	} );
 
-	it( 'should hide the panel when editor looses focus', () => {
-		setData( doc, '[<image src=""></image>]' );
+	it( 'should not show the panel when editor looses focus', () => {
 		editor.ui.focusTracker.isFocused = true;
-		const spy = sinon.spy( panel, 'hide' );
+		const spy = sinon.spy( plugin, 'show' );
 		editor.ui.focusTracker.isFocused = false;
 
-		sinon.assert.calledOnce( spy );
+		sinon.assert.notCalled( spy );
 	} );
 
-	// Returns BalloonPanelView from provided collection.
-	function getBalloonPanelView( viewCollection ) {
-		return viewCollection.find( item => item instanceof BalloonPanelView );
-	}
-
-	// Tests if panel.attachTo() was called correctly.
-	function testPanelAttach( spy ) {
-		const domRange = editor.editing.view.domConverter.viewRangeToDom( editingView.selection.getFirstRange() );
+	it( 'should detach panel with hide() method', () => {
+		const spy = sinon.spy( panel, 'detach' );
+		plugin.hide();
 
 		sinon.assert.calledOnce( spy );
-		const options = spy.firstCall.args[ 0 ];
-
-		// Check if proper range was used.
-		expect( options.target.startContainer ).to.equal( domRange.startContainer );
-		expect( options.target.startOffset ).to.equal( domRange.startOffset );
-		expect( options.target.endContainer ).to.equal( domRange.endContainer );
-		expect( options.target.endOffset ).to.equal( domRange.endOffset );
-
-		// Check if north/south calculation is correct.
-		const [ north, south ] = options.positions;
-		const targetRect = { top: 10, left: 20, width: 200, height: 100, bottom: 110, right: 220 };
-		const balloonRect = { width: 50, height: 20 };
-
-		const northPosition = north( targetRect, balloonRect );
-		expect( northPosition.name ).to.equal( 'n' );
-		expect( northPosition.top ).to.equal( targetRect.top - balloonRect.height - BalloonPanelView.arrowVerticalOffset );
-		expect( northPosition.left ).to.equal( targetRect.left + targetRect.width / 2 - balloonRect.width / 2 );
-
-		const southPosition = south( targetRect, balloonRect );
-		expect( southPosition.name ).to.equal( 's' );
-		expect( southPosition.top ).to.equal( targetRect.bottom + BalloonPanelView.arrowVerticalOffset );
-		expect( southPosition.left ).to.equal( targetRect.left + targetRect.width / 2 - balloonRect.width / 2 );
-	}
+	} );
 
 	// Plugin that adds fake_button to editor's component factory.
 	class FakeButton extends Plugin {