|
|
@@ -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', () => {
|