chore(tests): cleanup and toolbox drag tests (#7350)

* chore(tests): use helpers for the basic drag test in the playground

* chore(tests): miscellaneous test cleanup

* chore: format

* feat(tests): add test that drags out every block from the toolbox

* feat(tests): add RTL version of toolbox drag tests

* chore: lint

* chore(tests): respond to PR feedback

Author: rachel-fenichel

tests/browser/test/basic_playground_test.js

@@ -46,24 +46,13 @@ suite('Testing Connecting Blocks', function () {
     this.browser = await testSetup(testFileLocations.PLAYGROUND);
   });
 
-  test('Testing Block Flyout', async function () {
-    const logicButton = await this.browser.$('#blockly-0');
-    logicButton.click();
-    const ifDoBlock = await this.browser.$(
-      '#blocklyDiv > div > svg:nth-child(7) > g > g.blocklyBlockCanvas > g:nth-child(3)',
-    );
-    await ifDoBlock.dragAndDrop({x: 20, y: 20});
-    await this.browser.pause(200);
-    const blockOnWorkspace = await this.browser.execute(() => {
-      const newBlock = Blockly.getMainWorkspace().getAllBlocks(false)[0];
-      if (newBlock.id) {
-        return true;
-      } else {
-        return false;
-      }
+  test('dragging a block from the flyout results in a block on the workspace', async function () {
+    await dragBlockTypeFromFlyout(this.browser, 'Logic', 'controls_if', 20, 20);
+    const blockCount = await this.browser.execute(() => {
+      return Blockly.getMainWorkspace().getAllBlocks(false).length;
     });
 
-    chai.assert.isTrue(blockOnWorkspace);
+    chai.assert.equal(blockCount, 1);
   });
 });
 

tests/browser/test/block_undo_test.js

@@ -13,45 +13,38 @@ const {Key} = require('webdriverio');
 const {
   testSetup,
   testFileLocations,
-  switchRTL,
   dragBlockTypeFromFlyout,
   screenDirection,
+  getAllBlocks,
 } = require('./test_setup');
 
 suite('Testing undo block movement', function (done) {
   // Setting timeout to unlimited as the webdriver takes a longer time to run than most mocha test
   this.timeout(0);
 
-  // Setup Selenium for all of the tests
-  suiteSetup(async function () {
-    this.browser = await testSetup(testFileLocations.PLAYGROUND);
-  });
-
   test('Undoing Block Movement LTR', async function () {
+    this.browser = await testSetup(testFileLocations.PLAYGROUND);
     await testUndoBlock(this.browser, screenDirection.LTR);
   });
 
   test('Undoing Block Movement RTL', async function () {
-    await switchRTL(this.browser);
+    this.browser = await testSetup(testFileLocations.PLAYGROUND_RTL);
     await testUndoBlock(this.browser, screenDirection.RTL);
   });
 });
 
-async function testUndoBlock(browser, delta) {
+async function testUndoBlock(browser, direction) {
   // Drag out first function
-  const defReturnBlock = await dragBlockTypeFromFlyout(
+  await dragBlockTypeFromFlyout(
     browser,
     'Functions',
     'procedures_defreturn',
-    50 * delta,
+    50 * direction,
     20,
   );
 
   await browser.keys([Key.Ctrl, 'z']);
 
-  const blockOnWorkspace = await browser.execute(() => {
-    return !!Blockly.getMainWorkspace().getAllBlocks(false)[0];
-  });
-
-  chai.assert.isFalse(blockOnWorkspace);
+  const allBlocks = await getAllBlocks(browser);
+  chai.assert.equal(allBlocks.length, 0);
 }

tests/browser/test/extensive_test.js

@@ -13,6 +13,7 @@ const {
   testSetup,
   testFileLocations,
   getBlockElementById,
+  getAllBlocks,
 } = require('./test_setup');
 const {Key} = require('webdriverio');
 
@@ -25,32 +26,28 @@ suite('This tests loading Large Configuration and Deletion', function (done) {
     this.browser = await testSetup(testFileLocations.PLAYGROUND);
   });
 
-  test('This test loading from JSON results in the correct number of blocks', async function () {
+  test('loading from JSON results in the correct number of blocks', async function () {
     const blockNum = await testingJSONLoad(this.browser);
     chai.assert.equal(blockNum, 13);
   });
 
-  test('This test deleting block results in the correct number of blocks', async function () {
+  test('deleting block results in the correct number of blocks', async function () {
     const fourthRepeatDo = await getBlockElementById(
       this.browser,
       'E8bF[-r:B~cabGLP#QYd',
     );
     await fourthRepeatDo.click({x: -100, y: -40});
     await this.browser.keys([Key.Delete]);
     await this.browser.pause(100);
-    const blockNum = await this.browser.execute(() => {
-      return Blockly.getMainWorkspace().getAllBlocks(false).length;
-    });
-    chai.assert.equal(blockNum, 10);
+    const allBlocks = await getAllBlocks(this.browser);
+    chai.assert.equal(allBlocks.length, 10);
   });
 
-  test('This test undoing delete block results in the correct number of blocks', async function () {
+  test('undoing delete block results in the correct number of blocks', async function () {
     await this.browser.keys([Key.Ctrl, 'z']);
     await this.browser.pause(100);
-    const blockNum = await this.browser.execute(() => {
-      return Blockly.getMainWorkspace().getAllBlocks(false).length;
-    });
-    chai.assert.equal(blockNum, 13);
+    const allBlocks = await getAllBlocks(this.browser);
+    chai.assert.equal(allBlocks.length, 13);
   });
 });
 

tests/browser/test/field_edits_test.js

@@ -12,8 +12,6 @@ const chai = require('chai');
 const {
   testSetup,
   testFileLocations,
-  getSelectedBlockElement,
-  switchRTL,
   dragBlockTypeFromFlyout,
   screenDirection,
 } = require('./test_setup');
@@ -23,47 +21,42 @@ suite('Testing Field Edits', function (done) {
   // Setting timeout to unlimited as the webdriver takes a longer time to run than most mocha test
   this.timeout(0);
 
-  // Setup Selenium for all of the tests
-  suiteSetup(async function () {
-    this.browser = await testSetup(testFileLocations.PLAYGROUND);
-  });
-
   test('Testing Field Edits LTR', async function () {
+    this.browser = await testSetup(testFileLocations.PLAYGROUND);
     await testFieldEdits(this.browser, screenDirection.LTR);
   });
 
   test('Testing Field Edits RTL', async function () {
-    await switchRTL(this.browser);
+    this.browser = await testSetup(testFileLocations.PLAYGROUND_RTL);
     await testFieldEdits(this.browser, screenDirection.RTL);
   });
 });
 
-async function testFieldEdits(browser, delta) {
-  const mathNumber = await dragBlockTypeFromFlyout(
+async function testFieldEdits(browser, direction) {
+  const numberBlock = await dragBlockTypeFromFlyout(
     browser,
     'Math',
     'math_number',
-    50 * delta,
+    50 * direction,
     20,
   );
-  await browser.pause(200);
 
   // Click on the field to change the value
-  const numeric = await getSelectedBlockElement(browser);
-  await numeric.doubleClick();
+  await numberBlock.click();
   await browser.keys([Key.Delete]);
-  await numeric.doubleClick();
+  await numberBlock.click();
   await browser.keys(['1093']);
-  // Click on the workspace
+  // Click on the workspace to exit the field editor
   const workspace = await browser.$('#blocklyDiv > div > svg.blocklySvg > g');
   await workspace.click();
   await browser.pause(200);
-  // Get value of the number
-  const numericText = await browser
-    .$(
-      '#blocklyDiv > div > svg.blocklySvg > g > g.blocklyBlockCanvas > g.blocklyDraggable > g > text',
-    )
-    .getHTML();
 
-  chai.assert.isTrue(numericText.includes('1093'));
+  const fieldValue = await browser.execute((id) => {
+    return Blockly.getMainWorkspace()
+      .getBlockById(id)
+      .getField('NUM')
+      .getValue();
+  }, numberBlock.id);
+
+  chai.assert.equal(fieldValue, '1093');
 }

tests/browser/test/test_setup.js

@@ -94,6 +94,10 @@ const testFileLocations = {
     'file://' +
     posixPath(path.join(__dirname, '..', '..')) +
     '/playground.html',
+  PLAYGROUND_RTL:
+    'file://' +
+    posixPath(path.join(__dirname, '..', '..')) +
+    '/playground.html?dir=rtl',
 };
 
 /**
@@ -164,7 +168,6 @@ async function getCategory(browser, categoryName) {
 async function getNthBlockOfCategory(browser, categoryName, n) {
   const category = await getCategory(browser, categoryName);
   await category.click();
-  await browser.pause(100);
   const block = await browser.$(
     `.blocklyFlyout .blocklyBlockCanvas > g:nth-child(${3 + n * 2})`,
   );
@@ -440,6 +443,29 @@ async function getAllBlocks(browser) {
   });
 }
 
+/**
+ * Find the flyout's scrollbar and scroll by the specified amount.
+ * This makes several assumptions:
+ *  - A flyout with a valid scrollbar exists, is open, and is in view.
+ *  - The workspace has a trash can, which means it has a second (hidden) flyout.
+ * @param browser The active WebdriverIO Browser object.
+ * @param xDelta How far to drag the flyout in the x direction. Positive is right.
+ * @param yDelta How far to drag thte flyout in the y direction. Positive is down.
+ * @return A Promise that resolves when the actions are completed.
+ */
+async function scrollFlyout(browser, xDelta, yDelta) {
+  // There are two flyouts on the playground workspace: one for the trash can
+  // and one for the toolbox. We want the second one.
+  // This assumes there is only one scrollbar handle in the flyout, but it could
+  // be either horizontal or vertical.
+  await browser.pause(50);
+  const scrollbarHandle = await browser
+    .$$(`.blocklyFlyoutScrollbar`)[1]
+    .$(`rect.blocklyScrollbarHandle`);
+  await scrollbarHandle.dragAndDrop({x: xDelta, y: yDelta});
+  await browser.pause(50);
+}
+
 module.exports = {
   testSetup,
   testFileLocations,
@@ -459,4 +485,5 @@ module.exports = {
   screenDirection,
   getBlockTypeFromWorkspace,
   getAllBlocks,
+  scrollFlyout,
 };