Fix procedure tests

tests/browser/test/procedure_test.mjs

@@ -11,10 +11,8 @@
 import * as chai from 'chai';
 import {
   connect,
-  getBlockTypeFromCategory,
+  dragBlockTypeFromFlyout,
-  getDraggableBlockElementByType,
+  dragNthBlockFromFlyout,
-  getNthBlockOfCategory,
-  getSelectedBlockElement,
   PAUSE_TIME,
   testFileLocations,
   testSetup,
@@ -34,43 +32,41 @@ suite('Testing Connecting Blocks', function (done) {
 
   test('Testing Procedure', async function () {
     // Drag out first function
-    let proceduresDefReturn = await getDraggableBlockElementByType(
+    const doSomething = await dragBlockTypeFromFlyout(
       this.browser,
       'Functions',
       'procedures_defreturn',
+      50,
+      20,
     );
-    await proceduresDefReturn.dragAndDrop({x: 50, y: 20});
-    const doSomething = await getSelectedBlockElement(this.browser);
 
-    // Drag out second function.
+    const doSomething2 = await dragBlockTypeFromFlyout(
-    proceduresDefReturn = await getDraggableBlockElementByType(
       this.browser,
       'Functions',
       'procedures_defreturn',
+      50,
+      20,
     );
-    await proceduresDefReturn.dragAndDrop({x: 50, y: 20});
-    const doSomething2 = await getSelectedBlockElement(this.browser);
 
-    // Drag out numeric
+    const numeric = await dragBlockTypeFromFlyout(
-    const mathNumeric = await getBlockTypeFromCategory(
       this.browser,
       'Math',
       'math_number',
+      50,
+      20,
     );
-    await mathNumeric.dragAndDrop({x: 50, y: 20});
-    const numeric = await getSelectedBlockElement(this.browser);
 
     // Connect numeric to first procedure
     await connect(this.browser, numeric, 'OUTPUT', doSomething, 'RETURN');
 
     // Drag out doSomething caller from flyout.
-    const doSomethingFlyout = await getNthBlockOfCategory(
+    const doSomethingCaller = await dragNthBlockFromFlyout(
       this.browser,
       'Functions',
       3,
+      50,
+      20,
     );
-    await doSomethingFlyout.dragAndDrop({x: 50, y: 20});
-    const doSomethingCaller = await getSelectedBlockElement(this.browser);
 
     // Connect the doSomething caller to doSomething2
     await connect(
@@ -82,22 +78,22 @@ suite('Testing Connecting Blocks', function (done) {
     );
 
     // Drag out print from flyout.
-    const printFlyout = await getBlockTypeFromCategory(
+    const print = await dragBlockTypeFromFlyout(
       this.browser,
       'Text',
       'text_print',
+      50,
+      0,
     );
-    await printFlyout.dragAndDrop({x: 50, y: 0});
-    const print = await getSelectedBlockElement(this.browser);
 
     // Drag out doSomething2 caller from flyout.
-    const doSomething2Flyout = await getNthBlockOfCategory(
+    const doSomething2Caller = await dragNthBlockFromFlyout(
       this.browser,
       'Functions',
       4,
+      50,
+      20,
     );
-    await doSomething2Flyout.dragAndDrop({x: 50, y: 20});
-    const doSomething2Caller = await getSelectedBlockElement(this.browser);
 
     // Connect doSomething2 caller with print.
     await connect(this.browser, doSomething2Caller, 'OUTPUT', print, 'TEXT');
@@ -107,7 +103,7 @@ suite('Testing Connecting Blocks', function (done) {
     runButton.click();
     await this.browser.pause(PAUSE_TIME);
     const alertText = await this.browser.getAlertText(); // get the alert text
-    chai.assert.equal(alertText, '123');
+    chai.assert.equal(alertText, 'abc');
     await this.browser.acceptAlert();
   });
 });

tests/browser/test/test_setup.mjs

@@ -216,7 +216,7 @@ export async function clickBlock(browser, blockId, clickOptions) {
  * @return A Promise that resolves when the actions are completed.
  */
 export async function clickWorkspace(browser) {
-  const workspace = await browser.$('#blocklyDiv > div > svg.blocklySvg > g');
+  const workspace = await browser.$('svg.blocklySvg > g');
   await workspace.click();
   await browser.pause(PAUSE_TIME);
 }
@@ -499,6 +499,9 @@ export async function switchRTL(browser) {
  */
 export async function dragNthBlockFromFlyout(browser, categoryName, n, x, y) {
   const flyoutBlock = await getNthBlockOfCategory(browser, categoryName, n);
+  while (!(await elementInBounds(browser, flyoutBlock))) {
+    await scrollFlyout(browser, 0, 50);
+  }
   await flyoutBlock.dragAndDrop({x: x, y: y});
   return await getSelectedBlockElement(browser);
 }
@@ -525,15 +528,44 @@ export async function dragBlockTypeFromFlyout(
   x,
   y,
 ) {
-  const flyoutBlock = await getBlockTypeFromCategory(
+  const flyoutBlock = await getDraggableBlockElementByType(
     browser,
     categoryName,
     type,
   );
+  while (!(await elementInBounds(browser, flyoutBlock))) {
+    await scrollFlyout(browser, 0, 50);
+  }
   await flyoutBlock.dragAndDrop({x: x, y: y});
+  await browser.pause(PAUSE_TIME);
   return await getSelectedBlockElement(browser);
 }
 
+/**
+ * Check whether an element is fully inside the bounds of the Blockly div. You can use this
+ * to determine whether a block on the workspace or flyout is inside the Blockly div.
+ * This does not check whether there are other Blockly elements (such as a toolbox or
+ * flyout) on top of the element. A partially visible block is considered out of bounds.
+ * @param browser The active WebdriverIO Browser object.
+ * @param element The element to look for.
+ * @returns A Promise resolving to true if the element is in bounds and false otherwise.
+ */
+async function elementInBounds(browser, element) {
+  return await browser.execute((elem) => {
+    const rect = elem.getBoundingClientRect();
+
+    const blocklyDiv = document.getElementsByClassName('blocklySvg')[0];
+    const blocklyRect = blocklyDiv.getBoundingClientRect();
+
+    const vertInView =
+      rect.top >= blocklyRect.top && rect.bottom <= blocklyRect.bottom;
+    const horInView =
+      rect.left >= blocklyRect.left && rect.right <= blocklyRect.right;
+
+    return vertInView && horInView;
+  }, element);
+}
+
 /**
  * Drags the specified block type from the mutator flyout of the given block
  * and returns the root element of the block.

tests/browser/test/toolbox_drag_test.mjs

@@ -10,11 +10,10 @@
 
 import * as chai from 'chai';
 import {
+  dragBlockTypeFromFlyout,
   getCategory,
-  getDraggableBlockElementByType,
   PAUSE_TIME,
   screenDirection,
-  scrollFlyout,
   testFileLocations,
   testSetup,
 } from './test_setup.mjs';
@@ -57,31 +56,6 @@ const testCategories = [
   'Serialization',
 ];
 
-/**
- * Check whether an element is fully inside the bounds of the Blockly div. You can use this
- * to determine whether a block on the workspace or flyout is inside the Blockly div.
- * This does not check whether there are other Blockly elements (such as a toolbox or
- * flyout) on top of the element. A partially visible block is considered out of bounds.
- * @param browser The active WebdriverIO Browser object.
- * @param element The element to look for.
- * @returns A Promise resolving to true if the element is in bounds and false otherwise.
- */
-async function elementInBounds(browser, element) {
-  return await browser.execute((elem) => {
-    const rect = elem.getBoundingClientRect();
-
-    const blocklyDiv = document.getElementById('blocklyDiv');
-    const blocklyRect = blocklyDiv.getBoundingClientRect();
-
-    const vertInView =
-      rect.top >= blocklyRect.top && rect.bottom <= blocklyRect.bottom;
-    const horInView =
-      rect.left >= blocklyRect.left && rect.right <= blocklyRect.right;
-
-    return vertInView && horInView;
-  }, element);
-}
-
 /**
  * Get the type of the nth block in the specified category.
  * @param browser The active WebdriverIO Browser object.
@@ -173,15 +147,7 @@ async function openCategories(browser, categoryList, directionMultiplier) {
           continue;
         }
         const blockType = await getNthBlockType(browser, categoryName, i);
-        const flyoutBlock = await getDraggableBlockElementByType(
+        dragBlockTypeFromFlyout(browser, categoryName, blockType, 50, 20);
-          browser,
-          categoryName,
-          blockType,
-        );
-        while (!(await elementInBounds(browser, flyoutBlock))) {
-          await scrollFlyout(browser, 0, 50);
-        }
-        await flyoutBlock.click();
         await browser.pause(PAUSE_TIME);
         // Should be one top level block on the workspace.
         const topBlockCount = await browser.execute(() => {