Procházet zdrojové kódy

Fix tests after inserting the panel children on first dropdown open.

panr před 5 roky
rodič
revize
71878e7213

+ 7 - 7
packages/ckeditor5-image/src/imageinsert/imageinsertui.js

@@ -56,7 +56,6 @@ export default class ImageInsertUI extends Plugin {
 		const command = editor.commands.get( 'imageUpload' );
 
 		const dropdownView = imageInsertView.dropdownView;
-		const panelView = dropdownView.panelView;
 		const splitButtonView = dropdownView.buttonView;
 
 		splitButtonView.actionView = editor.ui.componentFactory.create( 'imageUpload' );
@@ -70,12 +69,6 @@ export default class ImageInsertUI extends Plugin {
 			}
 		} );
 
-		// Defer the children injection to improve initial performance.
-		// See https://github.com/ckeditor/ckeditor5/pull/8019#discussion_r484069652.
-		dropdownView.buttonView.once( 'open', () => {
-			panelView.children.add( imageInsertView );
-		} );
-
 		return this._setUpDropdown( dropdownView, imageInsertView, command );
 	}
 
@@ -94,9 +87,16 @@ export default class ImageInsertUI extends Plugin {
 		const t = editor.t;
 		const insertButtonView = imageInsertView.insertButtonView;
 		const insertImageViaUrlForm = imageInsertView.getIntegration( 'insertImageViaUrl' );
+		const panelView = dropdownView.panelView;
 
 		dropdownView.bind( 'isEnabled' ).to( command );
 
+		// Defer the children injection to improve initial performance.
+		// See https://github.com/ckeditor/ckeditor5/pull/8019#discussion_r484069652.
+		dropdownView.buttonView.once( 'open', () => {
+			panelView.children.add( imageInsertView );
+		} );
+
 		dropdownView.on( 'change:isOpen', () => {
 			const selectedElement = editor.model.document.selection.getSelectedElement();
 

+ 30 - 19
packages/ckeditor5-image/tests/imageinsert/imageinsertui.js

@@ -14,6 +14,7 @@ import FileDialogButtonView from '@ckeditor/ckeditor5-upload/src/ui/filedialogbu
 import FileRepository from '@ckeditor/ckeditor5-upload/src/filerepository';
 import ImageInsert from '../../src/imageinsert';
 import ImageInsertUI from '../../src/imageinsert/imageinsertui';
+import ImageInsertPanelView from '../../src/imageinsert/ui/imageinsertpanelview';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import Notification from '@ckeditor/ckeditor5-ui/src/notification/notification';
 import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
@@ -26,7 +27,7 @@ import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import { UploadAdapterMock } from '@ckeditor/ckeditor5-upload/tests/_utils/mocks';
 
 describe( 'ImageInsertUI', () => {
-	let editor, editorElement, fileRepository;
+	let editor, editorElement, fileRepository, dropdown;
 
 	class UploadAdapterPluginMock extends Plugin {
 		init() {
@@ -45,6 +46,7 @@ describe( 'ImageInsertUI', () => {
 			return ClassicEditor
 				.create( editorElement, {
 					plugins: [ Paragraph, Image, ImageInsert, ImageInsertUI, FileRepository, UploadAdapterPluginMock, Clipboard ],
+					toolbar: [ 'imageInsert' ],
 					image: {
 						upload: {
 							panel: {
@@ -58,6 +60,8 @@ describe( 'ImageInsertUI', () => {
 				.then( newEditor => {
 					editor = newEditor;
 
+					dropdown = editor.ui.view.toolbar.children.first.children.first;
+
 					// Hide all notifications (prevent alert() calls).
 					const notification = editor.plugins.get( Notification );
 					notification.on( 'show', evt => evt.stop() );
@@ -69,12 +73,22 @@ describe( 'ImageInsertUI', () => {
 
 			return editor.destroy();
 		} );
+
 		it( 'should register the "imageInsert" dropdown', () => {
 			const button = editor.ui.componentFactory.create( 'imageInsert' );
 
 			expect( button ).to.be.instanceOf( DropdownView );
 		} );
 
+		it( 'should not insert panel view children until dropdown is not open for the first time', () => {
+			expect( dropdown.panelView.children.length ).to.equal( 0 );
+
+			dropdown.buttonView.fire( 'open' );
+
+			expect( dropdown.panelView.children.length ).to.equal( 1 );
+			expect( dropdown.panelView.children.first ).to.be.instanceOf( ImageInsertPanelView );
+		} );
+
 		describe( 'dropdown action button', () => {
 			it( 'should be an instance of FileDialogButtonView', () => {
 				const dropdown = editor.ui.componentFactory.create( 'imageInsert' );
@@ -85,7 +99,6 @@ describe( 'ImageInsertUI', () => {
 
 		describe( 'dropdown panel buttons', () => {
 			it( 'should have "Update" label on submit button when URL input is already filled', () => {
-				const dropdown = editor.ui.componentFactory.create( 'imageInsert' );
 				const viewDocument = editor.editing.view.document;
 
 				editor.setData( '<figure><img src="/assets/sample.png" /></figure>' );
@@ -102,17 +115,15 @@ describe( 'ImageInsertUI', () => {
 
 				viewDocument.fire( 'click', domEventDataMock );
 
-				dropdown.isOpen = true;
+				dropdown.buttonView.fire( 'open' );
 
 				const inputValue = dropdown.panelView.children.first.imageURLInputValue;
 
-				expect( dropdown.isOpen ).to.be.true;
 				expect( inputValue ).to.equal( '/assets/sample.png' );
 				expect( dropdown.panelView.children.first.insertButtonView.label ).to.equal( 'Update' );
 			} );
 
 			it( 'should have "Insert" label on submit button on uploading a new image', () => {
-				const dropdown = editor.ui.componentFactory.create( 'imageInsert' );
 				const viewDocument = editor.editing.view.document;
 
 				editor.setData( '<p>test</p>' );
@@ -129,7 +140,7 @@ describe( 'ImageInsertUI', () => {
 
 				viewDocument.fire( 'click', domEventDataMock );
 
-				dropdown.isOpen = true;
+				dropdown.buttonView.fire( 'open' );
 
 				const inputValue = dropdown.panelView.children.first.imageURLInputValue;
 
@@ -142,7 +153,6 @@ describe( 'ImageInsertUI', () => {
 		describe( 'dropdown panel integrations', () => {
 			describe( 'insert image via URL form', () => {
 				it( 'should have "Insert image via URL" label on inserting new image', () => {
-					const dropdown = editor.ui.componentFactory.create( 'imageInsert' );
 					const viewDocument = editor.editing.view.document;
 
 					editor.setData( '<p>test</p>' );
@@ -159,7 +169,7 @@ describe( 'ImageInsertUI', () => {
 
 					viewDocument.fire( 'click', domEventDataMock );
 
-					dropdown.isOpen = true;
+					dropdown.buttonView.fire( 'open' );
 
 					const inputValue = dropdown.panelView.children.first.imageURLInputValue;
 
@@ -171,7 +181,6 @@ describe( 'ImageInsertUI', () => {
 				} );
 
 				it( 'should have "Update image URL" label on updating the image source URL', () => {
-					const dropdown = editor.ui.componentFactory.create( 'imageInsert' );
 					const viewDocument = editor.editing.view.document;
 
 					editor.setData( '<figure><img src="/assets/sample.png" /></figure>' );
@@ -188,7 +197,7 @@ describe( 'ImageInsertUI', () => {
 
 					viewDocument.fire( 'click', domEventDataMock );
 
-					dropdown.isOpen = true;
+					dropdown.buttonView.fire( 'open' );
 
 					const inputValue = dropdown.panelView.children.first.imageURLInputValue;
 					const insertImageViaUrlForm = dropdown.panelView.children.first.getIntegration( 'insertImageViaUrl' );
@@ -202,12 +211,12 @@ describe( 'ImageInsertUI', () => {
 
 		it( 'should remove all attributes from model except "src" when updating the image source URL', () => {
 			const viewDocument = editor.editing.view.document;
-			const dropdown = editor.ui.componentFactory.create( 'imageInsert' );
-			const insertButtonView = dropdown.panelView.children.first.insertButtonView;
 			const commandSpy = sinon.spy( editor.commands.get( 'imageInsert' ), 'execute' );
 			const submitSpy = sinon.spy();
 
-			dropdown.isOpen = true;
+			dropdown.buttonView.fire( 'open' );
+
+			const insertButtonView = dropdown.panelView.children.first.insertButtonView;
 
 			editor.setData( '<figure><img src="image-url-800w.jpg"' +
 			'srcset="image-url-480w.jpg 480w,image-url-800w.jpg 800w"' +
@@ -239,15 +248,15 @@ describe( 'ImageInsertUI', () => {
 
 		describe( 'events', () => {
 			it( 'should emit "submit" event when clicking on submit button', () => {
-				const dropdown = editor.ui.componentFactory.create( 'imageInsert' );
-				const insertButtonView = dropdown.panelView.children.first.insertButtonView;
 				const commandSpy = sinon.spy( editor.commands.get( 'imageInsert' ), 'execute' );
 				const submitSpy = sinon.spy();
 
-				dropdown.isOpen = true;
+				dropdown.buttonView.fire( 'open' );
 
 				dropdown.on( 'submit', submitSpy );
 
+				const insertButtonView = dropdown.panelView.children.first.insertButtonView;
+
 				insertButtonView.fire( 'execute' );
 
 				expect( dropdown.isOpen ).to.be.false;
@@ -256,15 +265,15 @@ describe( 'ImageInsertUI', () => {
 			} );
 
 			it( 'should emit "cancel" event when clicking on cancel button', () => {
-				const dropdown = editor.ui.componentFactory.create( 'imageInsert' );
-				const cancelButtonView = dropdown.panelView.children.first.cancelButtonView;
 				const commandSpy = sinon.spy( editor.commands.get( 'imageInsert' ), 'execute' );
 				const cancelSpy = sinon.spy();
 
-				dropdown.isOpen = true;
+				dropdown.buttonView.fire( 'open' );
 
 				dropdown.on( 'cancel', cancelSpy );
 
+				const cancelButtonView = dropdown.panelView.children.first.cancelButtonView;
+
 				cancelButtonView.fire( 'execute' );
 
 				expect( dropdown.isOpen ).to.be.false;
@@ -300,6 +309,8 @@ describe( 'ImageInsertUI', () => {
 
 			const dropdown = editor.ui.componentFactory.create( 'imageInsert' );
 
+			dropdown.buttonView.fire( 'open' );
+
 			expect( dropdown.panelView.children.first._integrations.length ).to.equal( 2 );
 			expect( dropdown.panelView.children.first._integrations.first ).to.be.instanceOf( LabeledFieldView );
 			expect( dropdown.panelView.children.first._integrations.last ).to.be.instanceOf( ButtonView );