kokopu-react 1.11.0 → 2.0.0

package/test/08_chessboard_play_moves.js

@@ -0,0 +1,98 @@
+/* -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    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 } = require('./common/graphic');
+
+
+describeWithBrowser('Chessboard play moves', browserContext => {
+
+	function itCheckPlayMove(itemIndex, label, xFrom, yFrom, xTo, yTo, expectedText) {
+		itCustom(browserContext, '08_chessboard_play_moves/base', 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);
+		});
+	}
+
+	itCheckPlayMove(0, 'regular move 1', 225, 335, 220, 225, 'move played: e4');
+	itCheckPlayMove(1, 'regular move 2', 275, 225, 135, 85, 'move played: Bxf2+');
+	itCheckPlayMove(1, 'castling move', 175, 375, 75, 375, 'move played: O-O');
+	itCheckPlayMove(3, 'chess960 castling move 1', 275, 375, 75, 375, 'move played: O-O-O');
+	itCheckPlayMove(3, 'chess960 castling move 2', 275, 375, 375, 375, 'move played: O-O');
+	itCheckPlayMove(3, 'chess960 ambiguous king move', 275, 375, 320, 375, 'move played: Kg1');
+
+	function itCheckNonPlayMove(itemIndex, label, xFrom, yFrom, xTo, yTo) {
+		itCustom(browserContext, '08_chessboard_play_moves/base', 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);
+		});
+	}
+
+	itCheckNonPlayMove(2, 'illegal position', 225, 325, 225, 225);
+	itCheckNonPlayMove(0, 'wrong color moved', 75, 25, 125, 125);
+	itCheckNonPlayMove(0, 'illegal move', 75, 375, 125, 225);
+	itCheckNonPlayMove(0, 'from == to', 75, 375, 85, 365);
+	itCheckNonPlayMove(0, 'out of board', 325, 375, 450, 285);
+	itCheckNonPlayMove(3, 'chess960 non-KxR castling', 275, 375, 130, 375);
+
+	function itCheckPlayPromotion(itemIndex, label, xFrom, yFrom, xTo, yTo, xPromo, yPromo, expectedText) {
+		itCustom(browserContext, '08_chessboard_play_moves/promotions', 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 }).release().perform();
+			await takeScreenshot(browserContext, label, element);
+			await actions.move({ x: area.x + xPromo, y: area.y + yPromo }).click().perform();
+			await compareScreenshot(browserContext, label);
+			await compareSandbox(browserContext, expectedText);
+		});
+	}
+
+	itCheckPlayPromotion(0, 'regular promotion 1', 75, 75, 75, 25, 60, 10, 'promotion move played: b8=Q');
+	itCheckPlayPromotion(1, 'regular promotion 2', 75, 325, 25, 375, 15, 280, 'promotion move played: bxa1=B');
+	itCheckPlayPromotion(2, 'antichess promotion', 325, 325, 325, 375, 325, 175, 'promotion move played: b8=K');
+
+	function itCheckNonPlayPromotion(itemIndex, label, xFrom, yFrom, xTo, yTo, xPromo, yPromo) {
+		itCustom(browserContext, '08_chessboard_play_moves/promotions', 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 }).release().perform();
+			await takeScreenshot(browserContext, label, element);
+			await actions.move({ x: area.x + xPromo, y: area.y + yPromo }).click().perform();
+			await compareScreenshot(browserContext, label);
+			await compareSandbox(browserContext, label);
+		});
+	}
+
+	itCheckNonPlayPromotion(1, 'cancel promotion', 75, 325, 75, 375, 190, 220);
+
+});

package/test/{7_movetext_graphic.js → 09_movetext_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,27 +17,43 @@
  *    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('Movetext graphic', function() {
+describeWithBrowser('Movetext graphic', browserContext => {
 
-	const browserContext = {};
+	itChecksScreenshots(browserContext, '09_movetext_graphic/base', [
+		'game 1',
+		'game 2',
+		'game 3',
+		'game 4',
+	]);
 
-	before(async function() {
-		await openBrowser(this, browserContext);
-	});
+	itChecksScreenshots(browserContext, '09_movetext_graphic/error', [
+		'wrong game index 1',
+		'wrong game index 2',
+		'pgn parsing error 1',
+		'pgn parsing error 2',
+		'wrong game type',
+		'wrong game index type',
+	]);
 
-	after(async function() {
-		await closeBrowser(browserContext);
-	});
+	itChecksScreenshots(browserContext, '09_movetext_graphic/html', [
+		'html in headers',
+		'html in comments',
+		'filtered tags and attributes',
+	]);
+
+	itChecksScreenshots(browserContext, '09_movetext_graphic/options', [
+		'localized piece symbols',
+		'custom piece symbols',
+		'figurine piece symbols and diagram options',
+		'hidden diagrams',
+		'wrong diagram options 1',
+		'wrong diagram options 2',
+	]);
 
-	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 → 10_movetext_interaction.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,36 +17,26 @@
  *    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 { describeWithBrowser, itCustom, setSandbox, compareSandbox, takeScreenshot, compareScreenshot, itChecksScreenshots } = 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);
-	});
+describeWithBrowser('Movetext interaction', browserContext => {
 
 	function itCheckClickMove(itemIndex, label, targets) {
-		itCustom(browserContext, '17_movetext_interaction', itemIndex, label, async function(element) {
-			let actions = browserContext.driver.actions({ async: true });
+		itCustom(browserContext, '10_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) {
-				let target = targets[i];
-				let moveElement = await element.findElement(By.xpath(`.//span[text()='${target.searchedText}']`));
+				const target = targets[i];
+				const 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 takeScreenshot(browserContext, label, element);
+					await compareScreenshot(browserContext, label);
 				}
 				await compareSandbox(browserContext, target.expectedText);
 			}
@@ -66,14 +56,14 @@ describe('Movetext interaction', function() {
 		{ searchedText: 'cxd5', expectedText: tpl('5w', 'click') },
 	]);
 
-	itCheckClickMove(2, 'click on with variations 1', [
+	itCheckClickMove(2, 'click on with variations', [
 		{ searchedText: 'Bb5', expectedText: tpl(undefined, 'click') },
 		{ searchedText: 'Nc6', expectedText: tpl('1b-v0-2b', 'click') },
 	]);
 
 	function itCheckKeyboardActions(itemIndex, label, expectedOnGoFirst, expectedOnGoPrevious, expectedOnGoNext, expectedOnGoLast) {
-		itCustom(browserContext, '17_movetext_interaction', itemIndex, label, async function(element) {
-			let focusFieldElement = await element.findElement(By.className('kokopu-focusField'));
+		itCustom(browserContext, '10_movetext_interaction/select_moves', itemIndex, label, async element => {
+			const focusFieldElement = await element.findElement(By.className('kokopu-focusField'));
 
 			await setSandbox(browserContext, '');
 			await focusFieldElement.sendKeys(Key.HOME);
@@ -105,4 +95,9 @@ describe('Movetext interaction', function() {
 	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', [
+		'wrong interaction mode',
+	]);
+
 });

package/test/common/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,7 +17,7 @@
  *    Public License along with this program. If not, see                     *
  *    <http://www.gnu.org/licenses/>.                                         *
  *                                                                            *
- ******************************************************************************/
+ * -------------------------------------------------------------------------- */
 
 
 const fs = require('fs');
@@ -27,12 +27,12 @@ const { imgDiff } = require('img-diff-js');
 const test = require('unit.js');
 
 const rootDir = __dirname + '/../..';
-const referenceDir = rootDir + '/test/references';
+const referenceDir = rootDir + '/test/graphic_references';
 const outputDir = rootDir + '/build/graphic_output';
 const coverageDir = rootDir + '/build/.nyc_output';
 
 const UNREACHABLE_TEST_CLIENT_MESSAGE =
-	'Cannot reach the dockerized selenium webbrowser used for graphic tests (probably because the test environment is not running).\n' +
+	'Cannot reach the Dockerized Selenium webbrowser used for graphic tests (probably because the test environment is not running).\n' +
 	'\n' +
 	'Use command `npm run test_env:start` to start the test environment.\n' +
 	'Do not forget to run `npm run test_env:stop` when finished.\n';
@@ -42,29 +42,52 @@ const ANIMATION_DELAY = 200;
 
 
 /**
- * Open a browser in the client (+ ensure everything else is ready to execute graphic tests).
+ * Create a Mocha test-suite that runs graphic tests in Dockerized Selenium webbrowser.
  */
-exports.openBrowser = async function(mochaContext, browserContext) {
+exports.describeWithBrowser = function(suiteLabel, testFactory) {
+	describe(suiteLabel, function() {
 
-	// The initialization process may take a while, thus increase the timeout threshold.
-	mochaContext.timeout(10000);
+		// Fetching a new page in the browser may take a while, thus increase the timeout threshold.
+		this.timeout(10000);
+
+		// Configure the browser context.
+		const browserContext = {};
+
+		before(async () => {
+			await openBrowser(browserContext);
+		});
+
+		after(async () => {
+			await closeBrowser(browserContext);
+		});
+
+		// Register the tests.
+		testFactory(browserContext);
+	});
+};
+
+
+/**
+ * Open a browser in the client.
+ */
+async function openBrowser(browserContext) {
 
 	// Start the browser and ensure it can fetch something.
-	let capabilities = Capabilities.firefox();
-	let driver = new Builder().usingServer('http://localhost:4444').withCapabilities(capabilities).build();
+	const capabilities = Capabilities.firefox();
+	const driver = new Builder().usingServer('http://localhost:4444').withCapabilities(capabilities).build();
 	await driver.get('file:///app/build/test_graphic/heartbeat.txt').catch(reason => {
 		return Promise.reject(reason.message.includes('ECONNREFUSED') ? new Error(UNREACHABLE_TEST_CLIENT_MESSAGE) : reason);
 	});
 
 	// Initialize the browser context
 	browserContext.driver = driver;
-};
+}
 
 
 /**
  * Close the given browser.
  */
-exports.closeBrowser = async function(browserContext) {
+async function closeBrowser(browserContext) {
 	if (browserContext.driver) {
 
 		// Save the coverage data before closing the browser.
@@ -75,7 +98,7 @@ exports.closeBrowser = async function(browserContext) {
 		delete browserContext.driver;
 		delete browserContext.latestTestCase;
 	}
-};
+}
 
 
 /**
@@ -90,12 +113,12 @@ async function saveCoverage(browserContext) {
 	let pageIndex = 0;
 	let coverageFile = '';
 	do {
-		coverageFile = `${coverageDir}/${browserContext.latestTestCase}-${pageIndex}.json`;
+		coverageFile = `${coverageDir}/${browserContext.latestTestCase.replaceAll('/', '__')}-${pageIndex}.json`;
 		++pageIndex;
 	} while (fs.existsSync(coverageFile));
 
 	// Retrieve and save the coverage data.
-	let coverageData = await browserContext.driver.executeScript('return JSON.stringify(window.__coverage__)');
+	const coverageData = await browserContext.driver.executeScript('return JSON.stringify(window.__coverage__)');
 	fs.writeFileSync(coverageFile, coverageData);
 }
 
@@ -114,21 +137,28 @@ async function fetchTestCase(browserContext, testCaseName) {
 	// Fetch the new page.
 	await browserContext.driver.get(`file:///app/build/test_graphic/${testCaseName}/index.html`);
 	browserContext.latestTestCase = testCaseName;
+	await waitForAnimation();
+}
+
 
-	// Wait until the end of the animations.
+/**
+ * Wait until the end of the chessboard animations.
+ */
+const waitForAnimation = exports.waitForAnimation = async function() {
 	await new Promise(resolve => setTimeout(resolve, ANIMATION_DELAY));
-}
+};
 
 
 /**
  * Take a screenshot of the element identified by the given CSS target.
  */
-let takeScreenshot = exports.takeScreenshot = async function(browserContext, imageBaseName, element) {
+const takeScreenshot = exports.takeScreenshot = async function(browserContext, imageBaseName, element) {
 
-	let actualFilename = `${outputDir}/${browserContext.latestTestCase}/${imageBaseName}.png`;
+	imageBaseName = imageBaseName.replaceAll(' ', '_').toLowerCase();
+	const actualFilename = `${outputDir}/${browserContext.latestTestCase}/${imageBaseName}.png`;
 
 	// Take a screenshot of the targeted element.
-	let image = await element.takeScreenshot();
+	const image = await element.takeScreenshot();
 	fs.mkdirSync(path.dirname(actualFilename), { recursive: true });
 	fs.writeFileSync(actualFilename, image, 'base64');
 };
@@ -137,14 +167,15 @@ let takeScreenshot = exports.takeScreenshot = async function(browserContext, ima
 /**
  * Compare a screenshot to its reference.
  */
-let compareScreenshot = exports.compareScreenshot = async function(browserContext, imageBaseName) {
+const compareScreenshot = exports.compareScreenshot = async function(browserContext, imageBaseName) {
 
-	let actualFilename = `${outputDir}/${browserContext.latestTestCase}/${imageBaseName}.png`;
-	let expectedFilename = `${referenceDir}/${browserContext.latestTestCase}/${imageBaseName}.png`;
-	let differenceFilename = `${outputDir}/${browserContext.latestTestCase}/${imageBaseName}.diff.png`;
+	imageBaseName = imageBaseName.replaceAll(' ', '_').toLowerCase();
+	const actualFilename = `${outputDir}/${browserContext.latestTestCase}/${imageBaseName}.png`;
+	const expectedFilename = `${referenceDir}/${browserContext.latestTestCase}/${imageBaseName}.png`;
+	const differenceFilename = `${outputDir}/${browserContext.latestTestCase}/${imageBaseName}.diff.png`;
 
 	// Compare the current screenshot to the reference.
-	let result = await imgDiff({
+	const result = await imgDiff({
 		actualFilename: actualFilename,
 		expectedFilename: expectedFilename,
 		diffFilename: differenceFilename,
@@ -157,7 +188,7 @@ let compareScreenshot = exports.compareScreenshot = async function(browserContex
  * Compare content of the sandbox to the expected text.
  */
 exports.compareSandbox = async function(browserContext, expectedText) {
-	let actualText = await browserContext.driver.findElement(By.id('sandbox')).getText();
+	const actualText = await browserContext.driver.findElement(By.id('sandbox')).getText();
 	test.value(actualText).is(expectedText);
 };
 
@@ -166,7 +197,9 @@ exports.compareSandbox = async function(browserContext, expectedText) {
  * Set the content of the sandbox to the given value.
  */
 exports.setSandbox = async function(browserContext, value) {
-	value = value.replace(/\W/g, '');
+	if (/[^\w \-=]/.test(value)) {
+		throw new Error('Invalid characters found in the sandox message.');
+	}
 	await browserContext.driver.executeScript(`document.getElementById("sandbox").innerText = "${value}"`);
 };
 
@@ -174,10 +207,10 @@ exports.setSandbox = async function(browserContext, value) {
 /**
  * Open the page corresponding to the given test-case, and execute the given scenario.
  */
-let itCustom = exports.itCustom = function(browserContext, testCaseName, itemIndex, itemName, scenario) {
-	it(testCaseName + ' - ' + itemName, async function() {
+const itCustom = exports.itCustom = function(browserContext, testCaseName, itemIndex, itemName, scenario) {
+	it(`${testCaseName} - ${itemName}`, async () => {
 		await fetchTestCase(browserContext, testCaseName);
-		let element = await browserContext.driver.findElement(By.id('test-item-' + itemIndex));
+		const element = await browserContext.driver.findElement(By.id('test-item-' + itemIndex));
 		await scenario(element);
 	});
 };
@@ -188,9 +221,10 @@ let itCustom = exports.itCustom = function(browserContext, testCaseName, itemInd
  */
 exports.itChecksScreenshots = function(browserContext, testCaseName, itemNames) {
 	for (let i = 0; i < itemNames.length; ++i) {
-		itCustom(browserContext, testCaseName, i, itemNames[i], async function(element) {
-			await takeScreenshot(browserContext, i, element);
-			await compareScreenshot(browserContext, i);
+		const itemName = itemNames[i];
+		itCustom(browserContext, testCaseName, i, itemName, async element => {
+			await takeScreenshot(browserContext, itemName, element);
+			await compareScreenshot(browserContext, itemName);
 		});
 	}
 };