kokopu-react 3.0.2 → 3.2.0

package/test/07_chessboard_interaction.js

@@ -27,106 +27,106 @@ const { describeWithBrowser, itCustom, setSandbox, compareSandbox, takeScreensho
 
 describeWithBrowser('Chessboard interaction', browserContext => {
 
-	function itCheckClickSquare(itemIndex, label, targets) {
-		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];
-				await actions.move({ x: area.x + target.x, y: area.y + target.y }).click().perform();
-				await compareSandbox(browserContext, target.expectedText);
-			}
-		});
-	}
-
-	itCheckClickSquare(0, 'default', [
-		{ x: 225, y: 75, expectedText: 'square clicked: e7' },
-		{ x: 25, y: 375, expectedText: 'square clicked: a1' },
-		{ x: 325, y: 175, expectedText: 'square clicked: g5' },
-	]);
-	itCheckClickSquare(1, 'with flip', [
-		{ x: 325, y: 175, expectedText: 'square clicked: b4' },
-	]);
-	itCheckClickSquare(2, 'over annotations', [
-		{ x: 25, y: 25, expectedText: 'square clicked: a8' },
-		{ x: 75, y: 125, expectedText: 'square clicked: b6' },
-		{ x: 175, y: 125, expectedText: 'square clicked: d6' },
-		{ x: 75, y: 225, expectedText: 'square clicked: b4' },
-	]);
-
-	function itCheckMovePiece(itemIndex, label, xFrom, yFrom, xTo, yTo, expectedText) {
-		itCustom(browserContext, '07_chessboard_interaction/move_pieces', 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);
-		});
-	}
-
-	itCheckMovePiece(0, 'over empty', 275, 385, 225, 175, 'piece moved: f1 -> e5');
-	itCheckMovePiece(0, 'over non-empty 1', 280, 365, 75, 75, 'piece moved: f1 -> b7');
-	itCheckMovePiece(0, 'over non-empty 2', 130, 75, 225, 375, 'piece moved: c7 -> e1');
-	itCheckMovePiece(1, 'over square marker', 10, 325, 275, 175, 'piece moved: h7 -> c4');
-	itCheckMovePiece(1, 'over text marker', 225, 25, 10, 135, 'piece moved: d1 -> h3');
-	itCheckMovePiece(1, 'over arrow marker', 325, 25, 315, 260, 'piece moved: b1 -> b6');
-	itCheckMovePiece(2, 'after move', 225, 225, 75, 260, 'piece moved: e4 -> b3');
-
-	function itCheckNonMovePiece(itemIndex, label, xFrom, yFrom, xTo, yTo) {
-		itCustom(browserContext, '07_chessboard_interaction/move_pieces', 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);
-		});
-	}
-
-	itCheckNonMovePiece(0, 'move empty square', 175, 225, 275, 75);
-	itCheckNonMovePiece(0, 'from == to', 75, 375, 80, 360);
-	itCheckNonMovePiece(0, 'out of board', 175, 25, 500, 210);
-
-	function itCheckEditArrow(itemIndex, label, xFrom, yFrom, xTo, yTo, expectedText) {
-		itCustom(browserContext, '07_chessboard_interaction/edit_arrows', 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);
-		});
-	}
-
-	itCheckEditArrow(0, 'base 1', 325, 275, 110, 140, 'arrow edited: g3 -> c6');
-	itCheckEditArrow(0, 'base 2', 260, 10, 175, 375, 'arrow edited: f8 -> d1');
-	itCheckEditArrow(1, 'over square marker', 275, 125, 275, 230, 'arrow edited: c3 -> c5');
-	itCheckEditArrow(1, 'over arrow marker', 40, 110, 125, 290, 'arrow edited: h3 -> f6');
-
-	function itCheckNonEditArrow(itemIndex, label, xFrom, yFrom, xTo, yTo) {
-		itCustom(browserContext, '07_chessboard_interaction/edit_arrows', 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);
-		});
-	}
-
-	itCheckNonEditArrow(0, 'from == to', 275, 225, 290, 210);
-	itCheckNonEditArrow(0, 'out of board', 175, 225, 500, 280);
-
-	itChecksScreenshots(browserContext, '07_chessboard_interaction/error', [
-		'wrong interaction mode',
-		'edit color not set',
-	]);
+    function itCheckClickSquare(itemIndex, label, targets) {
+        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];
+                await actions.move({ x: area.x + target.x, y: area.y + target.y }).click().perform();
+                await compareSandbox(browserContext, target.expectedText);
+            }
+        });
+    }
+
+    itCheckClickSquare(0, 'default', [
+        { x: 225, y: 75, expectedText: 'square clicked: e7' },
+        { x: 25, y: 375, expectedText: 'square clicked: a1' },
+        { x: 325, y: 175, expectedText: 'square clicked: g5' },
+    ]);
+    itCheckClickSquare(1, 'with flip', [
+        { x: 325, y: 175, expectedText: 'square clicked: b4' },
+    ]);
+    itCheckClickSquare(2, 'over annotations', [
+        { x: 25, y: 25, expectedText: 'square clicked: a8' },
+        { x: 75, y: 125, expectedText: 'square clicked: b6' },
+        { x: 175, y: 125, expectedText: 'square clicked: d6' },
+        { x: 75, y: 225, expectedText: 'square clicked: b4' },
+    ]);
+
+    function itCheckMovePiece(itemIndex, label, xFrom, yFrom, xTo, yTo, expectedText) {
+        itCustom(browserContext, '07_chessboard_interaction/move_pieces', 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);
+        });
+    }
+
+    itCheckMovePiece(0, 'over empty', 275, 385, 225, 175, 'piece moved: f1 -> e5');
+    itCheckMovePiece(0, 'over non-empty 1', 280, 365, 75, 75, 'piece moved: f1 -> b7');
+    itCheckMovePiece(0, 'over non-empty 2', 130, 75, 225, 375, 'piece moved: c7 -> e1');
+    itCheckMovePiece(1, 'over square marker', 10, 325, 275, 175, 'piece moved: h7 -> c4');
+    itCheckMovePiece(1, 'over text marker', 225, 25, 10, 135, 'piece moved: d1 -> h3');
+    itCheckMovePiece(1, 'over arrow marker', 325, 25, 315, 260, 'piece moved: b1 -> b6');
+    itCheckMovePiece(2, 'after move', 225, 225, 75, 260, 'piece moved: e4 -> b3');
+
+    function itCheckNonMovePiece(itemIndex, label, xFrom, yFrom, xTo, yTo) {
+        itCustom(browserContext, '07_chessboard_interaction/move_pieces', 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);
+        });
+    }
+
+    itCheckNonMovePiece(0, 'move empty square', 175, 225, 275, 75);
+    itCheckNonMovePiece(0, 'from == to', 75, 375, 80, 360);
+    itCheckNonMovePiece(0, 'out of board', 175, 25, 500, 210);
+
+    function itCheckEditArrow(itemIndex, label, xFrom, yFrom, xTo, yTo, expectedText) {
+        itCustom(browserContext, '07_chessboard_interaction/edit_arrows', 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);
+        });
+    }
+
+    itCheckEditArrow(0, 'base 1', 325, 275, 110, 140, 'arrow edited: g3 -> c6');
+    itCheckEditArrow(0, 'base 2', 260, 10, 175, 375, 'arrow edited: f8 -> d1');
+    itCheckEditArrow(1, 'over square marker', 275, 125, 275, 230, 'arrow edited: c3 -> c5');
+    itCheckEditArrow(1, 'over arrow marker', 40, 110, 125, 290, 'arrow edited: h3 -> f6');
+
+    function itCheckNonEditArrow(itemIndex, label, xFrom, yFrom, xTo, yTo) {
+        itCustom(browserContext, '07_chessboard_interaction/edit_arrows', 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);
+        });
+    }
+
+    itCheckNonEditArrow(0, 'from == to', 275, 225, 290, 210);
+    itCheckNonEditArrow(0, 'out of board', 175, 225, 500, 280);
+
+    itChecksScreenshots(browserContext, '07_chessboard_interaction/error', [
+        'wrong interaction mode',
+        'edit color not set',
+    ]);
 
 });

package/test/08_chessboard_play_moves.js

@@ -27,74 +27,74 @@ const { describeWithBrowser, itCustom, setSandbox, compareSandbox, takeScreensho
 
 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);
-		});
-	}
+    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');
+    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);
-		});
-	}
+    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);
+    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);
-		});
-	}
+    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');
+    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);
-		});
-	}
+    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);
+    itCheckNonPlayPromotion(1, 'cancel promotion', 75, 325, 75, 375, 190, 220);
 
 });

package/test/09_chessboard_small_screens.js

@@ -27,26 +27,47 @@ const { describeWithBrowser, itCustom, itChecksScreenshots, takeScreenshot, comp
 
 describeWithBrowser('Chessboard on small-screens', browserContext => {
 
-	itChecksScreenshots(browserContext, '09_chessboard_small_screens/base', [
-		'default',
-		'invalid limits',
-	]);
-
-	function itCheckScreenshotWithWidth(width) {
-		const label = `width ${width}`;
-		itCustom(browserContext, '09_chessboard_small_screens/base', 0, label, async element => {
-			await setWindowWidth(browserContext, width);
-			await takeScreenshot(browserContext, label, element);
-			await compareScreenshot(browserContext, label);
-		});
-	}
-
-	itCheckScreenshotWithWidth(750);
-	itCheckScreenshotWithWidth(740);
-	itCheckScreenshotWithWidth(730);
-	itCheckScreenshotWithWidth(720);
-	itCheckScreenshotWithWidth(710);
-	itCheckScreenshotWithWidth(700);
-	itCheckScreenshotWithWidth(690);
+    itChecksScreenshots(browserContext, '09_chessboard_small_screens/base', [
+        'default',
+        'invalid limits',
+    ]);
+
+    function itCheckScreenshotWithWidth(width) {
+        const label = `width ${width}`;
+        itCustom(browserContext, '09_chessboard_small_screens/base', 0, label, async element => {
+            await setWindowWidth(browserContext, width);
+            await takeScreenshot(browserContext, label, element);
+            await compareScreenshot(browserContext, label);
+        });
+    }
+
+    itCheckScreenshotWithWidth(750);
+    itCheckScreenshotWithWidth(740);
+    itCheckScreenshotWithWidth(730);
+    itCheckScreenshotWithWidth(720);
+    itCheckScreenshotWithWidth(710);
+    itCheckScreenshotWithWidth(700);
+    itCheckScreenshotWithWidth(690);
+
+});
+
+
+describeWithBrowser('Chessboard on small-screens with top/bottom components', browserContext => {
+
+    itChecksScreenshots(browserContext, '09_chessboard_small_screens/top_bottom_components', [
+        'default top component',
+        'default bottom component',
+    ]);
+
+    function itCheckScreenshotWithReducedWidth(itemIndex, label) {
+        itCustom(browserContext, '09_chessboard_small_screens/top_bottom_components', itemIndex, label, async element => {
+            await setWindowWidth(browserContext, 700);
+            await takeScreenshot(browserContext, label, element);
+            await compareScreenshot(browserContext, label);
+        });
+    }
+
+    itCheckScreenshotWithReducedWidth(0, 'reduced top component');
+    itCheckScreenshotWithReducedWidth(1, 'reduced bottom component');
 
 });

package/test/10_movetext_graphic.js

@@ -27,36 +27,41 @@ const { describeWithBrowser, itChecksScreenshots } = require('./common/graphic')
 
 describeWithBrowser('Movetext graphic', browserContext => {
 
-	itChecksScreenshots(browserContext, '10_movetext_graphic/base', [
-		'game 1',
-		'game 2',
-		'game 3',
-		'game 4',
-	]);
-
-	itChecksScreenshots(browserContext, '10_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',
-	]);
-
-	itChecksScreenshots(browserContext, '10_movetext_graphic/html', [
-		'html in headers',
-		'html in comments',
-		'filtered tags and attributes',
-	]);
-
-	itChecksScreenshots(browserContext, '10_movetext_graphic/options', [
-		'localized piece symbols',
-		'custom piece symbols',
-		'figurine piece symbols and diagram options',
-		'other diagram options',
-		'hidden diagrams',
-		'wrong diagram options 1',
-		'wrong diagram options 2',
-	]);
+    itChecksScreenshots(browserContext, '10_movetext_graphic/base', [
+        'game 1',
+        'game 2',
+        'game 3',
+        'game 4',
+    ]);
+
+    itChecksScreenshots(browserContext, '10_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',
+    ]);
+
+    itChecksScreenshots(browserContext, '10_movetext_graphic/html', [
+        'html in headers',
+        'html in comments',
+        'filtered tags and attributes',
+    ]);
+
+    itChecksScreenshots(browserContext, '10_movetext_graphic/options', [
+        'localized piece symbols',
+        'custom piece symbols',
+        'figurine piece symbols and diagram options',
+        'other diagram options',
+        'hidden diagrams',
+        'wrong diagram options 1',
+        'wrong diagram options 2',
+        'wrong piece symbol value',
+    ]);
+
+    itChecksScreenshots(browserContext, '10_movetext_graphic/format_move', [
+        'format text',
+    ]);
 
 });