kokopu-react 3.1.0 → 3.3.0

package/test/11_movetext_interaction.js

@@ -29,105 +29,105 @@ const test = require('unit.js');
 
 describeWithBrowser('Movetext interaction', browserContext => {
 
-	function itCheckClickMove(itemIndex, label, targets) {
-		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) {
-				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, label, element);
-					await compareScreenshot(browserContext, label);
-				}
-				await compareSandbox(browserContext, target.expectedText);
-			}
-		});
-	}
-
-	function tpl(nodeId, evtOrigin) {
-		return `move selected: ${nodeId}\norigin: ${evtOrigin}`;
-	}
-
-	itCheckClickMove(0, 'click on disabled', [
-		{ searchedText: 'Nf6', expectedText: '' },
-		{ searchedText: 'Qc2', expectedText: '' },
-	]);
-
-	itCheckClickMove(1, 'click on unselected', [
-		{ searchedText: 'cxd5', expectedText: tpl('5w', 'click') },
-	]);
-
-	itCheckClickMove(2, 'click on unselected without callback', [
-		{ searchedText: 'cxd5', expectedText: '' },
-	]);
-
-	itCheckClickMove(3, '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, 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);
-			await compareSandbox(browserContext, expectedOnGoFirst);
-
-			await setSandbox(browserContext, '');
-			await focusFieldElement.sendKeys(Key.ARROW_LEFT);
-			await compareSandbox(browserContext, expectedOnGoPrevious);
-
-			await setSandbox(browserContext, '');
-			await focusFieldElement.sendKeys(Key.ARROW_RIGHT);
-			await compareSandbox(browserContext, expectedOnGoNext);
-
-			await setSandbox(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, '');
-		});
-	}
-
-	const TPL_EXIT = tpl(undefined, 'key-exit');
-
-	itCheckKeyboardActions(0, 'key on disabled', '', '', '', '', '');
-	itCheckKeyboardActions(1, 'key on unselected', '', '', '', '', '');
-	itCheckKeyboardActions(3, '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(4, '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(5, 'key on start selected', '', '', tpl('1w', 'key-next'), tpl('6b', 'key-last'), TPL_EXIT);
-	itCheckKeyboardActions(6, 'key on first selected', tpl('start', 'key-first'), tpl('start', 'key-previous'), tpl('1b', 'key-next'), tpl('6b', 'key-last'), TPL_EXIT);
-	itCheckKeyboardActions(7, 'key on last selected', tpl('start', 'key-first'), tpl('6w', 'key-previous'), '', '', TPL_EXIT);
-	itCheckKeyboardActions(8, 'key on invalid selection', '', '', '', '', '');
-	itCheckKeyboardActions(9, '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',
-	]);
+    function itCheckClickMove(itemIndex, label, targets) {
+        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) {
+                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, label, element);
+                    await compareScreenshot(browserContext, label);
+                }
+                await compareSandbox(browserContext, target.expectedText);
+            }
+        });
+    }
+
+    function tpl(nodeId, evtOrigin) {
+        return `move selected: ${nodeId}\norigin: ${evtOrigin}`;
+    }
+
+    itCheckClickMove(0, 'click on disabled', [
+        { searchedText: 'Nf6', expectedText: '' },
+        { searchedText: 'Qc2', expectedText: '' },
+    ]);
+
+    itCheckClickMove(1, 'click on unselected', [
+        { searchedText: 'cxd5', expectedText: tpl('5w', 'click') },
+    ]);
+
+    itCheckClickMove(2, 'click on unselected without callback', [
+        { searchedText: 'cxd5', expectedText: '' },
+    ]);
+
+    itCheckClickMove(3, '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, 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);
+            await compareSandbox(browserContext, expectedOnGoFirst);
+
+            await setSandbox(browserContext, '');
+            await focusFieldElement.sendKeys(Key.ARROW_LEFT);
+            await compareSandbox(browserContext, expectedOnGoPrevious);
+
+            await setSandbox(browserContext, '');
+            await focusFieldElement.sendKeys(Key.ARROW_RIGHT);
+            await compareSandbox(browserContext, expectedOnGoNext);
+
+            await setSandbox(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, '');
+        });
+    }
+
+    const TPL_EXIT = tpl(undefined, 'key-exit');
+
+    itCheckKeyboardActions(0, 'key on disabled', '', '', '', '', '');
+    itCheckKeyboardActions(1, 'key on unselected', '', '', '', '', '');
+    itCheckKeyboardActions(3, '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(4, '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(5, 'key on start selected', '', '', tpl('1w', 'key-next'), tpl('6b', 'key-last'), TPL_EXIT);
+    itCheckKeyboardActions(6, 'key on first selected', tpl('start', 'key-first'), tpl('start', 'key-previous'), tpl('1b', 'key-next'), tpl('6b', 'key-last'), TPL_EXIT);
+    itCheckKeyboardActions(7, 'key on last selected', tpl('start', 'key-first'), tpl('6w', 'key-previous'), '', '', TPL_EXIT);
+    itCheckKeyboardActions(8, 'key on invalid selection', '', '', '', '', '');
+    itCheckKeyboardActions(9, '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/12_navigation_board_base.js

@@ -0,0 +1,151 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    Kokopu-React - A React-based library of chess-related components.       *
+ *    <https://www.npmjs.com/package/kokopu-react>                            *
+ *    Copyright (C) 2021-2024  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    Kokopu-React 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.                     *
+ *                                                                            *
+ *    Kokopu-React 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');
+const { By, Key } = require('selenium-webdriver');
+const test = require('unit.js');
+
+
+describeWithBrowser('Navigation board - Uncontrolled behavior', browserContext => {
+
+    itChecksScreenshots(browserContext, '12_navigation_board_base/uncontrolled', [
+        'initial state default',
+        'initial state at end',
+        'initial state at specific ID',
+        'initial state default with game index',
+        'initial state on null-move',
+    ]);
+
+    function itCheckClickButton(itemIndex, label, buttons) {
+        itCustom(browserContext, '12_navigation_board_base/uncontrolled', itemIndex, label, async element => {
+            await setSandbox(browserContext, '');
+            for (let i = 0; i < buttons.length; ++i) {
+                const buttonElement = await element.findElement(By.xpath(`.//div[@title='${buttons[i].title}']`));
+                await buttonElement.click();
+                await compareSandbox(browserContext, buttons[i].expectedSandbox ?? '');
+                await takeScreenshot(browserContext, `${label} ${i}`, element);
+            }
+            for (let i = 0; i < buttons.length; ++i) {
+                await compareScreenshot(browserContext, `${label} ${i}`);
+            }
+        });
+    }
+
+    itCheckClickButton(0, 'regular flipping', [
+        { title: 'Flip the board' },
+        { title: 'Flip the board' },
+    ]);
+
+    itCheckClickButton(2, 'regular navigation', [
+        { title: 'Go to the next move' },
+        { title: 'Go to the previous move' },
+        { title: 'Go to the previous move' },
+        { title: 'Go to the beginning of the game' },
+        { title: 'Go to the end of the game' },
+        { title: 'Flip the board' },
+    ]);
+
+    itCheckClickButton(3, 'forbidden navigation at beginning', [
+        { title: 'Go to the previous move' },
+        { title: 'Go to the beginning of the game' },
+        { title: 'Flip the board', expectedSandbox: 'Flip state changed: false' },
+    ]);
+
+    itCheckClickButton(1, 'forbidden navigation at end', [
+        { title: 'Go to the next move' },
+        { title: 'Go to the end of the game' },
+        { title: 'Flip the board' },
+    ]);
+
+    function itCheckPressKey(itemIndex, label, keys) {
+        itCustom(browserContext, '12_navigation_board_base/uncontrolled', itemIndex, label, async element => {
+            await setSandbox(browserContext, '');
+            const focusFieldElements = await element.findElements(By.className('kokopu-focusField'));
+
+            test.value(focusFieldElements.length).is(1);
+            const focusFieldElement = focusFieldElements[0];
+
+            for (let i = 0; i < keys.length; ++i) {
+                await focusFieldElement.sendKeys(keys[i].code);
+                await compareSandbox(browserContext, keys[i].expectedSandbox ?? '');
+                await takeScreenshot(browserContext, `${label} ${i}`, element);
+            }
+            for (let i = 0; i < keys.length; ++i) {
+                await compareScreenshot(browserContext, `${label} ${i}`);
+            }
+        });
+    }
+
+    itCheckPressKey(4, 'navigation with keys', [
+        { code: Key.ARROW_LEFT },
+        { code: Key.HOME },
+        { code: Key.ARROW_RIGHT },
+        { code: Key.ESCAPE },
+        { code: Key.END },
+    ]);
+
+});
+
+
+describeWithBrowser('Navigation board - Controlled behavior', browserContext => {
+
+    itChecksScreenshots(browserContext, '12_navigation_board_base/controlled', [
+        'default',
+        'overriding initial node ID',
+        'invalid node ID',
+    ]);
+
+    function itCheckClickButton(itemIndex, label, buttons) {
+        itCustom(browserContext, '12_navigation_board_base/controlled', itemIndex, label, async element => {
+            await setSandbox(browserContext, '');
+            for (let i = 0; i < buttons.length; ++i) {
+                const buttonElement = await element.findElement(By.xpath(`.//div[@title='${buttons[i].title}']`));
+                await buttonElement.click();
+                await compareSandbox(browserContext, buttons[i].expectedSandbox ?? '');
+                await takeScreenshot(browserContext, `${label} ${i}`, element);
+            }
+            for (let i = 0; i < buttons.length; ++i) {
+                await compareScreenshot(browserContext, `${label} ${i}`);
+            }
+        });
+    }
+
+    itCheckClickButton(0, 'regular navigation', [
+        { title: 'Go to the beginning of the game', expectedSandbox: 'Node ID changed: start' },
+        { title: 'Go to the previous move', expectedSandbox: 'Node ID changed: 16b' },
+        { title: 'Go to the next move', expectedSandbox: 'Node ID changed: 17b' },
+        { title: 'Go to the end of the game', expectedSandbox: 'Node ID changed: 28b' },
+    ]);
+
+    itCheckClickButton(1, 'no callback defined', [
+        { title: 'Go to the beginning of the game' },
+        { title: 'Flip the board' },
+    ]);
+
+    itCheckClickButton(2, 'forbidden navigation', [
+        { title: 'Go to the previous move' },
+        { title: 'Flip the board', expectedSandbox: 'Flip state changed: true' },
+    ]);
+
+});

package/test/13_navigation_board_graphic.js

@@ -0,0 +1,68 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    Kokopu-React - A React-based library of chess-related components.       *
+ *    <https://www.npmjs.com/package/kokopu-react>                            *
+ *    Copyright (C) 2021-2024  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    Kokopu-React 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.                     *
+ *                                                                            *
+ *    Kokopu-React 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, itChecksScreenshots } = require('./common/graphic');
+const { By } = require('selenium-webdriver');
+
+
+describeWithBrowser('Navigation board graphic', browserContext => {
+
+    itChecksScreenshots(browserContext, '13_navigation_board_graphic/error', [
+        'pgn parsing error',
+        'wrong game type',
+    ]);
+
+    itChecksScreenshots(browserContext, '13_navigation_board_graphic/theme', [
+        'small',
+        'large',
+        'custom 1',
+        'custom 2',
+    ]);
+
+    itChecksScreenshots(browserContext, '13_navigation_board_graphic/additional_buttons', [
+        'single button',
+        'multiple buttons',
+        'error 1',
+        'error 2',
+    ]);
+
+    function itCheckClickButton(itemIndex, label, buttons) {
+        itCustom(browserContext, '13_navigation_board_graphic/additional_buttons', itemIndex, label, async element => {
+            await setSandbox(browserContext, '');
+            for (let i = 0; i < buttons.length; ++i) {
+                const buttonElement = await element.findElement(By.xpath(`.//div[@title='${buttons[i].title}']`));
+                await buttonElement.click();
+                await compareSandbox(browserContext, buttons[i].expectedSandbox ?? '');
+            }
+        });
+    }
+
+    itCheckClickButton(1, 'click on additional buttons', [
+        { title: 'Button A', expectedSandbox: 'Button A clicked' },
+        { title: 'Button 0', expectedSandbox: 'Button A clicked' }, // No callback binded to button 0
+        { title: 'Button B', expectedSandbox: 'Button B clicked' },
+        { title: 'Button C', expectedSandbox: 'Button B clicked' }, // Callback is not supposed to be invoked since button C is disabled.
+    ]);
+
+});

package/test/14_navigation_board_autoplay.js

@@ -0,0 +1,100 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    Kokopu-React - A React-based library of chess-related components.       *
+ *    <https://www.npmjs.com/package/kokopu-react>                            *
+ *    Copyright (C) 2021-2024  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    Kokopu-React 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.                     *
+ *                                                                            *
+ *    Kokopu-React 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, waitForAutoplay } = require('./common/graphic');
+const { By } = require('selenium-webdriver');
+
+
+const PLAY_STOP_BUTTON_TITLE = 'Play/stop the game';
+
+
+describeWithBrowser('Navigation board auto-play - Uncontrolled behavior', browserContext => {
+
+    itChecksScreenshots(browserContext, '14_navigation_board_autoplay/uncontrolled', [
+        'initial state default',
+        'initial state close to end',
+    ]);
+
+    function itCheckClickWaitClick(itemIndex, label, nbMoves) {
+        itCustom(browserContext, '14_navigation_board_autoplay/uncontrolled', itemIndex, label, async element => {
+            const buttonElement = await element.findElement(By.xpath(`.//div[@title='${PLAY_STOP_BUTTON_TITLE}']`));
+            await buttonElement.click();
+            await waitForAutoplay(nbMoves);
+            await takeScreenshot(browserContext, `${label} before stop`, element);
+            await buttonElement.click();
+            await takeScreenshot(browserContext, `${label} after stop`, element);
+            await compareScreenshot(browserContext, `${label} before stop`);
+            await compareScreenshot(browserContext, `${label} after stop`);
+        });
+    }
+
+    itCheckClickWaitClick(0, 'after 2 moves from beginning', 2);
+    itCheckClickWaitClick(1, 'after reaching the end', 1);
+});
+
+
+describeWithBrowser('Navigation board auto-play - Controlled behavior', browserContext => {
+
+    itChecksScreenshots(browserContext, '14_navigation_board_autoplay/controlled', [
+        'initial state not acknowledging node changes',
+        'initial state acknowledging node changes',
+        'initial state close to end',
+        'initial state not acknowledging is-playing changes',
+        'initial state acknowledging is-playing changes',
+        'initial state at the end',
+    ]);
+
+    function itCheckClickWaitClick(itemIndex, label, nbMoves, expectedSandboxAfterClick1, expectedSandboxAfterClick2) {
+        itCustom(browserContext, '14_navigation_board_autoplay/controlled', itemIndex, label, async element => {
+            await setSandbox(browserContext, '');
+            const buttonElement = await element.findElement(By.xpath(`.//div[@title='${PLAY_STOP_BUTTON_TITLE}']`));
+            await buttonElement.click();
+            await compareSandbox(browserContext, expectedSandboxAfterClick1);
+            await waitForAutoplay(nbMoves);
+            await buttonElement.click();
+            await takeScreenshot(browserContext, label, element);
+            await compareSandbox(browserContext, expectedSandboxAfterClick2);
+            await compareScreenshot(browserContext, label);
+        });
+    }
+
+    itCheckClickWaitClick(0, 'after 2 moves not acknowledging node changes', 2, '', 'Node ID changed: 3b');
+    itCheckClickWaitClick(1, 'after 2 moves acknowledging node changes', 2, '', 'Node ID changed: 3b\nNode ID changed: 4w');
+    itCheckClickWaitClick(2, 'after reaching the end', 1, '', 'Node ID changed: 20b');
+    itCheckClickWaitClick(3, 'after 1 move not acknowledging is-playing changes', 1, 'is-playing flag changed: true', 'is-playing flag changed: true');
+    itCheckClickWaitClick(4, 'after 1 move acknowledging is-playing changes', 1, 'is-playing flag changed: true', 'is-playing flag changed: false');
+
+    function itCheckClick(itemIndex, label, expectedSandboxAfterClick) {
+        itCustom(browserContext, '14_navigation_board_autoplay/controlled', itemIndex, label, async element => {
+            await setSandbox(browserContext, '');
+            const buttonElement = await element.findElement(By.xpath(`.//div[@title='${PLAY_STOP_BUTTON_TITLE}']`));
+            await buttonElement.click();
+            await takeScreenshot(browserContext, label, element);
+            await compareSandbox(browserContext, expectedSandboxAfterClick);
+            await compareScreenshot(browserContext, label);
+        });
+    }
+
+    itCheckClick(5, 'already at the end', '');
+});