8
0
Просмотр исходного кода

Fix: ToolbarView and ListView should add #items upon #render.

Aleksander Nowodzinski 8 лет назад
Родитель
Сommit
f877aaf23d

+ 5 - 0
packages/ckeditor5-ui/src/list/listview.js

@@ -88,6 +88,11 @@ export default class ListView extends View {
 	render() {
 		super.render();
 
+		// Items added before rendering should be known to the #focusTracker.
+		for ( const item of this.items ) {
+			this.focusTracker.add( item.element );
+		}
+
 		this.items.on( 'add', ( evt, item ) => {
 			this.focusTracker.add( item.element );
 		} );

+ 5 - 0
packages/ckeditor5-ui/src/toolbar/toolbarview.js

@@ -94,6 +94,11 @@ export default class ToolbarView extends View {
 	render() {
 		super.render();
 
+		// Items added before rendering should be known to the #focusTracker.
+		for ( const item of this.items ) {
+			this.focusTracker.add( item.element );
+		}
+
 		this.items.on( 'add', ( evt, item ) => {
 			this.focusTracker.add( item.element );
 		} );

+ 14 - 4
packages/ckeditor5-ui/tests/list/listview.js

@@ -21,6 +21,10 @@ describe( 'ListView', () => {
 		view.render();
 	} );
 
+	afterEach( () => {
+		view.destroy();
+	} );
+
 	describe( 'constructor()', () => {
 		it( 'creates element from template', () => {
 			expect( view.element.classList.contains( 'ck-reset' ) ).to.be.true;
@@ -44,30 +48,36 @@ describe( 'ListView', () => {
 		it( 'creates #_focusCycler instance', () => {
 			expect( view._focusCycler ).to.be.instanceOf( FocusCycler );
 		} );
+	} );
 
+	describe( 'render()', () => {
 		it( 'registers #items in #focusTracker', () => {
+			const view = new ListView();
 			const spyAdd = sinon.spy( view.focusTracker, 'add' );
 			const spyRemove = sinon.spy( view.focusTracker, 'remove' );
 
+			sinon.assert.notCalled( spyAdd );
 			view.items.add( focusable() );
 			view.items.add( focusable() );
 
+			view.render();
 			sinon.assert.calledTwice( spyAdd );
 
 			view.items.remove( 1 );
 			sinon.assert.calledOnce( spyRemove );
+
+			view.destroy();
 		} );
-	} );
 
-	describe( 'render()', () => {
 		it( 'starts listening for #keystrokes coming from #element', () => {
-			view = new ListView();
-
+			const view = new ListView();
 			const spy = sinon.spy( view.keystrokes, 'listenTo' );
 
 			view.render();
 			sinon.assert.calledOnce( spy );
 			sinon.assert.calledWithExactly( spy, view.element );
+
+			view.destroy();
 		} );
 
 		describe( 'activates keyboard navigation for the list', () => {

+ 25 - 15
packages/ckeditor5-ui/tests/toolbar/toolbarview.js

@@ -28,6 +28,10 @@ describe( 'ToolbarView', () => {
 		view.render();
 	} );
 
+	afterEach( () => {
+		view.destroy();
+	} );
+
 	describe( 'constructor()', () => {
 		it( 'should set view#locale', () => {
 			expect( view.locale ).to.equal( locale );
@@ -48,19 +52,6 @@ describe( 'ToolbarView', () => {
 		it( 'creates #_focusCycler instance', () => {
 			expect( view._focusCycler ).to.be.instanceOf( FocusCycler );
 		} );
-
-		it( 'registers #items in #focusTracker', () => {
-			const spyAdd = sinon.spy( view.focusTracker, 'add' );
-			const spyRemove = sinon.spy( view.focusTracker, 'remove' );
-
-			view.items.add( focusable() );
-			view.items.add( focusable() );
-
-			sinon.assert.calledTwice( spyAdd );
-
-			view.items.remove( 1 );
-			sinon.assert.calledOnce( spyRemove );
-		} );
 	} );
 
 	describe( 'template', () => {
@@ -80,14 +71,33 @@ describe( 'ToolbarView', () => {
 	} );
 
 	describe( 'render()', () => {
-		it( 'starts listening for #keystrokes coming from #element', () => {
-			view = new ToolbarView();
+		it( 'registers #items in #focusTracker', () => {
+			const view = new ToolbarView( locale );
+			const spyAdd = sinon.spy( view.focusTracker, 'add' );
+			const spyRemove = sinon.spy( view.focusTracker, 'remove' );
+
+			view.items.add( focusable() );
+			view.items.add( focusable() );
+			sinon.assert.notCalled( spyAdd );
+
+			view.render();
+			sinon.assert.calledTwice( spyAdd );
+
+			view.items.remove( 1 );
+			sinon.assert.calledOnce( spyRemove );
 
+			view.destroy();
+		} );
+
+		it( 'starts listening for #keystrokes coming from #element', () => {
+			const view = new ToolbarView();
 			const spy = sinon.spy( view.keystrokes, 'listenTo' );
 
 			view.render();
 			sinon.assert.calledOnce( spy );
 			sinon.assert.calledWithExactly( spy, view.element );
+
+			view.destroy();
 		} );
 
 		describe( 'activates keyboard navigation for the toolbar', () => {