kokopu-react 1.4.0 → 1.5.1

package/src/css/error_box.css

@@ -1,7 +1,7 @@
 /******************************************************************************
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    This program is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *
@@ -36,6 +36,17 @@
 	font-style: italic;
 }
 
-.kokopu-errorMessage {
+.kokopu-errorMessage,
+.kokopu-errorExcerpt {
 	margin-top: 0.4em;
 }
+
+.kokopu-errorExcerpt {
+	white-space: pre-wrap;
+	font-family: monospace;
+	line-height: 1.5em;
+	color: #400;
+	background-color: #ffd;
+	border: solid 1px #aa0;
+	padding: 0.75em 1em 0.15em;
+}

package/src/css/{label.css → fonts.css}

@@ -1,7 +1,7 @@
 /******************************************************************************
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    This program is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *
@@ -20,10 +20,15 @@
  ******************************************************************************/
 
 
-.kokopu-label {
+@font-face {
+	font-family: 'Chess Alpha';
+	src:
+		url('../fonts/chessalpha.woff2') format('woff2'),
+		url('../fonts/chessalpha.woff') format('woff');
+	font-weight: normal;
 	font-style: normal;
-	font-family: sans-serif;
-	text-anchor: middle;
-	dominant-baseline: central;
-	letter-spacing: 0px;
+}
+
+.kokopu-font-alpha {
+	font-family: 'Chess Alpha', sans-serif;
 }

package/src/css/movetext.css

@@ -0,0 +1,117 @@
+/******************************************************************************
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    This program is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    This program is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ ******************************************************************************/
+
+
+.kokopu-colorTag {
+	width : 1.2em;
+	height: 1.2em;
+	vertical-align: middle;
+	display: inline-block;
+	border: 1px solid black;
+	margin-right: 0.25em;
+}
+
+.kokopu-headerGroup-whitePlayer .kokopu-colorTag {
+	background-color: white;
+} 
+
+.kokopu-headerGroup-blackPlayer .kokopu-colorTag {
+	background-color: black;
+}
+
+.kokopu-headerGroup-titleRating:before,
+.kokopu-header-round:before {
+	content: "\a0("; /* \a0 == &nbsp; */
+}
+
+.kokopu-headerGroup-titleRating:after,
+.kokopu-header-round:after {
+	content: ")";
+}
+
+.kokopu-header-round,
+.kokopu-header-annotator {
+	font-style: italic;
+}
+
+* + .kokopu-move:before,
+* + .kokopu-gameResult:before,
+* + span.kokopu-comment:before {
+	content: " ";
+}
+
+span.kokopu-variation:before {
+	content: " (";
+}
+
+span.kokopu-variation:after {
+	content: ")";
+}
+
+* + .kokopu-nag:before {
+	content: "\a0"; /* \a0 == &nbsp; */
+}
+
+div.kokopu-subVariation {
+	margin-left: 1.5em;
+}
+
+.kokopu-move,
+.kokopu-gameResult {
+	font-weight: bold;
+}
+
+.kokopu-subVariation .kokopu-move {
+	font-weight: inherit;
+}
+
+.kokopu-diagram {
+	text-align: center;
+	line-height: 0px;
+}
+
+.kokopu-moveContent {
+	display: inline-block;
+	padding-left: 1px;
+	padding-right: 1px;
+}
+
+.kokopu-selectedMove .kokopu-moveContent {
+	background-color: currentcolor;
+}
+
+.kokopu-selectedMove .kokopu-moveContent > * {
+	filter: invert(1);
+}
+
+.kokopu-clickableMove .kokopu-moveContent:hover {
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.kokopu-focusFieldContainer {
+	position: fixed;
+	bottom: 0px;
+	right: 0px;
+	width: 0px;
+	height: 0px;
+	overflow: hidden;
+}

package/src/css/symbol.css

@@ -1,7 +1,7 @@
 /******************************************************************************
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    This program is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *
@@ -23,3 +23,11 @@
 .kokopu-symbolCircle {
 	fill: transparent;
 }
+
+.kokopu-symbolText {
+	font-style: normal;
+	font-family: sans-serif;
+	text-anchor: middle;
+	dominant-baseline: central;
+	letter-spacing: 0px;
+}

package/src/i18n.js

@@ -1,7 +1,7 @@
 /******************************************************************************
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    This program is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *
@@ -21,10 +21,21 @@
 
 
 const i18n = {
+
+	// Error box
+	LINE: 'line {0}',
+
+	// Chessboard
 	INVALID_FEN_ERROR_TITLE: 'Invalid FEN string.',
 	INVALID_NOTATION_ERROR_TITLE: 'Invalid move notation.',
 	INVALID_POSITION_ATTRIBUTE_ERROR_MESSAGE: 'Invalid "position" attribute.',
 	INVALID_MOVE_ATTRIBUTE_ERROR_MESSAGE: 'Invalid "move" attribute.',
+
+	// Movetext
+	PIECE_SYMBOLS: { 'K':'K', 'Q':'Q', 'R':'R', 'B':'B', 'N':'N', 'P':'P' },
+	ANNOTATED_BY: 'Annotated by {0}',
+	INVALID_PGN_ERROR_TITLE: 'Invalid PGN string.',
+	INVALID_GAME_ATTRIBUTE_ERROR_MESSAGE: 'Invalid "game" attribute.',
 };
 
 export default i18n;

package/src/impl/ArrowTip.js

@@ -1,7 +1,7 @@
 /******************************************************************************
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    This program is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *

package/src/impl/HtmlSanitizer.js

@@ -0,0 +1,120 @@
+/******************************************************************************
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    This program is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    This program is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ ******************************************************************************/
+
+
+import React from 'react';
+import * as htmlparser2 from 'htmlparser2';
+
+
+/**
+ * HTML sanitizer: parse HTML string, keeping only the allowed HTML nodes, and the corresponding React object.
+ */
+export default class HtmlSanitizer {
+
+	constructor({ allowedTags, allowedAttributes }) {
+		this._allowedTags = allowedTags ? new Set(allowedTags) : new Set();
+		this._allowedAttributes = allowedAttributes ? new Map(Object.entries(allowedAttributes).map(([k, v]) => [k, new Set(v)])) : new Map();
+		this._keyCounter = 0;
+	}
+
+	/**
+	 * @param {string} text HTML string to be parsed.
+	 * @returns {*} React object corresponding to the given HTML string. Can also be a fragment, or just a simple string if the given HTML string
+	 *          does not contain any HTML tag.
+	 */
+	parse(text) {
+		let dom = htmlparser2.parseDocument(text);
+
+		// Ensure that the returned object is a non-empty node type.
+		if (dom.type !== 'root') {
+			return undefined;
+		}
+
+		// Process the children of the root node.
+		let result = [];
+		dom.children.forEach(child => {
+			let childElement = this._processNode(child);
+			if (childElement) {
+				result.push(childElement);
+			}
+		});
+
+		// Return the result.
+		if (result.length === 0) {
+			return undefined;
+		}
+		else if (result.length === 1) {
+			return result[0];
+		}
+		else {
+			return <React.Fragment key={this._allocateKey()}>{result}</React.Fragment>;
+		}
+	}
+
+	_processNode(node) {
+		if (node.type === 'text') {
+			return node.data;
+		}
+		else if (node.type === 'tag') {
+			let children = node.children.map(child => this._processNode(child));
+			if (this._allowedTags.has(node.name)) {
+				let attributes = this._filterAttributes(node.name, node.attribs);
+				attributes['key'] = this._allocateKey();
+				return React.createElement(node.name, attributes, children);
+			}
+			else {
+				return <React.Fragment key={this._allocateKey()}>{children}</React.Fragment>;
+			}
+		}
+		else {
+			return undefined;
+		}
+	}
+
+	_filterAttributes(nodeName, attributes) {
+		let result = {};
+		for (let [attribute, value] of Object.entries(attributes)) {
+			if (this._isAttributeAllowed(nodeName, attribute)) {
+				result[attribute === 'class' ? 'className' : attribute] = value;
+			}
+		}
+		return result;
+	}
+
+	_isAttributeAllowed(nodeName, attribute) {
+		if (attribute === 'key' && attribute === 'ref' && attribute === 'className') { // Those attributes are always forbidden.
+			return false;
+		}
+		let allowedAttributesForCurrent = this._allowedAttributes.get(nodeName);
+		if (allowedAttributesForCurrent && allowedAttributesForCurrent.has(attribute)) {
+			return true;
+		}
+		let allowedAttributesForAll = this._allowedAttributes.get('*');
+		if (allowedAttributesForAll && allowedAttributesForAll.has(attribute)) {
+			return true;
+		}
+		return false;
+	}
+
+	_allocateKey() {
+		return 'auto-' + (this._keyCounter++);
+	}
+}

package/src/impl/TextSymbol.js

@@ -1,7 +1,7 @@
 /******************************************************************************
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    This program is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *
@@ -23,7 +23,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import '../css/label.css';
 import '../css/symbol.css';
 
 const SHAPE_THICKNESS_FACTOR = 0.1;
@@ -44,7 +43,7 @@ export default function TextSymbol(props) {
 	}
 	else {
 		let symbol = props.symbol === 'plus' ? '+' : props.symbol === 'times' ? '\u00d7' : props.symbol;
-		return <text className="kokopu-label" x={props.x} y={props.y} fill={props.color} fontSize={props.size}>{symbol}</text>;
+		return <text className="kokopu-symbolText" x={props.x} y={props.y} fill={props.color} fontSize={props.size}>{symbol}</text>;
 	}
 }
 

package/src/impl/colorsets.js

@@ -1,7 +1,7 @@
 /******************************************************************************
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    This program is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *

package/src/impl/piecesets.js

@@ -1,7 +1,7 @@
 /******************************************************************************
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    This program is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *

package/src/impl/util.js

@@ -1,7 +1,7 @@
 /******************************************************************************
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    This program is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *

package/src/index.js

@@ -1,7 +1,7 @@
 /******************************************************************************
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    This program is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *
@@ -24,6 +24,7 @@ export { flattenSquareMarkers, parseSquareMarkers, flattenTextMarkers, parseText
 export { default as i18n } from './i18n';
 export { default as Chessboard } from './Chessboard';
 export { default as ErrorBox } from './ErrorBox';
+export { default as Movetext } from './Movetext';
 export { default as SquareMarkerIcon } from './SquareMarkerIcon';
 export { default as TextMarkerIcon } from './TextMarkerIcon';
 export { default as ArrowMarkerIcon } from './ArrowMarkerIcon';

package/src/markers.js

@@ -1,7 +1,7 @@
 /******************************************************************************
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    This program is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *

package/test/1_markers.js

@@ -1,7 +1,7 @@
 /******************************************************************************
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    This program is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *

package/test/2_chessboard_util.js

@@ -1,7 +1,7 @@
 /******************************************************************************
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    This program is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *

package/test/3_marker_icons_graphic.js

@@ -1,7 +1,7 @@
 /******************************************************************************
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    This program is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *

package/test/4_chessboard_graphic.js

@@ -1,7 +1,7 @@
 /******************************************************************************
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    This program is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *

package/test/5_chessboard_interaction.js

@@ -1,7 +1,7 @@
 /******************************************************************************
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    This program is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *

package/test/6_chessboard_play_moves.js

@@ -1,7 +1,7 @@
 /******************************************************************************
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    This program is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *

package/test/7_movetext_graphic.js

@@ -0,0 +1,43 @@
+/******************************************************************************
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    This program is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    This program is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ ******************************************************************************/
+
+
+const { openBrowser, closeBrowser, itChecksScreenshots } = require('./common/graphic');
+
+
+describe('Movetext graphic', function() {
+
+	const browserContext = {};
+
+	before(async function() {
+		await openBrowser(this, browserContext);
+	});
+
+	after(async function() {
+		await closeBrowser(browserContext);
+	});
+
+	itChecksScreenshots(browserContext, '12_movetext_simple', [ 'game-0', 'game-1', 'game-2', 'game-3' ]);
+	itChecksScreenshots(browserContext, '13_movetext_error', [ 'wrong-game-index', 'pgn-parsing-error-1', 'pgn-parsing-error-2', 'wrong type' ]);
+	itChecksScreenshots(browserContext, '14_movetext_html', [ 'html-in-headers', 'html-in-comments', 'filtered-tags-and-attributes' ]);
+	itChecksScreenshots(browserContext, '15_movetext_options', [ 'localized-piece-symbols', 'custom-piece-symbols', 'figurine-piece-symbols-and-diagram-options',
+		'hidden-diagrams' ]);
+});

package/test/8_movetext_interaction.js

@@ -0,0 +1,103 @@
+/******************************************************************************
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    This program is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    This program is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ ******************************************************************************/
+
+
+const { openBrowser, closeBrowser, itCustom, setSandbox, compareSandbox, takeScreenshot, compareScreenshot } = require('./common/graphic');
+const { By, Key } = require('selenium-webdriver');
+
+
+describe('Movetext interaction', function() {
+
+	const browserContext = {};
+
+	before(async function() {
+		await openBrowser(this, browserContext);
+	});
+
+	after(async function() {
+		await closeBrowser(browserContext);
+	});
+
+	function itCheckClickMove(itemIndex, label, targets) {
+		itCustom(browserContext, '16_movetext_interaction', itemIndex, label, async function(element) {
+			let actions = browserContext.driver.actions({ async: true });
+			await setSandbox(browserContext, '');
+			for (let i = 0; i < targets.length; ++i) {
+				let target = targets[i];
+				let moveElement = await element.findElement(By.xpath(`.//span[text()='${target.searchedText}']`));
+				await actions.move({ origin: moveElement }).click().perform();
+				if (i === 0) {
+					await takeScreenshot(browserContext, itemIndex, element);
+					await compareScreenshot(browserContext, itemIndex);
+				}
+				await compareSandbox(browserContext, target.expectedText);
+			}
+		});
+	}
+
+	function tpl(nodeId, evtOrigin) {
+		return `move selected: ${nodeId}\norigin: ${evtOrigin}`;
+	}
+
+	itCheckClickMove(0, 'click on disabled', [
+		{ searchedText: 'Nf6', expectedText: '' },
+		{ searchedText: 'Qc2', expectedText: '' },
+	]);
+
+	itCheckClickMove(1, 'click on unselected', [
+		{ searchedText: 'cxd5', expectedText: tpl('5w', 'click') },
+	]);
+
+	itCheckClickMove(2, 'click on with variations 1', [
+		{ searchedText: 'Bb5', expectedText: tpl(undefined, 'click') },
+		{ searchedText: 'Nc6', expectedText: tpl('1b-v0-2b', 'click') },
+	]);
+
+	function itCheckKeyboardActions(itemIndex, label, expectedOnGoFirst, expectedOnGoPrevious, expectedOnGoNext, expectedOnGoLast) {
+		itCustom(browserContext, '16_movetext_interaction', itemIndex, label, async function(element) {
+			let focusFieldElement = await element.findElement(By.className('kokopu-focusField'));
+
+			await setSandbox(browserContext, '');
+			await focusFieldElement.sendKeys(Key.HOME);
+			await compareSandbox(browserContext, expectedOnGoFirst);
+
+			await setSandbox(browserContext, '');
+			await focusFieldElement.sendKeys(Key.ARROW_LEFT);
+			await compareSandbox(browserContext, expectedOnGoPrevious);
+
+			await setSandbox(browserContext, '');
+			await focusFieldElement.sendKeys(Key.ARROW_RIGHT);
+			await compareSandbox(browserContext, expectedOnGoNext);
+
+			await setSandbox(browserContext, '');
+			await focusFieldElement.sendKeys(Key.END);
+			await compareSandbox(browserContext, expectedOnGoLast);
+		});
+	}
+
+	itCheckKeyboardActions(1, 'key on unselected', '', '', '', '');
+	itCheckKeyboardActions(2, 'key on with variations 1', tpl('start', 'key-first'), tpl('1b-v0-2b', 'key-previous'), tpl('1b-v0-3w-v0-3b', 'key-next'), tpl('1b-v0-3w-v0-4w', 'key-last'));
+	itCheckKeyboardActions(3, 'key on with variations 2', tpl('start', 'key-first'), tpl('1b-v0-2w', 'key-previous'), tpl('1b-v0-3w', 'key-next'), tpl('1b-v0-3w', 'key-last'));
+	itCheckKeyboardActions(4, 'key on start selected', '', '', tpl('1w', 'key-next'), tpl('6b', 'key-last'));
+	itCheckKeyboardActions(5, 'key on first selected', tpl('start', 'key-first'), tpl('start', 'key-previous'), tpl('1b', 'key-next'), tpl('6b', 'key-last'));
+	itCheckKeyboardActions(6, 'key on last selected', tpl('start', 'key-first'), tpl('6w', 'key-previous'), '', '');
+	itCheckKeyboardActions(7, 'key on invalid selection', '', '', '', '');
+});