kokopu-react 3.1.0 → 3.2.0

package/test/common/graphic.js

@@ -34,38 +34,39 @@ 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' +
-	'\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';
+    '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';
 
 
 const ANIMATION_DELAY = 200;
+const AUTOPLAY_DELAY = 1000;
 
 
 /**
  * Create a Mocha test-suite that runs graphic tests in Dockerized Selenium webbrowser.
  */
 exports.describeWithBrowser = function(suiteLabel, testFactory) {
-	describe(suiteLabel, function() {
+    describe(suiteLabel, function() {
 
-		// Fetching a new page in the browser may take a while, thus increase the timeout threshold.
-		this.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 = {};
+        // Configure the browser context.
+        const browserContext = {};
 
-		before(async () => {
-			await openBrowser(browserContext);
-		});
+        before(async () => {
+            await openBrowser(browserContext);
+        });
 
-		after(async () => {
-			await closeBrowser(browserContext);
-		});
+        after(async () => {
+            await closeBrowser(browserContext);
+        });
 
-		// Register the tests.
-		testFactory(browserContext);
-	});
+        // Register the tests.
+        testFactory(browserContext);
+    });
 };
 
 
@@ -74,15 +75,15 @@ exports.describeWithBrowser = function(suiteLabel, testFactory) {
  */
 async function openBrowser(browserContext) {
 
-	// Start the browser and ensure it can fetch something.
-	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);
-	});
+    // Start the browser and ensure it can fetch something.
+    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;
+    // Initialize the browser context
+    browserContext.driver = driver;
 }
 
 
@@ -90,16 +91,16 @@ async function openBrowser(browserContext) {
  * Close the given browser.
  */
 async function closeBrowser(browserContext) {
-	if (browserContext.driver) {
+    if (browserContext.driver) {
 
-		// Save the coverage data before closing the browser.
-		await saveCoverage(browserContext);
+        // 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;
-	}
+        // Close the browser and clean its context.
+        await browserContext.driver.quit();
+        delete browserContext.driver;
+        delete browserContext.latestTestCase;
+    }
 }
 
 
@@ -107,21 +108,21 @@ async function closeBrowser(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.replaceAll('/', '__')}-${pageIndex}.json`;
-		++pageIndex;
-	} while (fs.existsSync(coverageFile));
-
-	// Retrieve and save the coverage data.
-	const coverageData = await browserContext.driver.executeScript('return JSON.stringify(window.__coverage__)');
-	fs.writeFileSync(coverageFile, coverageData);
+    if (!browserContext.latestTestCase) {
+        return;
+    }
+
+    // Allocate a filename to save the coverage data.
+    let pageIndex = 0;
+    let coverageFile = '';
+    do {
+        coverageFile = `${coverageDir}/${browserContext.latestTestCase.replaceAll('/', '__')}-${pageIndex}.json`;
+        ++pageIndex;
+    } while (fs.existsSync(coverageFile));
+
+    // Retrieve and save the coverage data.
+    const coverageData = await browserContext.driver.executeScript('return JSON.stringify(window.__coverage__)');
+    fs.writeFileSync(coverageFile, coverageData);
 }
 
 
@@ -129,17 +130,17 @@ async function saveCoverage(browserContext) {
  * Open the page corresponding to the given test-case.
  */
 async function fetchTestCase(browserContext, testCaseName) {
-	if (browserContext.latestTestCase === testCaseName) {
-		return;
-	}
+    if (browserContext.latestTestCase === testCaseName) {
+        return;
+    }
 
-	// Save coverage data before changing the page.
-	await saveCoverage(browserContext);
+    // 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;
-	await waitForAnimation();
+    // Fetch the new page.
+    await browserContext.driver.get(`file:///app/build/test_graphic/${testCaseName}/index.html`);
+    browserContext.latestTestCase = testCaseName;
+    await waitForAnimation();
 }
 
 
@@ -147,7 +148,15 @@ async function fetchTestCase(browserContext, testCaseName) {
  * Wait until the end of the chessboard animations.
  */
 const waitForAnimation = exports.waitForAnimation = async function() {
-	await new Promise(resolve => setTimeout(resolve, ANIMATION_DELAY));
+    await new Promise(resolve => setTimeout(resolve, ANIMATION_DELAY));
+};
+
+
+/**
+ * Wait until the given number of moves have been auto-played.
+ */
+exports.waitForAutoplay = async function(nbMoves) {
+    await new Promise(resolve => setTimeout(resolve, (nbMoves + 0.5) * AUTOPLAY_DELAY));
 };
 
 
@@ -156,13 +165,13 @@ const waitForAnimation = exports.waitForAnimation = async function() {
  */
 const takeScreenshot = exports.takeScreenshot = async function(browserContext, imageBaseName, element) {
 
-	imageBaseName = imageBaseName.replaceAll(' ', '_').toLowerCase();
-	const actualFilename = `${outputDir}/${browserContext.latestTestCase}/${imageBaseName}.png`;
+    imageBaseName = imageBaseName.replaceAll(' ', '_').toLowerCase();
+    const actualFilename = `${outputDir}/${browserContext.latestTestCase}/${imageBaseName}.png`;
 
-	// Take a screenshot of the targeted element.
-	const image = await element.takeScreenshot();
-	fs.mkdirSync(path.dirname(actualFilename), { recursive: true });
-	fs.writeFileSync(actualFilename, image, 'base64');
+    // Take a screenshot of the targeted element.
+    const image = await element.takeScreenshot();
+    fs.mkdirSync(path.dirname(actualFilename), { recursive: true });
+    fs.writeFileSync(actualFilename, image, 'base64');
 };
 
 
@@ -171,18 +180,18 @@ const takeScreenshot = exports.takeScreenshot = async function(browserContext, i
  */
 const compareScreenshot = exports.compareScreenshot = async function(browserContext, imageBaseName) {
 
-	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.
-	const result = await imgDiff({
-		actualFilename: actualFilename,
-		expectedFilename: expectedFilename,
-		diffFilename: differenceFilename,
-	});
-	test.object(result).hasProperty('imagesAreSame', true);
+    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.
+    const result = await imgDiff({
+        actualFilename: actualFilename,
+        expectedFilename: expectedFilename,
+        diffFilename: differenceFilename,
+    });
+    test.object(result).hasProperty('imagesAreSame', true);
 };
 
 
@@ -190,8 +199,8 @@ const compareScreenshot = exports.compareScreenshot = async function(browserCont
  * Compare content of the sandbox to the expected text.
  */
 exports.compareSandbox = async function(browserContext, expectedText) {
-	const actualText = await browserContext.driver.findElement(By.id('sandbox')).getText();
-	test.value(actualText).is(expectedText);
+    const actualText = await browserContext.driver.findElement(By.id('sandbox')).getText();
+    test.value(actualText).is(expectedText);
 };
 
 
@@ -199,10 +208,10 @@ exports.compareSandbox = async function(browserContext, expectedText) {
  * Set the content of the sandbox to the given value.
  */
 exports.setSandbox = async function(browserContext, value) {
-	if (/[^\w \-=]/.test(value)) {
-		throw new Error('Invalid characters found in the sandox message.');
-	}
-	await browserContext.driver.executeScript(`document.getElementById("sandbox").innerText = "${value}"`);
+    if (/[^\w \-=]/.test(value)) {
+        throw new Error('Invalid characters found in the sandox message.');
+    }
+    await browserContext.driver.executeScript(`document.getElementById("sandbox").innerText = "${value}"`);
 };
 
 
@@ -210,8 +219,8 @@ 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 });
+    const { height } = await await browserContext.driver.manage().window().getRect();
+    await browserContext.driver.manage().window().setRect({ width: width, height: height });
 };
 
 
@@ -219,11 +228,11 @@ exports.setWindowWidth = async function(browserContext, width) {
  * Open the page corresponding to the given test-case, and execute the given scenario.
  */
 const itCustom = exports.itCustom = function(browserContext, testCaseName, itemIndex, itemName, scenario) {
-	it(`${testCaseName} - ${itemName}`, async () => {
-		await fetchTestCase(browserContext, testCaseName);
-		const element = await browserContext.driver.findElement(By.id('test-item-' + itemIndex));
-		await scenario(element);
-	});
+    it(`${testCaseName} - ${itemName}`, async () => {
+        await fetchTestCase(browserContext, testCaseName);
+        const element = await browserContext.driver.findElement(By.id('test-item-' + itemIndex));
+        await scenario(element);
+    });
 };
 
 
@@ -231,11 +240,11 @@ const itCustom = exports.itCustom = function(browserContext, testCaseName, itemI
  * Open the page corresponding to the given test-case, take a screenshot for each item, and compare them to the reference.
  */
 exports.itChecksScreenshots = function(browserContext, testCaseName, itemNames) {
-	for (let i = 0; i < itemNames.length; ++i) {
-		const itemName = itemNames[i];
-		itCustom(browserContext, testCaseName, i, itemName, async element => {
-			await takeScreenshot(browserContext, itemName, element);
-			await compareScreenshot(browserContext, itemName);
-		});
-	}
+    for (let i = 0; i < itemNames.length; ++i) {
+        const itemName = itemNames[i];
+        itCustom(browserContext, testCaseName, i, itemName, async element => {
+            await takeScreenshot(browserContext, itemName, element);
+            await compareScreenshot(browserContext, itemName);
+        });
+    }
 };

package/test/graphic_test_app/03_error_box_graphic/base.tsx

@@ -28,21 +28,21 @@ import { ErrorBox } from '../../../dist/lib/index';
 
 testApp([ /* eslint-disable react/jsx-key */
 
-	<ErrorBox title="I'm the title" message="I'm the message" />,
-	<ErrorBox title="The title" message="Keep both the beginning and the end" text="| Error: x <- is here" errorIndex={9} lineNumber={1} />,
+    <ErrorBox title="I'm the title" message="I'm the message" />,
+    <ErrorBox title="The title" message="Keep both the beginning and the end" text="| Error: x <- is here" errorIndex={9} lineNumber={1} />,
 
-	<ErrorBox title="No error index" message="Nothing below" text="You will not see this..." />,
-	<ErrorBox title="No error text" message="Nothing below" errorIndex={1} />,
-	<ErrorBox title="Negative error index" message="Nothing below" text="You will not see this..." errorIndex={-1} />,
-	<ErrorBox title="Too large error index" message="Nothing below" text="You will not see this..." errorIndex={100} />,
-	<ErrorBox title="Error index not an integer" message="Nothing below" text="You will not see this..." errorIndex={2.3} />,
+    <ErrorBox title="No error index" message="Nothing below" text="You will not see this..." />,
+    <ErrorBox title="No error text" message="Nothing below" errorIndex={1} />,
+    <ErrorBox title="Negative error index" message="Nothing below" text="You will not see this..." errorIndex={-1} />,
+    <ErrorBox title="Too large error index" message="Nothing below" text="You will not see this..." errorIndex={100} />,
+    <ErrorBox title="Error index not an integer" message="Nothing below" text="You will not see this..." errorIndex={2.3} />,
 
-	<ErrorBox title="Cut the end of the text" message="and keep all the beginning" text="| x <- the error is there and the rest of the line is cut because too long"
-		errorIndex={2} />,
-	<ErrorBox title="Cut the beginning of the text" message="and keep all the end" text="The error is there -> x 234567890 234567890 234567890 234567890"
-		errorIndex={22} lineNumber={0} />,
-	<ErrorBox title="Cut on line breaks" message="both at the beginning and at the end" text={'This is the first line\n| x |\nThis is the third line'}
-		errorIndex={25} lineNumber={2} />,
-	<ErrorBox title="Single character text" message="The text is 1-character long" text="x" errorIndex={0} lineNumber={1.1} />,
+    <ErrorBox title="Cut the end of the text" message="and keep all the beginning" text="| x <- the error is there and the rest of the line is cut because too long"
+        errorIndex={2} />,
+    <ErrorBox title="Cut the beginning of the text" message="and keep all the end" text="The error is there -> x 234567890 234567890 234567890 234567890"
+        errorIndex={22} lineNumber={0} />,
+    <ErrorBox title="Cut on line breaks" message="both at the beginning and at the end" text={'This is the first line\n| x |\nThis is the third line'}
+        errorIndex={25} lineNumber={2} />,
+    <ErrorBox title="Single character text" message="The text is 1-character long" text="x" errorIndex={0} lineNumber={1.1} />,
 
 ]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/03_error_box_graphic/localization.tsx

@@ -30,5 +30,5 @@ import { ErrorBox, i18n } from '../../../dist/lib/index';
 i18n.LINE = 'ligne {0} (+ invalid placeholder {1})';
 
 testApp([ /* eslint-disable react/jsx-key */
-	<ErrorBox title="The title" message="The message" text="| x <- error is here" errorIndex={2} lineNumber={42} />,
+    <ErrorBox title="The title" message="The message" text="| x <- error is here" errorIndex={2} lineNumber={42} />,
 ]); /* eslint-enable react/jsx-key */

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

@@ -28,13 +28,13 @@ 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={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" />,
+    <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 */

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

@@ -28,22 +28,22 @@ import { SquareMarkerIcon, TextMarkerIcon, ArrowMarkerIcon } from '../../../dist
 
 testApp([ /* eslint-disable react/jsx-key */
 
-	<SquareMarkerIcon size={40} />,
-	<SquareMarkerIcon size={45} color="green" />,
-	<div style={{ color: 'purple' }}><SquareMarkerIcon size={31} /></div>,
-	<SquareMarkerIcon size={ /* eslint-disable @typescript-eslint/no-explicit-any */ 'not-a-number' as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
+    <SquareMarkerIcon size={40} />,
+    <SquareMarkerIcon size={45} color="green" />,
+    <div style={{ color: 'purple' }}><SquareMarkerIcon size={31} /></div>,
+    <SquareMarkerIcon size={ /* eslint-disable @typescript-eslint/no-explicit-any */ 'not-a-number' as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
 
-	<TextMarkerIcon size={41} symbol="A" />,
-	<TextMarkerIcon size={29} symbol="b" color="#0ff" />,
-	<div style={{ color: 'red' }}><TextMarkerIcon size={53} symbol="5" /></div>,
-	<TextMarkerIcon size={47} symbol="dot" color="#00f" />,
-	<div style={{ color: 'pink' }}><TextMarkerIcon size={48} symbol="circle" /></div>,
-	<TextMarkerIcon size={ /* eslint-disable @typescript-eslint/no-explicit-any */ 'not-a-number' as any /* eslint-enable @typescript-eslint/no-explicit-any */ } symbol="A" />,
-	<TextMarkerIcon size={40} symbol={ /* eslint-disable @typescript-eslint/no-explicit-any */ 'not-a-symbol' as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
+    <TextMarkerIcon size={41} symbol="A" />,
+    <TextMarkerIcon size={29} symbol="b" color="#0ff" />,
+    <div style={{ color: 'red' }}><TextMarkerIcon size={53} symbol="5" /></div>,
+    <TextMarkerIcon size={47} symbol="dot" color="#00f" />,
+    <div style={{ color: 'pink' }}><TextMarkerIcon size={48} symbol="circle" /></div>,
+    <TextMarkerIcon size={ /* eslint-disable @typescript-eslint/no-explicit-any */ 'not-a-number' as any /* eslint-enable @typescript-eslint/no-explicit-any */ } symbol="A" />,
+    <TextMarkerIcon size={40} symbol={ /* eslint-disable @typescript-eslint/no-explicit-any */ 'not-a-symbol' as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
 
-	<ArrowMarkerIcon size={40} />,
-	<ArrowMarkerIcon size={24} color="#888" />,
-	<div style={{ color: '#f70' }}><ArrowMarkerIcon size={48} /></div>,
-	<ArrowMarkerIcon size={ /* eslint-disable @typescript-eslint/no-explicit-any */ 'not-a-number' as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
+    <ArrowMarkerIcon size={40} />,
+    <ArrowMarkerIcon size={24} color="#888" />,
+    <div style={{ color: '#f70' }}><ArrowMarkerIcon size={48} /></div>,
+    <ArrowMarkerIcon size={ /* eslint-disable @typescript-eslint/no-explicit-any */ 'not-a-number' as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
 
 ]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/05_chessboard_graphic/annotations.tsx

@@ -48,11 +48,11 @@ const arrowMarkers3 = { d1h5: G, a5f4: R, c7c3: Y, g7g7: G };
 const textMarkers3 = 'G5c6,R(plus)a1,G(times)b1,B(dot)a2,Y(circle)b2';
 
 testApp([ /* eslint-disable react/jsx-key */
-	<Chessboard squareMarkers={squareMarkers1} arrowMarkers={arrowMarkers1} textMarkers={textMarkers1} flipped={false} coordinateVisible={true} />,
-	<Chessboard squareMarkers={squareMarkers1} arrowMarkers={arrowMarkers1} textMarkers={textMarkers1} flipped={true} coordinateVisible={true} />,
-	<Chessboard squareMarkers={squareMarkers2} arrowMarkers={arrowMarkers2} textMarkers={textMarkers2} flipped={false} coordinateVisible={false} />,
-	<Chessboard squareMarkers={squareMarkers2} arrowMarkers={arrowMarkers2} textMarkers={textMarkers2} flipped={true} coordinateVisible={false} />,
-	<Chessboard squareMarkers={squareMarkers3} arrowMarkers={arrowMarkers3} textMarkers={textMarkers3} flipped={false} coordinateVisible={false} position="empty" />,
-	<Chessboard squareMarkers={squareMarkers3} arrowMarkers={arrowMarkers3} textMarkers={textMarkers3} flipped={true} coordinateVisible={true}
-		position="8/8/1r6/8/5k1K/8/8/8 b - - 0 1" />,
+    <Chessboard squareMarkers={squareMarkers1} arrowMarkers={arrowMarkers1} textMarkers={textMarkers1} flipped={false} coordinateVisible={true} />,
+    <Chessboard squareMarkers={squareMarkers1} arrowMarkers={arrowMarkers1} textMarkers={textMarkers1} flipped={true} coordinateVisible={true} />,
+    <Chessboard squareMarkers={squareMarkers2} arrowMarkers={arrowMarkers2} textMarkers={textMarkers2} flipped={false} coordinateVisible={false} />,
+    <Chessboard squareMarkers={squareMarkers2} arrowMarkers={arrowMarkers2} textMarkers={textMarkers2} flipped={true} coordinateVisible={false} />,
+    <Chessboard squareMarkers={squareMarkers3} arrowMarkers={arrowMarkers3} textMarkers={textMarkers3} flipped={false} coordinateVisible={false} position="empty" />,
+    <Chessboard squareMarkers={squareMarkers3} arrowMarkers={arrowMarkers3} textMarkers={textMarkers3} flipped={true} coordinateVisible={true}
+        position="8/8/1r6/8/5k1K/8/8/8 b - - 0 1" />,
 ]); /* eslint-enable react/jsx-key */