kokopu-react 1.8.0 → 1.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kokopu-react",
-	"version": "1.8.0",
+	"version": "1.9.1",
 	"description": "A React-based library to create and display chessboard and chess-related components.",
 	"keywords": [
 		"chess",
@@ -19,7 +19,6 @@
 		"dist/lib",
 		"doc_src",
 		"graphic_test_src",
-		"graphics",
 		"scripts/clean-graphic-output.js",
 		"scripts/docker-compose.yml",
 		"scripts/test-graphic.webpack.config.js",
@@ -37,39 +36,38 @@
 	"dependencies": {
 		"htmlparser2": "^8.0.1",
 		"prop-types": "^15.8.1",
-		"react-draggable": "^4.4.5",
-		"react-motion": "^0.5.2"
+		"react-draggable": "^4.4.5"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.18.10",
-		"@babel/core": "^7.18.13",
-		"@babel/preset-env": "^7.18.10",
+		"@babel/cli": "^7.19.3",
+		"@babel/core": "^7.20.2",
+		"@babel/preset-env": "^7.20.2",
 		"@babel/preset-react": "^7.18.6",
-		"@emotion/react": "^11.10.0",
-		"@emotion/styled": "^11.10.0",
-		"@mui/material": "^5.10.2",
-		"babel-loader": "^8.2.5",
+		"@emotion/react": "^11.10.5",
+		"@emotion/styled": "^11.10.5",
+		"@mui/material": "^5.10.14",
+		"babel-loader": "^9.1.0",
 		"babel-plugin-istanbul": "^6.1.1",
 		"copy-webpack-plugin": "^11.0.0",
 		"coveralls": "^3.1.1",
-		"css-loader": "^6.7.1",
-		"eslint": "^8.22.0",
-		"eslint-plugin-react": "^7.31.0",
+		"css-loader": "^6.7.2",
+		"eslint": "^8.27.0",
+		"eslint-plugin-react": "^7.31.10",
 		"html-webpack-plugin": "^5.5.0",
 		"img-diff-js": "^0.5.2",
-		"kokopu": "^3.0.0",
-		"mocha": "^10.0.0",
+		"kokopu": "^3.3.0",
+		"mocha": "^10.1.0",
 		"null-loader": "^4.0.1",
 		"nyc": "^15.1.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"react-styleguidist": "^11.2.0",
-		"selenium-webdriver": "^4.3.1",
-		"ssh2-sftp-client": "^9.0.3",
+		"react-styleguidist": "^13.0.0",
+		"selenium-webdriver": "^4.6.1",
+		"ssh2-sftp-client": "^9.0.4",
 		"style-loader": "^3.3.1",
 		"unit.js": "^2.1.1",
-		"webpack": "^5.74.0",
-		"webpack-cli": "^4.10.0"
+		"webpack": "^5.75.0",
+		"webpack-cli": "^5.0.0"
 	},
 	"scripts": {
 		"lint": "eslint doc_src graphic_test_src src test",

package/scripts/docker-compose.yml

@@ -2,7 +2,7 @@ version: "3.7"
 
 services:
   web-client:
-    image: selenium/standalone-firefox:4.3.0-20220726
+    image: selenium/standalone-firefox:4.6.0-20221104
     shm_size: '2gb'
     ports:
       - 4444:4444 # http://localhost:4444 (driver)

package/src/Chessboard.js

@@ -23,12 +23,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Draggable from 'react-draggable';
-import { Motion, spring } from 'react-motion';
 import { exception, MoveDescriptor, Position, coordinatesToSquare, forEachSquare, oppositeColor, squareColor, squareToCoordinates } from 'kokopu';
 
 import colorsets from './impl/colorsets';
 import piecesets from './impl/piecesets';
 import ArrowTip from './impl/ArrowTip';
+import Motion from './impl/Motion';
 import TextSymbol from './impl/TextSymbol';
 import ErrorBox from './ErrorBox';
 import i18n from './i18n';
@@ -45,7 +45,7 @@ const HOVER_MARKER_THICKNESS_FACTOR = 0.1;
 const STROKE_THICKNESS_FACTOR = 0.15;
 const ARROW_TIP_OFFSET_FACTOR = 0.3;
 
-const ANIMATION_SPEED = { stiffness: 700, damping: 40 };
+const MOTION_DURATION = 150;
 
 const RANK_LABELS = '12345678';
 const FILE_LABELS = 'abcdefgh';
@@ -67,15 +67,18 @@ export default class Chessboard extends React.Component {
 			windowWidth: window.innerWidth,
 		};
 		this.arrowTipIdSuffix = generateRandomId();
-		this.windowResizeListener = () => this.handleWindowResize();
 	}
 
 	componentDidMount() {
+		this.windowResizeListener = () => this.handleWindowResize();
 		window.addEventListener('resize', this.windowResizeListener);
 	}
 
 	componentWillUnmount() {
-		window.removeEventListener('resize', this.windowResizeListener);
+		if (this.windowResizeListener) {
+			window.removeEventListener('resize', this.windowResizeListener);
+			this.windowResizeListener = null;
+		}
 	}
 
 	render() {
@@ -138,10 +141,11 @@ export default class Chessboard extends React.Component {
 
 	renderBoardContent(position, positionBefore, move, squareSize, colorset, pieceset) {
 		if (move && this.props.animated) {
+			let key = positionBefore.variant() + '|' + positionBefore.fen() + '|' + move.toString();
 			return (
-				<Motion key={move.toString()} defaultStyle={{ alpha: 0 }} style={{ alpha: spring(1, ANIMATION_SPEED) }}>
-					{currentStyle => (currentStyle.alpha >= 1 ? this.renderBoardContentStill(position, move, squareSize, colorset, pieceset)
-						: this.renderBoardContentAnimated(positionBefore, move, currentStyle.alpha, squareSize, colorset, pieceset))}
+				<Motion key={key} duration={MOTION_DURATION}>
+					{motionCursor => (motionCursor === 1 ? this.renderBoardContentStill(position, move, squareSize, colorset, pieceset)
+						: this.renderBoardContentAnimated(positionBefore, move, motionCursor, squareSize, colorset, pieceset))}
 				</Motion>
 			);
 		}
@@ -153,13 +157,13 @@ export default class Chessboard extends React.Component {
 	/**
 	 * Render the board content during the animation.
 	 */
-	renderBoardContentAnimated(positionBefore, move, alpha, squareSize, colorset, pieceset) {
+	renderBoardContentAnimated(positionBefore, move, motionCursor, squareSize, colorset, pieceset) {
 		let pieces = [];
-		forEachSquare(sq => pieces.push(this.renderPieceAnimated(positionBefore, move, alpha, squareSize, pieceset, sq)));
+		forEachSquare(sq => pieces.push(this.renderPieceAnimated(positionBefore, move, motionCursor, squareSize, pieceset, sq)));
 		return (
 			<>
 				{pieces}
-				{this.renderMoveArrow(move, alpha, squareSize, colorset)}
+				{this.renderMoveArrow(move, motionCursor, squareSize, colorset)}
 				{this.renderTurnFlag(oppositeColor(positionBefore.turn()), squareSize, pieceset)}
 			</>
 		);
@@ -226,7 +230,7 @@ export default class Chessboard extends React.Component {
 		return <image key={'piece-' + sq} x={x} y={y} width={squareSize} height={squareSize} href={pieceset[cp]} />;
 	}
 
-	renderPieceAnimated(positionBefore, move, alpha, squareSize,  pieceset, sq) {
+	renderPieceAnimated(positionBefore, move, motionCursor, squareSize,  pieceset, sq) {
 		let cp = positionBefore.square(sq);
 		if (cp === '-' || move.to() === sq || (move.isEnPassant() && move.enPassantSquare() === sq)) {
 			return undefined;
@@ -234,16 +238,16 @@ export default class Chessboard extends React.Component {
 		let { x, y } = this.getSquareCoordinates(squareSize, sq);
 		if (sq === move.from()) {
 			let { x: xTo, y: yTo } = this.getSquareCoordinates(squareSize, move.to());
-			x = xTo * alpha + x * (1 - alpha);
-			y = yTo * alpha + y * (1 - alpha);
-			if (move.isPromotion() && alpha > 0.8) {
+			x = xTo * motionCursor + x * (1 - motionCursor);
+			y = yTo * motionCursor + y * (1 - motionCursor);
+			if (move.isPromotion() && motionCursor > 0.8) {
 				cp = move.coloredPromotion();
 			}
 		}
 		else if (move.isCastling() && sq === move.rookFrom()) {
 			let { x: xTo, y: yTo } = this.getSquareCoordinates(squareSize, move.rookTo());
-			x = xTo * alpha + x * (1 - alpha);
-			y = yTo * alpha + y * (1 - alpha);
+			x = xTo * motionCursor + x * (1 - motionCursor);
+			y = yTo * motionCursor + y * (1 - motionCursor);
 		}
 		return <image key={'piece-' + sq} x={x} y={y} width={squareSize} height={squareSize} href={pieceset[cp]} />;
 	}
@@ -384,8 +388,8 @@ export default class Chessboard extends React.Component {
 		return result;
 	}
 
-	renderMoveArrow(move, alpha, squareSize, colorset) {
-		if (!move || alpha < 0.1 || !this.props.moveArrowVisible || move.from() === move.to()) {
+	renderMoveArrow(move, motionCursor, squareSize, colorset) {
+		if (!move || motionCursor < 0.1 || !this.props.moveArrowVisible || move.from() === move.to()) {
 			return undefined;
 		}
 		let { x: xFrom, y: yFrom } = this.getSquareCoordinates(squareSize, move.from());
@@ -396,8 +400,8 @@ export default class Chessboard extends React.Component {
 		yTo += squareSize / 2;
 		xTo += Math.sign(xFrom - xTo) * ARROW_TIP_OFFSET_FACTOR * squareSize;
 		yTo += Math.sign(yFrom - yTo) * ARROW_TIP_OFFSET_FACTOR * squareSize;
-		let x = xTo * alpha + xFrom * (1 - alpha);
-		let y = yTo * alpha + yFrom * (1 - alpha);
+		let x = xTo * motionCursor + xFrom * (1 - motionCursor);
+		let y = yTo * motionCursor + yFrom * (1 - motionCursor);
 		let color = this.props.moveArrowColor;
 		return (
 			<line

package/src/css/movetext.css

@@ -115,3 +115,7 @@ div.kokopu-subVariation {
 	height: 0px;
 	overflow: hidden;
 }
+
+.kokopu-focusField {
+	position: absolute; /* see #1 */
+}

package/src/impl/ArrowTip.js

@@ -29,8 +29,8 @@ import React from 'react';
  */
 export default function ArrowTip(props) {
 	return (
-		<marker id={props.id} markerWidth={4} markerHeight={4} refX={2.5} refY={2} orient="auto" fill={props.color}>
-			<path d="M 4,2 L 0,4 L 1,2 L 0,0 Z" />
+		<marker id={props.id} markerWidth={4} markerHeight={4} refX={2.5} refY={2} orient="auto">
+			<path fill={props.color} d="M 4,2 L 0,4 L 1,2 L 0,0 Z" />
 		</marker>
 	);
 }

package/src/impl/Motion.js

@@ -0,0 +1,99 @@
+/******************************************************************************
+ *                                                                            *
+ *    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 PropTypes from 'prop-types';
+import React from 'react';
+
+const DEBUG_KEY = '__kokopu_debug_freeze_motion';
+
+
+/**
+ * Wrap some animated content.
+ */
+export default class Motion extends React.Component {
+
+	constructor(props) {
+		super(props);
+		this.state = {
+			cursor: 0,
+		};
+		this.animationFrameId = null;
+		this.cursorStop = 1;
+
+		// WARNING: this hack exists only for testing purposes. DO NOT USE IT IN PRODUCTION.
+		if (typeof window[DEBUG_KEY] === 'number' && window[DEBUG_KEY] >= 0 && window[DEBUG_KEY] <= 1) {
+			this.cursorStop = window[DEBUG_KEY];
+		}
+	}
+
+	componentDidMount() {
+		this.animationFrameId = window.requestAnimationFrame(ts => this.handleAnimationStep(ts));
+	}
+
+	componentWillUnmount() {
+		if (this.animationFrameId !== null) {
+			window.cancelAnimationFrame(this.animationFrameId);
+			this.animationFrameId = null;
+		}
+	}
+
+	handleAnimationStep(timestamp) {
+		if (this.initialTimestamp === undefined) {
+			this.initialTimestamp = timestamp;
+		}
+
+		// Compute the animation cursor and update the state.
+		let cursor = (timestamp - this.initialTimestamp) / this.props.duration;
+		if (cursor < 0) {
+			cursor = 0;
+		}
+		else if (cursor > this.cursorStop) {
+			cursor = this.cursorStop;
+		}
+		this.setState({ cursor: cursor });
+
+		// Schedule the next animation frame if necessary.
+		if (cursor === this.cursorStop) {
+			this.animationFrameId = null;
+		}
+		else {
+			this.animationFrameId = window.requestAnimationFrame(ts => this.handleAnimationStep(ts));
+		}
+	}
+
+	render() {
+		return this.props.children(this.state.cursor);
+	}
+}
+
+Motion.propTypes = {
+
+	/**
+	 * Duration of the animation. Must be > 0.
+	 */
+	duration: PropTypes.number.isRequired,
+
+	/**
+	 * Factory for the content being animated. The animation cursor is guaranteed to be valued between 0 and 1 inclusive.
+	 */
+	children: PropTypes.func.isRequired,
+};

package/test/4_chessboard_graphic.js

@@ -41,6 +41,9 @@ describe('Chessboard graphic', function() {
 		'overlap', 'overlap & flip' ]);
 	itChecksScreenshots(browserContext, '05_chessboard_move', [ 'default', 'no move arrow', 'invalid', 'with forced move arrow & flip', 'capture', 'castling move',
 		'en-passant', 'promotion', 'wrong type' ]);
-	itChecksScreenshots(browserContext, '06_chessboard_theme', [ 'default', 'large', 'small', 'custom 1', 'custom 2', 'custom 3',
+	itChecksScreenshots(browserContext, '06a_chessboard_animated_move', [ 'move 1', 'move 2', 'capture', 'castling move', 'en-pssant', 'promotion' ]);
+	itChecksScreenshots(browserContext, '06b_chessboard_animated_move', [ 'move 1', 'move 2', 'capture', 'castling move', 'en-pssant', 'promotion' ]);
+	itChecksScreenshots(browserContext, '06c_chessboard_animated_move', [ 'move 1', 'move 2', 'capture', 'castling move', 'en-pssant', 'promotion' ]);
+	itChecksScreenshots(browserContext, '07_chessboard_theme', [ 'default', 'large', 'small', 'custom 1', 'custom 2', 'custom 3',
 		'custom 4', 'custom 5', 'custom 6' ]);
 });

package/test/5_chessboard_interaction.js

@@ -36,7 +36,7 @@ describe('Chessboard interaction', function() {
 	});
 
 	function itCheckClickSquare(itemIndex, label, targets) {
-		itCustom(browserContext, '07_chessboard_click_squares', itemIndex, label, async function(element) {
+		itCustom(browserContext, '08_chessboard_click_squares', itemIndex, label, async function(element) {
 			let actions = browserContext.driver.actions({ async: true });
 			let area = await element.getRect();
 			for (let i = 0; i < targets.length; ++i) {
@@ -63,7 +63,7 @@ describe('Chessboard interaction', function() {
 	]);
 
 	function itCheckMovePiece(itemIndex, label, xFrom, yFrom, xTo, yTo, imageBaseName, expectedText) {
-		itCustom(browserContext, '08_chessboard_move_pieces', itemIndex, label, async function(element) {
+		itCustom(browserContext, '09_chessboard_move_pieces', itemIndex, label, async function(element) {
 			let actions = browserContext.driver.actions({ async: true });
 			let area = await element.getRect();
 			await actions.move({ x: area.x + xFrom, y: area.y + yFrom }).press().move({ x: area.x + xTo, y: area.y + yTo }).perform();
@@ -83,7 +83,7 @@ describe('Chessboard interaction', function() {
 	itCheckMovePiece(2, 'after move', 225, 225, 75, 260, 'after_move', 'piece moved: e4 -> b3');
 
 	function itCheckNonMovePiece(itemIndex, label, xFrom, yFrom, xTo, yTo, imageBaseName) {
-		itCustom(browserContext, '08_chessboard_move_pieces', itemIndex, label, async function(element) {
+		itCustom(browserContext, '09_chessboard_move_pieces', itemIndex, label, async function(element) {
 			await setSandbox(browserContext, imageBaseName); // can be any value as long as it is unique among other test-cases
 			let actions = browserContext.driver.actions({ async: true });
 			let area = await element.getRect();
@@ -100,7 +100,7 @@ describe('Chessboard interaction', function() {
 	itCheckNonMovePiece(0, 'out of board', 175, 25, 500, 210, 'out_of_board');
 
 	function itCheckEditArrow(itemIndex, label, xFrom, yFrom, xTo, yTo, imageBaseName, expectedText) {
-		itCustom(browserContext, '09_chessboard_edit_arrows', itemIndex, label, async function(element) {
+		itCustom(browserContext, '10_chessboard_edit_arrows', itemIndex, label, async function(element) {
 			let actions = browserContext.driver.actions({ async: true });
 			let area = await element.getRect();
 			await actions.move({ x: area.x + xFrom, y: area.y + yFrom }).press().move({ x: area.x + xTo, y: area.y + yTo }).perform();
@@ -117,7 +117,7 @@ describe('Chessboard interaction', function() {
 	itCheckEditArrow(1, 'over arrow marker', 40, 110, 125, 290, 'over_arrow_marker', 'arrow edited: h3 -> f6');
 
 	function itCheckNonEditArrow(itemIndex, label, xFrom, yFrom, xTo, yTo, imageBaseName) {
-		itCustom(browserContext, '09_chessboard_edit_arrows', itemIndex, label, async function(element) {
+		itCustom(browserContext, '10_chessboard_edit_arrows', itemIndex, label, async function(element) {
 			await setSandbox(browserContext, imageBaseName); // can be any value as long as it is unique among other test-cases
 			let actions = browserContext.driver.actions({ async: true });
 			let area = await element.getRect();

package/test/6_chessboard_play_moves.js

@@ -36,7 +36,7 @@ describe('Chessboard play moves', function() {
 	});
 
 	function itCheckPlayMove(itemIndex, label, xFrom, yFrom, xTo, yTo, imageBaseName, expectedText) {
-		itCustom(browserContext, '10_chessboard_play_moves', itemIndex, label, async function(element) {
+		itCustom(browserContext, '11_chessboard_play_moves', itemIndex, label, async function(element) {
 			let actions = browserContext.driver.actions({ async: true });
 			let area = await element.getRect();
 			await actions.move({ x: area.x + xFrom, y: area.y + yFrom }).press().move({ x: area.x + xTo, y: area.y + yTo }).perform();
@@ -55,7 +55,7 @@ describe('Chessboard play moves', function() {
 	itCheckPlayMove(3, 'chess960 ambiguous king move', 275, 375, 320, 375, 'chess960_ambiguous_king_move', 'move played: Kg1');
 
 	function itCheckNonPlayMove(itemIndex, label, xFrom, yFrom, xTo, yTo, imageBaseName) {
-		itCustom(browserContext, '10_chessboard_play_moves', itemIndex, label, async function(element) {
+		itCustom(browserContext, '11_chessboard_play_moves', itemIndex, label, async function(element) {
 			await setSandbox(browserContext, imageBaseName); // can be any value as long as it is unique among other test-cases
 			let actions = browserContext.driver.actions({ async: true });
 			let area = await element.getRect();
@@ -75,7 +75,7 @@ describe('Chessboard play moves', function() {
 	itCheckNonPlayMove(3, 'chess960 non-KxR castling', 275, 375, 130, 375, 'chess960_non_kxr_castling');
 
 	function itCheckPlayPromotion(itemIndex, label, xFrom, yFrom, xTo, yTo, xPromo, yPromo, imageBaseName, expectedText) {
-		itCustom(browserContext, '11_chessboard_play_promotions', itemIndex, label, async function(element) {
+		itCustom(browserContext, '12_chessboard_play_promotions', itemIndex, label, async function(element) {
 			let actions = browserContext.driver.actions({ async: true });
 			let area = await element.getRect();
 			await actions.move({ x: area.x + xFrom, y: area.y + yFrom }).press().move({ x: area.x + xTo, y: area.y + yTo }).release().perform();
@@ -91,7 +91,7 @@ describe('Chessboard play moves', function() {
 	itCheckPlayPromotion(2, 'antichess promotion', 325, 325, 325, 375, 325, 175, 'antichess_promotion', 'promotion move played: b8=K');
 
 	function itCheckNonPlayPromotion(itemIndex, label, xFrom, yFrom, xTo, yTo, xPromo, yPromo, imageBaseName) {
-		itCustom(browserContext, '11_chessboard_play_promotions', itemIndex, label, async function(element) {
+		itCustom(browserContext, '12_chessboard_play_promotions', itemIndex, label, async function(element) {
 			await setSandbox(browserContext, imageBaseName); // can be any value as long as it is unique among other test-cases
 			let actions = browserContext.driver.actions({ async: true });
 			let area = await element.getRect();

package/test/7_movetext_graphic.js

@@ -35,9 +35,9 @@ describe('Movetext graphic', 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-1', 'wrong-game-index-2', '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',
+	itChecksScreenshots(browserContext, '13_movetext_simple', [ 'game-0', 'game-1', 'game-2', 'game-3' ]);
+	itChecksScreenshots(browserContext, '14_movetext_error', [ 'wrong-game-index-1', 'wrong-game-index-2', 'pgn-parsing-error-1', 'pgn-parsing-error-2', 'wrong type' ]);
+	itChecksScreenshots(browserContext, '15_movetext_html', [ 'html-in-headers', 'html-in-comments', 'filtered-tags-and-attributes' ]);
+	itChecksScreenshots(browserContext, '16_movetext_options', [ 'localized-piece-symbols', 'custom-piece-symbols', 'figurine-piece-symbols-and-diagram-options',
 		'hidden-diagrams' ]);
 });

package/test/8_movetext_interaction.js

@@ -37,7 +37,7 @@ describe('Movetext interaction', function() {
 	});
 
 	function itCheckClickMove(itemIndex, label, targets) {
-		itCustom(browserContext, '16_movetext_interaction', itemIndex, label, async function(element) {
+		itCustom(browserContext, '17_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) {
@@ -72,7 +72,7 @@ describe('Movetext interaction', function() {
 	]);
 
 	function itCheckKeyboardActions(itemIndex, label, expectedOnGoFirst, expectedOnGoPrevious, expectedOnGoNext, expectedOnGoLast) {
-		itCustom(browserContext, '16_movetext_interaction', itemIndex, label, async function(element) {
+		itCustom(browserContext, '17_movetext_interaction', itemIndex, label, async function(element) {
 			let focusFieldElement = await element.findElement(By.className('kokopu-focusField'));
 
 			await setSandbox(browserContext, '');

package/test/common/graphic.js

@@ -38,6 +38,9 @@ const UNREACHABLE_TEST_CLIENT_MESSAGE =
 	'Do not forget to run `npm run test_env:stop` when finished.\n';
 
 
+const ANIMATION_DELAY = 200;
+
+
 /**
  * Open a browser in the client (+ ensure everything else is ready to execute graphic tests).
  */
@@ -111,6 +114,9 @@ async function fetchTestCase(browserContext, testCaseName) {
 	// Fetch the new page.
 	await browserContext.driver.get(`file:///app/build/test_graphic/${testCaseName}/index.html`);
 	browserContext.latestTestCase = testCaseName;
+
+	// Wait until the end of the animations.
+	await new Promise(resolve => setTimeout(resolve, ANIMATION_DELAY));
 }