kokopu-react 2.0.1 → 3.0.0

package/src/movetext/MovetextImpl.tsx

@@ -41,6 +41,7 @@ interface MovetextImplProps {
 		flipped?: ChessboardProps['flipped'],
 		squareSize?: ChessboardProps['squareSize'],
 		coordinateVisible?: ChessboardProps['coordinateVisible'],
+		turnVisible?: ChessboardProps['turnVisible'],
 		colorset?: ChessboardProps['colorset'],
 		pieceset?: ChessboardProps['pieceset'],
 		smallScreenLimits?: ChessboardProps['smallScreenLimits'],
@@ -52,7 +53,7 @@ interface MovetextImplProps {
 	selection?: string;
 	interactionMode?: 'selectMove';
 
-	onMoveSelected?: (nodeId: string | undefined, evtOrigin: 'key-first' | 'key-previous' | 'key-next' | 'key-last' | 'click') => void;
+	onMoveSelected?: (nodeId: string | undefined, evtOrigin: 'key-first' | 'key-previous' | 'key-next' | 'key-last' | 'key-exit' | 'click') => void;
 }
 
 
@@ -317,6 +318,7 @@ export class MovetextImpl extends React.Component<MovetextImplProps> {
 						flipped={this.props.diagramOptions.flipped}
 						squareSize={this.props.diagramOptions.squareSize}
 						coordinateVisible={this.props.diagramOptions.coordinateVisible}
+						turnVisible={this.props.diagramOptions.turnVisible}
 						smallScreenLimits={this.props.diagramOptions.smallScreenLimits}
 						colorset={this.props.diagramOptions.colorset}
 						pieceset={this.props.diagramOptions.pieceset}
@@ -354,32 +356,34 @@ export class MovetextImpl extends React.Component<MovetextImplProps> {
 	}
 
 	private handleKeyDownInFocusField(evt: React.KeyboardEvent<HTMLAnchorElement>) {
-		if (evt.key !== 'Home' && evt.key !== 'ArrowLeft' && evt.key !== 'ArrowRight' && evt.key !== 'End') {
+		if (evt.key !== 'Home' && evt.key !== 'ArrowLeft' && evt.key !== 'ArrowRight' && evt.key !== 'End' && evt.key !== 'Escape') {
 			return;
 		}
 		evt.preventDefault();
 		if (!this.props.selection) {
 			return;
 		}
-		let nodeId = undefined;
-		let evtOrigin: 'key-first' | 'key-previous' | 'key-next' | 'key-last';
 		if (evt.key === 'Home') {
-			nodeId = firstNodeIdImpl(this.props.game, this.props.selection);
-			evtOrigin = 'key-first';
+			this.fireMoveSelected(firstNodeIdImpl(this.props.game, this.props.selection), 'key-first');
 		}
 		else if (evt.key === 'ArrowLeft') {
-			nodeId = previousNodeIdImpl(this.props.game, this.props.selection);
-			evtOrigin = 'key-previous';
+			this.fireMoveSelected(previousNodeIdImpl(this.props.game, this.props.selection), 'key-previous');
 		}
 		else if (evt.key === 'ArrowRight') {
-			nodeId = nextNodeIdImpl(this.props.game, this.props.selection);
-			evtOrigin = 'key-next';
+			this.fireMoveSelected(nextNodeIdImpl(this.props.game, this.props.selection), 'key-next');
 		}
-		else { // evt.key === 'End'
-			nodeId = lastNodeIdImpl(this.props.game, this.props.selection);
-			evtOrigin = 'key-last';
+		else if (evt.key === 'End') {
+			this.fireMoveSelected(lastNodeIdImpl(this.props.game, this.props.selection), 'key-last');
 		}
-		if (nodeId && this.props.onMoveSelected) {
+		else { // evt.key === 'Escape'
+			if (this.props.game.findById(this.props.selection)) {
+				this.fireMoveSelected(undefined, 'key-exit');
+			}
+		}
+	}
+
+	private fireMoveSelected(nodeId: string | undefined, evtOrigin: 'key-first' | 'key-previous' | 'key-next' | 'key-last' | 'key-exit') {
+		if ((nodeId || evtOrigin === 'key-exit') && this.props.onMoveSelected) {
 			this.props.onMoveSelected(nodeId, evtOrigin);
 		}
 	}

package/src/sanitization.ts

@@ -33,6 +33,19 @@ export function sanitizeBoolean(input: boolean): boolean {
 }
 
 
+export function sanitizePartialObject<T>(input: Partial<T> | undefined, exceptionBuilder: () => IllegalArgument): Partial<T> {
+	if (input === undefined || input === null) {
+		return {};
+	}
+	else if (typeof input !== 'object') {
+		throw exceptionBuilder();
+	}
+	else {
+		return input;
+	}
+}
+
+
 export function sanitizeInteger(input: number, exceptionBuilder: () => IllegalArgument): number {
 	if (typeof input !== 'number' || !Number.isFinite(input)) {
 		throw exceptionBuilder();

package/src/types.ts

@@ -20,7 +20,7 @@
  * -------------------------------------------------------------------------- */
 
 
-import { Square, SquareCouple, isSquare, isSquareCouple } from 'kokopu';
+import { ColoredPiece, Square, SquareCouple, isColoredPiece, isSquare, isSquareCouple } from 'kokopu';
 
 import { IllegalArgument } from './exception';
 
@@ -36,6 +36,22 @@ export const MIN_SQUARE_SIZE = 12;
 export const MAX_SQUARE_SIZE = 96;
 
 
+/**
+ * Type of icon representing a (colored) chess piece.
+ *
+ * The two special values `'wx'` and `'bx'` correspond to the turn flags.
+ */
+export type ChessPieceIconType = ColoredPiece | 'wx' | 'bx';
+
+
+/**
+ * Whether the given object is a {@link ChessPieceIconType} or not.
+ */
+export function isChessPieceIconType(iconType: unknown): iconType is ChessPieceIconType {
+	return isColoredPiece(iconType) || iconType === 'wx' || iconType === 'bx';
+}
+
+
 /**
  * Set of parameters describing the colors to use to render a {@link Chessboard} component.
  *

package/test/02_chessboard_util.js

@@ -24,52 +24,106 @@ 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);
+function itInvalidArgument(label, action) {
+	it(label, () => { test.exception(action).isInstanceOf(exception.IllegalArgument); });
+}
+
+
+describe('Chessboard.size()', () => {
+
+	function itChessboardSize(label, expectedWidth, expectedHeight, attr) {
+		it(label, () => {
+			test.value(Chessboard.size(attr)).is({ width: expectedWidth, height: expectedHeight });
+		});
+	}
+
+	itChessboardSize('Default', 374, 333);
+	itChessboardSize('Square size 50', 467, 416, { squareSize: 50 });
+	itChessboardSize('Default without coordinates', 364, 320, { coordinateVisible: false });
+	itChessboardSize('Default without turn', 330, 333, { turnVisible: false });
+	itChessboardSize('Default board only', 320, 320, { coordinateVisible: false, turnVisible: false });
+
+	itInvalidArgument('Attribute not an object', () => Chessboard.size('not-an-object'));
+	itInvalidArgument('Square size not an integer', () => Chessboard.size({ squareSize: 'not-an-integer' }));
+	itInvalidArgument('Small-screen limits not an array', () => Chessboard.size({ smallScreenLimits: 'not-an-array' }));
+	itInvalidArgument('Small-screen limit undefined', () => Chessboard.size({ smallScreenLimits: [ undefined ] }));
+	itInvalidArgument('Small-screen limit null', () => Chessboard.size({ smallScreenLimits: [ null ] }));
+	itInvalidArgument('Small-screen limit not-an-object', () => Chessboard.size({ smallScreenLimits: [ 'not-an-object' ] }));
+});
 
-	const actualSize = Chessboard.size(expectedSquareSize, coordinateVisible, smallScreenLimits);
+
+function testAdaptSquareSize(expectedSquareSize, width, height, coordinateVisible, turnVisible, smallScreenLimits) {
+
+	test.value(Chessboard.adaptSquareSize(width, height, {
+		coordinateVisible: coordinateVisible,
+		turnVisible: turnVisible,
+		smallScreenLimits: smallScreenLimits,
+	})).is(expectedSquareSize);
+
+	const actualSize = Chessboard.size({
+		squareSize: expectedSquareSize,
+		coordinateVisible: coordinateVisible,
+		turnVisible: turnVisible,
+		smallScreenLimits: smallScreenLimits,
+	});
 	test.value(actualSize.width <= width && actualSize.height <= height).isTrue();
 }
 
-function testAdaptSquareSizeWithIncrement(expectedSquareSize, width, height, coordinateVisible, smallScreenLimits) {
-	testAdaptSquareSize(expectedSquareSize, width, height, coordinateVisible, smallScreenLimits);
 
-	const actualSizeIncremented = Chessboard.size(expectedSquareSize + 1, coordinateVisible, smallScreenLimits);
+function testAdaptSquareSizeWithIncrement(expectedSquareSize, width, height, coordinateVisible, turnVisible, smallScreenLimits) {
+	testAdaptSquareSize(expectedSquareSize, width, height, coordinateVisible, turnVisible, smallScreenLimits);
+
+	const actualSizeIncremented = Chessboard.size({
+		squareSize: expectedSquareSize + 1,
+		coordinateVisible: coordinateVisible,
+		turnVisible: turnVisible,
+		smallScreenLimits: smallScreenLimits,
+	});
 	test.value(actualSizeIncremented.width > width || actualSizeIncremented.height > height).isTrue();
 }
 
-describe('Adapt square-size', () => {
-
-	it('Very small', () => { test.value(Chessboard.adaptSquareSize(10, 10, false)).is(Chessboard.minSquareSize()); });
-	it('Very large', () => { test.value(Chessboard.adaptSquareSize(9999, 9999, true)).is(Chessboard.maxSquareSize()); });
 
-	it('Size 185x300 with coordinates', () => testAdaptSquareSizeWithIncrement(19, 185, 300, true));
-	it('Size 185x300 without coordinates', () => testAdaptSquareSizeWithIncrement(20, 185, 300, false));
-	it('Size 300x200 with coordinates', () => testAdaptSquareSizeWithIncrement(23, 300, 200, true));
-	it('Size 300x200 without coordinates', () => testAdaptSquareSizeWithIncrement(25, 300, 200, false));
-	it('Size 375x500 with coordinates', () => testAdaptSquareSizeWithIncrement(40, 375, 500, true));
-	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); });
-	}
+describe('Adapt square-size', () => {
 
-	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));
+	it('Very small', () => { test.value(Chessboard.adaptSquareSize(10, 10, { coordinateVisible: false, turnVisible: false })).is(Chessboard.minSquareSize()); });
+	it('Very large', () => { test.value(Chessboard.adaptSquareSize(9999, 9999)).is(Chessboard.maxSquareSize()); });
+
+	it('Size 185x300 with coordinates & turn', () => testAdaptSquareSizeWithIncrement(19, 185, 300, true, true));
+	it('Size 185x300 without coordinates', () => testAdaptSquareSizeWithIncrement(20, 185, 300, false, true));
+	it('Size 185x300 without turn', () => testAdaptSquareSizeWithIncrement(22, 185, 300, true, false));
+	it('Size 185x300 board only', () => testAdaptSquareSizeWithIncrement(23, 185, 300, false, false));
+
+	it('Size 300x200 with coordinates & turn', () => testAdaptSquareSizeWithIncrement(23, 300, 200, true, true));
+	it('Size 300x200 without coordinates', () => testAdaptSquareSizeWithIncrement(25, 300, 200, false, true));
+	it('Size 300x200 without turn', () => testAdaptSquareSizeWithIncrement(23, 300, 200, true, false));
+	it('Size 300x200 board only', () => testAdaptSquareSizeWithIncrement(25, 300, 200, false, false));
+
+	it('Size 375x500 with coordinates & turn', () => testAdaptSquareSizeWithIncrement(40, 375, 500, true, true));
+	it('Size 375x500 without coordinates', () => testAdaptSquareSizeWithIncrement(41, 375, 500, false, true));
+	it('Size 375x500 without turn', () => testAdaptSquareSizeWithIncrement(45, 375, 500, true, false));
+	it('Size 375x500 board only', () => testAdaptSquareSizeWithIncrement(46, 375, 500, false, false));
+
+	it('Size 600x450 with coordinates & turn', () => testAdaptSquareSizeWithIncrement(54, 600, 450, true, true));
+	it('Size 600x450 without coordinates', () => testAdaptSquareSizeWithIncrement(56, 600, 450, false, true));
+	it('Size 600x450 without turn', () => testAdaptSquareSizeWithIncrement(54, 600, 450, true, false));
+	it('Size 600x450 board only', () => testAdaptSquareSizeWithIncrement(56, 600, 450, false, false));
+
+	itInvalidArgument('Width <null>', () => Chessboard.adaptSquareSize(null, 400));
+	itInvalidArgument('Width not-a-number', () => Chessboard.adaptSquareSize('500', 400));
+	itInvalidArgument('Height <undefined>', () => Chessboard.adaptSquareSize(500, undefined));
+	itInvalidArgument('Height object', () => Chessboard.adaptSquareSize(500, {}));
+	itInvalidArgument('Attribute not-an-object', () => Chessboard.adaptSquareSize(500, 400, 'not-an-object'));
+	itInvalidArgument('Small-screen limits not-an-array', () => Chessboard.adaptSquareSize(500, 400, { smallScreenLimits: 'not-an-array' }));
 });
 
+
 describe('Adapt square-size with small-screen limits', () => {
 
 	const limits = [
-		{ width: 470, squareSize: 12, coordinateVisible: false },
-		{ width: 540, squareSize: 16, coordinateVisible: false },
-		{ width: 620, squareSize: 24, coordinateVisible: false },
+		{ width: 540, squareSize: 24, turnVisible: false },
+		{ width: 620, squareSize: 28, coordinateVisible: false },
 		{ width: 730, squareSize: 32 },
-		{ width: 860, squareSize: 44 },
+		{ width: 860, squareSize: 48 },
 	];
 
 	before(() => {
@@ -81,18 +135,32 @@ describe('Adapt square-size with small-screen limits', () => {
 
 	it('Window-limited', () => {
 		window.innerWidth = 640;
-		testAdaptSquareSize(32, 9999, 9999, true, limits);
+		testAdaptSquareSize(32, 9999, 9999, true, true, limits);
 	});
-	it('Available-space-limited 1', () => {
+
+	it('Available-space-limited with coordinates & turn', () => {
 		window.innerWidth = 800;
-		testAdaptSquareSize(40, 375, 500, true, limits);
+		testAdaptSquareSize(40, 375, 500, true, true, limits);
 	});
-	it('Available-space-limited 2', () => {
+	it('Available-space-limited without coordinates', () => {
 		window.innerWidth = 800;
-		testAdaptSquareSize(41, 375, 500, false, limits);
+		testAdaptSquareSize(41, 375, 500, false, true, limits);
 	});
+	it('Available-space-limited without turn', () => {
+		window.innerWidth = 800;
+		testAdaptSquareSize(45, 375, 500, true, false, limits);
+	});
+	it('Available-space-limited board only', () => {
+		window.innerWidth = 800;
+		testAdaptSquareSize(46, 375, 500, false, false, limits);
+	});
+
 	it('Force hidden coordinates', () => {
 		window.innerWidth = 600;
-		testAdaptSquareSize(20, 185, 300, true, limits);
+		testAdaptSquareSize(20, 185, 300, true, true, limits);
+	});
+	it('Force hidden coordinates & turn', () => {
+		window.innerWidth = 500;
+		testAdaptSquareSize(23, 185, 300, true, true, limits);
 	});
 });

package/test/{04_marker_icons_graphic.js → 04_icons_graphic.js}

@@ -23,9 +23,9 @@
 const { describeWithBrowser, itChecksScreenshots } = require('./common/graphic');
 
 
-describeWithBrowser('Marker icons graphic', browserContext => {
+describeWithBrowser('Icons graphic', browserContext => {
 
-	itChecksScreenshots(browserContext, '04_marker_icons_graphic/base', [
+	itChecksScreenshots(browserContext, '04_icons_graphic/marker', [
 
 		'default square',
 		'colorized square',
@@ -46,4 +46,16 @@ describeWithBrowser('Marker icons graphic', browserContext => {
 		'invalid arrow size',
 	]);
 
+	itChecksScreenshots(browserContext, '04_icons_graphic/chess_piece', [
+
+		'single piece',
+		'multiple pieces',
+		'customized pieceset',
+
+		'invalid size',
+		'invalid single piece',
+		'invalid multiple pieces',
+		'invalid pieceset',
+	]);
+
 });

package/test/09_chessboard_small_screens.js

@@ -0,0 +1,50 @@
+/* -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    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, itChecksScreenshots, takeScreenshot, compareScreenshot, setWindowWidth } = require('./common/graphic');
+
+
+describeWithBrowser('Chessboard on small-screens', browserContext => {
+
+	itChecksScreenshots(browserContext, '09_chessboard_small_screens/base', [
+		'default',
+		'invalid limits',
+	]);
+
+	function itCheckScreenshotWithWidth(width) {
+		const label = `width ${width}`;
+		itCustom(browserContext, '09_chessboard_small_screens/base', 0, label, async element => {
+			await setWindowWidth(browserContext, width);
+			await takeScreenshot(browserContext, label, element);
+			await compareScreenshot(browserContext, label);
+		});
+	}
+
+	itCheckScreenshotWithWidth(750);
+	itCheckScreenshotWithWidth(740);
+	itCheckScreenshotWithWidth(730);
+	itCheckScreenshotWithWidth(720);
+	itCheckScreenshotWithWidth(710);
+	itCheckScreenshotWithWidth(700);
+	itCheckScreenshotWithWidth(690);
+
+});

package/test/{09_movetext_graphic.js → 10_movetext_graphic.js}

@@ -25,14 +25,14 @@ const { describeWithBrowser, itChecksScreenshots } = require('./common/graphic')
 
 describeWithBrowser('Movetext graphic', browserContext => {
 
-	itChecksScreenshots(browserContext, '09_movetext_graphic/base', [
+	itChecksScreenshots(browserContext, '10_movetext_graphic/base', [
 		'game 1',
 		'game 2',
 		'game 3',
 		'game 4',
 	]);
 
-	itChecksScreenshots(browserContext, '09_movetext_graphic/error', [
+	itChecksScreenshots(browserContext, '10_movetext_graphic/error', [
 		'wrong game index 1',
 		'wrong game index 2',
 		'pgn parsing error 1',
@@ -41,16 +41,17 @@ describeWithBrowser('Movetext graphic', browserContext => {
 		'wrong game index type',
 	]);
 
-	itChecksScreenshots(browserContext, '09_movetext_graphic/html', [
+	itChecksScreenshots(browserContext, '10_movetext_graphic/html', [
 		'html in headers',
 		'html in comments',
 		'filtered tags and attributes',
 	]);
 
-	itChecksScreenshots(browserContext, '09_movetext_graphic/options', [
+	itChecksScreenshots(browserContext, '10_movetext_graphic/options', [
 		'localized piece symbols',
 		'custom piece symbols',
 		'figurine piece symbols and diagram options',
+		'other diagram options',
 		'hidden diagrams',
 		'wrong diagram options 1',
 		'wrong diagram options 2',

package/test/{10_movetext_interaction.js → 11_movetext_interaction.js}

@@ -22,12 +22,13 @@
 
 const { describeWithBrowser, itCustom, setSandbox, compareSandbox, takeScreenshot, compareScreenshot, itChecksScreenshots } = require('./common/graphic');
 const { By, Key } = require('selenium-webdriver');
+const test = require('unit.js');
 
 
 describeWithBrowser('Movetext interaction', browserContext => {
 
 	function itCheckClickMove(itemIndex, label, targets) {
-		itCustom(browserContext, '10_movetext_interaction/select_moves', itemIndex, label, async element => {
+		itCustom(browserContext, '11_movetext_interaction/select_moves', itemIndex, label, async element => {
 			const actions = browserContext.driver.actions({ async: true });
 			await setSandbox(browserContext, '');
 			for (let i = 0; i < targets.length; ++i) {
@@ -61,9 +62,22 @@ describeWithBrowser('Movetext interaction', browserContext => {
 		{ searchedText: 'Nc6', expectedText: tpl('1b-v0-2b', 'click') },
 	]);
 
-	function itCheckKeyboardActions(itemIndex, label, expectedOnGoFirst, expectedOnGoPrevious, expectedOnGoNext, expectedOnGoLast) {
-		itCustom(browserContext, '10_movetext_interaction/select_moves', itemIndex, label, async element => {
-			const focusFieldElement = await element.findElement(By.className('kokopu-focusField'));
+	function itCheckKeyboardActions(itemIndex, label, expectedOnGoFirst, expectedOnGoPrevious, expectedOnGoNext, expectedOnGoLast, expectedOnExit) {
+		itCustom(browserContext, '11_movetext_interaction/select_moves', itemIndex, label, async element => {
+			const focusFieldElements = await element.findElements(By.className('kokopu-focusField'));
+
+			// Handle components for which no interaction is defined.
+			if (focusFieldElements.length === 0) {
+				test.value('').is(expectedOnGoFirst);
+				test.value('').is(expectedOnGoPrevious);
+				test.value('').is(expectedOnGoNext);
+				test.value('').is(expectedOnGoLast);
+				test.value('').is(expectedOnExit);
+				return;
+			}
+
+			test.value(focusFieldElements.length).is(1);
+			const focusFieldElement = focusFieldElements[0];
 
 			await setSandbox(browserContext, '');
 			await focusFieldElement.sendKeys(Key.HOME);
@@ -81,22 +95,32 @@ describeWithBrowser('Movetext interaction', browserContext => {
 			await focusFieldElement.sendKeys(Key.END);
 			await compareSandbox(browserContext, expectedOnGoLast);
 
+			await setSandbox(browserContext, '');
+			await focusFieldElement.sendKeys(Key.ESCAPE);
+			await compareSandbox(browserContext, expectedOnExit);
+
 			await setSandbox(browserContext, '');
 			await focusFieldElement.sendKeys(Key.ARROW_UP);
 			await compareSandbox(browserContext, '');
 		});
 	}
 
-	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', '', '', '', '');
-	itCheckKeyboardActions(8, 'key on sub-variation selected', tpl('start', 'key-first'), tpl('1w', 'key-previous'), tpl('1b-v0-1b', 'key-next'), tpl('1b-v0-3w', 'key-last'));
-
-	itChecksScreenshots(browserContext, '10_movetext_interaction/error', [
+	const TPL_EXIT = tpl(undefined, 'key-exit');
+
+	itCheckKeyboardActions(0, 'key on disabled', '', '', '', '', '');
+	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'), TPL_EXIT);
+	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'), TPL_EXIT);
+	itCheckKeyboardActions(4, 'key on start selected', '', '', tpl('1w', 'key-next'), tpl('6b', 'key-last'), TPL_EXIT);
+	itCheckKeyboardActions(5, 'key on first selected', tpl('start', 'key-first'), tpl('start', 'key-previous'), tpl('1b', 'key-next'), tpl('6b', 'key-last'), TPL_EXIT);
+	itCheckKeyboardActions(6, 'key on last selected', tpl('start', 'key-first'), tpl('6w', 'key-previous'), '', '', TPL_EXIT);
+	itCheckKeyboardActions(7, 'key on invalid selection', '', '', '', '', '');
+	itCheckKeyboardActions(8, 'key on sub-variation selected', tpl('start', 'key-first'), tpl('1w', 'key-previous'), tpl('1b-v0-1b', 'key-next'),
+		tpl('1b-v0-3w', 'key-last'), TPL_EXIT);
+
+	itChecksScreenshots(browserContext, '11_movetext_interaction/error', [
 		'wrong interaction mode',
 	]);
 

package/test/common/graphic.js

@@ -204,6 +204,15 @@ exports.setSandbox = async function(browserContext, value) {
 };
 
 
+/**
+ * Set the width of the browser.
+ */
+exports.setWindowWidth = async function(browserContext, width) {
+	const { height } = await await browserContext.driver.manage().window().getRect();
+	await browserContext.driver.manage().window().setRect({ width: width, height: height });
+};
+
+
 /**
  * Open the page corresponding to the given test-case, and execute the given scenario.
  */

package/test/graphic_test_app/04_icons_graphic/chess_piece.tsx

@@ -0,0 +1,38 @@
+/* -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    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/>.                                         *
+ *                                                                            *
+ * -------------------------------------------------------------------------- */
+
+
+import * as React from 'react';
+import { testApp } from '../common/test_app';
+import { ChessPieceIcon } from '../../../dist/lib/index';
+
+testApp([ /* eslint-disable react/jsx-key */
+
+	<ChessPieceIcon size={44} type="wq" />,
+	<ChessPieceIcon size={24} type={[ 'bb', 'wx', 'wx', 'wn', 'bx', 'bk', 'bk' ]} />,
+	<ChessPieceIcon size={36} type={[ 'wr', 'wb', 'bq' ]} pieceset="eyes" />,
+
+	<ChessPieceIcon size={ /* eslint-disable @typescript-eslint/no-explicit-any */ 'not-a-number' as any /* eslint-enable @typescript-eslint/no-explicit-any */ } type="wq" />,
+	<ChessPieceIcon size={40} type={ /* eslint-disable @typescript-eslint/no-explicit-any */ 'invalid' as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
+	<ChessPieceIcon size={40} type={[ 'bb', /* eslint-disable @typescript-eslint/no-explicit-any */ 'zp' as any /* eslint-enable @typescript-eslint/no-explicit-any */ ]} />,
+	<ChessPieceIcon size={40} type="wq" pieceset="not-a-pieceset" />,
+
+]); /* eslint-enable react/jsx-key */