From f1e0e113129d069e99045cc72e44419d7851afda Mon Sep 17 00:00:00 2001
From: Rachel Fenichel <fenichel@google.com>
Date: Thu, 6 Jul 2023 10:30:53 -0700
Subject: [PATCH] =?UTF-8?q?feat(test):=20add=20helper=20functions=20for=20?=
 =?UTF-8?q?getting=20selected=20block=20and=20block=E2=80=A6=20(#7254)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(test): add helper functions for getting selected block and block by ID

* chore: format test files

* chore: fix lint
---
 tests/browser/test/procedure_test.js | 19 +++++++++---------
 tests/browser/test/test_setup.js     | 30 +++++++++++++++++++++++++++-
 2 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/tests/browser/test/procedure_test.js b/tests/browser/test/procedure_test.js
index 7a4fa2c54..4b01488d5 100644
--- a/tests/browser/test/procedure_test.js
+++ b/tests/browser/test/procedure_test.js
@@ -9,7 +9,11 @@
  */
 
 const chai = require('chai');
-const {testSetup, testFileLocations} = require('./test_setup');
+const {
+  testSetup,
+  testFileLocations,
+  getSelectedBlockElement,
+} = require('./test_setup');
 
 let browser;
 suite('Testing Connecting Blocks', function (done) {
@@ -48,9 +52,7 @@ suite('Testing Connecting Blocks', function (done) {
     );
     await mathNumeric.dragAndDrop({x: 50, y: 20});
     // Connect numeric to first procedure
-    const numericWorkspace = await browser.$(
-      '#content_blocks > div > svg.blocklySvg > g > g.blocklyBlockCanvas > g.blocklyDraggable.blocklySelected'
-    );
+    const numericWorkspace = await getSelectedBlockElement(browser);
     const doSomething = await browser.$(
       '#content_blocks > div > svg.blocklySvg > g > g.blocklyBlockCanvas > g:nth-child(2)'
     );
@@ -70,9 +72,7 @@ suite('Testing Connecting Blocks', function (done) {
     );
     await doSomethingFlyout.dragAndDrop(doSomething2);
     await new Promise((resolve) => setTimeout(resolve, 2000)); // 2 sec
-    const doSomethingFlyoutWorkspace = await browser.$(
-      '#content_blocks > div > svg.blocklySvg > g > g.blocklyBlockCanvas > g.blocklyDraggable.blocklySelected'
-    );
+    const doSomethingFlyoutWorkspace = await getSelectedBlockElement(browser);
     await doSomethingFlyoutWorkspace.dragAndDrop({x: 130, y: 20});
 
     // Drag out print from flyout and connect it with doSomething 2
@@ -92,9 +92,8 @@ suite('Testing Connecting Blocks', function (done) {
     await new Promise((resolve) => setTimeout(resolve, 2000)); // 2 sec
     await doSomething2Flyout.dragAndDrop({x: 130, y: 20});
     await new Promise((resolve) => setTimeout(resolve, 2000)); // 2 sec
-    const doSomething2FlyoutWorkspace = await browser.$(
-      '#content_blocks > div > svg.blocklySvg > g > g.blocklyBlockCanvas > g.blocklyDraggable.blocklySelected'
-    );
+    const doSomething2FlyoutWorkspace = await getSelectedBlockElement(browser);
+
     const printWorkSpace = await browser.$(
       '#content_blocks > div > svg.blocklySvg > g > g.blocklyBlockCanvas > g:nth-child(4)'
     );
diff --git a/tests/browser/test/test_setup.js b/tests/browser/test/test_setup.js
index b9a7b9b2c..d8641c4f9 100644
--- a/tests/browser/test/test_setup.js
+++ b/tests/browser/test/test_setup.js
@@ -73,4 +73,32 @@ const testFileLocations = {
   playground: 2,
 };
 
-module.exports = {testSetup, testFileLocations};
+/**
+ * @param {Browser} browser The active WebdriverIO Browser object.
+ * @return {WebElement} The selected block's root SVG element, as an interactable
+ *     browser element.
+ */
+async function getSelectedBlockElement(browser) {
+  const result = await browser.execute(() => {
+    // Note: selected is an ICopyable and I am assuming that it is a BlockSvg.
+    return Blockly.common.getSelected()?.id;
+  });
+  return await browser.$(`[data-id="${result}"]`);
+}
+
+/**
+ * @param {Browser} browser The active WebdriverIO Browser object.
+ * @param {string} id The ID of the Blockly block to search for.
+ * @return {WebElement} The root SVG element of the block with the given ID, as an
+ *     interactable browser element.
+ */
+async function getBlockElementById(browser, id) {
+  return await browser.$(`[data-id="${id}"]`);
+}
+
+module.exports = {
+  testSetup,
+  testFileLocations,
+  getSelectedBlockElement,
+  getBlockElementById,
+};