kokopu-react 1.0.2 → 1.3.1

package/test/6_chessboard_play_moves.js

@@ -0,0 +1,107 @@
+/******************************************************************************
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *                                                                            *
+ *    This program is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    This program is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ ******************************************************************************/
+
+
+const { openBrowser, closeBrowser, itCustom, setSandbox, compareSandbox, takeScreenshot, compareScreenshot } = require('./common/graphic');
+
+
+describe('Chessboard play moves', function() {
+
+	const browserContext = {};
+
+	before(async function() {
+		await openBrowser(this, browserContext);
+	});
+
+	after(async function() {
+		await closeBrowser(browserContext);
+	});
+
+	function itCheckPlayMove(itemIndex, label, xFrom, yFrom, xTo, yTo, imageBaseName, expectedText) {
+		itCustom(browserContext, '10_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();
+			await takeScreenshot(browserContext, imageBaseName, element);
+			await actions.release().perform();
+			await compareScreenshot(browserContext, imageBaseName);
+			await compareSandbox(browserContext, expectedText);
+		});
+	}
+
+	itCheckPlayMove(0, 'regular move 1', 225, 335, 220, 225, 'regular_move_1', 'move played: e4');
+	itCheckPlayMove(1, 'regular move 2', 275, 225, 135, 85, 'regular_move_2', 'move played: Bxf2+');
+	itCheckPlayMove(1, 'castling move', 175, 375, 75, 375, 'castling_move', 'move played: O-O');
+	itCheckPlayMove(3, 'chess960 castling move 1', 275, 375, 75, 375, 'chess960_castling_move_1', 'move played: O-O-O');
+	itCheckPlayMove(3, 'chess960 castling move 2', 275, 375, 375, 375, 'chess960_castling_move_2', 'move played: O-O');
+	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) {
+			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();
+			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, imageBaseName, element);
+			await actions.release().perform();
+			await compareScreenshot(browserContext, imageBaseName);
+			await compareSandbox(browserContext, imageBaseName);
+		});
+	}
+
+	itCheckNonPlayMove(2, 'illegal position', 225, 325, 225, 225, 'illegal_position');
+	itCheckNonPlayMove(0, 'wrong color moved', 75, 25, 125, 125, 'wrong_color');
+	itCheckNonPlayMove(0, 'illegal move', 75, 375, 125, 225, 'illegal_move');
+	itCheckNonPlayMove(0, 'from == to', 75, 375, 85, 365, 'null_vector');
+	itCheckNonPlayMove(0, 'out of board', 325, 375, 450, 285, 'out_of_board');
+	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) {
+			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();
+			await takeScreenshot(browserContext, imageBaseName, element);
+			await actions.move({ x: area.x + xPromo, y: area.y + yPromo }).click().perform();
+			await compareScreenshot(browserContext, imageBaseName);
+			await compareSandbox(browserContext, expectedText);
+		});
+	}
+
+	itCheckPlayPromotion(0, 'regular promotion 1', 75, 75, 75, 25, 60, 10, 'regular_promotion_1', 'promotion move played: b8=Q');
+	itCheckPlayPromotion(1, 'regular promotion 2', 75, 325, 25, 375, 15, 280, 'regular_promotion_2', 'promotion move played: bxa1=B');
+	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) {
+			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();
+			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, imageBaseName, element);
+			await actions.move({ x: area.x + xPromo, y: area.y + yPromo }).click().perform();
+			await compareScreenshot(browserContext, imageBaseName);
+			await compareSandbox(browserContext, imageBaseName);
+		});
+	}
+
+	itCheckNonPlayPromotion(1, 'cancel promotion', 75, 325, 75, 375, 190, 220, 'cancel_promotion');
+});

package/test/common/graphic.js

@@ -29,6 +29,7 @@ const test = require('unit.js');
 const rootDir = __dirname + '/../..';
 const referenceDir = rootDir + '/test/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' +
@@ -54,7 +55,6 @@ exports.openBrowser = async function(mochaContext, browserContext) {
 
 	// Initialize the browser context
 	browserContext.driver = driver;
-	browserContext.latestTestCase = '';
 };
 
 
@@ -63,6 +63,11 @@ exports.openBrowser = async function(mochaContext, browserContext) {
  */
 exports.closeBrowser = async function(browserContext) {
 	if (browserContext.driver) {
+
+		// Save the coverage data before closing the browser.
+		await saveCoverage(browserContext);
+
+		// Close the browser and clean its context.
 		await browserContext.driver.quit();
 		delete browserContext.driver;
 		delete browserContext.latestTestCase;
@@ -70,6 +75,28 @@ exports.closeBrowser = async function(browserContext) {
 };
 
 
+/**
+ * Save the coverage data, if any.
+ */
+async function saveCoverage(browserContext) {
+	if (!browserContext.latestTestCase) {
+		return;
+	}
+
+	// Allocate a filename to save the coverage data.
+	let pageIndex = 0;
+	let coverageFile = '';
+	do {
+		coverageFile = `${coverageDir}/${browserContext.latestTestCase}-${pageIndex}.json`;
+		++pageIndex;
+	} while (fs.existsSync(coverageFile));
+
+	// Retrieve and save the coverage data.
+	let coverageData = await browserContext.driver.executeScript('return JSON.stringify(window.__coverage__)');
+	fs.writeFileSync(coverageFile, coverageData);
+}
+
+
 /**
  * Open the page corresponding to the given test-case.
  */
@@ -77,24 +104,38 @@ async function fetchTestCase(browserContext, testCaseName) {
 	if (browserContext.latestTestCase === testCaseName) {
 		return;
 	}
+
+	// Save coverage data before changing the page.
+	await saveCoverage(browserContext);
+
+	// Fetch the new page.
 	await browserContext.driver.get(`file:///app/build/test_graphic/${testCaseName}/index.html`);
 	browserContext.latestTestCase = testCaseName;
 }
 
 
 /**
- * Take a screenshot of the element identified by the given CSS target, and compare it to the reference.
+ * Take a screenshot of the element identified by the given CSS target.
  */
-async function takeScreenshotAndCompare(browserContext, imageBaseName, cssTarget) {
+let takeScreenshot = exports.takeScreenshot = async function(browserContext, imageBaseName, element) {
 
-	let actualFilename = `${outputDir}/${imageBaseName}.png`;
-	let expectedFilename = `${referenceDir}/${imageBaseName}.png`;
-	let differenceFilename = `${outputDir}/${imageBaseName}.diff.png`;
+	let actualFilename = `${outputDir}/${browserContext.latestTestCase}/${imageBaseName}.png`;
 
 	// Take a screenshot of the targeted element.
-	let image = await browserContext.driver.findElement(By.css(cssTarget)).takeScreenshot();
+	let image = await element.takeScreenshot();
 	fs.mkdirSync(path.dirname(actualFilename), { recursive: true });
 	fs.writeFileSync(actualFilename, image, 'base64');
+};
+
+
+/**
+ * Compare a screenshot to its reference.
+ */
+let 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`;
 
 	// Compare the current screenshot to the reference.
 	let result = await imgDiff({
@@ -103,16 +144,35 @@ async function takeScreenshotAndCompare(browserContext, imageBaseName, cssTarget
 		diffFilename: differenceFilename,
 	});
 	test.object(result).hasProperty('imagesAreSame', true);
-}
+};
+
+
+/**
+ * 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();
+	test.value(actualText).is(expectedText);
+};
+
+
+/**
+ * Set the content of the sandbox to the given value.
+ */
+exports.setSandbox = async function(browserContext, value) {
+	value = value.replace(/\W/g, '');
+	await browserContext.driver.executeScript(`document.getElementById("sandbox").innerText = "${value}"`);
+};
 
 
 /**
- * Open the page corresponding to the given test-case, take a screenshot, and compare it to the reference.
+ * Open the page corresponding to the given test-case, and execute the given scenario.
  */
-exports.itChecksScreenshot = function(browserContext, testCaseName) {
-	it(testCaseName, async function() {
+let itCustom = exports.itCustom = function(browserContext, testCaseName, itemIndex, itemName, scenario) {
+	it(testCaseName + ' - ' + itemName, async function() {
 		await fetchTestCase(browserContext, testCaseName);
-		await takeScreenshotAndCompare(browserContext, testCaseName, '#test-app');
+		let element = await browserContext.driver.findElement(By.id('test-item-' + itemIndex));
+		await scenario(element);
 	});
 };
 
@@ -122,9 +182,9 @@ exports.itChecksScreenshot = function(browserContext, testCaseName) {
  */
 exports.itChecksScreenshots = function(browserContext, testCaseName, itemNames) {
 	for (let i = 0; i < itemNames.length; ++i) {
-		it(`${testCaseName} - Item ${i} (${itemNames[i]})`, async function() {
-			await fetchTestCase(browserContext, testCaseName);
-			await takeScreenshotAndCompare(browserContext, testCaseName + '/' + i, '#test-item-' + i);
+		itCustom(browserContext, testCaseName, i, itemNames[i], async function(element) {
+			await takeScreenshot(browserContext, i, element);
+			await compareScreenshot(browserContext, i);
 		});
 	}
 };