CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-04 15:40:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #7485 from rachel-fenichel/clickableElement

Browse Source 
fix(tests): contextMenuSelect sometimes clicks the wrong block
This commit is contained in:
Rachel Fenichel
2023-09-13 13:29:58 -07:00
committed by GitHub
parent fc76981e5b 67f42f017a
commit 00d870ee03
3 changed files with 57 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
tests/browser/test/basic_playground_test.js
View File

@@ -69,23 +69,22 @@ suite('Right Clicking on Blocks', function () {
suiteSetup(async function () {
this.browser = await testSetup(testFileLocations.PLAYGROUND);
this.block = await dragNthBlockFromFlyout(this.browser, 'Loops', 0, 20, 20);
this.blockId = this.block.id;
});
test('clicking the collapse option collapses the block', async function () {
await contextMenuSelect(this.browser, this.block, 'Collapse Block');
chai.assert.isTrue(await getIsCollapsed(this.browser, this.blockId));
chai.assert.isTrue(await getIsCollapsed(this.browser, this.block.id));
});
// Assumes that
test('clicking the expand option expands the block', async function () {
await contextMenuSelect(this.browser, this.block, 'Expand Block');
chai.assert.isFalse(await getIsCollapsed(this.browser, this.blockId));
chai.assert.isFalse(await getIsCollapsed(this.browser, this.block.id));
});
test('clicking the disable option disables the block', async function () {
await contextMenuSelect(this.browser, this.block, 'Disable Block');
chai.assert.isTrue(await getIsDisabled(this.browser, this.blockId));
chai.assert.isTrue(await getIsDisabled(this.browser, this.block.id));
});
test('clicking the enable option enables the block', async function () {

25
tests/browser/test/delete_blocks_test.js
View File

@@ -10,6 +10,7 @@ const {
testFileLocations,
getAllBlocks,
getBlockElementById,
clickBlock,
contextMenuSelect,
PAUSE_TIME,
} = require('./test_setup');
@@ -130,15 +131,13 @@ suite('Delete blocks', function (done) {
(await getBlockElementById(this.browser, firstBlockId)).waitForExist({
timeout: 2000,
});
this.firstBlock = await getBlockElementById(this.browser, firstBlockId);
});
test('Delete block using backspace key', async function () {
const before = (await getAllBlocks(this.browser)).length;
// Get first print block, click to select it, and delete it using backspace key.
const block = (await getBlockElementById(this.browser, firstBlockId)).$(
'.blocklyPath',
);
await block.click();
await clickBlock(this.browser, this.firstBlock, {button: 1});
await this.browser.keys([Key.Backspace]);
const after = (await getAllBlocks(this.browser)).length;
chai.assert.equal(
@@ -151,10 +150,7 @@ suite('Delete blocks', function (done) {
test('Delete block using delete key', async function () {
const before = (await getAllBlocks(this.browser)).length;
// Get first print block, click to select it, and delete it using delete key.
const block = (await getBlockElementById(this.browser, firstBlockId)).$(
'.blocklyPath',
);
await block.click();
await clickBlock(this.browser, this.firstBlock, {button: 1});
await this.browser.keys([Key.Delete]);
const after = (await getAllBlocks(this.browser)).length;
chai.assert.equal(
@@ -167,8 +163,7 @@ suite('Delete blocks', function (done) {
test('Delete block using context menu', async function () {
const before = (await getAllBlocks(this.browser)).length;
// Get first print block, click to select it, and delete it using context menu.
const block = await getBlockElementById(this.browser, firstBlockId);
await contextMenuSelect(this.browser, block, 'Delete 2 Blocks');
await contextMenuSelect(this.browser, this.firstBlock, 'Delete 2 Blocks');
const after = (await getAllBlocks(this.browser)).length;
chai.assert.equal(
before - 2,
@@ -180,10 +175,7 @@ suite('Delete blocks', function (done) {
test('Undo block deletion', async function () {
const before = (await getAllBlocks(this.browser)).length;
// Get first print block, click to select it, and delete it using backspace key.
const block = (await getBlockElementById(this.browser, firstBlockId)).$(
'.blocklyPath',
);
await block.click();
await clickBlock(this.browser, this.firstBlock, {button: 1});
await this.browser.keys([Key.Backspace]);
await this.browser.pause(PAUSE_TIME);
// Undo
@@ -199,10 +191,7 @@ suite('Delete blocks', function (done) {
test('Redo block deletion', async function () {
const before = (await getAllBlocks(this.browser)).length;
// Get first print block, click to select it, and delete it using backspace key.
const block = (await getBlockElementById(this.browser, firstBlockId)).$(
'.blocklyPath',
);
await block.click();
await clickBlock(this.browser, this.firstBlock, {button: 1});
await this.browser.keys([Key.Backspace]);
await this.browser.pause(PAUSE_TIME);
// Undo

59
tests/browser/test/test_setup.js
View File

@@ -155,6 +155,50 @@ async function getBlockElementById(browser, id) {
return elem;
}
/**
* Find a clickable element on the block and click it.
* We can't always use the block's SVG root because clicking will always happen
* in the middle of the block's bounds (including children) by default, which
* causes problems if it has holes (e.g. statement inputs). Instead, this tries
* to get the first text field on the block. It falls back on the block's SVG root.
* @param browser The active WebdriverIO Browser object.
* @param block The block to click, as an interactable element.
* @param clickOptions The options to pass to webdriverio's element.click function.
* @return A Promise that resolves when the actions are completed.
*/
async function clickBlock(browser, block, clickOptions) {
const findableId = 'clickTargetElement';
// 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);
for (const input of block.inputList) {
for (const field of input.fieldRow) {
if (field instanceof Blockly.FieldLabel) {
field.getSvgRoot().id = newElemId;
return;
}
}
}
// No label field found. Fall back to the block's SVG root.
block.getSvgRoot().id = findableId;
},
block.id,
findableId,
);
// In the test context, get the Webdriverio Element that we've identified.
const elem = await browser.$(`#${findableId}`);
await elem.click(clickOptions);
// In the browser context, remove the ID.
await browser.execute((elemId) => {
const clickElem = document.getElementById(elemId);
clickElem.removeAttribute('id');
}, findableId);
}
/**
* @param browser The active WebdriverIO Browser object.
* @param categoryName The name of the toolbox category to find.
@@ -428,23 +472,13 @@ async function dragBlockFromMutatorFlyout(browser, mutatorBlock, type, x, y) {
* context menu item.
*
* @param browser The active WebdriverIO Browser object.
* @param block The block to click, as an interactable element. This block must
* @param block The block to click, as an interactable element. This block should
* have text on it, because we use the text element as the click target.
* @param itemText The display text of the context menu item to click.
* @return A Promise that resolves when the actions are completed.
*/
async function contextMenuSelect(browser, block, itemText) {
// Clicking will always happen in the middle of the block's bounds
// (including children) by default, which causes problems if it has holes
// (e.g. statement inputs).
// Instead, we'll click directly on the first bit of text on the block.
const clickEl = block.$('.blocklyText');
// Even though the element should definitely already exist,
// one specific test breaks if you remove this...
await clickEl.waitForExist();
await clickEl.click({button: 2});
await clickBlock(browser, block, {button: 2});
const item = await browser.$(`div=${itemText}`);
await item.waitForExist();
@@ -515,6 +549,7 @@ module.exports = {
getSelectedBlockElement,
getSelectedBlockId,
getBlockElementById,
clickBlock,
getCategory,
getNthBlockOfCategory,
getBlockTypeFromCategory,