CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-07 17:10:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix!: refactor comment icon (#7128)

Browse Source 
* fix: add basic comment icon

* fix: add using comment icon

* chore: delete old comment icon

* chore: add docs to the comment icon

* chore: move Comment to icons.CommentIcon

* chore: mode properties to module level

* chore: properly override and call super

* chore: remove .comment and .commentIcon_

* chore: cleanup test

* chore: deprecate getCommentIcon and getCommentText

* chore: change imports to import type

* chore: refactor code for paren peace

* chore: fix lint and make it error

* chore: remove change to block JS file

* chore: fix css

* chore: add renamings

* chore: format
This commit is contained in:
Beka Westberg
2023-06-02 09:53:05 -07:00
committed by GitHub
parent f4e378d096
commit 50d9474db5
19 changed files with 518 additions and 617 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
tests/mocha/block_test.js
View File

@@ -1235,9 +1235,21 @@ suite('Blocks', function () {
const calls = eventSpy.getCalls();
const event = calls[calls.length - 1].args[0];
chai.assert.equal(event.type, eventUtils.BLOCK_CHANGE);
chai.assert.equal(event.element, 'comment');
chai.assert.equal(event.oldValue, oldValue);
chai.assert.equal(event.newValue, newValue);
chai.assert.equal(
event.element,
'comment',
'Expected the element to be a comment'
);
chai.assert.equal(
event.oldValue,
oldValue,
'Expected the old values to match'
);
chai.assert.equal(
event.newValue,
newValue,
'Expected the new values to match'
);
}
function assertNoCommentEvent(eventSpy) {
const calls = eventSpy.getCalls();
@@ -1318,37 +1330,23 @@ suite('Blocks', function () {
});
test('Set While Visible - Editable', function () {
this.block.setCommentText('test1');
const icon = this.block.getCommentIcon();
icon.setVisible(true);
const icon = this.block.getIcon(Blockly.icons.CommentIcon.TYPE);
icon.setBubbleVisible(true);
this.block.setCommentText('test2');
chai.assert.equal(this.block.getCommentText(), 'test2');
assertCommentEvent(this.eventsFireSpy, 'test1', 'test2');
chai.assert.equal(icon.textarea_.value, 'test2');
});
test('Set While Visible - NonEditable', function () {
this.block.setCommentText('test1');
// Restored up by call to sinon.restore() in sharedTestTeardown()
sinon.stub(this.block, 'isEditable').returns(false);
const icon = this.block.getCommentIcon();
icon.setVisible(true);
const icon = this.block.getIcon(Blockly.icons.CommentIcon.TYPE);
icon.setBubbleVisible(true);
this.block.setCommentText('test2');
chai.assert.equal(this.block.getCommentText(), 'test2');
assertCommentEvent(this.eventsFireSpy, 'test1', 'test2');
chai.assert.equal(
icon.paragraphElement_.firstChild.textContent,
'test2'
);
});
test('Get Text While Editing', function () {
this.block.setCommentText('test1');
const icon = this.block.getCommentIcon();
icon.setVisible(true);
icon.textarea_.value = 'test2';
icon.textarea_.dispatchEvent(new Event('input'));
chai.assert.equal(this.block.getCommentText(), 'test2');
});
});
});
@@ -1687,7 +1685,7 @@ suite('Blocks', function () {
}
const icons = block.getIcons();
for (let i = 0, icon; (icon = icons[i]); i++) {
chai.assert.isFalse(icon.isVisible());
chai.assert.isFalse(icon.bubbleIsVisible());
}
const input = block.getInput(Blockly.Block.COLLAPSED_INPUT_NAME);

6
tests/mocha/comment_deserialization_test.js
View File

@@ -58,14 +58,14 @@ suite('Comment Deserialization', function () {
function assertComment(workspace, text) {
// Show comment.
const block = workspace.getAllBlocks()[0];
block.comment.setVisible(true);
const icon = block.getIcon(Blockly.icons.CommentIcon.TYPE);
icon.setBubbleVisible(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);
chai.assert.equal(icon.getText(), text);
}
test('Trashcan', function () {
// Create block.

44
tests/mocha/comment_test.js
View File

@@ -31,8 +31,7 @@ suite('Comments', function () {
Blockly.utils.xml.textToDom('<block type="empty_block"/>'),
this.workspace
);
this.comment = new Blockly.Comment(this.block);
this.comment.computeIconLocation();
this.comment = new Blockly.icons.CommentIcon(this.block);
});
teardown(function () {
sharedTestTeardown.call(this);
@@ -43,21 +42,16 @@ suite('Comments', function () {
});
function assertEditable(comment) {
chai.assert.isNotOk(comment.paragraphElement_);
chai.assert.isOk(comment.textarea_);
chai.assert.equal(comment.textarea_.value, 'test text');
chai.assert.isNotOk(comment.textBubble);
chai.assert.isOk(comment.textInputBubble);
}
function assertNotEditable(comment) {
chai.assert.isNotOk(comment.textarea_);
chai.assert.isOk(comment.paragraphElement_);
chai.assert.equal(
comment.paragraphElement_.firstChild.textContent,
'test text'
);
chai.assert.isNotOk(comment.textInputBubble);
chai.assert.isOk(comment.textBubble);
}
test('Editable', function () {
this.comment.setVisible(true);
chai.assert.isTrue(this.comment.isVisible());
this.comment.setBubbleVisible(true);
chai.assert.isTrue(this.comment.bubbleIsVisible());
assertEditable(this.comment);
assertEventFired(
this.eventsFireStub,
@@ -70,9 +64,9 @@ suite('Comments', function () {
test('Not Editable', function () {
sinon.stub(this.block, 'isEditable').returns(false);
this.comment.setVisible(true);
this.comment.setBubbleVisible(true);
chai.assert.isTrue(this.comment.isVisible());
chai.assert.isTrue(this.comment.bubbleIsVisible());
assertNotEditable(this.comment);
assertEventFired(
this.eventsFireStub,
@@ -83,12 +77,12 @@ suite('Comments', function () {
);
});
test('Editable -> Not Editable', function () {
this.comment.setVisible(true);
this.comment.setBubbleVisible(true);
sinon.stub(this.block, 'isEditable').returns(false);
this.comment.updateEditable();
chai.assert.isTrue(this.comment.isVisible());
chai.assert.isTrue(this.comment.bubbleIsVisible());
assertNotEditable(this.comment);
assertEventFired(
this.eventsFireStub,
@@ -101,12 +95,12 @@ suite('Comments', function () {
test('Not Editable -> Editable', function () {
const editableStub = sinon.stub(this.block, 'isEditable').returns(false);
this.comment.setVisible(true);
this.comment.setBubbleVisible(true);
editableStub.returns(true);
this.comment.updateEditable();
chai.assert.isTrue(this.comment.isVisible());
chai.assert.isTrue(this.comment.bubbleIsVisible());
assertEditable(this.comment);
assertEventFired(
this.eventsFireStub,
@@ -130,23 +124,21 @@ suite('Comments', function () {
assertBubbleSize(comment, 80, 160);
}
test('Set Size While Visible', function () {
this.comment.setVisible(true);
const bubbleSizeSpy = sinon.spy(this.comment.bubble_, 'setBubbleSize');
this.comment.setBubbleVisible(true);
assertBubbleSizeDefault(this.comment);
this.comment.setBubbleSize(100, 100);
this.comment.setBubbleSize(new Blockly.utils.Size(100, 100));
assertBubbleSize(this.comment, 100, 100);
sinon.assert.calledOnce(bubbleSizeSpy);
this.comment.setVisible(false);
this.comment.setBubbleVisible(false);
assertBubbleSize(this.comment, 100, 100);
});
test('Set Size While Invisible', function () {
assertBubbleSizeDefault(this.comment);
this.comment.setBubbleSize(100, 100);
this.comment.setBubbleSize(new Blockly.utils.Size(100, 100));
assertBubbleSize(this.comment, 100, 100);
this.comment.setVisible(true);
this.comment.setBubbleVisible(true);
assertBubbleSize(this.comment, 100, 100);
});
});

7
tests/mocha/jso_serialization_test.js
View File

@@ -260,7 +260,7 @@ suite('JSO Serialization', function () {
test('Pinned', function () {
const block = this.workspace.newBlock('row_block');
block.setCommentText('test');
block.commentModel.pinned = true;
block.getIcon(Blockly.icons.CommentIcon.TYPE).setBubbleVisible(true);
const jso = Blockly.serialization.blocks.save(block);
assertProperty(jso, 'icons', {
'comment': {
@@ -275,8 +275,9 @@ suite('JSO Serialization', function () {
test('Size', function () {
const block = this.workspace.newBlock('row_block');
block.setCommentText('test');
block.commentModel.size.height = 40;
block.commentModel.size.width = 320;
block
.getIcon(Blockly.icons.CommentIcon.TYPE)
.setBubbleSize(new Blockly.utils.Size(320, 40));
const jso = Blockly.serialization.blocks.save(block);
assertProperty(jso, 'icons', {
'comment': {

67
tests/mocha/xml_test.js
View File

@@ -441,7 +441,9 @@ suite('XML', function () {
});
test('Size', function () {
this.block.setCommentText('test text');
this.block.getCommentIcon().setBubbleSize(100, 200);
this.block
.getCommentIcon()
.setBubbleSize(new Blockly.utils.Size(100, 200));
const xml = Blockly.Xml.blockToDom(this.block);
const commentXml = xml.firstChild;
chai.assert.equal(commentXml.tagName, 'comment');
@@ -450,7 +452,7 @@ suite('XML', function () {
});
test('Pinned True', function () {
this.block.setCommentText('test text');
this.block.getCommentIcon().setVisible(true);
this.block.getCommentIcon().setBubbleVisible(true);
const xml = Blockly.Xml.blockToDom(this.block);
const commentXml = xml.firstChild;
chai.assert.equal(commentXml.tagName, 'comment');
@@ -629,10 +631,13 @@ suite('XML', function () {
),
this.workspace
);
chai.assert.deepEqual(block.commentModel.size, {
width: 100,
height: 200,
});
chai.assert.deepEqual(
block.getIcon(Blockly.icons.CommentIcon.TYPE).getBubbleSize(),
{
width: 100,
height: 200,
}
);
});
test('Pinned True', function () {
const block = Blockly.Xml.domToBlock(
@@ -643,7 +648,9 @@ suite('XML', function () {
),
this.workspace
);
chai.assert.isTrue(block.commentModel.pinned);
chai.assert.isTrue(
block.getIcon(Blockly.icons.CommentIcon.TYPE).bubbleIsVisible()
);
});
test('Pinned False', function () {
const block = Blockly.Xml.domToBlock(
@@ -654,7 +661,9 @@ suite('XML', function () {
),
this.workspace
);
chai.assert.isFalse(block.commentModel.pinned);
chai.assert.isFalse(
block.getIcon(Blockly.icons.CommentIcon.TYPE).bubbleIsVisible()
);
});
test('Pinned Undefined', function () {
const block = Blockly.Xml.domToBlock(
@@ -665,7 +674,9 @@ suite('XML', function () {
),
this.workspace
);
chai.assert.isFalse(block.commentModel.pinned);
chai.assert.isFalse(
block.getIcon(Blockly.icons.CommentIcon.TYPE).bubbleIsVisible()
);
});
});
suite('Rendered', function () {
@@ -686,7 +697,7 @@ suite('XML', function () {
this.workspace
);
chai.assert.equal(block.getCommentText(), 'test text');
chai.assert.isNotNull(block.getCommentIcon());
chai.assert.isOk(block.getCommentIcon());
});
test('No Text', function () {
const block = Blockly.Xml.domToBlock(
@@ -698,7 +709,7 @@ suite('XML', function () {
this.workspace
);
chai.assert.equal(block.getCommentText(), '');
chai.assert.isNotNull(block.getCommentIcon());
chai.assert.isOk(block.getIcon(Blockly.icons.CommentIcon.TYPE));
});
test('Size', function () {
const block = Blockly.Xml.domToBlock(
@@ -709,11 +720,7 @@ suite('XML', function () {
),
this.workspace
);
chai.assert.deepEqual(block.commentModel.size, {
width: 100,
height: 200,
});
chai.assert.isNotNull(block.getCommentIcon());
chai.assert.isOk(block.getIcon(Blockly.icons.CommentIcon.TYPE));
chai.assert.deepEqual(block.getCommentIcon().getBubbleSize(), {
width: 100,
height: 200,
@@ -730,9 +737,9 @@ suite('XML', function () {
this.workspace
);
this.clock.runAll();
chai.assert.isTrue(block.commentModel.pinned);
chai.assert.isNotNull(block.getCommentIcon());
chai.assert.isTrue(block.getCommentIcon().isVisible());
const icon = block.getIcon(Blockly.icons.CommentIcon.TYPE);
chai.assert.isOk(icon);
chai.assert.isTrue(icon.bubbleIsVisible());
});
test('Pinned False', function () {
const block = Blockly.Xml.domToBlock(
@@ -744,9 +751,9 @@ suite('XML', function () {
this.workspace
);
this.clock.runAll();
chai.assert.isFalse(block.commentModel.pinned);
chai.assert.isNotNull(block.getCommentIcon());
chai.assert.isFalse(block.getCommentIcon().isVisible());
const icon = block.getIcon(Blockly.icons.CommentIcon.TYPE);
chai.assert.isOk(icon);
chai.assert.isFalse(icon.bubbleIsVisible());
});
test('Pinned Undefined', function () {
const block = Blockly.Xml.domToBlock(
@@ -758,9 +765,9 @@ suite('XML', function () {
this.workspace
);
this.clock.runAll();
chai.assert.isFalse(block.commentModel.pinned);
chai.assert.isNotNull(block.getCommentIcon());
chai.assert.isFalse(block.getCommentIcon().isVisible());
const icon = block.getIcon(Blockly.icons.CommentIcon.TYPE);
chai.assert.isOk(icon);
chai.assert.isFalse(icon.bubbleIsVisible());
});
});
});
@@ -938,8 +945,9 @@ suite('XML', function () {
this.renderedWorkspace
);
block.setCommentText('test text');
block.getCommentIcon().setBubbleSize(100, 100);
block.getCommentIcon().setVisible(true);
const icon = block.getIcon(Blockly.icons.CommentIcon.TYPE);
icon.setBubbleSize(new Blockly.utils.Size(100, 100));
icon.setBubbleVisible(true);
assertRoundTrip(this.renderedWorkspace, this.headlessWorkspace);
});
});
@@ -950,8 +958,9 @@ suite('XML', function () {
this.headlessWorkspace
);
block.setCommentText('test text');
block.commentModel.size = new Blockly.utils.Size(100, 100);
block.commentModel.pinned = true;
const icon = block.getIcon(Blockly.icons.CommentIcon.TYPE);
icon.setBubbleSize(new Blockly.utils.Size(100, 100));
icon.setBubbleVisible(true);
this.clock.runAll();