Fix: Fix tests broken by changes to block positions (#470)

* Fix: Fix tests broken by changes to block positions

* Formatting cleanup

Author: RoboErikG

test/loadTestBlocks.js

@@ -182,7 +182,7 @@ const simpleCircle = {
     'blocks': [
       {
         'type': 'p5_setup',
-        'id': '5.{;T}3Qv}Awi:1M$:ut',
+        'id': 'p5_setup_1',
         'x': 0,
         'y': 75,
         'deletable': false,

test/webdriverio/test/basic_test.ts

@@ -6,8 +6,14 @@
 
 import * as chai from 'chai';
 import * as Blockly from 'blockly';
-import {testSetup, testFileLocations, PAUSE_TIME} from './test_setup.js';
-import {Key} from 'webdriverio';
+import {
+  testSetup,
+  testFileLocations,
+  PAUSE_TIME,
+  getBlockElementById,
+  clickBlock,
+} from './test_setup.js';
+import {Key, ClickOptions} from 'webdriverio';
 
 suite('Keyboard navigation', function () {
   // Setting timeout to unlimited as these tests take a longer time to run than most mocha test
@@ -27,13 +33,11 @@ suite('Keyboard navigation', function () {
   });
 
   test('Selected block', async function () {
-    const workspace = await this.browser.$(
-      '#blocklyDiv > div > svg.blocklySvg > g',
-    );
-    await workspace.click();
+    const block = await getBlockElementById(this.browser, 'p5_setup_1');
+    await clickBlock(this.browser, block, {button: 0} as ClickOptions);
     await this.browser.pause(PAUSE_TIME);
 
-    for (let i = 0; i < 9; i++) {
+    for (let i = 0; i < 8; i++) {
       await this.browser.keys(Key.ArrowDown);
       await this.browser.pause(PAUSE_TIME);
     }

test/webdriverio/test/clipboard_test.ts

@@ -35,7 +35,7 @@ suite('Clipboard test', function () {
 
   test('Copy and paste while block selected', async function () {
     const block = await getBlockElementById(this.browser, 'draw_circle_1');
-    await clickBlock(this.browser, block, {button: 1} as ClickOptions);
+    await clickBlock(this.browser, block, {button: 0} as ClickOptions);
 
     // Copy and paste
     await this.browser.keys([Key.Ctrl, 'c']);
@@ -55,7 +55,7 @@ suite('Clipboard test', function () {
 
   test('Cut and paste while block selected', async function () {
     const block = await getBlockElementById(this.browser, 'draw_circle_1');
-    await clickBlock(this.browser, block, {button: 1} as ClickOptions);
+    await clickBlock(this.browser, block, {button: 0} as ClickOptions);
 
     // Cut and paste
     await this.browser.keys([Key.Ctrl, 'x']);

test/webdriverio/test/test_setup.ts

@@ -201,8 +201,13 @@ export async function clickBlock(
   // In the browser context, find the element that we want and give it a findable ID.
   await browser.execute(
     (blockId, newElemId) => {
-      const block = Blockly.getMainWorkspace().getBlockById(blockId);
+      const workspaceSvg = Blockly.getMainWorkspace() as Blockly.WorkspaceSvg;
+      const block = workspaceSvg.getBlockById(blockId);
       if (block) {
+        // Ensure the block we want to click is within the viewport.
+        workspaceSvg.scrollBoundsIntoView(
+          block.getBoundingRectangleWithoutChildren(),
+        );
         for (const input of block.inputList) {
           for (const field of input.fieldRow) {
             if (field instanceof Blockly.FieldLabel) {
@@ -214,9 +219,9 @@ export async function clickBlock(
             }
           }
         }
+        // No label field found. Fall back to the block's SVG root.
+        block.getSvgRoot().id = findableId;
       }
-      // No label field found. Fall back to the block's SVG root.
-      (block as Blockly.BlockSvg).getSvgRoot().id = findableId;
     },
     block.id,
     findableId,