Kaynağa Gözat

Tests: Added MediaEmbedUI tests.

Aleksander Nowodzinski 7 yıl önce
ebeveyn
işleme
8b21b02ddc

+ 8 - 8
packages/ckeditor5-media-embed/src/mediaembedui.js

@@ -9,7 +9,7 @@
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
-import imageIcon from '../theme/icons/media.svg';
+import mediaIcon from '../theme/icons/media.svg';
 import MediaFormView from './ui/mediaformview';
 import { hasMediaContent } from './utils';
 
@@ -48,10 +48,13 @@ export default class MediaEmbedUI extends Plugin {
 
 		button.set( {
 			label: t( 'Insert media' ),
-			icon: imageIcon,
+			icon: mediaIcon,
 			tooltip: true
 		} );
 
+		// Note: Use the low priority to make sure the following listener starts working after the
+		// default action of the drop-down is executed (i.e. the panel showed up). Otherwise, the
+		// invisible form/input cannot be focused/selected.
 		button.on( 'open', () => {
 			// Make sure that each time the panel shows up, the URL field remains in sync with the value of
 			// the command. If the user typed in the input, then canceled (`urlInputView#value` stays
@@ -70,10 +73,7 @@ export default class MediaEmbedUI extends Plugin {
 			}
 		} );
 
-		dropdown.on( 'change:isOpen', () => {
-			form.resetErrors();
-		} );
-
+		dropdown.on( 'change:isOpen', () => form.resetErrors() );
 		dropdown.on( 'cancel', () => closeUI() );
 
 		function closeUI() {
@@ -96,12 +96,12 @@ function getFormValidators( editor ) {
 	const t = editor.t;
 
 	return [
-		function( form ) {
+		form => {
 			if ( !form.url.length ) {
 				return t( 'The URL must not be empty.' );
 			}
 		},
-		function( form ) {
+		form => {
 			if ( !hasMediaContent( editor, form.url ) ) {
 				return t( 'This media URL is not supported.' );
 			}

+ 225 - 0
packages/ckeditor5-media-embed/tests/mediaembedui.js

@@ -0,0 +1,225 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
+import MediaEmbed from '../src/mediaembed';
+import MediaFormView from '../src/ui/mediaformview';
+import DropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownview';
+import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+import mediaIcon from '../theme/icons/media.svg';
+
+describe( 'MediaEmbedUI', () => {
+	let editorElement, editor, dropdown, button, form;
+
+	beforeEach( () => {
+		editorElement = global.document.createElement( 'div' );
+		global.document.body.appendChild( editorElement );
+
+		return ClassicTestEditor
+			.create( editorElement, {
+				plugins: [ MediaEmbed ],
+				mediaEmbed: {
+					media: {
+						test: {
+							url: /https:\/\/valid\/(.*)/,
+							html: id => `<iframe src="${ id }"></iframe>`
+						}
+					}
+				}
+			} )
+			.then( newEditor => {
+				editor = newEditor;
+				dropdown = editor.ui.componentFactory.create( 'insertMedia' );
+				button = dropdown.buttonView;
+				form = dropdown.panelView.children.get( 0 );
+			} );
+	} );
+
+	afterEach( () => {
+		editorElement.remove();
+
+		return editor.destroy();
+	} );
+
+	it( 'should add the "insertMedia" component to the factory', () => {
+		expect( dropdown ).to.be.instanceOf( DropdownView );
+	} );
+
+	describe( 'dropdown', () => {
+		it( 'should bind #isEnabled to the command', () => {
+			const command = editor.commands.get( 'insertMedia' );
+
+			expect( dropdown.isEnabled ).to.be.true;
+
+			command.isEnabled = false;
+			expect( dropdown.isEnabled ).to.be.false;
+		} );
+
+		it( 'should add a form to the panelView#children collection', () => {
+			expect( dropdown.panelView.children.length ).to.equal( 1 );
+			expect( dropdown.panelView.children.get( 0 ) ).to.be.instanceOf( MediaFormView );
+		} );
+
+		describe( 'button', () => {
+			it( 'should set a #label of the #buttonView', () => {
+				expect( dropdown.buttonView.label ).to.equal( 'Insert media' );
+			} );
+
+			it( 'should set an #icon of the #buttonView', () => {
+				expect( dropdown.buttonView.icon ).to.equal( mediaIcon );
+			} );
+
+			it( 'should enable tooltips for the #buttonView', () => {
+				expect( dropdown.buttonView.tooltip ).to.be.true;
+			} );
+
+			describe( '#open event', () => {
+				it( 'executes the actions with the "low" priority', () => {
+					const spy = sinon.spy();
+					const selectSpy = sinon.spy( form.urlInputView, 'select' );
+
+					button.on( 'open', () => {
+						spy();
+					} );
+
+					button.fire( 'open' );
+					sinon.assert.callOrder( spy, selectSpy );
+				} );
+
+				it( 'should update form\'s #url', () => {
+					const command = editor.commands.get( 'insertMedia' );
+
+					button.fire( 'open' );
+					expect( form.url ).to.equal( '' );
+
+					command.value = 'foo';
+					button.fire( 'open' );
+					expect( form.url ).to.equal( 'foo' );
+				} );
+
+				it( 'should select the content of the input', () => {
+					const spy = sinon.spy( form.urlInputView, 'select' );
+
+					button.fire( 'open' );
+					sinon.assert.calledOnce( spy );
+				} );
+
+				it( 'should focus the form', () => {
+					const spy = sinon.spy( form, 'focus' );
+
+					button.fire( 'open' );
+					sinon.assert.calledOnce( spy );
+				} );
+			} );
+		} );
+
+		describe( '#submit event', () => {
+			it( 'checks if the form is valid', () => {
+				const spy = sinon.spy( form, 'isValid' );
+
+				dropdown.fire( 'submit' );
+
+				sinon.assert.calledOnce( spy );
+			} );
+
+			it( 'executes the command and closes the UI (if the form is valid)', () => {
+				const viewFocusSpy = sinon.spy( editor.editing.view, 'focus' );
+				const commandSpy = sinon.spy( editor.commands.get( 'insertMedia' ), 'execute' );
+
+				// The form is invalid.
+				const stub = sinon.stub( form, 'isValid' ).returns( false );
+				form.url = 'http://ckeditor.com';
+				dropdown.isOpen = true;
+
+				dropdown.fire( 'submit' );
+
+				sinon.assert.notCalled( commandSpy );
+				sinon.assert.notCalled( viewFocusSpy );
+				expect( dropdown.isOpen ).to.be.true;
+
+				// The form is valid.
+				stub.returns( true );
+				dropdown.fire( 'submit' );
+
+				sinon.assert.calledOnce( commandSpy );
+				sinon.assert.calledWithExactly( commandSpy, 'http://ckeditor.com' );
+				sinon.assert.calledOnce( viewFocusSpy );
+				expect( dropdown.isOpen ).to.be.false;
+			} );
+		} );
+
+		describe( '#change:isOpen event', () => {
+			it( 'resets form errors', () => {
+				const spy = sinon.spy( form, 'resetErrors' );
+
+				dropdown.fire( 'change:isOpen' );
+
+				sinon.assert.calledOnce( spy );
+			} );
+		} );
+
+		describe( '#cancel event', () => {
+			it( 'closes the UI', () => {
+				const viewFocusSpy = sinon.spy( editor.editing.view, 'focus' );
+
+				dropdown.isOpen = true;
+				dropdown.fire( 'cancel' );
+
+				sinon.assert.calledOnce( viewFocusSpy );
+				expect( dropdown.isOpen ).to.be.false;
+			} );
+		} );
+	} );
+
+	describe( 'form', () => {
+		it( 'delegates #submit to the dropdown', done => {
+			dropdown.once( 'submit', () => done() );
+
+			form.fire( 'submit' );
+		} );
+
+		it( 'delegates #cancel to the dropdown', done => {
+			dropdown.once( 'submit', () => done() );
+
+			form.fire( 'submit' );
+		} );
+
+		it( 'binds urlInputView#isReadOnly to command#isEnabled', () => {
+			const command = editor.commands.get( 'insertMedia' );
+
+			expect( form.urlInputView.isReadOnly ).to.be.false;
+
+			command.isEnabled = false;
+			expect( form.urlInputView.isReadOnly ).to.be.true;
+		} );
+
+		it( 'binds saveButtonView#isEnabled to command#isEnabled', () => {
+			const command = editor.commands.get( 'insertMedia' );
+
+			expect( form.saveButtonView.isEnabled ).to.be.true;
+
+			command.isEnabled = false;
+			expect( form.saveButtonView.isEnabled ).to.be.false;
+		} );
+
+		describe( 'validators', () => {
+			it( 'check the empty URL', () => {
+				form.url = '';
+				expect( form.isValid() ).to.be.false;
+
+				form.url = 'https://valid/url';
+				expect( form.isValid() ).to.be.true;
+			} );
+
+			it( 'check the supported media', () => {
+				form.url = 'https://invalid/url';
+				expect( form.isValid() ).to.be.false;
+
+				form.url = 'https://valid/url';
+				expect( form.isValid() ).to.be.true;
+			} );
+		} );
+	} );
+} );