From 3d6ac549a9d82efdd99a152fc4ca2d35eaab6dd7 Mon Sep 17 00:00:00 2001 From: Erik Pasternak Date: Fri, 27 Jun 2025 14:55:31 -0700 Subject: [PATCH] Fix procedure tests --- tests/browser/test/procedure_test.mjs | 46 +++++++++++------------- tests/browser/test/test_setup.mjs | 36 +++++++++++++++++-- tests/browser/test/toolbox_drag_test.mjs | 38 ++------------------ 3 files changed, 57 insertions(+), 63 deletions(-) diff --git a/tests/browser/test/procedure_test.mjs b/tests/browser/test/procedure_test.mjs index ed63beb82..0b0616acd 100644 --- a/tests/browser/test/procedure_test.mjs +++ b/tests/browser/test/procedure_test.mjs @@ -11,10 +11,8 @@ import * as chai from 'chai'; import { connect, - getBlockTypeFromCategory, - getDraggableBlockElementByType, - getNthBlockOfCategory, - getSelectedBlockElement, + dragBlockTypeFromFlyout, + dragNthBlockFromFlyout, 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. - proceduresDefReturn = await getDraggableBlockElementByType( + const doSomething2 = await dragBlockTypeFromFlyout( this.browser, 'Functions', 'procedures_defreturn', + 50, + 20, ); - await proceduresDefReturn.dragAndDrop({x: 50, y: 20}); - const doSomething2 = await getSelectedBlockElement(this.browser); - // Drag out numeric - const mathNumeric = await getBlockTypeFromCategory( + const numeric = await dragBlockTypeFromFlyout( 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(); }); }); diff --git a/tests/browser/test/test_setup.mjs b/tests/browser/test/test_setup.mjs index 040ca3df0..2d2525a48 100644 --- a/tests/browser/test/test_setup.mjs +++ b/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. diff --git a/tests/browser/test/toolbox_drag_test.mjs b/tests/browser/test/toolbox_drag_test.mjs index 1845336eb..801f5ad78 100644 --- a/tests/browser/test/toolbox_drag_test.mjs +++ b/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( - browser, - categoryName, - blockType, - ); - while (!(await elementInBounds(browser, flyoutBlock))) { - await scrollFlyout(browser, 0, 50); - } - await flyoutBlock.click(); + dragBlockTypeFromFlyout(browser, categoryName, blockType, 50, 20); await browser.pause(PAUSE_TIME); // Should be one top level block on the workspace. const topBlockCount = await browser.execute(() => {