mirror of
https://github.com/google/blockly.git
synced 2026-01-05 08:00:09 +01:00
## The basics - [x] I [validated my changes](https://developers.google.com/blockly/guides/contribute/core#making_and_verifying_a_change) ## The details ### Resolves Fixes #8940 Fixes #8954 Fixes #8955 ### Proposed Changes This updates `LineCursor` to use `FocusManager` rather than selection (principally) as the source of truth. ### Reason for Changes Ensuring that keyboard navigation works correctly with eventual screen reader support requires ensuring that ever navigated component is focused, and this is primarily what `FocusManager` has been designed to do. Since these nodes are already focused, `FocusManager` can be used as the primary source of truth for determining where the user currently has navigated, and where to go next. Previously, `LineCursor` relied on selection for this purpose, but selection is now automatically updated (for blocks) using focus-controlled `focus` and `blur` callbacks. Note that the cursor will still fall back to synchronizing with selection state, though this will be removed once the remaining work to eliminate `MarkerSvg` has concluded (which requires further consideration on the keyboard navigation side viz-a-viz styling and CSS decisions) and once mouse clicks are synchronized with focus management. Note that the changes in this PR are closely tied to https://github.com/google/blockly-keyboard-experimentation/pull/482 as both are necessary in order for the keyboard navigation plugin to correctly work with `FocusManager`. Some other noteworthy changes: - Some special handling exists for flyouts to handle navigating across stacks (per the current cursor design). - `FocusableTreeTraverser` is needed by the keyboard navigation plugin (in https://github.com/google/blockly-keyboard-experimentation/pull/482) so it's now being exported. - `FocusManager` had one bug that's now patched and tested in this PR: it didn't handle the case of the browser completely forcing focus loss. It would continue to maintain active focus even though no tracked elements now hold focus. One such case is the element being deleted, but there are other cases where this can happen (such as with dialog prompts). - `FocusManager` had some issues from #8909 wherein it would overeagerly call tree focus callbacks and slightly mismanage the passive node. Since tests haven't yet been added for these lifecycle callbacks, these cases weren't originally caught (per #8910). - `FocusManager` was updated to move the tracked manager into a static function so that it can be replaced in tests. This was done to facilitate changes to setup_teardown.js to ensure that a unique `FocusManager` exists _per-test_. It's possible for DOM focus state to still bleed across tests, but `FocusManager` largely guarantees eventual consistency. This change prevents a class of focus errors from being possible when running tests. - A number of cursor tests needed to be updated to ensure that a connections are properly rendered (as this is a requirement for focusable nodes, and cursor is now focusing nodes). One test for output connections was changed to use an input connection, instead, since output connections can no longer be navigated to (and aren't rendered, thus are not focusable). It's possible this will need to be changed in the future if we decide to reintroduce support for output connections in cursor, but it seems like a reasonable stopgap. Huge thanks to @rachel-fenichel for helping investigate and providing an alternative for the output connection test. **Current gaps** to be fixed after this PR is merged: - The flyout automatically closes when creating a variable with with keyboard or mouse (I think this is only for the keyboard navigation plugin). I believe this is a regression from previous behavior due to how the navigation plugin is managing state. It would know the flyout should be open and thus ensure it stays open even when things like dialog prompts try to close it with a blur event. However, the new implementation in https://github.com/google/blockly-keyboard-experimentation/pull/482 complicates this since state is now inferred from `FocusManager`, and the flyout _losing_ focus will force it closed. There was a fix introduced in this PR to fix it for keyboard navigation, but fails for clicks because the flyout never receives focus when the create variable button is clicked. It also caused the advanced compilation tests to fail due to a subtle circular dependency from importing `WorkspaceSvg` directly rather than its type. - The flyout, while it stays open, does not automatically update past the first variable being created without closing and reopening it. I'm actually not at all sure why this particular behavior has regressed. ### Test Coverage No new non-`FocusManager` tests have been added. It's certainly possible to add unit tests for the focusable configurations being introduced in this PR, but it may not be highly beneficial. It's largely assumed that the individual implementations should work due to a highly tested FocusManager, and it may be the case that the interactions of the components working together is far more important to verify (that is, the end user flows). The latter is planned to be tackled as part of #8915. Some new `FocusManager` tests were added, but more are still needed and this is tracked as part of #8910. ### Documentation No new documentation should be needed for these changes. ### Additional Information This includes changes that have been pulled from #8875.
233 lines
8.2 KiB
JavaScript
233 lines
8.2 KiB
JavaScript
/**
|
|
* @license
|
|
* Copyright 2019 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
import * as eventUtils from '../../../build/src/core/events/utils.js';
|
|
import {FocusManager} from '../../../build/src/core/focus_manager.js';
|
|
|
|
/**
|
|
* Safely disposes of Blockly workspace, logging any errors.
|
|
* Assumes that sharedTestSetup has also been called. This should be called
|
|
* using workspaceTeardown.call(this).
|
|
* @param {!Blockly.Workspace} workspace The workspace to dispose.
|
|
*/
|
|
export function workspaceTeardown(workspace) {
|
|
try {
|
|
this.clock.runAll(); // Run all queued setTimeout calls.
|
|
workspace.dispose();
|
|
this.clock.runAll(); // Run all remaining queued setTimeout calls.
|
|
} catch (e) {
|
|
const testRef = this.currentTest || this.test;
|
|
console.error(testRef.fullTitle() + '\n', e);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Creates stub for Blockly.Events.fire that advances the clock forward after
|
|
* the event fires so it is processed immediately instead of on a timeout.
|
|
* @param {!SinonClock} clock The sinon clock.
|
|
* @return {!SinonStub} The created stub.
|
|
* @private
|
|
*/
|
|
function createEventsFireStubFireImmediately_(clock) {
|
|
const stub = sinon.stub(eventUtils.TEST_ONLY, 'fireInternal');
|
|
stub.callsFake(function (event) {
|
|
// Call original method.
|
|
stub.wrappedMethod.call(this, ...arguments);
|
|
// Advance clock forward to run any queued events.
|
|
clock.runAll();
|
|
});
|
|
return stub;
|
|
}
|
|
|
|
/**
|
|
* Adds message to shared cleanup object so that it is cleaned from
|
|
* Blockly.Messages global in sharedTestTeardown.
|
|
* @param {!Object} sharedCleanupObj The shared cleanup object created in
|
|
* sharedTestSetup.
|
|
* @param {string} message The message to add to shared cleanup object.
|
|
*/
|
|
export function addMessageToCleanup(sharedCleanupObj, message) {
|
|
sharedCleanupObj.messagesCleanup_.push(message);
|
|
}
|
|
|
|
/**
|
|
* Adds block type to shared cleanup object so that it is cleaned from
|
|
* Blockly.Blocks global in sharedTestTeardown.
|
|
* @param {!Object} sharedCleanupObj The shared cleanup object created in
|
|
* sharedTestSetup.
|
|
* @param {string} blockType The block type to add to shared cleanup object.
|
|
*/
|
|
export function addBlockTypeToCleanup(sharedCleanupObj, blockType) {
|
|
sharedCleanupObj.blockTypesCleanup_.push(blockType);
|
|
}
|
|
|
|
/**
|
|
* Wraps Blockly.defineBlocksWithJsonArray using stub in order to keep track of
|
|
* block types passed in to method on shared cleanup object so they are cleaned
|
|
* from Blockly.Blocks global in sharedTestTeardown.
|
|
* @param {!Object} sharedCleanupObj The shared cleanup object created in
|
|
* sharedTestSetup.
|
|
* @private
|
|
*/
|
|
function wrapDefineBlocksWithJsonArrayWithCleanup_(sharedCleanupObj) {
|
|
const stub = sinon.stub(
|
|
Blockly.common.TEST_ONLY,
|
|
'defineBlocksWithJsonArrayInternal',
|
|
);
|
|
stub.callsFake(function (jsonArray) {
|
|
if (jsonArray) {
|
|
jsonArray.forEach((jsonBlock) => {
|
|
if (jsonBlock) {
|
|
addBlockTypeToCleanup(sharedCleanupObj, jsonBlock['type']);
|
|
}
|
|
});
|
|
}
|
|
// Calls original method.
|
|
stub.wrappedMethod.call(this, ...arguments);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Shared setup method that sets up fake timer for clock so that pending
|
|
* setTimeout calls can be cleared in test teardown along with other common
|
|
* stubs. Should be called in setup of outermost suite using
|
|
* sharedTestSetup.call(this).
|
|
* The sinon fake timer defined on this.clock_ should not be reset in tests to
|
|
* avoid causing issues with cleanup in sharedTestTeardown.
|
|
*
|
|
* Stubs created in this setup (unless disabled by options passed):
|
|
* - Blockly.Events.fire - this.eventsFireStub - wraps fire event to trigger
|
|
* fireNow_ call immediately, rather than on timeout
|
|
* - Blockly.defineBlocksWithJsonArray - thin wrapper that adds logic to keep
|
|
* track of block types defined so that they can be undefined in
|
|
* sharedTestTeardown and calls original method.
|
|
*
|
|
* @param {Object<string, boolean>} options Options to enable/disable setup
|
|
* of certain stubs.
|
|
* @return {{clock: *}} The fake clock (as part of an object to make refactoring
|
|
* easier).
|
|
*/
|
|
export function sharedTestSetup(options = {}) {
|
|
this.sharedSetupCalled_ = true;
|
|
// Sandbox created for greater control when certain stubs are cleared.
|
|
this.sharedSetupSandbox_ = sinon.createSandbox();
|
|
this.clock = this.sharedSetupSandbox_.useFakeTimers();
|
|
if (options['fireEventsNow'] === undefined || options['fireEventsNow']) {
|
|
// Stubs event firing unless passed option "fireEventsNow: false"
|
|
this.eventsFireStub = createEventsFireStubFireImmediately_(this.clock);
|
|
}
|
|
this.sharedCleanup = {
|
|
blockTypesCleanup_: [],
|
|
messagesCleanup_: [],
|
|
};
|
|
this.blockTypesCleanup_ = this.sharedCleanup.blockTypesCleanup_;
|
|
this.messagesCleanup_ = this.sharedCleanup.messagesCleanup_;
|
|
|
|
// Set up FocusManager to run in isolation for this test.
|
|
this.globalDocumentEventListeners = [];
|
|
const testState = this;
|
|
const addDocumentEventListener = function (type, listener) {
|
|
testState.globalDocumentEventListeners.push({type, listener});
|
|
document.addEventListener(type, listener);
|
|
};
|
|
const specificFocusManager = new FocusManager(addDocumentEventListener);
|
|
this.oldGetFocusManager = FocusManager.getFocusManager;
|
|
FocusManager.getFocusManager = () => specificFocusManager;
|
|
|
|
wrapDefineBlocksWithJsonArrayWithCleanup_(this.sharedCleanup);
|
|
return {
|
|
clock: this.clock,
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Shared cleanup method that clears up pending setTimeout calls, disposes of
|
|
* workspace, and resets global variables. Should be called in setup of
|
|
* outermost suite using sharedTestTeardown.call(this).
|
|
*/
|
|
export function sharedTestTeardown() {
|
|
const testRef = this.currentTest || this.test;
|
|
if (!this.sharedSetupCalled_) {
|
|
console.error('"' + testRef.fullTitle() + '" did not call sharedTestSetup');
|
|
}
|
|
|
|
try {
|
|
if (this.workspace) {
|
|
workspaceTeardown.call(this, this.workspace);
|
|
this.workspace = null;
|
|
} else {
|
|
this.clock.runAll(); // Run all queued setTimeout calls.
|
|
}
|
|
} catch (e) {
|
|
console.error(testRef.fullTitle() + '\n', e);
|
|
} finally {
|
|
// Clear Blockly.Event state.
|
|
eventUtils.setGroup(false);
|
|
while (!eventUtils.isEnabled()) {
|
|
eventUtils.enable();
|
|
}
|
|
eventUtils.setRecordUndo(true);
|
|
if (eventUtils.TEST_ONLY.FIRE_QUEUE.length) {
|
|
// If this happens, it may mean that some previous test is missing cleanup
|
|
// (i.e. a previous test added an event to the queue on a timeout that
|
|
// did not use a stubbed clock).
|
|
eventUtils.TEST_ONLY.FIRE_QUEUE.length = 0;
|
|
console.warn(
|
|
'"' +
|
|
testRef.fullTitle() +
|
|
'" needed cleanup of Blockly.Events.TEST_ONLY.FIRE_QUEUE. This may ' +
|
|
'indicate leakage from an earlier test',
|
|
);
|
|
}
|
|
|
|
// Restore all stubbed methods.
|
|
this.sharedSetupSandbox_.restore();
|
|
sinon.restore();
|
|
|
|
const blockTypes = this.sharedCleanup.blockTypesCleanup_;
|
|
for (let i = 0; i < blockTypes.length; i++) {
|
|
delete Blockly.Blocks[blockTypes[i]];
|
|
}
|
|
const messages = this.sharedCleanup.messagesCleanup_;
|
|
for (let i = 0; i < messages.length; i++) {
|
|
delete Blockly.Msg[messages[i]];
|
|
}
|
|
|
|
Blockly.WidgetDiv.testOnly_setDiv(null);
|
|
|
|
// Remove the globally registered listener from FocusManager to avoid state
|
|
// being shared across test boundaries.
|
|
for (const registeredListener of this.globalDocumentEventListeners) {
|
|
const eventType = registeredListener.type;
|
|
const eventListener = registeredListener.listener;
|
|
document.removeEventListener(eventType, eventListener);
|
|
}
|
|
this.globalDocumentEventListeners = [];
|
|
FocusManager.getFocusManager = this.oldGetFocusManager;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Creates stub for Blockly.utils.idGenerator.genUid that returns the provided id or ids.
|
|
* Recommended to also assert that the stub is called the expected number of
|
|
* times.
|
|
* @param {string|!Array<string>} returnIds The return values to use for the
|
|
* created stub. If a single value is passed, then the stub always returns
|
|
* that value.
|
|
* @return {!SinonStub} The created stub.
|
|
*/
|
|
export function createGenUidStubWithReturns(returnIds) {
|
|
const stub = sinon.stub(Blockly.utils.idGenerator.TEST_ONLY, 'genUid');
|
|
if (Array.isArray(returnIds)) {
|
|
for (let i = 0; i < returnIds.length; i++) {
|
|
stub.onCall(i).returns(returnIds[i]);
|
|
}
|
|
} else {
|
|
stub.returns(returnIds);
|
|
}
|
|
return stub;
|
|
}
|