fix: comments not being restored when dragging (#6011)

* fix comment deserialization

* add restore comment test

* Fix comment.

* fix: Modify test structure.

core/serialization/blocks.js

@@ -514,8 +514,13 @@ const loadIcons = function(block, state) {
   const comment = state['icons']['comment'];
   if (comment) {
     block.setCommentText(comment['text']);
-    block.commentModel.pinned = comment['pinned'];
-    block.commentModel.size = new Size(comment['width'], comment['height']);
+    // Load if saved. (Cleaned unnecessary attributes when in the trashcan.)
+    if ('pinned' in comment) {
+      block.commentModel.pinned = comment['pinned'];
+    }
+    if ('width' in comment && 'height' in comment) {
+      block.commentModel.size = new Size(comment['width'], comment['height']);
+    }
     if (comment['pinned'] && block.rendered && !block.isInFlyout) {
       // Give the block a chance to be positioned and rendered before showing.
       const blockSvg = /** @type {!BlockSvg} */ (block);

tests/deps.mocha.js

@@ -4,6 +4,7 @@ goog.addDependency('../../tests/mocha/block_change_event_test.js', ['Blockly.tes
 goog.addDependency('../../tests/mocha/block_create_event_test.js', ['Blockly.test.blockCreateEvent'], ['Blockly.Events.utils', 'Blockly.test.helpers.events', 'Blockly.test.helpers.setupTeardown'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../tests/mocha/block_json_test.js', ['Blockly.test.blockJson'], ['Blockly.Input'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../tests/mocha/block_test.js', ['Blockly.test.blocks'], ['Blockly.ConnectionType', 'Blockly.Events.utils', 'Blockly.blocks', 'Blockly.test.helpers.blockDefinitions', 'Blockly.test.helpers.setupTeardown', 'Blockly.test.helpers.warnings'], {'lang': 'es6', 'module': 'goog'});
+goog.addDependency('../../tests/mocha/comment_deserialization_test.js', ['Blockly.test.commentDeserialization'], ['Blockly.test.helpers.setupTeardown', 'Blockly.test.helpers.userInput'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../tests/mocha/comment_test.js', ['Blockly.test.comments'], ['Blockly.Events.utils', 'Blockly.test.helpers.events', 'Blockly.test.helpers.setupTeardown'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../tests/mocha/connection_checker_test.js', ['Blockly.test.connectionChecker'], ['Blockly.ConnectionType', 'Blockly.test.helpers.setupTeardown'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../tests/mocha/connection_db_test.js', ['Blockly.test.connectionDb'], ['Blockly.ConnectionType', 'Blockly.test.helpers.setupTeardown'], {'lang': 'es6', 'module': 'goog'});

tests/mocha/comment_deserialization_test.js

@@ -0,0 +1,117 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+goog.module('Blockly.test.commentDeserialization');
+
+const {sharedTestSetup, sharedTestTeardown} = goog.require('Blockly.test.helpers.setupTeardown');
+const {simulateClick} = goog.require('Blockly.test.helpers.userInput');
+
+
+suite('Comment Deserialization', function() {
+  setup(function() {
+    sharedTestSetup.call(this);
+    Blockly.defineBlocksWithJsonArray([
+      {
+        "type": "empty_block",
+        "message0": "",
+        "args0": [],
+      },
+    ]);
+    const toolboxXml = `
+    <xml>
+      <category name="test">
+        <block type="empty_block">
+          <comment pinned="true" h="80" w="160">test toolbox text</comment>
+        </block>
+      </category>
+    </xml>
+    `;
+    this.workspace = Blockly.inject('blocklyDiv', {
+      comments: true,
+      scrollbars: true,
+      trashcan: true,
+      maxTrashcanContents: Infinity,
+      toolbox: Blockly.Xml.textToDom(toolboxXml),
+    });
+  });
+  teardown(function() {
+    sharedTestTeardown.call(this);
+  });
+  suite('Pattern', function() {
+    teardown(function() {
+      // Delete all blocks.
+      this.workspace.clear();
+    });
+    function createBlock(workspace) {
+      const block = Blockly.Xml.domToBlock(Blockly.Xml.textToDom(
+        '<block type="empty_block"/>'
+      ), workspace);
+      block.setCommentText('test text');
+      return block;
+    }
+    function assertComment(workspace, text) {
+      // Show comment.
+      const block = workspace.getAllBlocks()[0];
+      block.comment.setVisible(true);
+      // Check comment bubble size.
+      const comment = block.getCommentIcon();
+      const bubbleSize = comment.getBubbleSize();
+      chai.assert.isNotNaN(bubbleSize.width);
+      chai.assert.isNotNaN(bubbleSize.height);
+      // Check comment text.
+      chai.assert.equal(comment.textarea_.value, text);
+    }
+    test('Trashcan', function() {
+      // Create block.
+      this.block = createBlock(this.workspace);
+      // Delete block.
+      this.block.checkAndDelete();
+      chai.assert.equal(this.workspace.getAllBlocks().length, 0);
+      // Open trashcan.
+      simulateClick(this.workspace.trashcan.svgGroup_);
+      // Place from trashcan.
+      simulateClick(this.workspace.trashcan.flyout.svgGroup_.querySelector('.blocklyDraggable'));
+      chai.assert.equal(this.workspace.getAllBlocks().length, 1);
+      // Check comment.
+      assertComment(this.workspace, 'test text');
+    });
+    test('Undo', function() {
+      // Create block.
+      this.block = createBlock(this.workspace);
+      // Delete block.
+      this.block.checkAndDelete();
+      chai.assert.equal(this.workspace.getAllBlocks().length, 0);
+      // Undo.
+      this.workspace.undo(false);
+      chai.assert.equal(this.workspace.getAllBlocks().length, 1);
+      // Check comment.
+      assertComment(this.workspace, 'test text');
+    });
+    test('Redo', function() {
+      // Create block.
+      this.block = createBlock(this.workspace);
+      // Undo & undo.
+      this.workspace.undo(false);
+      this.workspace.undo(false);
+      chai.assert.equal(this.workspace.getAllBlocks().length, 0);
+      // Redo & redo.
+      this.workspace.undo(true);
+      this.workspace.undo(true);
+      chai.assert.equal(this.workspace.getAllBlocks().length, 1);
+      // Check comment.
+      assertComment(this.workspace, 'test text');
+    });
+    test('Toolbox', function() {
+      // Place from toolbox.
+      const toolbox = this.workspace.getToolbox();
+      simulateClick(toolbox.HtmlDiv.querySelector('.blocklyTreeRow'));
+      simulateClick(toolbox.getFlyout().svgGroup_.querySelector('.blocklyDraggable'));
+      chai.assert.equal(this.workspace.getAllBlocks().length, 1);
+      // Check comment.
+      assertComment(this.workspace, 'test toolbox text');
+    });
+  });
+});

tests/mocha/index.html

@@ -60,6 +60,7 @@
       goog.require('Blockly.test.blockJson');
       goog.require('Blockly.test.blocks');
       goog.require('Blockly.test.comments');
+      goog.require('Blockly.test.commentDeserialization');
       goog.require('Blockly.test.connectionChecker');
       goog.require('Blockly.test.connectionDb');
       goog.require('Blockly.test.connection');