Explorar el Código

Add missing UI tests.

Maciej Gołaszewski hace 6 años
padre
commit
b812750e70

+ 2 - 2
packages/ckeditor5-mention/src/mentionui.js

@@ -104,10 +104,10 @@ export default class MentionUI extends Plugin {
 			const { item, marker } = data;
 			const { label } = item;
 
-			const renderer = this._getItemRenderer( marker );
-
 			const listItemView = new MentionListItemView( editor.locale );
 
+			const renderer = this._getItemRenderer( marker );
+
 			if ( renderer ) {
 				const domNode = renderer( item );
 

+ 210 - 1
packages/ckeditor5-mention/tests/mentionui.js

@@ -491,7 +491,52 @@ describe( 'MentionUI', () => {
 			} );
 		} );
 
-		describe.skip( 'tab', () => {} );
+		describe( 'tab', () => {
+			it( 'should execute selected button', () => {
+				setData( model, '<paragraph>foo []</paragraph>' );
+
+				model.change( writer => {
+					writer.insertText( '@', doc.selection.getFirstPosition() );
+				} );
+
+				const command = editor.commands.get( 'mention' );
+				const spy = testUtils.sinon.spy( command, 'execute' );
+
+				return waitForDebounce()
+					.then( () => {
+						const buttons = [ ...listView.items ].map( listView => listView.children.get( 0 ) );
+
+						expect( buttons.map( b => b.isOn ) ).to.deep.equal( [ true, false, false, false, false ] );
+
+						fireKeyDownEvent( {
+							keyCode: keyCodes.arrowup,
+							preventDefault: sinon.spy(),
+							stopPropagation: sinon.spy()
+						} );
+
+						expect( buttons.map( b => b.isOn ) ).to.deep.equal( [ false, false, false, false, true ] );
+
+						fireKeyDownEvent( {
+							keyCode: keyCodes.tab,
+							preventDefault: sinon.spy(),
+							stopPropagation: sinon.spy()
+						} );
+
+						sinon.assert.calledOnce( spy );
+
+						const commandOptions = spy.getCall( 0 ).args[ 0 ];
+
+						expect( commandOptions ).to.have.property( 'mention' ).that.deep.equal( { label: 'Ted' } );
+						expect( commandOptions ).to.have.property( 'marker', '@' );
+						expect( commandOptions ).to.have.property( 'range' );
+
+						const start = model.createPositionAt( doc.getRoot().getChild( 0 ), 4 );
+						const expectedRange = model.createRange( start, start.getShiftedBy( 1 ) );
+
+						expect( commandOptions.range.isEqual( expectedRange ) ).to.be.true;
+					} );
+			} );
+		} );
 	} );
 
 	describe( 'itemRenderer', () => {
@@ -532,6 +577,170 @@ describe( 'MentionUI', () => {
 					expect( listView.items ).to.have.length( 3 );
 				} );
 		} );
+
+		describe( 'keys', () => {
+			describe( 'arrows', () => {
+				it( 'should cycle down on arrow down', () => {
+					setData( model, '<paragraph>foo []</paragraph>' );
+
+					model.change( writer => {
+						writer.insertText( '#', doc.selection.getFirstPosition() );
+					} );
+
+					return waitForDebounce()
+						.then( () => {
+							const buttons = [ ...listView.items ].map( listView => listView.children.get( 0 ) );
+
+							expect( buttons.map( b => b.isOn ) ).to.deep.equal( [ true, false, false ] );
+
+							const keyEvtData = {
+								keyCode: keyCodes.arrowdown,
+								preventDefault: sinon.spy(),
+								stopPropagation: sinon.spy()
+							};
+
+							fireKeyDownEvent( keyEvtData );
+							expect( buttons.map( b => b.isOn ) ).to.deep.equal( [ false, true, false ] );
+
+							fireKeyDownEvent( keyEvtData );
+							expect( buttons.map( b => b.isOn ) ).to.deep.equal( [ false, false, true ] );
+
+							fireKeyDownEvent( keyEvtData );
+							expect( buttons.map( b => b.isOn ) ).to.deep.equal( [ true, false, false ] );
+						} );
+				} );
+
+				it( 'should cycle up on arrow up', () => {
+					setData( model, '<paragraph>foo []</paragraph>' );
+
+					model.change( writer => {
+						writer.insertText( '#', doc.selection.getFirstPosition() );
+					} );
+
+					return waitForDebounce()
+						.then( () => {
+							const buttons = [ ...listView.items ].map( listView => listView.children.get( 0 ) );
+
+							expect( buttons.map( b => b.isOn ) ).to.deep.equal( [ true, false, false ] );
+
+							const keyEvtData = {
+								keyCode: keyCodes.arrowup,
+								preventDefault: sinon.spy(),
+								stopPropagation: sinon.spy()
+							};
+
+							fireKeyDownEvent( keyEvtData );
+							expect( buttons.map( b => b.isOn ) ).to.deep.equal( [ false, false, true ] );
+
+							fireKeyDownEvent( keyEvtData );
+							expect( buttons.map( b => b.isOn ) ).to.deep.equal( [ false, true, false ] );
+
+							fireKeyDownEvent( keyEvtData );
+							expect( buttons.map( b => b.isOn ) ).to.deep.equal( [ true, false, false ] );
+						} );
+				} );
+			} );
+
+			describe( 'enter', () => {
+				it( 'should execute selected item', () => {
+					setData( model, '<paragraph>foo []</paragraph>' );
+
+					model.change( writer => {
+						writer.insertText( '#', doc.selection.getFirstPosition() );
+					} );
+
+					const command = editor.commands.get( 'mention' );
+					const spy = testUtils.sinon.spy( command, 'execute' );
+
+					return waitForDebounce()
+						.then( () => {
+							const buttons = [ ...listView.items ].map( listView => listView.children.get( 0 ) );
+
+							expect( buttons.map( b => b.isOn ) ).to.deep.equal( [ true, false, false ] );
+
+							fireKeyDownEvent( {
+								keyCode: keyCodes.arrowup,
+								preventDefault: sinon.spy(),
+								stopPropagation: sinon.spy()
+							} );
+
+							expect( buttons.map( b => b.isOn ) ).to.deep.equal( [ false, false, true ] );
+
+							fireKeyDownEvent( {
+								keyCode: keyCodes.enter,
+								preventDefault: sinon.spy(),
+								stopPropagation: sinon.spy()
+							} );
+
+							sinon.assert.calledOnce( spy );
+
+							const commandOptions = spy.getCall( 0 ).args[ 0 ];
+
+							expect( commandOptions ).to.have.property( 'mention' ).that.deep.equal( {
+								id: '1004',
+								title: 'Missing docs.'
+							} );
+							expect( commandOptions ).to.have.property( 'marker', '#' );
+							expect( commandOptions ).to.have.property( 'range' );
+
+							const start = model.createPositionAt( doc.getRoot().getChild( 0 ), 4 );
+							const expectedRange = model.createRange( start, start.getShiftedBy( 1 ) );
+
+							expect( commandOptions.range.isEqual( expectedRange ) ).to.be.true;
+						} );
+				} );
+			} );
+
+			describe( 'tab', () => {
+				it( 'should execute selected item', () => {
+					setData( model, '<paragraph>foo []</paragraph>' );
+
+					model.change( writer => {
+						writer.insertText( '#', doc.selection.getFirstPosition() );
+					} );
+
+					const command = editor.commands.get( 'mention' );
+					const spy = testUtils.sinon.spy( command, 'execute' );
+
+					return waitForDebounce()
+						.then( () => {
+							const buttons = [ ...listView.items ].map( listView => listView.children.get( 0 ) );
+
+							expect( buttons.map( b => b.isOn ) ).to.deep.equal( [ true, false, false ] );
+
+							fireKeyDownEvent( {
+								keyCode: keyCodes.arrowup,
+								preventDefault: sinon.spy(),
+								stopPropagation: sinon.spy()
+							} );
+
+							expect( buttons.map( b => b.isOn ) ).to.deep.equal( [ false, false, true ] );
+
+							fireKeyDownEvent( {
+								keyCode: keyCodes.tab,
+								preventDefault: sinon.spy(),
+								stopPropagation: sinon.spy()
+							} );
+
+							sinon.assert.calledOnce( spy );
+
+							const commandOptions = spy.getCall( 0 ).args[ 0 ];
+
+							expect( commandOptions ).to.have.property( 'mention' ).that.deep.equal( {
+								id: '1004',
+								title: 'Missing docs.'
+							} );
+							expect( commandOptions ).to.have.property( 'marker', '#' );
+							expect( commandOptions ).to.have.property( 'range' );
+
+							const start = model.createPositionAt( doc.getRoot().getChild( 0 ), 4 );
+							const expectedRange = model.createRange( start, start.getShiftedBy( 1 ) );
+
+							expect( commandOptions.range.isEqual( expectedRange ) ).to.be.true;
+						} );
+				} );
+			} );
+		} );
 	} );
 
 	describe( 'execute', () => {