Clicking "Scroll to selection" should not crash when the selection is…

… in a different root.
ckeditor · May 25, 2020 · fba637d · fba637d
1 parent e5d6dd7
commit fba637d
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 28 deletions.
diff --git a/src/model/selectioninspector.js b/src/model/selectioninspector.js
@@ -27,6 +27,11 @@ class ModelSelectionInspector extends Component {
 	handleScrollToSelectionButtonClick() {
 		const domSelectionElement = document.querySelector( '.ck-inspector-tree__position.ck-inspector-tree__position_selection' );
 
+		// E.g. wrong root is selected.
+		if ( !domSelectionElement ) {
+			return;
+		}
+
 		domSelectionElement.scrollIntoView( {
 			behavior: 'smooth',
 			block: 'center'

diff --git a/src/view/selectioninspector.js b/src/view/selectioninspector.js
@@ -27,6 +27,11 @@ class ViewSelectionInspector extends Component {
 	handleScrollToSelectionButtonClick() {
 		const domSelectionElement = document.querySelector( '.ck-inspector-tree__position.ck-inspector-tree__position_selection' );
 
+		// E.g. wrong root is selected.
+		if ( !domSelectionElement ) {
+			return;
+		}
+
 		domSelectionElement.scrollIntoView( {
 			behavior: 'smooth',
 			block: 'center'

diff --git a/tests/inspector/model/selectioninspector.js b/tests/inspector/model/selectioninspector.js
@@ -73,27 +73,43 @@ describe( '<ModelSelectionInspector />', () => {
 				sinon.assert.calledOnce( logSpy );
 			} );
 
-			it( 'should contain the scroll to selection button', () => {
-				const scrollToSelButton = wrapper.find( Button ).at( 1 );
+			describe( 'scroll to selection button', () => {
+				it( 'should be created and scroll to the selection', () => {
+					const scrollToSelButton = wrapper.find( Button ).at( 1 );
 
-				const domSelectionElementStub = {
-					scrollIntoView: sinon.spy()
-				};
+					const domSelectionElementStub = {
+						scrollIntoView: sinon.spy()
+					};
 
-				sinon.stub( document, 'querySelector' );
+					sinon.stub( document, 'querySelector' );
 
-				document.querySelector.withArgs( '.ck-inspector-tree__position.ck-inspector-tree__position_selection' )
-					.returns( domSelectionElementStub );
+					document.querySelector.withArgs( '.ck-inspector-tree__position.ck-inspector-tree__position_selection' )
+						.returns( domSelectionElementStub );
 
-				scrollToSelButton.simulate( 'click' );
+					scrollToSelButton.simulate( 'click' );
 
-				sinon.assert.calledOnce( domSelectionElementStub.scrollIntoView );
-				sinon.assert.calledWithExactly( domSelectionElementStub.scrollIntoView, {
-					behavior: 'smooth',
-					block: 'center'
+					sinon.assert.calledOnce( domSelectionElementStub.scrollIntoView );
+					sinon.assert.calledWithExactly( domSelectionElementStub.scrollIntoView, {
+						behavior: 'smooth',
+						block: 'center'
+					} );
+
+					document.querySelector.restore();
 				} );
 
-				document.querySelector.restore();
+				it( 'should not throw when the selection is in a different root', () => {
+					const scrollToSelButton = wrapper.find( Button ).at( 1 );
+
+					sinon.stub( document, 'querySelector' );
+
+					document.querySelector.returns( null );
+
+					expect( () => {
+						scrollToSelButton.simulate( 'click' );
+					} ).to.not.throw();
+
+					document.querySelector.restore();
+				} );
 			} );
 
 			it( 'should contain the log selection anchor button', () => {

diff --git a/tests/inspector/view/selectioninspector.js b/tests/inspector/view/selectioninspector.js
@@ -73,27 +73,43 @@ describe( '<ViewSelectionInspector />', () => {
 				sinon.assert.calledOnce( logSpy );
 			} );
 
-			it( 'should contain the scroll to selection button', () => {
-				const scrollToSelButton = wrapper.find( Button ).at( 1 );
+			describe( 'scroll to selection button', () => {
+				it( 'should be created and scroll to the selection', () => {
+					const scrollToSelButton = wrapper.find( Button ).at( 1 );
 
-				const domSelectionElementStub = {
-					scrollIntoView: sinon.spy()
-				};
+					const domSelectionElementStub = {
+						scrollIntoView: sinon.spy()
+					};
 
-				sinon.stub( document, 'querySelector' );
+					sinon.stub( document, 'querySelector' );
 
-				document.querySelector.withArgs( '.ck-inspector-tree__position.ck-inspector-tree__position_selection' )
-					.returns( domSelectionElementStub );
+					document.querySelector.withArgs( '.ck-inspector-tree__position.ck-inspector-tree__position_selection' )
+						.returns( domSelectionElementStub );
 
-				scrollToSelButton.simulate( 'click' );
+					scrollToSelButton.simulate( 'click' );
 
-				sinon.assert.calledOnce( domSelectionElementStub.scrollIntoView );
-				sinon.assert.calledWithExactly( domSelectionElementStub.scrollIntoView, {
-					behavior: 'smooth',
-					block: 'center'
+					sinon.assert.calledOnce( domSelectionElementStub.scrollIntoView );
+					sinon.assert.calledWithExactly( domSelectionElementStub.scrollIntoView, {
+						behavior: 'smooth',
+						block: 'center'
+					} );
+
+					document.querySelector.restore();
 				} );
 
-				document.querySelector.restore();
+				it( 'should not throw when the selection is in a different root', () => {
+					const scrollToSelButton = wrapper.find( Button ).at( 1 );
+
+					sinon.stub( document, 'querySelector' );
+
+					document.querySelector.returns( null );
+
+					expect( () => {
+						scrollToSelButton.simulate( 'click' );
+					} ).to.not.throw();
+
+					document.querySelector.restore();
+				} );
 			} );
 
 			it( 'should contain the log selection anchor button', () => {