mirror of
https://github.com/google/blockly.git
synced 2026-01-08 09:30:06 +01:00
chore: add webdriver tests for workspace comments (#7954)
* chore: add collapse and uncollapse tests * chore: add typing test * chore: add resizing test * chore: add delete tests * chore: add better assertion messages * chore: copyright year
This commit is contained in:
Beka Westberg
GitHub
224
tests/browser/test/workspace_comment_test.js
Normal file
224
tests/browser/test/workspace_comment_test.js
Normal file
@@ -0,0 +1,224 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2024 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
const chai = require('chai');
|
||||
const sinon = require('sinon');
|
||||
const {Key} = require('webdriverio');
|
||||
const {testSetup, testFileLocations} = require('./test_setup');
|
||||
|
||||
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 () {
|
||||
sinon.restore();
|
||||
|
||||
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);
|
||||
|
||||
chai.assert.deepEqual(
|
||||
await getCommentSize(this.browser, commentId),
|
||||
{
|
||||
width: origSize.width + delta.x,
|
||||
height: origSize.height + delta.y,
|
||||
},
|
||||
'Expected the comment model size to match the resized size',
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user