kokopu-react 3.2.0 → 3.3.1

package/src/util.ts

@@ -26,8 +26,8 @@ export function generateRandomId() {
     const buffer = new Uint32Array(8);
     crypto.getRandomValues(buffer);
     let result = '';
-    for (let i = 0; i < buffer.length; ++i) {
-        result += buffer[i].toString(16);
+    for (const c of buffer) {
+        result += c.toString(16);
     }
     return result;
 }

package/test/01_types.js

@@ -35,7 +35,7 @@ describe('Is piece symbol mapping', () => {
         });
     }
 
-    itIsPieceSymbolMapping('French localization', { K: 'R', Q: 'D', R: 'T', B: 'F', N: 'C', P: 'P' } , true);
+    itIsPieceSymbolMapping('French localization', { K: 'R', Q: 'D', R: 'T', B: 'F', N: 'C', P: 'P' }, true);
     itIsPieceSymbolMapping('Additional fields', { K: 'Ki_', Q: 'Qu_', R: 'Rk_', B: 'Bi_', N: 'Kn_', P: 'Pw_', Z: 'whatever', val: 42 }, true);
     itIsPieceSymbolMapping('Missing fields', { K: 'Ki_', Q: 'Qu_', R: 'Rk_', B: 'Bi_', N: 'Kn_' }, false);
     itIsPieceSymbolMapping('Non-string valued fields', { K: 42, Q: 'Qu_', R: 'Rk_', B: 'Bi_', N: 'Kn_', P: 'Pw_' }, false);
@@ -125,46 +125,60 @@ describe('Parse square markers', () => {
 describe('Flatten text markers', () => {
 
     it('RAe4', () => { test.value(flattenTextMarkers({ e4: { symbol: 'A', color: 'r' } })).is('RAe4'); });
-    it('Gzd3,Y1h8', () => { test.value(flattenTextMarkers({
-        h8: { symbol: '1', color: 'y' },
-        d3: { symbol: 'z', color: 'g' },
-    })).is('Gzd3,Y1h8'); });
-    it('G2a1,YMc5,RLd2,Rxh7,Bwh8', () => { test.value(flattenTextMarkers({
-        c5: { symbol: 'M', color: 'y' },
-        h8: { symbol: 'w', color: 'b' },
-        a1: { symbol: '2', color: 'g' },
-        h7: { symbol: 'x', color: 'r' },
-        d2: { symbol: 'L', color: 'r' },
-    })).is('G2a1,YMc5,RLd2,Rxh7,Bwh8'); });
-    it('Multi-character symbols', () => { test.value(flattenTextMarkers({
-        a1: { symbol: 'A', color: 'y' },
-        a7: { symbol: 'plus', color: 'g' },
-        b3: { symbol: 'times', color: 'r' },
-        g5: { symbol: 'dot', color: 'y' },
-        h3: { symbol: 'circle', color: 'g' },
-    })).is('YAa1,G(plus)a7,R(times)b3,Y(dot)g5,G(circle)h3'); });
+    it('Gzd3,Y1h8', () => {
+        test.value(flattenTextMarkers({
+            h8: { symbol: '1', color: 'y' },
+            d3: { symbol: 'z', color: 'g' },
+        })).is('Gzd3,Y1h8');
+    });
+    it('G2a1,YMc5,RLd2,Rxh7,Bwh8', () => {
+        test.value(flattenTextMarkers({
+            c5: { symbol: 'M', color: 'y' },
+            h8: { symbol: 'w', color: 'b' },
+            a1: { symbol: '2', color: 'g' },
+            h7: { symbol: 'x', color: 'r' },
+            d2: { symbol: 'L', color: 'r' },
+        })).is('G2a1,YMc5,RLd2,Rxh7,Bwh8');
+    });
+    it('Multi-character symbols', () => {
+        test.value(flattenTextMarkers({
+            a1: { symbol: 'A', color: 'y' },
+            a7: { symbol: 'plus', color: 'g' },
+            b3: { symbol: 'times', color: 'r' },
+            g5: { symbol: 'dot', color: 'y' },
+            h3: { symbol: 'circle', color: 'g' },
+        })).is('YAa1,G(plus)a7,R(times)b3,Y(dot)g5,G(circle)h3');
+    });
     it('<empty>', () => { test.value(flattenTextMarkers({})).is(''); });
 
-    it('Wrong square', () => { test.value(flattenTextMarkers({
-        e1: { symbol: 'H', color: 'r' },
-        j5: { symbol: 'A', color: 'g' },
-    })).is('RHe1'); });
-    it('Wrong color', () => { test.value(flattenTextMarkers({
-        a2: { symbol: '0', color: 'g' },
-        b5: { symbol: 'A', color: 'R' },
-        h8: { symbol: 'A' },
-    })).is('G0a2'); });
-    it('Wrong symbol', () => { test.value(flattenTextMarkers({
-        a2: { symbol: '0', color: 'g' },
-        b5: { symbol: '', color: 'r' },
-        h8: { color: 'g' },
-        d8: { symbol: '-', color: 'r' },
-        c1: { symbol: 'abcd', color: 'r' },
-    })).is('G0a2'); });
-    it('Wrong multi-character symbol', () => { test.value(flattenTextMarkers({
-        a2: { symbol: '0', color: 'g' },
-        b5: { symbol: 'whatever', color: 'r' },
-    })).is('G0a2'); });
+    it('Wrong square', () => {
+        test.value(flattenTextMarkers({
+            e1: { symbol: 'H', color: 'r' },
+            j5: { symbol: 'A', color: 'g' },
+        })).is('RHe1');
+    });
+    it('Wrong color', () => {
+        test.value(flattenTextMarkers({
+            a2: { symbol: '0', color: 'g' },
+            b5: { symbol: 'A', color: 'R' },
+            h8: { symbol: 'A' },
+        })).is('G0a2');
+    });
+    it('Wrong symbol', () => {
+        test.value(flattenTextMarkers({
+            a2: { symbol: '0', color: 'g' },
+            b5: { symbol: '', color: 'r' },
+            h8: { color: 'g' },
+            d8: { symbol: '-', color: 'r' },
+            c1: { symbol: 'abcd', color: 'r' },
+        })).is('G0a2');
+    });
+    it('Wrong multi-character symbol', () => {
+        test.value(flattenTextMarkers({
+            a2: { symbol: '0', color: 'g' },
+            b5: { symbol: 'whatever', color: 'r' },
+        })).is('G0a2');
+    });
 
     it('Wrong type (not an object)', () => { test.exception(() => flattenTextMarkers('whatever')).isInstanceOf(exception.IllegalArgument); });
     it('Wrong type (null)', () => { test.exception(() => flattenTextMarkers(null)).isInstanceOf(exception.IllegalArgument); });
@@ -175,24 +189,30 @@ describe('Flatten text markers', () => {
 describe('Parse text markers', () => {
 
     it('RAe4', () => { test.value(parseTextMarkers('RAe4')).is({ e4: { symbol: 'A', color: 'r' } }); });
-    it('Gzd3,Y1h8', () => { test.value(parseTextMarkers('Gzd3,Y1h8')).is({
-        h8: { symbol: '1', color: 'y' },
-        d3: { symbol: 'z', color: 'g' },
-    }); });
-    it('G2a1,YMc5,RLd2,Rxh7,Bwh8', () => { test.value(parseTextMarkers(' G2a1, Rxh7  ,YMc5 ,RLd2,Bwh8 ')).is({
-        c5: { symbol: 'M', color: 'y' },
-        h8: { symbol: 'w', color: 'b' },
-        a1: { symbol: '2', color: 'g' },
-        h7: { symbol: 'x', color: 'r' },
-        d2: { symbol: 'L', color: 'r' },
-    }); });
-    it('Multi-character symbols', () => { test.value(parseTextMarkers('YAa1,G(plus)a7, R(times)b3  ,Y(dot)g5,G(circle)h3')).is({
-        a1: { symbol: 'A', color: 'y' },
-        a7: { symbol: 'plus', color: 'g' },
-        b3: { symbol: 'times', color: 'r' },
-        g5: { symbol: 'dot', color: 'y' },
-        h3: { symbol: 'circle', color: 'g' },
-    }); });
+    it('Gzd3,Y1h8', () => {
+        test.value(parseTextMarkers('Gzd3,Y1h8')).is({
+            h8: { symbol: '1', color: 'y' },
+            d3: { symbol: 'z', color: 'g' },
+        });
+    });
+    it('G2a1,YMc5,RLd2,Rxh7,Bwh8', () => {
+        test.value(parseTextMarkers(' G2a1, Rxh7  ,YMc5 ,RLd2,Bwh8 ')).is({
+            c5: { symbol: 'M', color: 'y' },
+            h8: { symbol: 'w', color: 'b' },
+            a1: { symbol: '2', color: 'g' },
+            h7: { symbol: 'x', color: 'r' },
+            d2: { symbol: 'L', color: 'r' },
+        });
+    });
+    it('Multi-character symbols', () => {
+        test.value(parseTextMarkers('YAa1,G(plus)a7, R(times)b3  ,Y(dot)g5,G(circle)h3')).is({
+            a1: { symbol: 'A', color: 'y' },
+            a7: { symbol: 'plus', color: 'g' },
+            b3: { symbol: 'times', color: 'r' },
+            g5: { symbol: 'dot', color: 'y' },
+            h3: { symbol: 'circle', color: 'g' },
+        });
+    });
     it('<empty>', () => { test.value(parseTextMarkers('')).is({}); });
     it('<blank>', () => { test.value(parseTextMarkers(' ')).is({}); });
 
@@ -213,8 +233,9 @@ describe('Flatten arrow markers', () => {
 
     it('Re4d6', () => { test.value(flattenArrowMarkers({ e4d6: 'r' })).is('Re4d6'); });
     it('Gd3b4,Yh8h7', () => { test.value(flattenArrowMarkers({ h8h7: 'y', d3b4: 'g' })).is('Gd3b4,Yh8h7'); });
-    it('Ga1h8,Yc5a1,Rd2d2,Rh7h8,Bh8c5', () => { test.value(flattenArrowMarkers({ c5a1: 'y', h8c5: 'b', a1h8: 'g', h7h8: 'r', d2d2: 'r' }))
-        .is('Ga1h8,Yc5a1,Rd2d2,Rh7h8,Bh8c5'); });
+    it('Ga1h8,Yc5a1,Rd2d2,Rh7h8,Bh8c5', () => {
+        test.value(flattenArrowMarkers({ c5a1: 'y', h8c5: 'b', a1h8: 'g', h7h8: 'r', d2d2: 'r' })).is('Ga1h8,Yc5a1,Rd2d2,Rh7h8,Bh8c5');
+    });
     it('<empty>', () => { test.value(flattenArrowMarkers({})).is(''); });
 
     it('Wrong vector', () => { test.value(flattenArrowMarkers({ e1c2: 'r', a1b9: 'g', c0d2: 'r', i3d4: 'r', f2k3: 'g', whatever: 'y' })).is('Re1c2'); });
@@ -230,8 +251,9 @@ describe('Parse arrow markers', () => {
 
     it('Re4d6', () => { test.value(parseArrowMarkers('Re4d6')).is({ e4d6: 'r' }); });
     it('Gd3b4,Yh8h7', () => { test.value(parseArrowMarkers('Gd3b4,Yh8h7')).is({ h8h7: 'y', d3b4: 'g' }); });
-    it('Ga1h8,Yc5a1,Rd2d2,Rh7h8,Bh8c5', () => { test.value(parseArrowMarkers(' Bh8c5,Ga1h8  , Yc5a1 ,  Rd2d2,Rh7h8  '))
-        .is({ c5a1: 'y', h8c5: 'b', a1h8: 'g', h7h8: 'r', d2d2: 'r' }); });
+    it('Ga1h8,Yc5a1,Rd2d2,Rh7h8,Bh8c5', () => {
+        test.value(parseArrowMarkers(' Bh8c5,Ga1h8  , Yc5a1 ,  Rd2d2,Rh7h8  ')).is({ c5a1: 'y', h8c5: 'b', a1h8: 'g', h7h8: 'r', d2d2: 'r' });
+    });
     it('<empty>', () => { test.value(parseArrowMarkers('')).is({}); });
     it('<blank>', () => { test.value(parseArrowMarkers(' ')).is({}); });
 

package/test/02_chessboard_util.js

@@ -22,7 +22,7 @@
  * -------------------------------------------------------------------------- */
 
 
-const { exception, Chessboard } = require('../build/test_headless/index');
+const { exception, Chessboard, NavigationBoard } = require('../build/test_headless/index');
 const test = require('unit.js');
 
 
@@ -45,6 +45,22 @@ describe('Chessboard.size()', () => {
     itChessboardSize('Default without turn', 330, 333, { turnVisible: false });
     itChessboardSize('Default board only', 320, 320, { coordinateVisible: false, turnVisible: false });
 
+    function topComponent({ squareSize, coordinateVisible, turnVisible }) {
+        const width = squareSize * 20;
+        const height = (coordinateVisible ? 11 : 0) + (turnVisible ? 107 : 0);
+        return { width: width, height: height };
+    }
+
+    function bottomComponent({ squareSize, coordinateVisible, turnVisible }) {
+        const width = squareSize * 19;
+        const height = (coordinateVisible ? 3 : 0) + (turnVisible ? 157 : 0);
+        return { width: width, height: height };
+    }
+
+    itChessboardSize('With top component', 800, 451, { topComponent: topComponent });
+    itChessboardSize('With bottom component', 760, 493, { bottomComponent: bottomComponent });
+    itChessboardSize('With top & bottom components', 800, 611, { topComponent: topComponent, bottomComponent: bottomComponent });
+
     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' }));
@@ -54,6 +70,38 @@ describe('Chessboard.size()', () => {
 });
 
 
+describe('NavigationBoard.size()', () => {
+
+    function itNavigationBoardSize(label, expectedWidth, expectedHeight, attr) {
+        it(label, () => {
+            test.value(NavigationBoard.size(attr)).is({ width: expectedWidth, height: expectedHeight });
+        });
+    }
+
+    itNavigationBoardSize('Default', 374, 368);
+    itNavigationBoardSize('Minimal square size with all default buttons', 130, 121, {
+        squareSize: 12,
+        coordinateVisible: false,
+        turnVisible: false,
+        playButtonVisible: true,
+        flipButtonVisible: true,
+    });
+    itNavigationBoardSize('With additional buttons', 198, 188, {
+        squareSize: 20,
+        coordinateVisible: false,
+        turnVisible: false,
+        playButtonVisible: true,
+        flipButtonVisible: false,
+        additionalButtons: [ 'button', 'button', 'spacer', 'spacer', 'button' ],
+    });
+
+    itInvalidArgument('Attribute not an object', () => NavigationBoard.size('not-an-object'));
+    itInvalidArgument('Square size not an integer', () => NavigationBoard.size({ squareSize: 'not-an-integer' }));
+    itInvalidArgument('Additional buttons not an array', () => NavigationBoard.size({ additionalButtons: 'not-an-array' }));
+    itInvalidArgument('Additional buttons with invalid items', () => NavigationBoard.size({ additionalButtons: [ 'not-a-button-nor-a-spacer' ] }));
+});
+
+
 function testAdaptSquareSize(expectedSquareSize, width, height, coordinateVisible, turnVisible, smallScreenLimits) {
 
     test.value(Chessboard.adaptSquareSize(width, height, {
@@ -119,6 +167,34 @@ describe('Adapt square-size', () => {
 });
 
 
+describe('Adapt square-size (NavigationBoard)', () => {
+
+    function itAdaptSquareSize(label, width, height, attributes, expectedSquareSize) {
+        it(label, () => {
+            test.value(NavigationBoard.adaptSquareSize(width, height, attributes)).is(expectedSquareSize);
+
+            const actualSizeIncremented = NavigationBoard.size({
+                ...attributes,
+                squareSize: expectedSquareSize + 1,
+            });
+            test.value(actualSizeIncremented.width > width || actualSizeIncremented.height > height).isTrue();
+        });
+    }
+
+    itAdaptSquareSize('Size 300x300 (default)', 300, 300, {}, 32);
+    itAdaptSquareSize('Size 136x200 (with play button)', 136, 200, { coordinateVisible: false, turnVisible: false, playButtonVisible: true }, 15);
+    itAdaptSquareSize('Size 136x200 (with minimal buttons)', 136, 200, { coordinateVisible: false, turnVisible: false, flipButtonVisible: false }, 17);
+
+    itInvalidArgument('Width <null>', () => NavigationBoard.adaptSquareSize(null, 400));
+    itInvalidArgument('Width not-a-number', () => NavigationBoard.adaptSquareSize('500', 400));
+    itInvalidArgument('Height <undefined>', () => NavigationBoard.adaptSquareSize(500, undefined));
+    itInvalidArgument('Height object', () => NavigationBoard.adaptSquareSize(500, {}));
+    itInvalidArgument('Attribute not-an-object', () => NavigationBoard.adaptSquareSize(500, 400, 'not-an-object'));
+    itInvalidArgument('Additional buttons not an array', () => NavigationBoard.adaptSquareSize(500, 400, { additionalButtons: 'not-an-array' }));
+    itInvalidArgument('Small-screen limits not-an-array', () => NavigationBoard.adaptSquareSize(500, 400, { smallScreenLimits: 'not-an-array' }));
+});
+
+
 describe('Adapt square-size with small-screen limits', () => {
 
     const limits = [
@@ -135,6 +211,8 @@ describe('Adapt square-size with small-screen limits', () => {
         delete global.window;
     });
 
+    /* global window */
+
     it('Window-limited', () => {
         window.innerWidth = 640;
         testAdaptSquareSize(32, 9999, 9999, true, true, limits);

package/test/03_error_box_graphic.js

@@ -42,7 +42,7 @@ describeWithBrowser('Error box graphic', browserContext => {
     ]);
 
     itChecksScreenshots(browserContext, '03_error_box_graphic/localization', [
-        'default'
+        'default',
     ]);
 
 });

package/test/07_chessboard_interaction.js

@@ -31,8 +31,7 @@ describeWithBrowser('Chessboard interaction', browserContext => {
         itCustom(browserContext, '07_chessboard_interaction/click_squares', itemIndex, label, async element => {
             const actions = browserContext.driver.actions({ async: true });
             const area = await element.getRect();
-            for (let i = 0; i < targets.length; ++i) {
-                const target = targets[i];
+            for (const target of targets) {
                 await actions.move({ x: area.x + target.x, y: area.y + target.y }).click().perform();
                 await compareSandbox(browserContext, target.expectedText);
             }

package/test/13_navigation_board_graphic.js

@@ -50,10 +50,10 @@ describeWithBrowser('Navigation board graphic', browserContext => {
     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}']`));
+            for (const button of buttons) {
+                const buttonElement = await element.findElement(By.xpath(`.//div[@title='${button.title}']`));
                 await buttonElement.click();
-                await compareSandbox(browserContext, buttons[i].expectedSandbox ?? '');
+                await compareSandbox(browserContext, button.expectedSandbox ?? '');
             }
         });
     }

package/test/common/graphic.js

@@ -47,8 +47,8 @@ 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() {
+exports.describeWithBrowser = function (suiteLabel, testFactory) {
+    describe(suiteLabel, function () {
 
         // Fetching a new page in the browser may take a while, thus increase the timeout threshold.
         this.timeout(10000);
@@ -147,7 +147,7 @@ async function fetchTestCase(browserContext, testCaseName) {
 /**
  * Wait until the end of the chessboard animations.
  */
-const waitForAnimation = exports.waitForAnimation = async function() {
+const waitForAnimation = exports.waitForAnimation = async function () {
     await new Promise(resolve => setTimeout(resolve, ANIMATION_DELAY));
 };
 
@@ -155,7 +155,7 @@ const waitForAnimation = exports.waitForAnimation = async function() {
 /**
  * Wait until the given number of moves have been auto-played.
  */
-exports.waitForAutoplay = async function(nbMoves) {
+exports.waitForAutoplay = async function (nbMoves) {
     await new Promise(resolve => setTimeout(resolve, (nbMoves + 0.5) * AUTOPLAY_DELAY));
 };
 
@@ -163,7 +163,7 @@ exports.waitForAutoplay = async function(nbMoves) {
 /**
  * Take a screenshot of the element identified by the given CSS target.
  */
-const takeScreenshot = exports.takeScreenshot = async function(browserContext, imageBaseName, element) {
+const takeScreenshot = exports.takeScreenshot = async function (browserContext, imageBaseName, element) {
 
     imageBaseName = imageBaseName.replaceAll(' ', '_').toLowerCase();
     const actualFilename = `${outputDir}/${browserContext.latestTestCase}/${imageBaseName}.png`;
@@ -178,7 +178,7 @@ const takeScreenshot = exports.takeScreenshot = async function(browserContext, i
 /**
  * Compare a screenshot to its reference.
  */
-const compareScreenshot = exports.compareScreenshot = async function(browserContext, imageBaseName) {
+const compareScreenshot = exports.compareScreenshot = async function (browserContext, imageBaseName) {
 
     imageBaseName = imageBaseName.replaceAll(' ', '_').toLowerCase();
     const actualFilename = `${outputDir}/${browserContext.latestTestCase}/${imageBaseName}.png`;
@@ -198,7 +198,7 @@ const compareScreenshot = exports.compareScreenshot = async function(browserCont
 /**
  * Compare content of the sandbox to the expected text.
  */
-exports.compareSandbox = async function(browserContext, expectedText) {
+exports.compareSandbox = async function (browserContext, expectedText) {
     const actualText = await browserContext.driver.findElement(By.id('sandbox')).getText();
     test.value(actualText).is(expectedText);
 };
@@ -207,7 +207,7 @@ exports.compareSandbox = async function(browserContext, expectedText) {
 /**
  * Set the content of the sandbox to the given value.
  */
-exports.setSandbox = async function(browserContext, value) {
+exports.setSandbox = async function (browserContext, value) {
     if (/[^\w \-=]/.test(value)) {
         throw new Error('Invalid characters found in the sandox message.');
     }
@@ -218,7 +218,7 @@ exports.setSandbox = async function(browserContext, value) {
 /**
  * Set the width of the browser.
  */
-exports.setWindowWidth = async function(browserContext, width) {
+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 });
 };
@@ -227,7 +227,7 @@ 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) {
+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));
@@ -239,7 +239,7 @@ 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) {
+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 => {