blockly 12.3.0 → 12.4.0

package/tests/browser/test/toolbox_drag_test.mjs

@@ -0,0 +1,219 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Tests for the dragging out of the toolbox and flyout.
+ */
+
+import * as chai from 'chai';
+import {Key} from 'webdriverio';
+import {
+  getBlockTypeFromCategory,
+  getCategory,
+  PAUSE_TIME,
+  screenDirection,
+  testFileLocations,
+  testSetup,
+} from './test_setup.mjs';
+
+// Categories in the basic toolbox.
+const basicCategories = [
+  'Logic',
+  'Loops',
+  'Math',
+  'Text',
+  'Lists',
+  'Variables',
+  'Functions',
+];
+
+// Categories in the test blocks toolbox.
+const testCategories = [
+  'Align',
+  'Basic',
+  // Skip connections because it's an accordion that is already open.
+  // 'Connections',
+  'Row',
+  'Stack',
+  'Statement',
+  // Disabled due to #8466
+  // 'Drag',
+
+  // Skip fields because it's an accordion that is already open.
+  // 'Fields',
+  'Defaults',
+  'Numbers',
+  'Drop-downs',
+  // Note: images has a block that has a bad image source, but still builds and renders
+  // just fine.
+  'Images',
+  'Emoji! o((*^ᴗ^*))o',
+  'Validators',
+  'Mutators',
+  'Style',
+  'Serialization',
+];
+
+/**
+ * Get the type of the nth block in the specified category.
+ * @param browser The active WebdriverIO Browser object.
+ * @param categoryName The name of the category to inspect.
+ * @param n The index of the block to get
+ * @returns A Promise resolving to the type the block in the specified
+ *     category's flyout at index i.
+ */
+async function getNthBlockType(browser, categoryName, n) {
+  const category = await getCategory(browser, categoryName);
+  await category.click();
+  await browser.pause(PAUSE_TIME);
+
+  const blockType = await browser.execute((i) => {
+    return Blockly.getMainWorkspace()
+      .getFlyout()
+      .getWorkspace()
+      .getTopBlocks(false)[i].type;
+  }, n);
+
+  // Unicode escape to close flyout.
+  await browser.keys([Key.Escape]);
+  await browser.pause(PAUSE_TIME);
+  return blockType;
+}
+
+/**
+ * Get how many top-level blocks there are in the specified category.
+ * @param browser The active WebdriverIO Browser object.
+ * @param categoryName The name of the category to inspect.
+ * @returns A Promise resolving to the number of top-level blocks in the specified
+ *     category's flyout.
+ */
+async function getBlockCount(browser, categoryName) {
+  const category = await getCategory(browser, categoryName);
+  await category.click();
+  await browser.pause(PAUSE_TIME);
+
+  const blockCount = await browser.execute(() => {
+    return Blockly.getMainWorkspace()
+      .getFlyout()
+      .getWorkspace()
+      .getTopBlocks(false).length;
+  });
+
+  // Unicode escape to close flyout.
+  await browser.keys([Key.Escape]);
+  await browser.pause(PAUSE_TIME);
+  return blockCount;
+}
+
+/**
+ * Check whether the block at the given index in the flyout is disabled.
+ * @param browser The active WebdriverIO Browser object.
+ * @param i The index of the block in the currently open flyout.
+ * @returns A Promise resolving to true if the ith block in the flyout is
+ *     disabled, and false otherwise.
+ */
+async function isBlockDisabled(browser, i) {
+  return await browser.execute((n) => {
+    return !Blockly.getMainWorkspace()
+      .getFlyout()
+      .getWorkspace()
+      .getTopBlocks()
+      [n].isEnabled();
+  }, i);
+}
+
+/**
+ * Loop over a list of categories and click on each one to open it.
+ * @param browser The WebdriverIO Browser instance for this test.
+ * @param categoryList An array of category names, as strings.
+ * @param directionMultiplier 1 for LTR and -1 for RTL.
+ * @returns A Promise that resolves when all actions have finished.
+ */
+async function openCategories(browser, categoryList, directionMultiplier) {
+  let failureCount = 0;
+  for (const categoryName of categoryList) {
+    const blockCount = await getBlockCount(browser, categoryName);
+
+    try {
+      for (let i = 0; i < blockCount; i++) {
+        const category = await getCategory(browser, categoryName);
+        await category.click();
+        if (await isBlockDisabled(browser, i)) {
+          // Unicode escape to close flyout.
+          await browser.keys([Key.Escape]);
+          await browser.pause(PAUSE_TIME);
+          continue;
+        }
+        const blockType = await getNthBlockType(browser, categoryName, i);
+        const blockElem = await getBlockTypeFromCategory(
+          browser,
+          categoryName,
+          blockType,
+        );
+        await blockElem.dragAndDrop({x: 50 * directionMultiplier, y: 20});
+        await browser.pause(PAUSE_TIME);
+        // Should be one top level block on the workspace.
+        const topBlockCount = await browser.execute(() => {
+          return Blockly.getMainWorkspace().getTopBlocks(false).length;
+        });
+
+        if (topBlockCount != 1) {
+          failureCount++;
+          console.log(`fail: block ${i} in category ${categoryName}`);
+        }
+
+        // Clean up between blocks so they can't interact with each other.
+        await browser.execute(() => {
+          Blockly.getMainWorkspace().clear();
+        });
+        await browser.pause(PAUSE_TIME);
+      }
+    } catch (e) {
+      failureCount++;
+      throw e;
+    }
+  }
+  chai.assert.equal(failureCount, 0);
+}
+
+// TODO (#9217) These take too long to run and are very flakey. Need to pull
+// these out into their own test runner.
+suite('Open toolbox categories', function () {
+  this.timeout(0);
+
+  test('opening every toolbox category in the category toolbox in LTR', async function () {
+    this.browser = await testSetup(testFileLocations.PLAYGROUND);
+    await openCategories(this.browser, basicCategories, screenDirection.LTR);
+  });
+
+  test('opening every toolbox category in the category toolbox in RTL', async function () {
+    this.browser = await testSetup(testFileLocations.PLAYGROUND_RTL);
+    await openCategories(this.browser, basicCategories, screenDirection.RTL);
+  });
+
+  test('opening every toolbox category in the test toolbox in LTR', async function () {
+    this.browser = await testSetup(
+      testFileLocations.PLAYGROUND + '?toolbox=test-blocks',
+    );
+    await openCategories(this.browser, testCategories, screenDirection.LTR);
+  });
+
+  test('opening every toolbox category in the test toolbox in RTL', async function () {
+    this.browser = await testSetup(
+      testFileLocations.PLAYGROUND + '?toolbox=test-blocks&dir=rtl',
+    );
+    await openCategories(this.browser, testCategories, screenDirection.RTL);
+  });
+
+  test('clicking the toolbox itself does not open the flyout', async function () {
+    this.browser = await testSetup(testFileLocations.PLAYGROUND);
+    await this.browser.$('.blocklyToolbox').click();
+    const flyoutOpen = await this.browser.execute(() => {
+      return Blockly.getMainWorkspace().getFlyout().isVisible();
+    });
+    chai.assert.isFalse(flyoutOpen);
+  });
+});

package/tests/browser/test/workspace_comment_test.mjs

@@ -0,0 +1,220 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as chai from 'chai';
+import {testFileLocations, testSetup} from './test_setup.mjs';
+
+suite('Workspace comments', function () {
+  // Setting timeout to unlimited as the webdriver takes a longer time
+  // to run than most mocha test
+  this.timeout(0);
+
+  suiteSetup(async function () {
+    this.browser = await testSetup(
+      testFileLocations.PLAYGROUND + '?toolbox=test-blocks',
+    );
+  });
+
+  teardown(async function () {
+    await this.browser.execute(() => {
+      Blockly.getMainWorkspace().clear();
+    });
+  });
+
+  async function createComment(browser) {
+    return await browser.execute(() => {
+      const comment = new Blockly.comments.RenderedWorkspaceComment(
+        Blockly.getMainWorkspace(),
+      );
+      return comment.id;
+    });
+  }
+
+  async function hasClass(elem, className) {
+    return (await elem.getAttribute('class')).split(' ').includes(className);
+  }
+
+  suite('Collapsing and uncollapsing', function () {
+    async function isCommentCollapsed(browser, id) {
+      return await browser.execute(
+        (id) => Blockly.getMainWorkspace().getCommentById(id).isCollapsed(),
+        id,
+      );
+    }
+
+    suite('Collapsing', function () {
+      test('collapsing updates the collapse value', async function () {
+        const commentId = await createComment(this.browser);
+
+        const foldout = await this.browser.$(
+          '.blocklyComment .blocklyFoldoutIcon',
+        );
+        await foldout.click();
+
+        chai.assert.isTrue(
+          await isCommentCollapsed(this.browser, commentId),
+          'Expected the comment to be collapsed',
+        );
+      });
+
+      test('collapsing adds the css class', async function () {
+        await createComment(this.browser);
+
+        const foldout = await this.browser.$(
+          '.blocklyComment .blocklyFoldoutIcon',
+        );
+        await foldout.click();
+
+        const comment = await this.browser.$('.blocklyComment');
+        chai.assert.isTrue(
+          await hasClass(comment, 'blocklyCollapsed'),
+          'Expected the comment to have the blocklyCollapsed class',
+        );
+      });
+    });
+
+    suite('Uncollapsing', function () {
+      async function collapseComment(browser, id) {
+        await browser.execute((id) => {
+          Blockly.getMainWorkspace().getCommentById(id).setCollapsed(true);
+        }, id);
+      }
+
+      test('collapsing updates the collapse value', async function () {
+        const commentId = await createComment(this.browser);
+        await collapseComment(this.browser, commentId);
+
+        const foldout = await this.browser.$(
+          '.blocklyComment .blocklyFoldoutIcon',
+        );
+        await foldout.click();
+
+        chai.assert.isFalse(
+          await isCommentCollapsed(this.browser, commentId),
+          'Expected the comment to not be collapsed',
+        );
+      });
+
+      test('collapsing adds the css class', async function () {
+        const commentId = await createComment(this.browser);
+        await collapseComment(this.browser, commentId);
+
+        const foldout = await this.browser.$(
+          '.blocklyComment .blocklyFoldoutIcon',
+        );
+        await foldout.click();
+
+        const comment = await this.browser.$('.blocklyComment');
+        chai.assert.isFalse(
+          await hasClass(comment, 'blocklyCollapsed'),
+          'Expected the comment to not have the blocklyCollapsed class',
+        );
+      });
+    });
+  });
+
+  suite('Deleting', function () {
+    async function makeDeleteVisible(browser, commentId) {
+      await browser.execute((id) => {
+        document.querySelector(
+          '.blocklyComment .blocklyDeleteIcon',
+        ).style.display = 'block';
+        const comment = Blockly.getMainWorkspace().getCommentById(id);
+        comment.setSize(comment.getSize());
+      }, commentId);
+    }
+
+    async function commentIsDisposed(browser, commentId) {
+      return await browser.execute(
+        (id) => !Blockly.getMainWorkspace().getCommentById(id),
+        commentId,
+      );
+    }
+
+    test('deleting disposes of comment', async function () {
+      const commentId = await createComment(this.browser);
+      await makeDeleteVisible(this.browser, commentId);
+
+      const deleteIcon = await this.browser.$(
+        '.blocklyComment .blocklyDeleteIcon',
+      );
+      await deleteIcon.click();
+
+      chai.assert.isTrue(
+        await commentIsDisposed(this.browser, commentId),
+        'Expected the comment model to be disposed',
+      );
+    });
+
+    test('deleting disposes of DOM elements', async function () {
+      const commentId = await createComment(this.browser);
+      await makeDeleteVisible(this.browser, commentId);
+
+      const deleteIcon = await this.browser.$(
+        '.blocklyComment .blocklyDeleteIcon',
+      );
+      await deleteIcon.click();
+
+      chai.assert.isFalse(
+        await this.browser.$('.blocklyComment').isExisting(),
+        'Expected the comment DOM elements to not exist',
+      );
+    });
+  });
+
+  suite('Typing', function () {
+    async function getCommentText(browser, id) {
+      return await browser.execute(
+        (id) => Blockly.getMainWorkspace().getCommentById(id).getText(),
+        id,
+      );
+    }
+
+    test('typing updates the text value', async function () {
+      const commentId = await createComment(this.browser);
+
+      const textArea = await this.browser.$('.blocklyComment .blocklyTextarea');
+      await textArea.addValue('test text');
+      // Deselect text area to fire browser change event.
+      await this.browser.$('.blocklyWorkspace').click();
+
+      chai.assert.equal(
+        await getCommentText(this.browser, commentId),
+        'test text',
+        'Expected the comment model text to match the entered text',
+      );
+    });
+  });
+
+  suite('Resizing', function () {
+    async function getCommentSize(browser, id) {
+      return await browser.execute(
+        (id) => Blockly.getMainWorkspace().getCommentById(id).getSize(),
+        id,
+      );
+    }
+
+    test('resizing updates the size value', async function () {
+      const commentId = await createComment(this.browser);
+      const origSize = await getCommentSize(this.browser, commentId);
+      const delta = {x: 20, y: 20};
+
+      const resizeHandle = await this.browser.$(
+        '.blocklyComment .blocklyResizeHandle',
+      );
+      await resizeHandle.dragAndDrop(delta);
+      const newSize = await getCommentSize(this.browser, commentId);
+      chai.assert.isTrue(
+        Math.abs(newSize.width - (origSize.width + delta.x)) < 1,
+        'Expected the comment model size to match the resized size',
+      );
+      chai.assert.isTrue(
+        Math.abs(newSize.height - (origSize.height + delta.y)) < 1,
+        'Expected the comment model size to match the resized size',
+      );
+    });
+  });
+});

package/tests/compile/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Blockly: Advanced Compilation Test</title>
+  <script src="main_compressed.js"></script>
+  <script src="../../build/msg/en.js"></script>
+  <style>
+    body {
+      background-color: #fff;
+      font-family: sans-serif;
+    }
+    h1 {
+      font-weight: normal;
+      font-size: 140%;
+    }
+    .blockRenderDebug {
+      display: none;
+    }
+  </style>
+</head>
+<body>
+  <h1>Blockly: Advanced Compilation Test</h1>
+
+  <p>To run this test manually, run `npm run test:compile:advanced`
+  from the command line, then open this file in your web browser.</p>
+
+  <p>Measure the size of main_compressed.js (295kb as of October 2017), then reload
+  this page and see if Blockly works.</p>
+
+  <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
+  <xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
+    <block type="controls_if"></block>
+    <block type="logic_compare"></block>
+    <block type="controls_repeat_ext"></block>
+    <block type="math_number"></block>
+    <block type="math_arithmetic"></block>
+    <block type="text"></block>
+    <block type="text_print"></block>
+    <block type="test_style_hex1"></block>
+  </xml>
+</body>
+</html>

package/tests/compile/main.js

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// Former goog.module ID: Main
+
+// Core
+// Either require 'Blockly.requires', or just the components you use:
+/* eslint-disable-next-line no-unused-vars */
+// TODO: I think we need to make sure these get exported?
+// import type {BlocklyOptions} from '../../core/blockly_options.js';
+import {inject} from '../../build/src/core/inject.js';
+import {getMainWorkspace} from '../../build/src/core/common.js';
+import {Msg} from '../../build/src/core/msg.js';
+import '../../build/src/core/renderers/geras/renderer.js';
+import '../../build/src/core/flyout_vertical.js';
+
+// Needed to ensure internal monkey-patching of newBlock is done.
+import '../../build/src/core/blockly.js';
+
+// Blocks
+import '../../build/src/blocks/logic.js';
+import '../../build/src/blocks/loops.js';
+import '../../build/src/blocks/math.js';
+import '../../build/src/blocks/text.js';
+import './test_blocks.js';
+
+
+function init() {
+  Object.assign(Msg, window['Blockly']['Msg']);
+  inject('blocklyDiv', /** @type {BlocklyOptions} */ ({
+           'toolbox': document.getElementById('toolbox')
+         }));
+}
+window.addEventListener('load', init);
+
+
+// Called externally from our test driver to see if Blockly loaded more or less
+// correctly.  This is not a comprehensive test, but it will catch catastrophic
+// fails (by far the most common cases).
+window['healthCheck'] = function() {
+  // Just check that we have a reasonable number of blocks in the flyout.
+  // Expecting 8 blocks, but leave a wide margin.
+  try {
+    const blockCount =
+        getMainWorkspace().getFlyout().getWorkspace().getTopBlocks().length;
+    return (blockCount > 5 && blockCount < 100);
+  } catch {
+    return false;
+  }
+};

package/tests/compile/test_blocks.js

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Test blocks for advanced compilation.
+ */
+
+// Former goog.module ID: testBlocks
+
+import {defineBlocksWithJsonArray}  from '../../build/src/core/common.js';
+
+defineBlocksWithJsonArray([
+    {
+      'type': 'test_style_hex1',
+      'message0': 'Block color: Bright purple %1 %2 %3 %4',
+      'args0': [
+        {
+          'type': 'field_input',
+          'name': 'TEXT',
+          'text': '#992aff',
+        },
+        {
+          'type': 'field_dropdown',
+          'name': 'DROPDOWN',
+          'options': [
+            ['option', 'ONE'],
+            ['option', 'TWO'],
+          ],
+        },
+        {
+          'type': 'field_checkbox',
+          'name': 'NAME',
+          'checked': true,
+        },
+        {
+          'type': 'input_value',
+          'name': 'NAME',
+        },
+      ],
+      'previousStatement': null,
+      'nextStatement': null,
+      'colour': '#992aff',
+    }
+]);

package/tests/compile/webdriver.js

@@ -0,0 +1,81 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Node.js script to check the health of the compile test in
+ * Chrome, via webdriver.
+ */
+const webdriverio = require('webdriverio');
+
+
+/**
+ * Run the generator for a given language and save the results to a file.
+ * @param {Thenable} browser A Thenable managing the processing of the browser
+ *     tests.
+ */
+async function runHealthCheckInBrowser(browser) {
+  const result = await browser.execute(() => {
+      return healthCheck();
+  })
+  if (!result) throw Error('Health check failed in advanced compilation test.');
+  console.log('Health check completed successfully.');
+}
+
+/**
+ * Runs the generator tests in Chrome. It uses webdriverio to
+ * launch Chrome and load index.html. Outputs a summary of the test results
+ * to the console and outputs files for later validation.
+ * @return the Thenable managing the processing of the browser tests.
+ */
+async function runCompileCheckInBrowser() {
+  const options = {
+    capabilities: {
+      browserName: 'chrome',
+    },
+    logLevel: 'warn',
+  };
+  // Run in headless mode on Github Actions.
+  if (process.env.CI) {
+    options.capabilities['goog:chromeOptions'] = {
+      args: ['--headless', '--no-sandbox', '--disable-dev-shm-usage']
+    };
+  } else {
+    // --disable-gpu is needed to prevent Chrome from hanging on Linux with
+    // NVIDIA drivers older than v295.20. See
+    // https://github.com/google/blockly/issues/5345 for details.
+    options.capabilities['goog:chromeOptions'] = {
+      args: ['--disable-gpu']
+    };
+  }
+
+  const url = 'file://' + __dirname + '/index.html';
+
+  console.log('Starting webdriverio...');
+  const browser = await webdriverio.remote(options);
+  console.log('Loading url: ' + url);
+  await browser.url(url);
+
+  await runHealthCheckInBrowser(browser);
+
+  await browser.deleteSession();
+}
+
+if (require.main === module) {
+  runCompileCheckInBrowser().catch(e => {
+    console.error(e);
+    process.exit(1);
+  }).then(function(result) {
+    if (result) {
+      console.log('Compile test failed');
+      process.exit(1);
+    } else {
+      console.log('Compile test passed');
+      process.exit(0);
+    }
+  });
+}
+
+module.exports = {runCompileCheckInBrowser};