Przeglądaj źródła

Refactor MentionUI tests.

Maciej Gołaszewski 6 lat temu
rodzic
commit
681e9b73a9
1 zmienionych plików z 183 dodań i 331 usunięć
  1. 183 331
      packages/ckeditor5-mention/tests/mentionui.js

+ 183 - 331
packages/ckeditor5-mention/tests/mentionui.js

@@ -367,173 +367,242 @@ describe( 'MentionUI', () => {
 		} );
 	} );
 
-	describe( 'keys', () => {
-		beforeEach( () => {
-			return createClassicTestEditor( staticConfig );
-		} );
-
-		describe( 'arrows', () => {
-			it( 'should cycle down on arrow down', () => {
-				setData( model, '<paragraph>foo []</paragraph>' );
-
-				model.change( writer => {
-					writer.insertText( '@', doc.selection.getFirstPosition() );
-				} );
+	describe( 'panel behavior', () => {
+		describe( 'on esc', () => {
+			it( 'should close the opened panel', () => {
+				return createClassicTestEditor( staticConfig )
+					.then( () => {
+						setData( model, '<paragraph>foo []</paragraph>' );
 
-				return waitForDebounce()
+						model.change( writer => {
+							writer.insertText( '@', doc.selection.getFirstPosition() );
+						} );
+					} )
+					.then( waitForDebounce )
 					.then( () => {
-						expectChildViewsIsOnState( [ true, false, false, false, false ] );
+						expect( panelView.isVisible ).to.be.true;
 
-						const keyEvtData = {
-							keyCode: keyCodes.arrowdown,
+						fireKeyDownEvent( {
+							keyCode: keyCodes.esc,
 							preventDefault: sinon.spy(),
 							stopPropagation: sinon.spy()
-						};
+						} );
 
-						fireKeyDownEvent( keyEvtData );
-						expectChildViewsIsOnState( [ false, true, false, false, false ] );
+						expect( panelView.isVisible ).to.be.false;
+					} );
+			} );
+		} );
 
-						fireKeyDownEvent( keyEvtData );
-						expectChildViewsIsOnState( [ false, false, true, false, false ] );
+		describe( 'default list item', () => {
+			const feedItems = staticConfig[ 0 ].feed.map( name => ( { name } ) );
 
-						fireKeyDownEvent( keyEvtData );
-						expectChildViewsIsOnState( [ false, false, false, true, false ] );
+			beforeEach( () => {
+				return createClassicTestEditor( staticConfig );
+			} );
 
-						fireKeyDownEvent( keyEvtData );
-						expectChildViewsIsOnState( [ false, false, false, false, true ] );
+			describe( 'on arrows', () => {
+				it( 'should cycle down on arrow down', () => {
+					setData( model, '<paragraph>foo []</paragraph>' );
 
-						fireKeyDownEvent( keyEvtData );
-						expectChildViewsIsOnState( [ true, false, false, false, false ] );
+					model.change( writer => {
+						writer.insertText( '@', doc.selection.getFirstPosition() );
 					} );
-			} );
 
-			it( 'should cycle up on arrow up', () => {
-				setData( model, '<paragraph>foo []</paragraph>' );
+					return waitForDebounce()
+						.then( () => {
+							expectChildViewsIsOnState( [ true, false, false, false, false ] );
 
-				model.change( writer => {
-					writer.insertText( '@', doc.selection.getFirstPosition() );
-				} );
+							const keyEvtData = {
+								keyCode: keyCodes.arrowdown,
+								preventDefault: sinon.spy(),
+								stopPropagation: sinon.spy()
+							};
 
-				return waitForDebounce()
-					.then( () => {
-						expectChildViewsIsOnState( [ true, false, false, false, false ] );
+							fireKeyDownEvent( keyEvtData );
+							expectChildViewsIsOnState( [ false, true, false, false, false ] );
 
-						const keyEvtData = {
-							keyCode: keyCodes.arrowup,
-							preventDefault: sinon.spy(),
-							stopPropagation: sinon.spy()
-						};
+							fireKeyDownEvent( keyEvtData );
+							expectChildViewsIsOnState( [ false, false, true, false, false ] );
 
-						fireKeyDownEvent( keyEvtData );
-						expectChildViewsIsOnState( [ false, false, false, false, true ] );
+							fireKeyDownEvent( keyEvtData );
+							expectChildViewsIsOnState( [ false, false, false, true, false ] );
 
-						fireKeyDownEvent( keyEvtData );
-						expectChildViewsIsOnState( [ false, false, false, true, false ] );
+							fireKeyDownEvent( keyEvtData );
+							expectChildViewsIsOnState( [ false, false, false, false, true ] );
 
-						fireKeyDownEvent( keyEvtData );
-						expectChildViewsIsOnState( [ false, false, true, false, false ] );
+							fireKeyDownEvent( keyEvtData );
+							expectChildViewsIsOnState( [ true, false, false, false, false ] );
+						} );
+				} );
 
-						fireKeyDownEvent( keyEvtData );
-						expectChildViewsIsOnState( [ false, true, false, false, false ] );
+				it( 'should cycle up on arrow up', () => {
+					setData( model, '<paragraph>foo []</paragraph>' );
 
-						fireKeyDownEvent( keyEvtData );
-						expectChildViewsIsOnState( [ true, false, false, false, false ] );
+					model.change( writer => {
+						writer.insertText( '@', doc.selection.getFirstPosition() );
 					} );
-			} );
-		} );
 
-		describe( 'enter', () => {
-			it( 'should execute selected button', () => {
-				setData( model, '<paragraph>foo []</paragraph>' );
+					return waitForDebounce()
+						.then( () => {
+							expectChildViewsIsOnState( [ true, false, false, false, false ] );
 
-				model.change( writer => {
-					writer.insertText( '@', doc.selection.getFirstPosition() );
-				} );
+							const keyEvtData = {
+								keyCode: keyCodes.arrowup,
+								preventDefault: sinon.spy(),
+								stopPropagation: sinon.spy()
+							};
 
-				const command = editor.commands.get( 'mention' );
-				const spy = testUtils.sinon.spy( command, 'execute' );
+							fireKeyDownEvent( keyEvtData );
+							expectChildViewsIsOnState( [ false, false, false, false, true ] );
 
-				return waitForDebounce()
-					.then( () => {
-						expectChildViewsIsOnState( [ true, false, false, false, false ] );
+							fireKeyDownEvent( keyEvtData );
+							expectChildViewsIsOnState( [ false, false, false, true, false ] );
 
-						fireKeyDownEvent( {
-							keyCode: keyCodes.arrowup,
-							preventDefault: sinon.spy(),
-							stopPropagation: sinon.spy()
-						} );
+							fireKeyDownEvent( keyEvtData );
+							expectChildViewsIsOnState( [ false, false, true, false, false ] );
 
-						expectChildViewsIsOnState( [ false, false, false, false, true ] );
+							fireKeyDownEvent( keyEvtData );
+							expectChildViewsIsOnState( [ false, true, false, false, false ] );
 
-						fireKeyDownEvent( {
-							keyCode: keyCodes.enter,
-							preventDefault: sinon.spy(),
-							stopPropagation: sinon.spy()
+							fireKeyDownEvent( keyEvtData );
+							expectChildViewsIsOnState( [ true, false, false, false, false ] );
 						} );
+				} );
+			} );
 
-						sinon.assert.calledOnce( spy );
+			describe( 'on "execute" keys', () => {
+				testExecuteKey( 'enter', keyCodes.enter, feedItems );
 
-						const commandOptions = spy.getCall( 0 ).args[ 0 ];
+				testExecuteKey( 'tab', keyCodes.tab, feedItems );
 
-						expect( commandOptions ).to.have.property( 'mention' ).that.deep.equal( { name: 'Ted' } );
-						expect( commandOptions ).to.have.property( 'marker', '@' );
-						expect( commandOptions ).to.have.property( 'range' );
+				testExecuteKey( 'space', keyCodes.space, feedItems );
+			} );
+		} );
 
-						const start = model.createPositionAt( doc.getRoot().getChild( 0 ), 4 );
-						const expectedRange = model.createRange( start, start.getShiftedBy( 1 ) );
+		describe( 'custom list item', () => {
+			const issues = [
+				{ id: '1002', title: 'Some bug in editor.' },
+				{ id: '1003', title: 'Introduce this feature.' },
+				{ id: '1004', title: 'Missing docs.' },
+				{ id: '1005', title: 'Another bug.' },
+				{ id: '1006', title: 'More bugs' }
+			];
 
-						expect( commandOptions.range.isEqual( expectedRange ) ).to.be.true;
-					} );
+			beforeEach( () => {
+				return createClassicTestEditor( [
+					{
+						marker: '@',
+						feed: feedText => {
+							return Promise.resolve( issues.filter( issue => issue.id.includes( feedText ) ) );
+						},
+						itemRenderer: item => {
+							const span = global.document.createElementNS( 'http://www.w3.org/1999/xhtml', 'span' );
+
+							span.innerHTML = `<span id="${ item.id }">@${ item.title }</span>`;
+
+							return span;
+						}
+					}
+				] );
 			} );
-		} );
 
-		describe( 'tab', () => {
-			it( 'should execute selected button', () => {
+			it( 'should show panel for matched marker', () => {
 				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( () => {
-						expectChildViewsIsOnState( [ true, false, false, false, false ] );
+						expect( panelView.isVisible ).to.be.true;
+						expect( listView.items ).to.have.length( 5 );
+					} );
+			} );
 
-						fireKeyDownEvent( {
-							keyCode: keyCodes.arrowup,
-							preventDefault: sinon.spy(),
-							stopPropagation: sinon.spy()
+			describe( 'keys', () => {
+				describe( 'on arrows', () => {
+					it( 'should cycle down on arrow down', () => {
+						setData( model, '<paragraph>foo []</paragraph>' );
+
+						model.change( writer => {
+							writer.insertText( '@', doc.selection.getFirstPosition() );
 						} );
 
-						expectChildViewsIsOnState( [ false, false, false, false, true ] );
+						return waitForDebounce()
+							.then( () => {
+								expectChildViewsIsOnState( [ true, false, false, false, false ] );
 
-						fireKeyDownEvent( {
-							keyCode: keyCodes.tab,
-							preventDefault: sinon.spy(),
-							stopPropagation: sinon.spy()
+								const keyEvtData = {
+									keyCode: keyCodes.arrowdown,
+									preventDefault: sinon.spy(),
+									stopPropagation: sinon.spy()
+								};
+
+								fireKeyDownEvent( keyEvtData );
+								expectChildViewsIsOnState( [ false, true, false, false, false ] );
+
+								fireKeyDownEvent( keyEvtData );
+								expectChildViewsIsOnState( [ false, false, true, false, false ] );
+
+								fireKeyDownEvent( keyEvtData );
+								expectChildViewsIsOnState( [ false, false, false, true, false ] );
+
+								fireKeyDownEvent( keyEvtData );
+								expectChildViewsIsOnState( [ false, false, false, false, true ] );
+
+								fireKeyDownEvent( keyEvtData );
+								expectChildViewsIsOnState( [ true, false, false, false, false ] );
+							} );
+					} );
+
+					it( 'should cycle up on arrow up', () => {
+						setData( model, '<paragraph>foo []</paragraph>' );
+
+						model.change( writer => {
+							writer.insertText( '@', doc.selection.getFirstPosition() );
 						} );
 
-						sinon.assert.calledOnce( spy );
+						return waitForDebounce()
+							.then( () => {
+								expectChildViewsIsOnState( [ true, false, false, false, false ] );
 
-						const commandOptions = spy.getCall( 0 ).args[ 0 ];
+								const keyEvtData = {
+									keyCode: keyCodes.arrowup,
+									preventDefault: sinon.spy(),
+									stopPropagation: sinon.spy()
+								};
 
-						expect( commandOptions ).to.have.property( 'mention' ).that.deep.equal( { name: 'Ted' } );
-						expect( commandOptions ).to.have.property( 'marker', '@' );
-						expect( commandOptions ).to.have.property( 'range' );
+								fireKeyDownEvent( keyEvtData );
+								expectChildViewsIsOnState( [ false, false, false, false, true ] );
 
-						const start = model.createPositionAt( doc.getRoot().getChild( 0 ), 4 );
-						const expectedRange = model.createRange( start, start.getShiftedBy( 1 ) );
+								fireKeyDownEvent( keyEvtData );
+								expectChildViewsIsOnState( [ false, false, false, true, false ] );
 
-						expect( commandOptions.range.isEqual( expectedRange ) ).to.be.true;
+								fireKeyDownEvent( keyEvtData );
+								expectChildViewsIsOnState( [ false, false, true, false, false ] );
+
+								fireKeyDownEvent( keyEvtData );
+								expectChildViewsIsOnState( [ false, true, false, false, false ] );
+
+								fireKeyDownEvent( keyEvtData );
+								expectChildViewsIsOnState( [ true, false, false, false, false ] );
+							} );
 					} );
+				} );
+
+				describe( 'on "execute" keys', () => {
+					testExecuteKey( 'enter', keyCodes.enter, issues );
+
+					testExecuteKey( 'tab', keyCodes.tab, issues );
+
+					testExecuteKey( 'space', keyCodes.space, issues );
+				} );
 			} );
 		} );
 
-		describe( 'space', () => {
-			it( 'should execute selected button', () => {
+		function testExecuteKey( name, keyCode, feedItems ) {
+			it( 'should execute selected button on ' + name, () => {
 				setData( model, '<paragraph>foo []</paragraph>' );
 
 				model.change( writer => {
@@ -556,7 +625,7 @@ describe( 'MentionUI', () => {
 						expectChildViewsIsOnState( [ false, false, false, false, true ] );
 
 						fireKeyDownEvent( {
-							keyCode: keyCodes.space,
+							keyCode,
 							preventDefault: sinon.spy(),
 							stopPropagation: sinon.spy()
 						} );
@@ -565,7 +634,9 @@ describe( 'MentionUI', () => {
 
 						const commandOptions = spy.getCall( 0 ).args[ 0 ];
 
-						expect( commandOptions ).to.have.property( 'mention' ).that.deep.equal( { name: 'Ted' } );
+						const item = feedItems[ 4 ];
+
+						expect( commandOptions ).to.have.property( 'mention' ).that.deep.equal( item );
 						expect( commandOptions ).to.have.property( 'marker', '@' );
 						expect( commandOptions ).to.have.property( 'range' );
 
@@ -575,226 +646,7 @@ describe( 'MentionUI', () => {
 						expect( commandOptions.range.isEqual( expectedRange ) ).to.be.true;
 					} );
 			} );
-		} );
-
-		describe( 'esc', () => {
-			it( 'should close the opened panel', () => {
-				setData( model, '<paragraph>foo []</paragraph>' );
-
-				model.change( writer => {
-					writer.insertText( '@', doc.selection.getFirstPosition() );
-				} );
-
-				return waitForDebounce()
-					.then( () => {
-						expect( panelView.isVisible ).to.be.true;
-
-						fireKeyDownEvent( {
-							keyCode: keyCodes.esc,
-							preventDefault: sinon.spy(),
-							stopPropagation: sinon.spy()
-						} );
-
-						expect( panelView.isVisible ).to.be.false;
-					} );
-			} );
-		} );
-	} );
-
-	describe( 'itemRenderer', () => {
-		beforeEach( () => {
-			const issues = [
-				{ id: '1002', title: 'Some bug in editor.' },
-				{ id: '1003', title: 'Introduce this feature.' },
-				{ id: '1004', title: 'Missing docs.' }
-			];
-
-			return createClassicTestEditor( [
-				{
-					marker: '#',
-					feed: feedText => {
-						return Promise.resolve( issues.filter( issue => issue.id.includes( feedText ) ) );
-					},
-					itemRenderer: item => {
-						const span = global.document.createElementNS( 'http://www.w3.org/1999/xhtml', 'span' );
-
-						span.innerHTML = `<span id="${ item.id }">@${ item.title }</span>`;
-
-						return span;
-					}
-				}
-			] );
-		} );
-
-		it( 'should show panel for matched marker', () => {
-			setData( model, '<paragraph>foo []</paragraph>' );
-
-			model.change( writer => {
-				writer.insertText( '#', doc.selection.getFirstPosition() );
-			} );
-
-			return waitForDebounce()
-				.then( () => {
-					expect( panelView.isVisible ).to.be.true;
-					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( () => {
-							expectChildViewsIsOnState( [ true, false, false ] );
-
-							const keyEvtData = {
-								keyCode: keyCodes.arrowdown,
-								preventDefault: sinon.spy(),
-								stopPropagation: sinon.spy()
-							};
-
-							fireKeyDownEvent( keyEvtData );
-							expectChildViewsIsOnState( [ false, true, false ] );
-
-							fireKeyDownEvent( keyEvtData );
-							expectChildViewsIsOnState( [ false, false, true ] );
-
-							fireKeyDownEvent( keyEvtData );
-							expectChildViewsIsOnState( [ 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( () => {
-							expectChildViewsIsOnState( [ true, false, false ] );
-
-							const keyEvtData = {
-								keyCode: keyCodes.arrowup,
-								preventDefault: sinon.spy(),
-								stopPropagation: sinon.spy()
-							};
-
-							fireKeyDownEvent( keyEvtData );
-							expectChildViewsIsOnState( [ false, false, true ] );
-
-							fireKeyDownEvent( keyEvtData );
-							expectChildViewsIsOnState( [ false, true, false ] );
-
-							fireKeyDownEvent( keyEvtData );
-							expectChildViewsIsOnState( [ 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( () => {
-							expectChildViewsIsOnState( [ true, false, false ] );
-
-							fireKeyDownEvent( {
-								keyCode: keyCodes.arrowup,
-								preventDefault: sinon.spy(),
-								stopPropagation: sinon.spy()
-							} );
-
-							expectChildViewsIsOnState( [ 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( () => {
-							expectChildViewsIsOnState( [ true, false, false ] );
-
-							fireKeyDownEvent( {
-								keyCode: keyCodes.arrowup,
-								preventDefault: sinon.spy(),
-								stopPropagation: sinon.spy()
-							} );
-
-							expectChildViewsIsOnState( [ 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', () => {