CodeMirror: fix scrollToCaretPosition $.textSelection implementation

Add selenium tests for textSelection API.

Bug: T317243
Change-Id: I0904a715698aa235fb0744cbc4ff0f9787387592

src/codemirror.js

@@ -149,7 +149,9 @@ export default class CodeMirror {
 				];
 			},
 			scrollToCaretPosition: () => {
-				this.view.scrollIntoView( this.view.state.selection.main.head );
+				this.view.dispatch( {
+					effects: EditorView.scrollIntoView( this.view.state.selection.main.head )
+				} );
 				return $cmDom;
 			}
 		};

tests/selenium/pageobjects/edit.page.js

@@ -4,8 +4,16 @@ const Page = require( 'wdio-mediawiki/Page' );
 
 // Copied from mediawiki-core edit.page.js
 class EditPage extends Page {
-	async openForEditing( title ) {
-		await super.openTitle( title, { action: 'edit', vehidebetadialog: 1, hidewelcomedialog: 1 } );
+	async openForEditing( title, cm6enable = false ) {
+		const queryParams = {
+			action: 'edit',
+			vehidebetadialog: 1,
+			hidewelcomedialog: 1
+		};
+		if ( cm6enable ) {
+			queryParams.cm6enable = '1';
+		}
+		await super.openTitle( title, queryParams );
 	}
 
 	get wikiEditorToolbar() { return $( '#wikiEditor-ui-toolbar' ); }

tests/selenium/specs/textSelection-wikitext2010.js

@@ -0,0 +1,83 @@
+'use strict';
+
+const assert = require( 'assert' ),
+	EditPage = require( '../pageobjects/edit.page' ),
+	FixtureContent = require( '../fixturecontent' ),
+	LoginPage = require( 'wdio-mediawiki/LoginPage' ),
+	UserPreferences = require( '../userpreferences' ),
+	Util = require( 'wdio-mediawiki/Util' );
+
+describe( 'CodeMirror textSelection for the wikitext 2010 editor', () => {
+	let title;
+
+	before( async () => {
+		title = Util.getTestString( 'CodeMirror-fixture1-' );
+		await LoginPage.loginAdmin();
+		await FixtureContent.createFixturePage( title );
+		await UserPreferences.enableWikitext2010EditorWithCodeMirror();
+		await EditPage.openForEditing( title, true );
+		await EditPage.wikiEditorToolbar.waitForDisplayed();
+		await EditPage.clickText();
+	} );
+
+	it( 'sets and gets the correct text when using setContents and getContents', async () => {
+		await browser.execute( () => $( '.cm-editor' ).textSelection( 'setContents', 'foobar' ) );
+		assert.strictEqual(
+			await browser.execute( () => $( '.cm-editor' ).textSelection( 'getContents' ) ),
+			'foobar'
+		);
+	} );
+
+	it( 'sets and gets the correct selection when using setSelection and getSelection', async () => {
+		await browser.execute( () => {
+			$( '.cm-editor' ).textSelection( 'setSelection', { start: 3, end: 6 } );
+		} );
+		assert.strictEqual(
+			await browser.execute( () => {
+				return $( '.cm-editor' ).textSelection( 'getSelection' );
+			} ),
+			'bar'
+		);
+	} );
+
+	it( 'correctly replaces the selected text when using replaceSelection', async () => {
+		await browser.execute( () => $( '.cm-editor' ).textSelection( 'replaceSelection', 'baz' ) );
+		assert.strictEqual(
+			await browser.execute( () => $( '.cm-editor' ).textSelection( 'getContents' ) ),
+			'foobaz'
+		);
+	} );
+
+	it( 'returns the correct values for getCaretPosition', async () => {
+		await browser.execute( () => {
+			$( '.cm-editor' ).textSelection( 'setSelection', { start: 3, end: 6 } );
+		} );
+		assert.strictEqual(
+			await browser.execute( () => $( '.cm-editor' ).textSelection( 'getCaretPosition' ) ),
+			6
+		);
+		assert.deepStrictEqual(
+			await browser.execute( () => {
+				return $( '.cm-editor' ).textSelection( 'getCaretPosition', { startAndEnd: true } );
+			} ),
+			[ 3, 6 ]
+		);
+	} );
+
+	it( 'scrolls to the correct place when using scrollToCaretPosition', async () => {
+		await browser.execute( () => {
+			const $cmEditor = $( '.cm-editor' );
+			$cmEditor.textSelection( 'setContents', 'foobar\n'.repeat( 50 ) );
+			// Ensure caret is at the top.
+			$cmEditor.textSelection( 'setSelection', { start: 0 } );
+			// Force scrolling to the bottom.
+			$( '.cm-scroller' )[ 0 ].scrollTop = 5000;
+			// Use textSelection to scroll back to caret.
+			$cmEditor.textSelection( 'scrollToCaretPosition' );
+		} );
+		assert.strictEqual(
+			await browser.execute( () => $( '.cm-scroller' ).scrollTop() ),
+			0
+		);
+	} );
+} );