/** * @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 => `` } } } } ) .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; } ); } ); } ); } );