kokopu-react 1.11.1 → 2.0.0

package/src/util.ts

@@ -0,0 +1,39 @@
+/* -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2023  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/>.                                         *
+ *                                                                            *
+ * -------------------------------------------------------------------------- */
+
+
+export function generateRandomId() {
+	const buffer = new Uint32Array(8);
+	crypto.getRandomValues(buffer);
+	let result = '';
+	for (let i = 0; i < buffer.length; ++i) {
+		result += buffer[i].toString(16);
+	}
+	return result;
+}
+
+
+export function fillPlaceholder(message: string, ...placeholderValues: unknown[]) {
+	return message.replace(/{(\d+)}/g, (match, placeholder) => {
+		const placeholderIndex = Number(placeholder);
+		return placeholderIndex < placeholderValues.length ? String(placeholderValues[placeholderIndex]) : match;
+	});
+}

package/test/.eslintrc.yml

@@ -3,6 +3,6 @@ env:
   mocha: true
 
 rules:
-  no-shadow: [ error, { builtinGlobals: true, allow: [ test ] }]
-  prefer-arrow-callback: [ off ] # arrow functions are discouraged in Mocha
-  no-invalid-this: [ off ] # the rule is incompatible with the use of Mocha contexts
+  '@typescript-eslint/no-shadow':       [ error, { builtinGlobals: true, allow: [ test ] }]
+  '@typescript-eslint/no-var-requires': [ off ]
+  no-invalid-this:                      [ off ] # the rule is incompatible with the use of Mocha contexts

package/test/{1_markers.js → 01_types.js}

@@ -1,4 +1,4 @@
-/******************************************************************************
+/* -------------------------------------------------------------------------- *
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
  *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
@@ -17,11 +17,72 @@
  *    Public License along with this program. If not, see                     *
  *    <http://www.gnu.org/licenses/>.                                         *
  *                                                                            *
- ******************************************************************************/
+ * -------------------------------------------------------------------------- */
 
 
-let { flattenSquareMarkers, parseSquareMarkers, flattenTextMarkers, parseTextMarkers, flattenArrowMarkers, parseArrowMarkers } = require('../build/test_headless/index');
-let test = require('unit.js');
+const { exception, isPieceSymbolMapping, isAnnotationSymbol, isAnnotationColor, flattenSquareMarkers, parseSquareMarkers, flattenTextMarkers, parseTextMarkers,
+	flattenArrowMarkers, parseArrowMarkers } = require('../build/test_headless/index');
+const test = require('unit.js');
+
+
+describe('Is piece symbol mapping', () => {
+
+	function itIsPieceSymbolMapping(label, value, expected) {
+		it(label, () => {
+			test.value(isPieceSymbolMapping(value)).is(expected);
+		});
+	}
+
+	itIsPieceSymbolMapping('French localization', { K: 'R', Q: 'D', R: 'T', B: 'F', N: 'C', P: 'P' } , true);
+	itIsPieceSymbolMapping('Additional fields', { K: 'Ki_', Q: 'Qu_', R: 'Rk_', B: 'Bi_', N: 'Kn_', P: 'Pw_', Z: 'whatever', val: 42 }, true);
+	itIsPieceSymbolMapping('Missing fields', { K: 'Ki_', Q: 'Qu_', R: 'Rk_', B: 'Bi_', N: 'Kn_' }, false);
+	itIsPieceSymbolMapping('Non-string valued fields', { K: 42, Q: 'Qu_', R: 'Rk_', B: 'Bi_', N: 'Kn_', P: 'Pw_' }, false);
+
+	itIsPieceSymbolMapping('String', 'whatever', false);
+	itIsPieceSymbolMapping('null', null, false);
+	itIsPieceSymbolMapping('undefined', undefined, false);
+});
+
+
+describe('Is Annotation symbol', () => {
+
+	function itIsAnnotationSymbol(label, value, expected) {
+		it(label, () => {
+			test.value(isAnnotationSymbol(value)).is(expected);
+		});
+	}
+
+	itIsAnnotationSymbol('Upper case letter', 'A', true);
+	itIsAnnotationSymbol('Lower case letter', 'z', true);
+	itIsAnnotationSymbol('Digit character', '0', true);
+	itIsAnnotationSymbol('Special token 1', 'plus', true);
+	itIsAnnotationSymbol('Special token 2', 'circle', true);
+
+	itIsAnnotationSymbol('Non-special token', 'whatever', false);
+	itIsAnnotationSymbol('Number', 0, false);
+	itIsAnnotationSymbol('null', null, false);
+	itIsAnnotationSymbol('undefined', undefined, false);
+});
+
+
+describe('Is Annotation color', () => {
+
+	function itIsAnnotationColor(label, value, expected) {
+		it(label, () => {
+			test.value(isAnnotationColor(value)).is(expected);
+		});
+	}
+
+	itIsAnnotationColor('b', 'b', true);
+	itIsAnnotationColor('g', 'g', true);
+	itIsAnnotationColor('r', 'r', true);
+	itIsAnnotationColor('y', 'y', true);
+
+	itIsAnnotationColor('Not a color', 'z', false);
+	itIsAnnotationColor('Number', 42, false);
+	itIsAnnotationColor('null', null, false);
+	itIsAnnotationColor('undefined', undefined, false);
+});
 
 
 describe('Flatten square markers', () => {
@@ -33,6 +94,10 @@ describe('Flatten square markers', () => {
 
 	it('Wrong square', () => { test.value(flattenSquareMarkers({ e1: 'r', k9: 'g', whatever: 'y' })).is('Re1'); });
 	it('Wrong color', () => { test.value(flattenSquareMarkers({ a2: 'g', b5: 'R', c4: 42, h8: 'yellow' })).is('Ga2'); });
+
+	it('Wrong type (not an object)', () => { test.exception(() => flattenSquareMarkers('whatever')).isInstanceOf(exception.IllegalArgument); });
+	it('Wrong type (null)', () => { test.exception(() => flattenSquareMarkers(null)).isInstanceOf(exception.IllegalArgument); });
+	it('Wrong type (undefined)', () => { test.exception(() => flattenSquareMarkers(undefined)).isInstanceOf(exception.IllegalArgument); });
 });
 
 
@@ -48,6 +113,10 @@ describe('Parse square markers', () => {
 	it('Duplicated square', () => { test.value(parseSquareMarkers('Ra3,Ya3')).is({ a3: 'y' }); });
 	it('Wrong color', () => { test.value(parseSquareMarkers('Ga6,Cg5')).is({ a6: 'g' }); });
 	it('Wrong format', () => { test.value(parseSquareMarkers('Something Ra2 invalid, Ye4, G g3')).is({ e4: 'y' }); });
+
+	it('Wrong type (not a string)', () => { test.exception(() => parseSquareMarkers(42)).isInstanceOf(exception.IllegalArgument); });
+	it('Wrong type (null)', () => { test.exception(() => parseSquareMarkers(null)).isInstanceOf(exception.IllegalArgument); });
+	it('Wrong type (undefined)', () => { test.exception(() => parseSquareMarkers(undefined)).isInstanceOf(exception.IllegalArgument); });
 });
 
 
@@ -94,6 +163,10 @@ describe('Flatten text markers', () => {
 		a2: { symbol: '0', color: 'g' },
 		b5: { symbol: 'whatever', color: 'r' },
 	})).is('G0a2'); });
+
+	it('Wrong type (not an object)', () => { test.exception(() => flattenTextMarkers('whatever')).isInstanceOf(exception.IllegalArgument); });
+	it('Wrong type (null)', () => { test.exception(() => flattenTextMarkers(null)).isInstanceOf(exception.IllegalArgument); });
+	it('Wrong type (undefined)', () => { test.exception(() => flattenTextMarkers(undefined)).isInstanceOf(exception.IllegalArgument); });
 });
 
 
@@ -127,6 +200,10 @@ describe('Parse text markers', () => {
 	it('Wrong symbol', () => { test.value(parseTextMarkers('Rb2,RAg5,G.d3,Yabcde7')).is({ g5: { symbol: 'A', color: 'r' } }); });
 	it('Wrong multi-character symbol', () => { test.value(parseTextMarkers('RZb2,Y(whatever)e4')).is({ b2: { symbol: 'Z', color: 'r' } }); });
 	it('Wrong format', () => { test.value(parseTextMarkers('Something RHa2 invalid, Yqe4, G g3')).is({ e4: { symbol: 'q', color: 'y' } }); });
+
+	it('Wrong type (not a string)', () => { test.exception(() => parseTextMarkers(42)).isInstanceOf(exception.IllegalArgument); });
+	it('Wrong type (null)', () => { test.exception(() => parseTextMarkers(null)).isInstanceOf(exception.IllegalArgument); });
+	it('Wrong type (undefined)', () => { test.exception(() => parseTextMarkers(undefined)).isInstanceOf(exception.IllegalArgument); });
 });
 
 
@@ -140,6 +217,10 @@ describe('Flatten arrow markers', () => {
 
 	it('Wrong vector', () => { test.value(flattenArrowMarkers({ e1c2: 'r', a1b9: 'g', c0d2: 'r', i3d4: 'r', f2k3: 'g', whatever: 'y' })).is('Re1c2'); });
 	it('Wrong color', () => { test.value(flattenArrowMarkers({ a2b3: 'g', b5c1: 'R', c4d8: 42, h8g1: 'yellow' })).is('Ga2b3'); });
+
+	it('Wrong type (not an object)', () => { test.exception(() => flattenArrowMarkers('whatever')).isInstanceOf(exception.IllegalArgument); });
+	it('Wrong type (null)', () => { test.exception(() => flattenArrowMarkers(null)).isInstanceOf(exception.IllegalArgument); });
+	it('Wrong type (undefined)', () => { test.exception(() => flattenArrowMarkers(undefined)).isInstanceOf(exception.IllegalArgument); });
 });
 
 
@@ -156,4 +237,8 @@ describe('Parse arrow markers', () => {
 	it('Duplicated vector', () => { test.value(parseArrowMarkers('Ya3b4,Ra3b4')).is({ a3b4: 'r' }); });
 	it('Wrong color', () => { test.value(parseArrowMarkers('Ga6c5,Cg5e2')).is({ a6c5: 'g' }); });
 	it('Wrong format', () => { test.value(parseArrowMarkers('Something Rb1a2 invalid, Ye4c7, G g3b1')).is({ e4c7: 'y' }); });
+
+	it('Wrong type (not a string)', () => { test.exception(() => parseArrowMarkers(42)).isInstanceOf(exception.IllegalArgument); });
+	it('Wrong type (null)', () => { test.exception(() => parseArrowMarkers(null)).isInstanceOf(exception.IllegalArgument); });
+	it('Wrong type (undefined)', () => { test.exception(() => parseArrowMarkers(undefined)).isInstanceOf(exception.IllegalArgument); });
 });

package/test/{2_chessboard_util.js → 02_chessboard_util.js}

@@ -1,4 +1,4 @@
-/******************************************************************************
+/* -------------------------------------------------------------------------- *
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
  *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
@@ -17,24 +17,24 @@
  *    Public License along with this program. If not, see                     *
  *    <http://www.gnu.org/licenses/>.                                         *
  *                                                                            *
- ******************************************************************************/
+ * -------------------------------------------------------------------------- */
 
 
-let { Chessboard } = require('../build/test_headless/index');
-let test = require('unit.js');
+const { exception, Chessboard } = require('../build/test_headless/index');
+const test = require('unit.js');
 
 
 function testAdaptSquareSize(expectedSquareSize, width, height, coordinateVisible, smallScreenLimits) {
 	test.value(Chessboard.adaptSquareSize(width, height, coordinateVisible, smallScreenLimits)).is(expectedSquareSize);
 
-	let actualSize = Chessboard.size(expectedSquareSize, coordinateVisible, smallScreenLimits);
+	const actualSize = Chessboard.size(expectedSquareSize, coordinateVisible, smallScreenLimits);
 	test.value(actualSize.width <= width && actualSize.height <= height).isTrue();
 }
 
 function testAdaptSquareSizeWithIncrement(expectedSquareSize, width, height, coordinateVisible, smallScreenLimits) {
 	testAdaptSquareSize(expectedSquareSize, width, height, coordinateVisible, smallScreenLimits);
 
-	let actualSizeIncremented = Chessboard.size(expectedSquareSize + 1, coordinateVisible, smallScreenLimits);
+	const actualSizeIncremented = Chessboard.size(expectedSquareSize + 1, coordinateVisible, smallScreenLimits);
 	test.value(actualSizeIncremented.width > width || actualSizeIncremented.height > height).isTrue();
 }
 
@@ -51,11 +51,20 @@ describe('Adapt square-size', () => {
 	it('Size 375x500 without coordinates', () => testAdaptSquareSizeWithIncrement(41, 375, 500, false));
 	it('Size 600x450 with coordinates', () => testAdaptSquareSizeWithIncrement(54, 600, 450, true));
 	it('Size 600x450 without coordinates', () => testAdaptSquareSizeWithIncrement(56, 600, 450, false));
+
+	function itInvalidArgument(label, action) {
+		it(label, () => { test.exception(action).isInstanceOf(exception.IllegalArgument); });
+	}
+
+	itInvalidArgument('Width <null>', () => Chessboard.adaptSquareSize(null, 400, true));
+	itInvalidArgument('Width not-a-number', () => Chessboard.adaptSquareSize('500', 400, false));
+	itInvalidArgument('Height <undefined>', () => Chessboard.adaptSquareSize(500, undefined, false));
+	itInvalidArgument('Height object', () => Chessboard.adaptSquareSize(500, {}, true));
 });
 
 describe('Adapt square-size with small-screen limits', () => {
 
-	let limits = [
+	const limits = [
 		{ width: 470, squareSize: 12, coordinateVisible: false },
 		{ width: 540, squareSize: 16, coordinateVisible: false },
 		{ width: 620, squareSize: 24, coordinateVisible: false },

package/test/{3_marker_icons_graphic.js → 03_error_box_graphic.js}

@@ -1,4 +1,4 @@
-/******************************************************************************
+/* -------------------------------------------------------------------------- *
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
  *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
@@ -17,24 +17,30 @@
  *    Public License along with this program. If not, see                     *
  *    <http://www.gnu.org/licenses/>.                                         *
  *                                                                            *
- ******************************************************************************/
+ * -------------------------------------------------------------------------- */
 
 
-const { openBrowser, closeBrowser, itChecksScreenshots } = require('./common/graphic');
+const { describeWithBrowser, itChecksScreenshots } = require('./common/graphic');
 
 
-describe('Marker icons graphic', function() {
+describeWithBrowser('Error box graphic', browserContext => {
 
-	const browserContext = {};
+	itChecksScreenshots(browserContext, '03_error_box_graphic/base', [
+		'minimal',
+		'full',
+		'missing error index',
+		'missing error text',
+		'negative error index',
+		'too large error index',
+		'error index not integer',
+		'cut end of text',
+		'cut beginning of text',
+		'cut on line breaks',
+		'single character text',
+	]);
 
-	before(async function() {
-		await openBrowser(this, browserContext);
-	});
+	itChecksScreenshots(browserContext, '03_error_box_graphic/localization', [
+		'default'
+	]);
 
-	after(async function() {
-		await closeBrowser(browserContext);
-	});
-
-	itChecksScreenshots(browserContext, '01_marker_icons', [ 'default square', 'colorized square', 'wrapped square', 'default text', 'colorized text', 'wrapped text',
-		'default arrow', 'colorized arrow', 'wrapped arrow', 'colorized symbol', 'wrapped symbol' ]);
 });

package/test/04_marker_icons_graphic.js

@@ -0,0 +1,49 @@
+/* -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2023  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 { describeWithBrowser, itChecksScreenshots } = require('./common/graphic');
+
+
+describeWithBrowser('Marker icons graphic', browserContext => {
+
+	itChecksScreenshots(browserContext, '04_marker_icons_graphic/base', [
+
+		'default square',
+		'colorized square',
+		'wrapped square',
+		'invalid square size',
+
+		'default text',
+		'colorized text',
+		'wrapped text',
+		'colorized symbol',
+		'wrapped symbol',
+		'invalid text size',
+		'invalid symbol',
+
+		'default arrow',
+		'colorized arrow',
+		'wrapped arrow',
+		'invalid arrow size',
+	]);
+
+});

package/test/05_chessboard_graphic.js

@@ -0,0 +1,92 @@
+/* -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2023  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 { describeWithBrowser, itChecksScreenshots } = require('./common/graphic');
+
+
+describeWithBrowser('Chessboard graphic', browserContext => {
+
+	itChecksScreenshots(browserContext, '05_chessboard_graphic/base', [
+		'default',
+		'empty',
+		'parsing error',
+		'from FEN',
+		'from Kokopu object',
+		'wrong position type',
+	]);
+
+	itChecksScreenshots(browserContext, '05_chessboard_graphic/flipped', [
+		'default',
+		'empty',
+		'parsing error',
+		'from FEN',
+		'from Kokopu object',
+	]);
+
+	itChecksScreenshots(browserContext, '05_chessboard_graphic/annotations', [
+		'with coordinates',
+		'with coordinates and flip',
+		'without coordinates',
+		'without coordinates and flip',
+		'overlap',
+		'overlap and flip',
+	]);
+
+	itChecksScreenshots(browserContext, '05_chessboard_graphic/move', [
+		'default',
+		'no move arrow',
+		'parsing error',
+		'with forced move arrow and flip',
+		'capture',
+		'castling move',
+		'en-passant',
+		'promotion',
+		'wrong move type',
+		'wrong move arrow color type',
+	]);
+
+	itChecksScreenshots(browserContext, '05_chessboard_graphic/theme', [
+		'default',
+		'large',
+		'small',
+		'custom 1',
+		'custom 2',
+		'custom 3',
+		'custom 4',
+		'custom 5',
+		'custom 6',
+		'wrong square size type',
+		'wrong colorset',
+		'wrong pieceset',
+	]);
+
+	itChecksScreenshots(browserContext, '05_chessboard_graphic/chess_variants', [
+		'chess960',
+		'chess960 with move',
+		'variant without std initial position',
+		'variant with std initial position',
+		'special code',
+		'invalid variant',
+		'invalid variant with FEN',
+	]);
+
+});

package/test/06_chessboard_animation.js

@@ -0,0 +1,71 @@
+/* -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2023  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 { describeWithBrowser, itChecksScreenshots, itCustom, takeScreenshot, compareScreenshot, waitForAnimation } = require('./common/graphic');
+const { By } = require('selenium-webdriver');
+
+
+describeWithBrowser('Chessboard animation', browserContext => {
+
+	itChecksScreenshots(browserContext, '06_chessboard_animation/base_1', [
+		'move 1',
+		'move 2',
+		'capture',
+		'castling move',
+		'en-passant',
+		'promotion',
+	]);
+
+	itChecksScreenshots(browserContext, '06_chessboard_animation/base_2', [
+		'move 1',
+		'move 2',
+		'capture',
+		'castling move',
+		'en-passant',
+		'promotion',
+	]);
+
+	itChecksScreenshots(browserContext, '06_chessboard_animation/base_3', [
+		'move 1',
+		'move 2',
+		'capture',
+		'castling move',
+		'en-passant',
+		'promotion',
+	]);
+
+	itCustom(browserContext, '06_chessboard_animation/on_redraw', 0, 'default', async element => {
+
+		// Run the scenario.
+		await takeScreenshot(browserContext, 'initial state', element);
+		const actions = browserContext.driver.actions({ async: true });
+		const button = await element.findElement(By.id('chessboard-action-button'));
+		await actions.move({ origin: button }).click().perform();
+		await waitForAnimation();
+		await takeScreenshot(browserContext, 'final state', element);
+
+		// Check the screenshots.
+		await compareScreenshot(browserContext, 'initial state');
+		await compareScreenshot(browserContext, 'final state');
+	});
+
+});

package/test/07_chessboard_interaction.js

@@ -0,0 +1,130 @@
+/* -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2023  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 { describeWithBrowser, itCustom, setSandbox, compareSandbox, takeScreenshot, compareScreenshot, itChecksScreenshots } = require('./common/graphic');
+
+
+describeWithBrowser('Chessboard interaction', browserContext => {
+
+	function itCheckClickSquare(itemIndex, label, targets) {
+		itCustom(browserContext, '07_chessboard_interaction/click_squares', itemIndex, label, async element => {
+			const actions = browserContext.driver.actions({ async: true });
+			const area = await element.getRect();
+			for (let i = 0; i < targets.length; ++i) {
+				const target = targets[i];
+				await actions.move({ x: area.x + target.x, y: area.y + target.y }).click().perform();
+				await compareSandbox(browserContext, target.expectedText);
+			}
+		});
+	}
+
+	itCheckClickSquare(0, 'default', [
+		{ x: 225, y: 75, expectedText: 'square clicked: e7' },
+		{ x: 25, y: 375, expectedText: 'square clicked: a1' },
+		{ x: 325, y: 175, expectedText: 'square clicked: g5' },
+	]);
+	itCheckClickSquare(1, 'with flip', [
+		{ x: 325, y: 175, expectedText: 'square clicked: b4' },
+	]);
+	itCheckClickSquare(2, 'over annotations', [
+		{ x: 25, y: 25, expectedText: 'square clicked: a8' },
+		{ x: 75, y: 125, expectedText: 'square clicked: b6' },
+		{ x: 175, y: 125, expectedText: 'square clicked: d6' },
+		{ x: 75, y: 225, expectedText: 'square clicked: b4' },
+	]);
+
+	function itCheckMovePiece(itemIndex, label, xFrom, yFrom, xTo, yTo, expectedText) {
+		itCustom(browserContext, '07_chessboard_interaction/move_pieces', itemIndex, label, async element => {
+			const actions = browserContext.driver.actions({ async: true });
+			const 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();
+			await takeScreenshot(browserContext, label, element);
+			await actions.release().perform();
+			await compareScreenshot(browserContext, label);
+			await compareSandbox(browserContext, expectedText);
+		});
+	}
+
+	itCheckMovePiece(0, 'over empty', 275, 385, 225, 175, 'piece moved: f1 -> e5');
+	itCheckMovePiece(0, 'over non-empty 1', 280, 365, 75, 75, 'piece moved: f1 -> b7');
+	itCheckMovePiece(0, 'over non-empty 2', 130, 75, 225, 375, 'piece moved: c7 -> e1');
+	itCheckMovePiece(1, 'over square marker', 10, 325, 275, 175, 'piece moved: h7 -> c4');
+	itCheckMovePiece(1, 'over text marker', 225, 25, 10, 135, 'piece moved: d1 -> h3');
+	itCheckMovePiece(1, 'over arrow marker', 325, 25, 315, 260, 'piece moved: b1 -> b6');
+	itCheckMovePiece(2, 'after move', 225, 225, 75, 260, 'piece moved: e4 -> b3');
+
+	function itCheckNonMovePiece(itemIndex, label, xFrom, yFrom, xTo, yTo) {
+		itCustom(browserContext, '07_chessboard_interaction/move_pieces', itemIndex, label, async element => {
+			await setSandbox(browserContext, label); // can be any value as long as it is unique among other test-cases
+			const actions = browserContext.driver.actions({ async: true });
+			const 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();
+			await takeScreenshot(browserContext, label, element);
+			await actions.release().perform();
+			await compareScreenshot(browserContext, label);
+			await compareSandbox(browserContext, label);
+		});
+	}
+
+	itCheckNonMovePiece(0, 'move empty square', 175, 225, 275, 75);
+	itCheckNonMovePiece(0, 'from == to', 75, 375, 80, 360);
+	itCheckNonMovePiece(0, 'out of board', 175, 25, 500, 210);
+
+	function itCheckEditArrow(itemIndex, label, xFrom, yFrom, xTo, yTo, expectedText) {
+		itCustom(browserContext, '07_chessboard_interaction/edit_arrows', itemIndex, label, async element => {
+			const actions = browserContext.driver.actions({ async: true });
+			const 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();
+			await takeScreenshot(browserContext, label, element);
+			await actions.release().perform();
+			await compareScreenshot(browserContext, label);
+			await compareSandbox(browserContext, expectedText);
+		});
+	}
+
+	itCheckEditArrow(0, 'base 1', 325, 275, 110, 140, 'arrow edited: g3 -> c6');
+	itCheckEditArrow(0, 'base 2', 260, 10, 175, 375, 'arrow edited: f8 -> d1');
+	itCheckEditArrow(1, 'over square marker', 275, 125, 275, 230, 'arrow edited: c3 -> c5');
+	itCheckEditArrow(1, 'over arrow marker', 40, 110, 125, 290, 'arrow edited: h3 -> f6');
+
+	function itCheckNonEditArrow(itemIndex, label, xFrom, yFrom, xTo, yTo) {
+		itCustom(browserContext, '07_chessboard_interaction/edit_arrows', itemIndex, label, async element => {
+			await setSandbox(browserContext, label); // can be any value as long as it is unique among other test-cases
+			const actions = browserContext.driver.actions({ async: true });
+			const 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();
+			await takeScreenshot(browserContext, label, element);
+			await actions.release().perform();
+			await compareScreenshot(browserContext, label);
+			await compareSandbox(browserContext, label);
+		});
+	}
+
+	itCheckNonEditArrow(0, 'from == to', 275, 225, 290, 210);
+	itCheckNonEditArrow(0, 'out of board', 175, 225, 500, 280);
+
+	itChecksScreenshots(browserContext, '07_chessboard_interaction/error', [
+		'wrong interaction mode',
+		'edit color not set',
+	]);
+
+});