From d9beacddb4db6c423fbe58b027e9f14393ae3ffd Mon Sep 17 00:00:00 2001 From: Ben Henning Date: Fri, 21 Mar 2025 00:33:51 +0000 Subject: [PATCH 1/7] feat: add FocusManager This is the bulk of the work for introducing the central logical unit for managing and sychronizing focus as a first-class Blockly concept with that of DOM focus. There's a lot to do yet, including: - Ensuring clicks within Blockly's scope correctly sync back to focus changes. - Adding support for, and testing, cases when focus is lost from all registered trees. - Testing nested tree propagation. - Testing the traverser utility class. - Adding implementations for IFocusableTree and IFocusableNode throughout Blockly. --- core/blockly.ts | 3 + core/css.ts | 9 + core/focus_manager.ts | 295 ++ core/interfaces/i_focusable_node.ts | 5 +- core/interfaces/i_focusable_tree.ts | 2 + core/utils/focusable_tree_traverser.ts | 84 + tests/mocha/focus_manager_test.js | 3919 ++++++++++++++++++++++++ tests/mocha/index.html | 73 + 8 files changed, 4389 insertions(+), 1 deletion(-) create mode 100644 core/focus_manager.ts create mode 100644 core/utils/focusable_tree_traverser.ts create mode 100644 tests/mocha/focus_manager_test.js diff --git a/core/blockly.ts b/core/blockly.ts index cf77bca3f..c29961f59 100644 --- a/core/blockly.ts +++ b/core/blockly.ts @@ -106,6 +106,7 @@ import {FlyoutItem} from './flyout_item.js'; import {FlyoutMetricsManager} from './flyout_metrics_manager.js'; import {FlyoutSeparator} from './flyout_separator.js'; import {VerticalFlyout} from './flyout_vertical.js'; +import {FocusManager, getFocusManager} from './focus_manager.js'; import {CodeGenerator} from './generator.js'; import {Gesture} from './gesture.js'; import {Grid} from './grid.js'; @@ -521,6 +522,7 @@ export { FlyoutItem, FlyoutMetricsManager, FlyoutSeparator, + FocusManager, CodeGenerator as Generator, Gesture, Grid, @@ -607,6 +609,7 @@ export { WorkspaceSvg, ZoomControls, config, + getFocusManager, hasBubble, icons, inject, diff --git a/core/css.ts b/core/css.ts index 57217f854..4ebb4e260 100644 --- a/core/css.ts +++ b/core/css.ts @@ -484,4 +484,13 @@ input[type=number] { .blocklyDragging .blocklyIconGroup { cursor: grabbing; } + +.blocklyActiveFocus { + outline-color: #2ae; + outline-width: 2px; +} +.blocklyPassiveFocus { + outline-color: #3fdfff; + outline-width: 1.5px; +} `; diff --git a/core/focus_manager.ts b/core/focus_manager.ts new file mode 100644 index 000000000..5e6e0af48 --- /dev/null +++ b/core/focus_manager.ts @@ -0,0 +1,295 @@ +/** + * @license + * Copyright 2025 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + +import type {IFocusableNode} from './interfaces/i_focusable_node.js'; +import type {IFocusableTree} from './interfaces/i_focusable_tree.js'; +import * as dom from './utils/dom.js'; + +/** + * Type declaration for returning focus to FocusManager upon completing an + * ephemeral UI flow (such as a dialog). + * + * See FocusManager.takeEphemeralFocus for more details. + */ +export type ReturnEphemeralFocus = () => void; + +/** + * A per-page singleton that manages Blockly focus across one or more + * IFocusableTrees, and bidirectionally synchronizes this focus with the DOM. + * + * Callers that wish to explicitly change input focus for select Blockly + * components on the page should use the focus functions in this manager. + * + * The manager is responsible for handling focus events from the DOM (which may + * may arise from users clicking on page elements) and ensuring that + * corresponding IFocusableNodes are clearly marked as actively/passively + * highlighted in the same way that this would be represented with calls to + * focusNode(). + */ +export class FocusManager { + focusedNode: IFocusableNode | null = null; + registeredTrees: Array = []; + + private currentlyHoldsEphemeralFocus: boolean = false; + + constructor( + addGlobalEventListener: (type: string, listener: EventListener) => void, + ) { + // Register root document focus listeners for tracking when focus leaves all + // tracked focusable trees. + addGlobalEventListener('focusin', (event) => { + if (!(event instanceof FocusEvent)) return; + + // The target that now has focus. + const activeElement = document.activeElement; + let newNode: IFocusableNode | null = null; + if ( + activeElement instanceof HTMLElement || + activeElement instanceof SVGElement + ) { + // If the target losing focus maps to any tree, then it should be + // updated. Per the contract of findFocusableNodeFor only one tree + // should claim the element. + const matchingNodes = this.registeredTrees.map((tree) => + tree.findFocusableNodeFor(activeElement), + ); + newNode = matchingNodes.find((node) => !!node) ?? null; + } + + if (newNode) { + this.focusNode(newNode); + } else { + // TODO: Set previous to passive if all trees are losing active focus. + } + }); + } + + /** + * Registers a new IFocusableTree for automatic focus management. + * + * If the tree currently has an element with DOM focus, it will not affect the + * internal state in this manager until the focus changes to a new, + * now-monitored element/node. + * + * This function throws if the provided tree is already currently registered + * in this manager. Use isRegistered to check in cases when it can't be + * certain whether the tree has been registered. + */ + registerTree(tree: IFocusableTree): void { + if (this.isRegistered(tree)) { + throw Error(`Attempted to re-register already registered tree: ${tree}.`); + } + this.registeredTrees.push(tree); + } + + /** + * Returns whether the specified tree has already been registered in this + * manager using registerTree and hasn't yet been unregistered using + * unregisterTree. + */ + isRegistered(tree: IFocusableTree): boolean { + return this.registeredTrees.findIndex((reg) => reg == tree) !== -1; + } + + /** + * Unregisters a IFocusableTree from automatic focus management. + * + * If the tree had a previous focused node, it will have its highlight + * removed. This function does NOT change DOM focus. + * + * This function throws if the provided tree is not currently registered in + * this manager. + */ + unregisterTree(tree: IFocusableTree): void { + if (!this.isRegistered(tree)) { + throw Error(`Attempted to unregister not registered tree: ${tree}.`); + } + const treeIndex = this.registeredTrees.findIndex((tree) => tree == tree); + this.registeredTrees.splice(treeIndex, 1); + + const focusedNode = tree.getFocusedNode(); + const root = tree.getRootFocusableNode(); + if (focusedNode != null) this.removeHighlight(focusedNode); + if (this.focusedNode == focusedNode || this.focusedNode == root) { + this.focusedNode = null; + } + this.removeHighlight(root); + } + + /** + * Returns the current IFocusableTree that has focus, or null if none + * currently do. + * + * Note also that if ephemeral focus is currently captured (e.g. using + * takeEphemeralFocus) then the returned tree here may not currently have DOM + * focus. + */ + getFocusedTree(): IFocusableTree | null { + return this.focusedNode?.getFocusableTree() ?? null; + } + + /** + * Returns the current IFocusableNode with focus (which is always tied to a + * focused IFocusableTree), or null if there isn't one. + * + * Note that this function will maintain parity with + * IFocusableTree.getFocusedNode(). That is, if a tree itself has focus but + * none of its non-root children do, this will return null but + * getFocusedTree() will not. + * + * Note also that if ephemeral focus is currently captured (e.g. using + * takeEphemeralFocus) then the returned node here may not currently have DOM + * focus. + */ + getFocusedNode(): IFocusableNode | null { + return this.focusedNode; + } + + /** + * Focuses the specific IFocusableTree. This either means restoring active + * focus to the tree's passively focused node, or focusing the tree's root + * node. + * + * Note that if the specified tree already has a focused node then this will + * not change any existing focus (unless that node has passive focus, then it + * will be restored to active focus). + * + * See getFocusedNode for details on how other nodes are affected. + * + * @param focusableTree The tree that should receive active + * focus. + */ + focusTree(focusableTree: IFocusableTree): void { + if (!this.isRegistered(focusableTree)) { + throw Error(`Attempted to focus unregistered tree: ${focusableTree}.`); + } + this.focusNode( + focusableTree.getFocusedNode() ?? focusableTree.getRootFocusableNode(), + ); + } + + /** + * Focuses DOM input on the selected node, and marks it as actively focused. + * + * Any previously focused node will be updated to be passively highlighted (if + * it's in a different focusable tree) or blurred (if it's in the same one). + * + * @param focusableNode The node that should receive active + * focus. + */ + focusNode(focusableNode: IFocusableNode): void { + const curTree = focusableNode.getFocusableTree(); + if (!this.isRegistered(curTree)) { + throw Error(`Attempted to focus unregistered node: ${focusableNode}.`); + } + const prevNode = this.focusedNode; + if (prevNode && prevNode.getFocusableTree() !== curTree) { + this.setNodeToPassive(prevNode); + } + // If there's a focused node in the new node's tree, ensure it's reset. + const prevNodeCurTree = curTree.getFocusedNode(); + const curTreeRoot = curTree.getRootFocusableNode(); + if (prevNodeCurTree) { + this.removeHighlight(prevNodeCurTree); + } + // For caution, ensure that the root is always reset since getFocusedNode() + // is expected to return null if the root was highlighted, if the root is + // not the node now being set to active. + if (curTreeRoot !== focusableNode) { + this.removeHighlight(curTreeRoot); + } + if (!this.currentlyHoldsEphemeralFocus) { + // Only change the actively focused node if ephemeral state isn't held. + this.setNodeToActive(focusableNode); + } + this.focusedNode = focusableNode; + } + + /** + * Ephemerally captures focus for a selected element until the returned lambda + * is called. This is expected to be especially useful for ephemeral UI flows + * like dialogs. + * + * IMPORTANT: the returned lambda *must* be called, otherwise automatic focus + * will no longer work anywhere on the page. It is highly recommended to tie + * the lambda call to the closure of the corresponding UI so that if input is + * manually changed to an element outside of the ephemeral UI, the UI should + * close and automatic input restored. Note that this lambda must be called + * exactly once and that subsequent calls will throw an error. + * + * Note that the manager will continue to track DOM input signals even when + * ephemeral focus is active, but it won't actually change node state until + * the returned lambda is called. Additionally, only 1 ephemeral focus context + * can be active at any given time (attempting to activate more than one + * simultaneously will result in an error being thrown). + */ + takeEphemeralFocus( + focusableElement: HTMLElement | SVGElement, + ): ReturnEphemeralFocus { + if (this.currentlyHoldsEphemeralFocus) { + throw Error( + `Attempted to take ephemeral focus when it's already held, ` + + `with new element: ${focusableElement}.`, + ); + } + this.currentlyHoldsEphemeralFocus = true; + + if (this.focusedNode) { + this.setNodeToPassive(this.focusedNode); + } + focusableElement.focus(); + + let hasFinishedEphemeralFocus = false; + return () => { + if (hasFinishedEphemeralFocus) { + throw Error( + `Attempted to finish ephemeral focus twice for element: ` + + `${focusableElement}.`, + ); + } + hasFinishedEphemeralFocus = true; + this.currentlyHoldsEphemeralFocus = false; + + if (this.focusedNode) { + this.setNodeToActive(this.focusedNode); + } + }; + } + + private setNodeToActive(node: IFocusableNode): void { + const element = node.getFocusableElement(); + dom.addClass(element, 'blocklyActiveFocus'); + dom.removeClass(element, 'blocklyPassiveFocus'); + element.focus(); + } + + private setNodeToPassive(node: IFocusableNode): void { + const element = node.getFocusableElement(); + dom.removeClass(element, 'blocklyActiveFocus'); + dom.addClass(element, 'blocklyPassiveFocus'); + } + + private removeHighlight(node: IFocusableNode): void { + const element = node.getFocusableElement(); + dom.removeClass(element, 'blocklyActiveFocus'); + dom.removeClass(element, 'blocklyPassiveFocus'); + } +} + +let focusManager: FocusManager | null = null; + +/** + * Returns the page-global FocusManager. + * + * The returned instance is guaranteed to not change across function calls, but + * may change across page loads. + */ +export function getFocusManager(): FocusManager { + if (!focusManager) { + focusManager = new FocusManager(document.addEventListener); + } + return focusManager; +} diff --git a/core/interfaces/i_focusable_node.ts b/core/interfaces/i_focusable_node.ts index 87a0293ae..14100d44c 100644 --- a/core/interfaces/i_focusable_node.ts +++ b/core/interfaces/i_focusable_node.ts @@ -20,7 +20,10 @@ export interface IFocusableNode { * - blocklyPassiveFocus * * The returned element must also have a valid ID specified, and unique to the - * element relative to its nearest IFocusableTree parent. + * element relative to its nearest IFocusableTree parent. It must also have a + * negative tabindex (since the focus manager itself will manage its tab index + * and a tab index must be present in order for the element to be focusable in + * the DOM). * * It's expected the return element will not change for the lifetime of the * node. diff --git a/core/interfaces/i_focusable_tree.ts b/core/interfaces/i_focusable_tree.ts index 21f87678d..1a8ccf82b 100644 --- a/core/interfaces/i_focusable_tree.ts +++ b/core/interfaces/i_focusable_tree.ts @@ -46,6 +46,8 @@ export interface IFocusableTree { * * The provided element must have a non-null ID that conforms to the contract * mentioned in IFocusableNode. + * + * This function may match against the root node of the tree. */ findFocusableNodeFor( element: HTMLElement | SVGElement, diff --git a/core/utils/focusable_tree_traverser.ts b/core/utils/focusable_tree_traverser.ts new file mode 100644 index 000000000..b7465e884 --- /dev/null +++ b/core/utils/focusable_tree_traverser.ts @@ -0,0 +1,84 @@ +/** + * @license + * Copyright 2025 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + +import type {IFocusableNode} from '../interfaces/i_focusable_node.js'; +import type {IFocusableTree} from '../interfaces/i_focusable_tree.js'; + +/** + * A helper utility for IFocusableTree implementations to aid with common + * tree traversals. + */ +export class FocusableTreeTraverser { + /** + * Returns the current IFocusableNode that either has the CSS class + * 'blocklyActiveFocus' or 'blocklyPassiveFocus', only considering HTML and + * SVG elements. + * + * This can match against the tree's root. + * + * @param tree The IFocusableTree in which to search for a focused node. + * @returns The IFocusableNode currently with focus, or null if none. + */ + static findFocusedNode(tree: IFocusableTree): IFocusableNode | null { + const root = tree.getRootFocusableNode().getFocusableElement(); + const activeElem = root.querySelector('.blocklyActiveFocus'); + let active: IFocusableNode | null = null; + if (activeElem instanceof HTMLElement || activeElem instanceof SVGElement) { + active = tree.findFocusableNodeFor(activeElem); + } + const passiveElems = Array.from( + root.querySelectorAll('.blocklyPassiveFocus'), + ); + const passive = passiveElems.map((elem) => { + if (elem instanceof HTMLElement || elem instanceof SVGElement) { + return tree.findFocusableNodeFor(elem); + } else return null; + }); + return active || passive.find((node) => !!node) || null; + } + + /** + * Returns the IFocusableNode corresponding to the specified HTML or SVG + * element iff it's the root element or a descendent of the root element of + * the specified IFocusableTree. + * + * If the tree contains another nested IFocusableTree, the nested tree may be + * traversed but its nodes will never be returned here per the contract of + * findChildById. + * + * findChildById is a provided callback that takes an element ID and maps it + * back to the corresponding IFocusableNode within the provided + * IFocusableTree. These IDs will match the contract specified in the + * documentation for IFocusableNode. This function must not return any node + * that doesn't directly belong to the node's nearest parent tree. + * + * @param element The HTML or SVG element being sought. + * @param tree The tree under which the provided element may be a descendant. + * @param findChildById The ID->IFocusableNode mapping callback that must + * follow the contract mentioned above. + * @returns The matching IFocusableNode, or null if there is no match. + */ + static findFocusableNodeFor( + element: HTMLElement | SVGElement, + tree: IFocusableTree, + findChildById: (id: string) => IFocusableNode | null, + ): IFocusableNode | null { + if (element === tree.getRootFocusableNode().getFocusableElement()) { + return tree.getRootFocusableNode(); + } + const matchedChildNode = findChildById(element.id); + const elementParent = element.parentElement; + if (!matchedChildNode && elementParent) { + // Recurse up to find the nearest tree/node. + return FocusableTreeTraverser.findFocusableNodeFor( + elementParent, + tree, + findChildById, + ); + } + return matchedChildNode; + } +} diff --git a/tests/mocha/focus_manager_test.js b/tests/mocha/focus_manager_test.js new file mode 100644 index 000000000..86a19fd18 --- /dev/null +++ b/tests/mocha/focus_manager_test.js @@ -0,0 +1,3919 @@ +/** + * @license + * Copyright 2020 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + +import {FocusManager} from '../../build/src/core/focus_manager.js'; +import {FocusableTreeTraverser} from '../../build/src/core/utils/focusable_tree_traverser.js'; +import {assert} from '../../node_modules/chai/chai.js'; +import { + sharedTestSetup, + sharedTestTeardown, +} from './test_helpers/setup_teardown.js'; + +suite('FocusManager', function () { + setup(function () { + sharedTestSetup.call(this); + + const testState = this; + const addDocumentEventListener = function (type, listener) { + testState.globalDocumentEventListenerType = type; + testState.globalDocumentEventListener = listener; + document.addEventListener(type, listener); + }; + this.focusManager = new FocusManager(addDocumentEventListener); + + const FocusableNodeImpl = function (element, tree) { + this.getFocusableElement = function () { + return element; + }; + + this.getFocusableTree = function () { + return tree; + }; + }; + const FocusableTreeImpl = function (rootElement) { + this.idToNodeMap = {}; + + this.addNode = function (element) { + const node = new FocusableNodeImpl(element, this); + this.idToNodeMap[element.id] = node; + return node; + }; + + this.getFocusedNode = function () { + return FocusableTreeTraverser.findFocusedNode(this); + }; + + this.getRootFocusableNode = function () { + return this.rootNode; + }; + + this.findFocusableNodeFor = function (element) { + return FocusableTreeTraverser.findFocusableNodeFor( + element, + this, + (id) => this.idToNodeMap[id], + ); + }; + + this.rootNode = this.addNode(rootElement); + }; + + const createFocusableTree = function (rootElementId) { + return new FocusableTreeImpl(document.getElementById(rootElementId)); + }; + const createFocusableNode = function (tree, elementId) { + return tree.addNode(document.getElementById(elementId)); + }; + + this.testFocusableTree1 = createFocusableTree('testFocusableTree1'); + this.testFocusableTree1Node1 = createFocusableNode( + this.testFocusableTree1, + 'testFocusableTree1.node1', + ); + this.testFocusableTree1Node1Child1 = createFocusableNode( + this.testFocusableTree1, + 'testFocusableTree1.node1.child1', + ); + this.testFocusableTree1Node2 = createFocusableNode( + this.testFocusableTree1, + 'testFocusableTree1.node2', + ); + this.testFocusableTree2 = createFocusableTree('testFocusableTree2'); + this.testFocusableTree2Node1 = createFocusableNode( + this.testFocusableTree2, + 'testFocusableTree2.node1', + ); + this.testFocusableGroup1 = createFocusableTree('testFocusableGroup1'); + this.testFocusableGroup1Node1 = createFocusableNode( + this.testFocusableGroup1, + 'testFocusableGroup1.node1', + ); + this.testFocusableGroup1Node1Child1 = createFocusableNode( + this.testFocusableGroup1, + 'testFocusableGroup1.node1.child1', + ); + this.testFocusableGroup1Node2 = createFocusableNode( + this.testFocusableGroup1, + 'testFocusableGroup1.node2', + ); + this.testFocusableGroup2 = createFocusableTree('testFocusableGroup2'); + this.testFocusableGroup2Node1 = createFocusableNode( + this.testFocusableGroup2, + 'testFocusableGroup2.node1', + ); + }); + + teardown(function () { + sharedTestTeardown.call(this); + + // Remove the globally registered listener from FocusManager to avoid state being shared across + // test boundaries. + const eventType = this.globalDocumentEventListenerType; + const eventListener = this.globalDocumentEventListener; + document.removeEventListener(eventType, eventListener); + + const removeFocusIndicators = function (element) { + element.classList.remove('blocklyActiveFocus', 'blocklyPassiveFocus'); + }; + + // Ensure all node CSS styles are reset so that state isn't leaked between tests. + removeFocusIndicators(document.getElementById('testFocusableTree1')); + removeFocusIndicators(document.getElementById('testFocusableTree1.node1')); + removeFocusIndicators( + document.getElementById('testFocusableTree1.node1.child1'), + ); + removeFocusIndicators(document.getElementById('testFocusableTree1.node2')); + removeFocusIndicators(document.getElementById('testFocusableTree2')); + removeFocusIndicators(document.getElementById('testFocusableTree2.node1')); + removeFocusIndicators(document.getElementById('testFocusableGroup1')); + removeFocusIndicators(document.getElementById('testFocusableGroup1.node1')); + removeFocusIndicators( + document.getElementById('testFocusableGroup1.node1.child1'), + ); + removeFocusIndicators(document.getElementById('testFocusableGroup1.node2')); + removeFocusIndicators(document.getElementById('testFocusableGroup2')); + removeFocusIndicators(document.getElementById('testFocusableGroup2.node1')); + }); + + /* Basic lifecycle tests. */ + + suite('registerTree()', function () { + test('once does not throw', function () { + this.focusManager.registerTree(this.testFocusableTree1); + + // The test should pass due to no exception being thrown. + }); + + test('twice for same tree throws error', function () { + this.focusManager.registerTree(this.testFocusableTree1); + + const errorMsgRegex = + /Attempted to re-register already registered tree.+?/; + assert.throws( + () => this.focusManager.registerTree(this.testFocusableTree1), + errorMsgRegex, + ); + }); + + test('twice with different trees does not throw', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableGroup1); + + // The test shouldn't throw since two different trees were registered. + }); + + test('register after an unregister does not throw', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.unregisterTree(this.testFocusableTree1); + + this.focusManager.registerTree(this.testFocusableTree1); + + // The second register should not fail since the tree was previously unregistered. + }); + }); + + suite('unregisterTree()', function () { + test('for not yet registered tree throws', function () { + const errorMsgRegex = /Attempted to unregister not registered tree.+?/; + assert.throws( + () => this.focusManager.unregisterTree(this.testFocusableTree1), + errorMsgRegex, + ); + }); + + test('for registered tree does not throw', function () { + this.focusManager.registerTree(this.testFocusableTree1); + + this.focusManager.unregisterTree(this.testFocusableTree1); + + // Unregistering a registered tree should not fail. + }); + + test('twice for registered tree throws', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.unregisterTree(this.testFocusableTree1); + + const errorMsgRegex = /Attempted to unregister not registered tree.+?/; + assert.throws( + () => this.focusManager.unregisterTree(this.testFocusableTree1), + errorMsgRegex, + ); + }); + }); + + suite('isRegistered()', function () { + test('for not registered tree returns false', function () { + const isRegistered = this.focusManager.isRegistered( + this.testFocusableTree1, + ); + + assert.isFalse(isRegistered); + }); + + test('for registered tree returns true', function () { + this.focusManager.registerTree(this.testFocusableTree1); + + const isRegistered = this.focusManager.isRegistered( + this.testFocusableTree1, + ); + + assert.isTrue(isRegistered); + }); + + test('for unregistered tree returns false', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.unregisterTree(this.testFocusableTree1); + + const isRegistered = this.focusManager.isRegistered( + this.testFocusableTree1, + ); + + assert.isFalse(isRegistered); + }); + + test('for re-registered tree returns true', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.unregisterTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree1); + + const isRegistered = this.focusManager.isRegistered( + this.testFocusableTree1, + ); + + assert.isTrue(isRegistered); + }); + }); + + suite('getFocusedTree()', function () { + test('by default returns null', function () { + const focusedTree = this.focusManager.getFocusedTree(); + + assert.isNull(focusedTree); + }); + }); + + suite('getFocusedNode()', function () { + test('by default returns null', function () { + const focusedNode = this.focusManager.getFocusedNode(); + + assert.isNull(focusedNode); + }); + }); + + suite('focusTree()', function () { + test('for not registered tree throws', function () { + const errorMsgRegex = /Attempted to focus unregistered tree.+?/; + assert.throws( + () => this.focusManager.focusTree(this.testFocusableTree1), + errorMsgRegex, + ); + }); + + test('for unregistered tree throws', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.unregisterTree(this.testFocusableTree1); + + const errorMsgRegex = /Attempted to focus unregistered tree.+?/; + assert.throws( + () => this.focusManager.focusTree(this.testFocusableTree1), + errorMsgRegex, + ); + }); + }); + + suite('focusNode()', function () { + test('for not registered node throws', function () { + const errorMsgRegex = /Attempted to focus unregistered node.+?/; + assert.throws( + () => this.focusManager.focusNode(this.testFocusableTree1Node1), + errorMsgRegex, + ); + }); + + test('for unregistered node throws', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.unregisterTree(this.testFocusableTree1); + + const errorMsgRegex = /Attempted to focus unregistered node.+?/; + assert.throws( + () => this.focusManager.focusNode(this.testFocusableTree1Node1), + errorMsgRegex, + ); + }); + }); + + /* Focus tests for HTML trees. */ + + suite('focus*() switching in HTML tree', function () { + suite('getFocusedTree()', function () { + test('registered tree focusTree()ed no prev focus returns tree', function () { + this.focusManager.registerTree(this.testFocusableTree1); + + this.focusManager.focusTree(this.testFocusableTree1); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableTree1, + ); + }); + + test('registered tree focusTree()ed prev node focused returns tree', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.focusNode(this.testFocusableTree1Node1); + + this.focusManager.focusTree(this.testFocusableTree1); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableTree1, + ); + }); + + test('registered tree focusTree()ed diff tree prev focused returns new tree', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.focusTree(this.testFocusableTree1); + + this.focusManager.focusTree(this.testFocusableTree2); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableTree2, + ); + }); + + test('registered tree focusTree()ed diff tree node prev focused returns new tree', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.focusNode(this.testFocusableTree1Node1); + + this.focusManager.focusTree(this.testFocusableTree2); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableTree2, + ); + }); + + test('registered root focusNode()ed no prev focus returns tree', function () { + this.focusManager.registerTree(this.testFocusableTree1); + + this.focusManager.focusNode( + this.testFocusableTree1.getRootFocusableNode(), + ); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableTree1, + ); + }); + + test("registered node focusNode()ed no prev focus returns node's tree", function () { + this.focusManager.registerTree(this.testFocusableTree1); + + this.focusManager.focusNode(this.testFocusableTree1Node1); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableTree1, + ); + }); + + test("registered subnode focusNode()ed no prev focus returns node's tree", function () { + this.focusManager.registerTree(this.testFocusableTree1); + + this.focusManager.focusNode(this.testFocusableTree1Node1Child1); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableTree1, + ); + }); + + test('registered node focusNode()ed after prev node focus returns same tree', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.focusNode(this.testFocusableTree1Node1); + + this.focusManager.focusNode(this.testFocusableTree1Node2); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableTree1, + ); + }); + + test("registered node focusNode()ed after prev node focus diff tree returns new node's tree", function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.focusNode(this.testFocusableTree1Node1); + + this.focusManager.focusNode(this.testFocusableTree2Node1); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableTree2, + ); + }); + + test("registered tree root focusNode()ed after prev node focus diff tree returns new node's tree", function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.focusNode(this.testFocusableTree1Node1); + + this.focusManager.focusNode( + this.testFocusableTree2.getRootFocusableNode(), + ); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableTree2, + ); + }); + + test('unregistered tree focusTree()ed with no prev focus returns null', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.focusTree(this.testFocusableTree1); + + this.focusManager.unregisterTree(this.testFocusableTree1); + + assert.isNull(this.focusManager.getFocusedTree()); + }); + + test('unregistered tree focusNode()ed with no prev focus returns null', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.focusNode(this.testFocusableTree1Node1); + + this.focusManager.unregisterTree(this.testFocusableTree1); + + assert.isNull(this.focusManager.getFocusedTree()); + }); + + test('unregistered tree focusNode()ed with prev node prior focused returns null', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.focusNode(this.testFocusableTree2Node1); + this.focusManager.focusNode(this.testFocusableTree1Node1); + + this.focusManager.unregisterTree(this.testFocusableTree1); + + // Since the more recent tree was removed, there's no tree currently focused. + assert.isNull(this.focusManager.getFocusedTree()); + }); + + test('unregistered tree focusNode()ed with prev node recently focused returns new tree', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.focusNode(this.testFocusableTree1Node1); + this.focusManager.focusNode(this.testFocusableTree2Node1); + + this.focusManager.unregisterTree(this.testFocusableTree1); + + // Since the most recent tree still exists, it still has focus. + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableTree2, + ); + }); + }); + suite('getFocusedNode()', function () { + test('registered tree focusTree()ed no prev focus returns root node', function () { + this.focusManager.registerTree(this.testFocusableTree1); + + this.focusManager.focusTree(this.testFocusableTree1); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree1.getRootFocusableNode(), + ); + }); + + test('registered tree focusTree()ed prev node focused returns original node', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.focusNode(this.testFocusableTree1Node1); + + this.focusManager.focusTree(this.testFocusableTree1); + + // The original node retains focus since the tree already holds focus (per focusTree's + // contract). + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree1Node1, + ); + }); + + test('registered tree focusTree()ed diff tree prev focused returns new root node', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.focusTree(this.testFocusableTree1); + + this.focusManager.focusTree(this.testFocusableTree2); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree2.getRootFocusableNode(), + ); + }); + + test('registered tree focusTree()ed diff tree node prev focused returns new root node', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.focusNode(this.testFocusableTree1Node1); + + this.focusManager.focusTree(this.testFocusableTree2); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree2.getRootFocusableNode(), + ); + }); + + test('registered root focusNode()ed no prev focus returns root node', function () { + this.focusManager.registerTree(this.testFocusableTree1); + + this.focusManager.focusNode( + this.testFocusableTree1.getRootFocusableNode(), + ); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree1.getRootFocusableNode(), + ); + }); + + test('registered node focusNode()ed no prev focus returns node', function () { + this.focusManager.registerTree(this.testFocusableTree1); + + this.focusManager.focusNode(this.testFocusableTree1Node1); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree1Node1, + ); + }); + + test('registered subnode focusNode()ed no prev focus returns subnode', function () { + this.focusManager.registerTree(this.testFocusableTree1); + + this.focusManager.focusNode(this.testFocusableTree1Node1Child1); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree1Node1Child1, + ); + }); + + test('registered node focusNode()ed after prev node focus returns new node', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.focusNode(this.testFocusableTree1Node1); + + this.focusManager.focusNode(this.testFocusableTree1Node2); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree1Node2, + ); + }); + + test('registered node focusNode()ed after prev node focus diff tree returns new node', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.focusNode(this.testFocusableTree1Node1); + + this.focusManager.focusNode(this.testFocusableTree2Node1); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree2Node1, + ); + }); + + test('registered tree root focusNode()ed after prev node focus diff tree returns new root', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.focusNode(this.testFocusableTree1Node1); + + this.focusManager.focusNode( + this.testFocusableTree2.getRootFocusableNode(), + ); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree2.getRootFocusableNode(), + ); + }); + + test('unregistered tree focusTree()ed with no prev focus returns null', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.focusTree(this.testFocusableTree1); + + this.focusManager.unregisterTree(this.testFocusableTree1); + + assert.isNull(this.focusManager.getFocusedNode()); + }); + + test('unregistered tree focusNode()ed with no prev focus returns null', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.focusNode(this.testFocusableTree1Node1); + + this.focusManager.unregisterTree(this.testFocusableTree1); + + assert.isNull(this.focusManager.getFocusedNode()); + }); + + test('unregistered tree focusNode()ed with prev node prior focused returns null', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.focusNode(this.testFocusableTree2Node1); + this.focusManager.focusNode(this.testFocusableTree1Node1); + + this.focusManager.unregisterTree(this.testFocusableTree1); + + // Since the more recent tree was removed, there's no tree currently focused. + assert.isNull(this.focusManager.getFocusedNode()); + }); + + test('unregistered tree focusNode()ed with prev node recently focused returns new node', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.focusNode(this.testFocusableTree1Node1); + this.focusManager.focusNode(this.testFocusableTree2Node1); + + this.focusManager.unregisterTree(this.testFocusableTree1); + + // Since the most recent tree still exists, it still has focus. + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree2Node1, + ); + }); + }); + suite('CSS classes', function () { + test('registered tree focusTree()ed no prev focus root elem has active property', function () { + this.focusManager.registerTree(this.testFocusableTree1); + + this.focusManager.focusTree(this.testFocusableTree1); + + const rootElem = this.testFocusableTree1 + .getRootFocusableNode() + .getFocusableElement(); + assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered tree focusTree()ed prev node focused original elem has active property', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.focusNode(this.testFocusableTree1Node1); + + this.focusManager.focusTree(this.testFocusableTree1); + + // The original node retains active focus since the tree already holds focus (per + // focusTree's contract). + const nodeElem = this.testFocusableTree1Node1.getFocusableElement(); + assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(nodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered tree focusTree()ed diff tree prev focused new root elem has active property', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.focusTree(this.testFocusableTree1); + + this.focusManager.focusTree(this.testFocusableTree2); + + const rootElem = this.testFocusableTree2 + .getRootFocusableNode() + .getFocusableElement(); + assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered tree focusTree()ed diff tree node prev focused new root elem has active property', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.focusNode(this.testFocusableTree1Node1); + + this.focusManager.focusTree(this.testFocusableTree2); + + const rootElem = this.testFocusableTree2 + .getRootFocusableNode() + .getFocusableElement(); + assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered root focusNode()ed no prev focus returns root elem has active property', function () { + this.focusManager.registerTree(this.testFocusableTree1); + + this.focusManager.focusNode( + this.testFocusableTree1.getRootFocusableNode(), + ); + + const rootElem = this.testFocusableTree1 + .getRootFocusableNode() + .getFocusableElement(); + assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered node focusNode()ed no prev focus node elem has active property', function () { + this.focusManager.registerTree(this.testFocusableTree1); + + this.focusManager.focusNode(this.testFocusableTree1Node1); + + const nodeElem = this.testFocusableTree1Node1.getFocusableElement(); + assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(nodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered node focusNode()ed after prev node focus same tree old node elem has no focus property', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.focusNode(this.testFocusableTree1Node1); + + this.focusManager.focusNode(this.testFocusableTree1Node2); + + const prevNodeElem = this.testFocusableTree1Node1.getFocusableElement(); + assert.notInclude( + Array.from(prevNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(prevNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered node focusNode()ed after prev node focus same tree new node elem has active property', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.focusNode(this.testFocusableTree1Node1); + + this.focusManager.focusNode(this.testFocusableTree1Node2); + + const newNodeElem = this.testFocusableTree1Node2.getFocusableElement(); + assert.include(Array.from(newNodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(newNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered node focusNode()ed after prev node focus diff tree old node elem has passive property', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.focusNode(this.testFocusableTree1Node1); + + this.focusManager.focusNode(this.testFocusableTree2Node1); + + const prevNodeElem = this.testFocusableTree1Node1.getFocusableElement(); + assert.notInclude( + Array.from(prevNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.include( + Array.from(prevNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered node focusNode()ed after prev node focus diff tree new node elem has active property', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.focusNode(this.testFocusableTree1Node1); + + this.focusManager.focusNode(this.testFocusableTree2Node1); + + const newNodeElem = this.testFocusableTree2Node1.getFocusableElement(); + assert.include(Array.from(newNodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(newNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered tree root focusNode()ed after prev node focus diff tree new root has active property', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.focusNode(this.testFocusableTree1Node1); + + this.focusManager.focusNode( + this.testFocusableTree2.getRootFocusableNode(), + ); + + const rootElem = this.testFocusableTree2 + .getRootFocusableNode() + .getFocusableElement(); + assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('unregistered tree focusTree()ed with no prev focus removes focus', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.focusTree(this.testFocusableTree1); + + this.focusManager.unregisterTree(this.testFocusableTree1); + + // Since the tree was unregistered it no longer has focus indicators. + const rootElem = this.testFocusableTree1 + .getRootFocusableNode() + .getFocusableElement(); + assert.notInclude(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('unregistered tree focusNode()ed with no prev focus removes focus', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.focusNode(this.testFocusableTree1Node1); + + this.focusManager.unregisterTree(this.testFocusableTree1); + + // Since the tree was unregistered it no longer has focus indicators. + const nodeElem = this.testFocusableTree1Node1.getFocusableElement(); + assert.notInclude(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(nodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('unregistered tree focusNode()ed with prev node prior removes focus from removed tree', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.focusNode(this.testFocusableTree2Node1); + this.focusManager.focusNode(this.testFocusableTree1Node1); + + this.focusManager.unregisterTree(this.testFocusableTree1); + + // Since the tree was unregistered it no longer has focus indicators. However, the old node + // should still have passive indication. + const otherNodeElem = + this.testFocusableTree2Node1.getFocusableElement(); + const removedNodeElem = + this.testFocusableTree1Node1.getFocusableElement(); + assert.include( + Array.from(otherNodeElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude( + Array.from(otherNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(removedNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(removedNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('unregistered tree focusNode()ed with prev node recently removes focus from removed tree', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.focusNode(this.testFocusableTree1Node1); + this.focusManager.focusNode(this.testFocusableTree2Node1); + + this.focusManager.unregisterTree(this.testFocusableTree1); + + // Since the tree was unregistered it no longer has focus indicators. However, the new node + // should still have active indication. + const otherNodeElem = + this.testFocusableTree2Node1.getFocusableElement(); + const removedNodeElem = + this.testFocusableTree1Node1.getFocusableElement(); + assert.include( + Array.from(otherNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(otherNodeElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude( + Array.from(removedNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(removedNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('focusNode() multiple nodes in same tree with switches ensure passive focus has gone', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.focusNode(this.testFocusableTree1Node1); + this.focusManager.focusNode(this.testFocusableTree2Node1); + + this.focusManager.focusNode(this.testFocusableTree1Node2); + + // When switching back to the first tree, ensure the original passive node is no longer + // passive now that the new node is active. + const node1 = this.testFocusableTree1Node1.getFocusableElement(); + const node2 = this.testFocusableTree1Node2.getFocusableElement(); + assert.notInclude(Array.from(node1.classList), 'blocklyPassiveFocus'); + assert.notInclude(Array.from(node2.classList), 'blocklyPassiveFocus'); + }); + + test('registered tree focusTree()ed other tree node passively focused tree node now has active property', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.focusNode(this.testFocusableTree1Node1); + this.focusManager.focusNode(this.testFocusableTree2Node1); + + this.focusManager.focusTree(this.testFocusableTree1); + + // The original node in the tree should be moved from passive to active focus per the + // contract of focusTree). Also, the root of the tree should have no focus indication. + const nodeElem = this.testFocusableTree1Node1.getFocusableElement(); + const rootElem = this.testFocusableTree1 + .getRootFocusableNode() + .getFocusableElement(); + assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(nodeElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('focus on root, node in diff tree, then node in first tree; root should have focus gone', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.focusTree(this.testFocusableTree1); + this.focusManager.focusNode(this.testFocusableTree2Node1); + + this.focusManager.focusNode(this.testFocusableTree1Node1); + + const nodeElem = this.testFocusableTree1Node1.getFocusableElement(); + const rootElem = this.testFocusableTree1 + .getRootFocusableNode() + .getFocusableElement(); + assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(nodeElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + }); + }); + + suite('DOM focus() switching in HTML tree', function () { + suite('getFocusedTree()', function () { + test('registered root focus()ed no prev focus returns tree', function () { + this.focusManager.registerTree(this.testFocusableTree1); + + document.getElementById('testFocusableTree1').focus(); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableTree1, + ); + }); + + test("registered node focus()ed no prev focus returns node's tree", function () { + this.focusManager.registerTree(this.testFocusableTree1); + + document.getElementById('testFocusableTree1.node1').focus(); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableTree1, + ); + }); + + test("registered subnode focus()ed no prev focus returns node's tree", function () { + this.focusManager.registerTree(this.testFocusableTree1); + + document.getElementById('testFocusableTree1.node1.child1').focus(); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableTree1, + ); + }); + + test('registered node focus()ed after prev node focus returns same tree', function () { + this.focusManager.registerTree(this.testFocusableTree1); + document.getElementById('testFocusableTree1.node1').focus(); + + document.getElementById('testFocusableTree1.node2').focus(); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableTree1, + ); + }); + + test("registered node focus()ed after prev node focus diff tree returns new node's tree", function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + document.getElementById('testFocusableTree1.node1').focus(); + + document.getElementById('testFocusableTree2.node1').focus(); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableTree2, + ); + }); + + test("registered tree root focus()ed after prev node focus diff tree returns new node's tree", function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + document.getElementById('testFocusableTree1.node1').focus(); + + document.getElementById('testFocusableTree2').focus(); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableTree2, + ); + }); + + test("non-registered node subelement focus()ed returns node's tree", function () { + this.focusManager.registerTree(this.testFocusableTree1); + + document + .getElementById('testFocusableTree1.node2.unregisteredChild1') + .focus(); + + // The tree of the unregistered child element should take focus. + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableTree1, + ); + }); + + test('non-registered tree focus()ed returns null', function () { + document.getElementById('testUnregisteredFocusableTree3').focus(); + + assert.isNull(this.focusManager.getFocusedTree()); + }); + + test('non-registered tree node focus()ed returns null', function () { + document.getElementById('testUnregisteredFocusableTree3.node1').focus(); + + assert.isNull(this.focusManager.getFocusedTree()); + }); + + test('non-registered tree node focus()ed after registered node focused returns original tree', function () { + this.focusManager.registerTree(this.testFocusableTree1); + document.getElementById('testFocusableTree1.node1').focus(); + + document.getElementById('testUnregisteredFocusableTree3.node1').focus(); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableTree1, + ); + }); + + test('unregistered tree focus()ed with no prev focus returns null', function () { + this.focusManager.registerTree(this.testFocusableTree1); + document.getElementById('testFocusableTree1').focus(); + + this.focusManager.unregisterTree(this.testFocusableTree1); + + assert.isNull(this.focusManager.getFocusedTree()); + }); + + test('unregistered tree focus()ed with no prev focus returns null', function () { + this.focusManager.registerTree(this.testFocusableTree1); + document.getElementById('testFocusableTree1.node1').focus(); + + this.focusManager.unregisterTree(this.testFocusableTree1); + + assert.isNull(this.focusManager.getFocusedTree()); + }); + + test('unregistered tree focus()ed with prev node prior focused returns null', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + document.getElementById('testFocusableTree2.node1').focus(); + document.getElementById('testFocusableTree1.node1').focus(); + + this.focusManager.unregisterTree(this.testFocusableTree1); + + // Since the more recent tree was removed, there's no tree currently focused. + assert.isNull(this.focusManager.getFocusedTree()); + }); + + test('unregistered tree focus()ed with prev node recently focused returns new tree', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + document.getElementById('testFocusableTree1.node1').focus(); + document.getElementById('testFocusableTree2.node1').focus(); + + this.focusManager.unregisterTree(this.testFocusableTree1); + + // Since the most recent tree still exists, it still has focus. + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableTree2, + ); + }); + + test('unregistered tree focus()ed with prev node after unregistering still returns old tree', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + document.getElementById('testFocusableTree1.node1').focus(); + document.getElementById('testFocusableTree2.node1').focus(); + this.focusManager.unregisterTree(this.testFocusableTree1); + + document.getElementById('testFocusableTree1.node1').focus(); + + // Attempting to focus a now removed tree should have no effect. + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableTree2, + ); + }); + }); + suite('getFocusedNode()', function () { + test('registered root focus()ed no prev focus returns root node', function () { + this.focusManager.registerTree(this.testFocusableTree1); + + document.getElementById('testFocusableTree1').focus(); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree1.getRootFocusableNode(), + ); + }); + + test('registered node focus()ed no prev focus returns node', function () { + this.focusManager.registerTree(this.testFocusableTree1); + + document.getElementById('testFocusableTree1.node1').focus(); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree1Node1, + ); + }); + + test('registered subnode focus()ed no prev focus returns subnode', function () { + this.focusManager.registerTree(this.testFocusableTree1); + + document.getElementById('testFocusableTree1.node1.child1').focus(); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree1Node1Child1, + ); + }); + + test('registered node focus()ed after prev node focus returns new node', function () { + this.focusManager.registerTree(this.testFocusableTree1); + document.getElementById('testFocusableTree1.node1').focus(); + + document.getElementById('testFocusableTree1.node2').focus(); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree1Node2, + ); + }); + + test('registered node focus()ed after prev node focus diff tree returns new node', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + document.getElementById('testFocusableTree1.node1').focus(); + + document.getElementById('testFocusableTree2.node1').focus(); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree2Node1, + ); + }); + + test('registered tree root focus()ed after prev node focus diff tree returns new root', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + document.getElementById('testFocusableTree1.node1').focus(); + + document.getElementById('testFocusableTree2').focus(); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree2.getRootFocusableNode(), + ); + }); + + test('non-registered node subelement focus()ed returns nearest node', function () { + this.focusManager.registerTree(this.testFocusableTree1); + + document + .getElementById('testFocusableTree1.node2.unregisteredChild1') + .focus(); + + // The nearest node of the unregistered child element should take focus. + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree1Node2, + ); + }); + + test('non-registered tree focus()ed returns null', function () { + document.getElementById('testUnregisteredFocusableTree3').focus(); + + assert.isNull(this.focusManager.getFocusedNode()); + }); + + test('non-registered tree node focus()ed returns null', function () { + document.getElementById('testUnregisteredFocusableTree3.node1').focus(); + + assert.isNull(this.focusManager.getFocusedNode()); + }); + + test('non-registered tree node focus()ed after registered node focused returns original node', function () { + this.focusManager.registerTree(this.testFocusableTree1); + document.getElementById('testFocusableTree1.node1').focus(); + + document.getElementById('testUnregisteredFocusableTree3.node1').focus(); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree1Node1, + ); + }); + + test('unregistered tree focus()ed with no prev focus returns null', function () { + this.focusManager.registerTree(this.testFocusableTree1); + document.getElementById('testFocusableTree1').focus(); + + this.focusManager.unregisterTree(this.testFocusableTree1); + + assert.isNull(this.focusManager.getFocusedNode()); + }); + + test('unregistered tree focus()ed with no prev focus returns null', function () { + this.focusManager.registerTree(this.testFocusableTree1); + document.getElementById('testFocusableTree1.node1').focus(); + + this.focusManager.unregisterTree(this.testFocusableTree1); + + assert.isNull(this.focusManager.getFocusedNode()); + }); + + test('unregistered tree focus()ed with prev node prior focused returns null', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + document.getElementById('testFocusableTree2.node1').focus(); + document.getElementById('testFocusableTree1.node1').focus(); + + this.focusManager.unregisterTree(this.testFocusableTree1); + + // Since the more recent tree was removed, there's no tree currently focused. + assert.isNull(this.focusManager.getFocusedNode()); + }); + + test('unregistered tree focus()ed with prev node recently focused returns new node', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + document.getElementById('testFocusableTree1.node1').focus(); + document.getElementById('testFocusableTree2.node1').focus(); + + this.focusManager.unregisterTree(this.testFocusableTree1); + + // Since the most recent tree still exists, it still has focus. + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree2Node1, + ); + }); + + test('unregistered tree focus()ed with prev node after unregistering still returns old node', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + document.getElementById('testFocusableTree1.node1').focus(); + document.getElementById('testFocusableTree2.node1').focus(); + this.focusManager.unregisterTree(this.testFocusableTree1); + + document.getElementById('testFocusableTree1.node1').focus(); + + // Attempting to focus a now removed tree should have no effect. + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree2Node1, + ); + }); + }); + suite('CSS classes', function () { + test('registered root focus()ed no prev focus returns root elem has active property', function () { + this.focusManager.registerTree(this.testFocusableTree1); + + document.getElementById('testFocusableTree1').focus(); + + const rootElem = this.testFocusableTree1 + .getRootFocusableNode() + .getFocusableElement(); + assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered node focus()ed no prev focus node elem has active property', function () { + this.focusManager.registerTree(this.testFocusableTree1); + + document.getElementById('testFocusableTree1.node1').focus(); + + const nodeElem = this.testFocusableTree1Node1.getFocusableElement(); + assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(nodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered node focus()ed after prev node focus same tree old node elem has no focus property', function () { + this.focusManager.registerTree(this.testFocusableTree1); + document.getElementById('testFocusableTree1.node1').focus(); + + document.getElementById('testFocusableTree1.node2').focus(); + + const prevNodeElem = this.testFocusableTree1Node1.getFocusableElement(); + assert.notInclude( + Array.from(prevNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(prevNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered node focus()ed after prev node focus same tree new node elem has active property', function () { + this.focusManager.registerTree(this.testFocusableTree1); + document.getElementById('testFocusableTree1.node1').focus(); + + document.getElementById('testFocusableTree1.node2').focus(); + + const newNodeElem = this.testFocusableTree1Node2.getFocusableElement(); + assert.include(Array.from(newNodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(newNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered node focus()ed after prev node focus diff tree old node elem has passive property', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + document.getElementById('testFocusableTree1.node1').focus(); + + document.getElementById('testFocusableTree2.node1').focus(); + + const prevNodeElem = this.testFocusableTree1Node1.getFocusableElement(); + assert.notInclude( + Array.from(prevNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.include( + Array.from(prevNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered node focus()ed after prev node focus diff tree new node elem has active property', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + document.getElementById('testFocusableTree1.node1').focus(); + + document.getElementById('testFocusableTree2.node1').focus(); + + const newNodeElem = this.testFocusableTree2Node1.getFocusableElement(); + assert.include(Array.from(newNodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(newNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered tree root focus()ed after prev node focus diff tree new root has active property', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + document.getElementById('testFocusableTree1.node1').focus(); + + document.getElementById('testFocusableTree2').focus(); + + const rootElem = this.testFocusableTree2 + .getRootFocusableNode() + .getFocusableElement(); + assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('non-registered node subelement focus()ed nearest node has active property', function () { + this.focusManager.registerTree(this.testFocusableTree1); + + document + .getElementById('testFocusableTree1.node2.unregisteredChild1') + .focus(); + + // The nearest node of the unregistered child element should be actively focused. + const nodeElem = this.testFocusableTree1Node2.getFocusableElement(); + assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(nodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('non-registered tree focus()ed has no focus', function () { + document.getElementById('testUnregisteredFocusableTree3').focus(); + + assert.isNull(this.focusManager.getFocusedNode()); + + const rootElem = document.getElementById( + 'testUnregisteredFocusableTree3', + ); + assert.notInclude(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('non-registered tree node focus()ed has no focus', function () { + document.getElementById('testUnregisteredFocusableTree3.node1').focus(); + + assert.isNull(this.focusManager.getFocusedNode()); + + const nodeElem = document.getElementById( + 'testUnregisteredFocusableTree3.node1', + ); + assert.notInclude(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(nodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('non-registered tree node focus()ed after registered node focused original node has active focus', function () { + this.focusManager.registerTree(this.testFocusableTree1); + document.getElementById('testFocusableTree1.node1').focus(); + + document.getElementById('testUnregisteredFocusableTree3.node1').focus(); + + // The original node should be unchanged, and the unregistered node should not have any + // focus indicators. + const nodeElem = document.getElementById('testFocusableTree1.node1'); + const attemptedNewNodeElem = document.getElementById( + 'testUnregisteredFocusableTree3.node1', + ); + assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(nodeElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude( + Array.from(attemptedNewNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(attemptedNewNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('unregistered tree focus()ed with no prev focus removes focus', function () { + this.focusManager.registerTree(this.testFocusableTree1); + document.getElementById('testFocusableTree1').focus(); + + this.focusManager.unregisterTree(this.testFocusableTree1); + + // Since the tree was unregistered it no longer has focus indicators. + const rootElem = this.testFocusableTree1 + .getRootFocusableNode() + .getFocusableElement(); + assert.notInclude(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('unregistered tree focus()ed with no prev focus removes focus', function () { + this.focusManager.registerTree(this.testFocusableTree1); + document.getElementById('testFocusableTree1.node1').focus(); + + this.focusManager.unregisterTree(this.testFocusableTree1); + + // Since the tree was unregistered it no longer has focus indicators. + const nodeElem = this.testFocusableTree1Node1.getFocusableElement(); + assert.notInclude(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(nodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('unregistered tree focus()ed with prev node prior removes focus from removed tree', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + document.getElementById('testFocusableTree2.node1').focus(); + document.getElementById('testFocusableTree1.node1').focus(); + + this.focusManager.unregisterTree(this.testFocusableTree1); + + // Since the tree was unregistered it no longer has focus indicators. However, the old node + // should still have passive indication. + const otherNodeElem = + this.testFocusableTree2Node1.getFocusableElement(); + const removedNodeElem = + this.testFocusableTree1Node1.getFocusableElement(); + assert.include( + Array.from(otherNodeElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude( + Array.from(otherNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(removedNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(removedNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('unregistered tree focus()ed with prev node recently removes focus from removed tree', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + document.getElementById('testFocusableTree1.node1').focus(); + document.getElementById('testFocusableTree2.node1').focus(); + + this.focusManager.unregisterTree(this.testFocusableTree1); + + // Since the tree was unregistered it no longer has focus indicators. However, the new node + // should still have active indication. + const otherNodeElem = + this.testFocusableTree2Node1.getFocusableElement(); + const removedNodeElem = + this.testFocusableTree1Node1.getFocusableElement(); + assert.include( + Array.from(otherNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(otherNodeElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude( + Array.from(removedNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(removedNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('unregistered tree focus()ed with prev node after unregistering does not change indicators', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + document.getElementById('testFocusableTree1.node1').focus(); + document.getElementById('testFocusableTree2.node1').focus(); + this.focusManager.unregisterTree(this.testFocusableTree1); + + document.getElementById('testFocusableTree1.node1').focus(); + + // Attempting to focus a now removed tree should have no effect. + const otherNodeElem = + this.testFocusableTree2Node1.getFocusableElement(); + const removedNodeElem = + this.testFocusableTree1Node1.getFocusableElement(); + assert.include( + Array.from(otherNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(otherNodeElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude( + Array.from(removedNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(removedNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('focus() multiple nodes in same tree with switches ensure passive focus has gone', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + document.getElementById('testFocusableTree1.node1').focus(); + document.getElementById('testFocusableTree2.node1').focus(); + + document.getElementById('testFocusableTree1.node2').focus(); + + // When switching back to the first tree, ensure the original passive node is no longer + // passive now that the new node is active. + const node1 = this.testFocusableTree1Node1.getFocusableElement(); + const node2 = this.testFocusableTree1Node2.getFocusableElement(); + assert.notInclude(Array.from(node1.classList), 'blocklyPassiveFocus'); + assert.notInclude(Array.from(node2.classList), 'blocklyPassiveFocus'); + }); + + test('registered tree focus()ed other tree node passively focused tree root now has active property', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + document.getElementById('testFocusableTree1.node1').focus(); + document.getElementById('testFocusableTree2.node1').focus(); + + document.getElementById('testFocusableTree1').focus(); + + // This differs from the behavior of focusTree() since directly focusing a tree's root will + // coerce it to now have focus. + const rootElem = this.testFocusableTree1 + .getRootFocusableNode() + .getFocusableElement(); + const nodeElem = this.testFocusableTree1Node1.getFocusableElement(); + assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(nodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('focus on root, node in diff tree, then node in first tree; root should have focus gone', function () { + this.focusManager.registerTree(this.testFocusableTree1); + this.focusManager.registerTree(this.testFocusableTree2); + document.getElementById('testFocusableTree1').focus(); + document.getElementById('testFocusableTree2.node1').focus(); + + document.getElementById('testFocusableTree1.node1').focus(); + + const nodeElem = this.testFocusableTree1Node1.getFocusableElement(); + const rootElem = this.testFocusableTree1 + .getRootFocusableNode() + .getFocusableElement(); + assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(nodeElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + }); + }); + + /* Focus tests for SVG trees. */ + + suite('focus*() switching in SVG tree', function () { + suite('getFocusedTree()', function () { + test('registered tree focusTree()ed no prev focus returns tree', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + + this.focusManager.focusTree(this.testFocusableGroup1); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableGroup1, + ); + }); + + test('registered tree focusTree()ed prev node focused returns tree', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.focusNode(this.testFocusableGroup1Node1); + + this.focusManager.focusTree(this.testFocusableGroup1); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableGroup1, + ); + }); + + test('registered tree focusTree()ed diff tree prev focused returns new tree', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusTree(this.testFocusableGroup1); + + this.focusManager.focusTree(this.testFocusableGroup2); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableGroup2, + ); + }); + + test('registered tree focusTree()ed diff tree node prev focused returns new tree', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableGroup1Node1); + + this.focusManager.focusTree(this.testFocusableGroup2); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableGroup2, + ); + }); + + test('registered root focusNode()ed no prev focus returns tree', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + + this.focusManager.focusNode( + this.testFocusableGroup1.getRootFocusableNode(), + ); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableGroup1, + ); + }); + + test("registered node focusNode()ed no prev focus returns node's tree", function () { + this.focusManager.registerTree(this.testFocusableGroup1); + + this.focusManager.focusNode(this.testFocusableGroup1Node1); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableGroup1, + ); + }); + + test("registered subnode focusNode()ed no prev focus returns node's tree", function () { + this.focusManager.registerTree(this.testFocusableGroup1); + + this.focusManager.focusNode(this.testFocusableGroup1Node1Child1); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableGroup1, + ); + }); + + test('registered node focusNode()ed after prev node focus returns same tree', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.focusNode(this.testFocusableGroup1Node1); + + this.focusManager.focusNode(this.testFocusableGroup1Node2); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableGroup1, + ); + }); + + test("registered node focusNode()ed after prev node focus diff tree returns new node's tree", function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableGroup1Node1); + + this.focusManager.focusNode(this.testFocusableGroup2Node1); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableGroup2, + ); + }); + + test("registered tree root focusNode()ed after prev node focus diff tree returns new node's tree", function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableGroup1Node1); + + this.focusManager.focusNode( + this.testFocusableGroup2.getRootFocusableNode(), + ); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableGroup2, + ); + }); + + test('unregistered tree focusTree()ed with no prev focus returns null', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.focusTree(this.testFocusableGroup1); + + this.focusManager.unregisterTree(this.testFocusableGroup1); + + assert.isNull(this.focusManager.getFocusedTree()); + }); + + test('unregistered tree focusNode()ed with no prev focus returns null', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.focusNode(this.testFocusableGroup1Node1); + + this.focusManager.unregisterTree(this.testFocusableGroup1); + + assert.isNull(this.focusManager.getFocusedTree()); + }); + + test('unregistered tree focusNode()ed with prev node prior focused returns null', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableGroup2Node1); + this.focusManager.focusNode(this.testFocusableGroup1Node1); + + this.focusManager.unregisterTree(this.testFocusableGroup1); + + // Since the more recent tree was removed, there's no tree currently focused. + assert.isNull(this.focusManager.getFocusedTree()); + }); + + test('unregistered tree focusNode()ed with prev node recently focused returns new tree', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableGroup1Node1); + this.focusManager.focusNode(this.testFocusableGroup2Node1); + + this.focusManager.unregisterTree(this.testFocusableGroup1); + + // Since the most recent tree still exists, it still has focus. + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableGroup2, + ); + }); + }); + suite('getFocusedNode()', function () { + test('registered tree focusTree()ed no prev focus returns root node', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + + this.focusManager.focusTree(this.testFocusableGroup1); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup1.getRootFocusableNode(), + ); + }); + + test('registered tree focusTree()ed prev node focused returns original node', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.focusNode(this.testFocusableGroup1Node1); + + this.focusManager.focusTree(this.testFocusableGroup1); + + // The original node retains focus since the tree already holds focus (per focusTree's + // contract). + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup1Node1, + ); + }); + + test('registered tree focusTree()ed diff tree prev focused returns new root node', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusTree(this.testFocusableGroup1); + + this.focusManager.focusTree(this.testFocusableGroup2); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup2.getRootFocusableNode(), + ); + }); + + test('registered tree focusTree()ed diff tree node prev focused returns new root node', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableGroup1Node1); + + this.focusManager.focusTree(this.testFocusableGroup2); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup2.getRootFocusableNode(), + ); + }); + + test('registered root focusNode()ed no prev focus returns root node', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + + this.focusManager.focusNode( + this.testFocusableGroup1.getRootFocusableNode(), + ); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup1.getRootFocusableNode(), + ); + }); + + test('registered node focusNode()ed no prev focus returns node', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + + this.focusManager.focusNode(this.testFocusableGroup1Node1); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup1Node1, + ); + }); + + test('registered subnode focusNode()ed no prev focus returns subnode', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + + this.focusManager.focusNode(this.testFocusableGroup1Node1Child1); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup1Node1Child1, + ); + }); + + test('registered node focusNode()ed after prev node focus returns new node', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.focusNode(this.testFocusableGroup1Node1); + + this.focusManager.focusNode(this.testFocusableGroup1Node2); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup1Node2, + ); + }); + + test('registered node focusNode()ed after prev node focus diff tree returns new node', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableGroup1Node1); + + this.focusManager.focusNode(this.testFocusableGroup2Node1); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup2Node1, + ); + }); + + test('registered tree root focusNode()ed after prev node focus diff tree returns new root', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableGroup1Node1); + + this.focusManager.focusNode( + this.testFocusableGroup2.getRootFocusableNode(), + ); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup2.getRootFocusableNode(), + ); + }); + + test('unregistered tree focusTree()ed with no prev focus returns null', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.focusTree(this.testFocusableGroup1); + + this.focusManager.unregisterTree(this.testFocusableGroup1); + + assert.isNull(this.focusManager.getFocusedNode()); + }); + + test('unregistered tree focusNode()ed with no prev focus returns null', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.focusNode(this.testFocusableGroup1Node1); + + this.focusManager.unregisterTree(this.testFocusableGroup1); + + assert.isNull(this.focusManager.getFocusedNode()); + }); + + test('unregistered tree focusNode()ed with prev node prior focused returns null', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableGroup2Node1); + this.focusManager.focusNode(this.testFocusableGroup1Node1); + + this.focusManager.unregisterTree(this.testFocusableGroup1); + + // Since the more recent tree was removed, there's no tree currently focused. + assert.isNull(this.focusManager.getFocusedNode()); + }); + + test('unregistered tree focusNode()ed with prev node recently focused returns new node', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableGroup1Node1); + this.focusManager.focusNode(this.testFocusableGroup2Node1); + + this.focusManager.unregisterTree(this.testFocusableGroup1); + + // Since the most recent tree still exists, it still has focus. + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup2Node1, + ); + }); + }); + suite('CSS classes', function () { + test('registered tree focusTree()ed no prev focus root elem has active property', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + + this.focusManager.focusTree(this.testFocusableGroup1); + + const rootElem = this.testFocusableGroup1 + .getRootFocusableNode() + .getFocusableElement(); + assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered tree focusTree()ed prev node focused original elem has active property', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.focusNode(this.testFocusableGroup1Node1); + + this.focusManager.focusTree(this.testFocusableGroup1); + + // The original node retains active focus since the tree already holds focus (per + // focusTree's contract). + const nodeElem = this.testFocusableGroup1Node1.getFocusableElement(); + assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(nodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered tree focusTree()ed diff tree prev focused new root elem has active property', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusTree(this.testFocusableGroup1); + + this.focusManager.focusTree(this.testFocusableGroup2); + + const rootElem = this.testFocusableGroup2 + .getRootFocusableNode() + .getFocusableElement(); + assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered tree focusTree()ed diff tree node prev focused new root elem has active property', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableGroup1Node1); + + this.focusManager.focusTree(this.testFocusableGroup2); + + const rootElem = this.testFocusableGroup2 + .getRootFocusableNode() + .getFocusableElement(); + assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered root focusNode()ed no prev focus returns root elem has active property', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + + this.focusManager.focusNode( + this.testFocusableGroup1.getRootFocusableNode(), + ); + + const rootElem = this.testFocusableGroup1 + .getRootFocusableNode() + .getFocusableElement(); + assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered node focusNode()ed no prev focus node elem has active property', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + + this.focusManager.focusNode(this.testFocusableGroup1Node1); + + const nodeElem = this.testFocusableGroup1Node1.getFocusableElement(); + assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(nodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered node focusNode()ed after prev node focus same tree old node elem has no focus property', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.focusNode(this.testFocusableGroup1Node1); + + this.focusManager.focusNode(this.testFocusableGroup1Node2); + + const prevNodeElem = + this.testFocusableGroup1Node1.getFocusableElement(); + assert.notInclude( + Array.from(prevNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(prevNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered node focusNode()ed after prev node focus same tree new node elem has active property', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.focusNode(this.testFocusableGroup1Node1); + + this.focusManager.focusNode(this.testFocusableGroup1Node2); + + const newNodeElem = this.testFocusableGroup1Node2.getFocusableElement(); + assert.include(Array.from(newNodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(newNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered node focusNode()ed after prev node focus diff tree old node elem has passive property', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableGroup1Node1); + + this.focusManager.focusNode(this.testFocusableGroup2Node1); + + const prevNodeElem = + this.testFocusableGroup1Node1.getFocusableElement(); + assert.notInclude( + Array.from(prevNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.include( + Array.from(prevNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered node focusNode()ed after prev node focus diff tree new node elem has active property', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableGroup1Node1); + + this.focusManager.focusNode(this.testFocusableGroup2Node1); + + const newNodeElem = this.testFocusableGroup2Node1.getFocusableElement(); + assert.include(Array.from(newNodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(newNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered tree root focusNode()ed after prev node focus diff tree new root has active property', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableGroup1Node1); + + this.focusManager.focusNode( + this.testFocusableGroup2.getRootFocusableNode(), + ); + + const rootElem = this.testFocusableGroup2 + .getRootFocusableNode() + .getFocusableElement(); + assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('unregistered tree focusTree()ed with no prev focus removes focus', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.focusTree(this.testFocusableGroup1); + + this.focusManager.unregisterTree(this.testFocusableGroup1); + + // Since the tree was unregistered it no longer has focus indicators. + const rootElem = this.testFocusableGroup1 + .getRootFocusableNode() + .getFocusableElement(); + assert.notInclude(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('unregistered tree focusNode()ed with no prev focus removes focus', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.focusNode(this.testFocusableGroup1Node1); + + this.focusManager.unregisterTree(this.testFocusableGroup1); + + // Since the tree was unregistered it no longer has focus indicators. + const nodeElem = this.testFocusableGroup1Node1.getFocusableElement(); + assert.notInclude(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(nodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('unregistered tree focusNode()ed with prev node prior removes focus from removed tree', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableGroup2Node1); + this.focusManager.focusNode(this.testFocusableGroup1Node1); + + this.focusManager.unregisterTree(this.testFocusableGroup1); + + // Since the tree was unregistered it no longer has focus indicators. However, the old node + // should still have passive indication. + const otherNodeElem = + this.testFocusableGroup2Node1.getFocusableElement(); + const removedNodeElem = + this.testFocusableGroup1Node1.getFocusableElement(); + assert.include( + Array.from(otherNodeElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude( + Array.from(otherNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(removedNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(removedNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('unregistered tree focusNode()ed with prev node recently removes focus from removed tree', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableGroup1Node1); + this.focusManager.focusNode(this.testFocusableGroup2Node1); + + this.focusManager.unregisterTree(this.testFocusableGroup1); + + // Since the tree was unregistered it no longer has focus indicators. However, the new node + // should still have active indication. + const otherNodeElem = + this.testFocusableGroup2Node1.getFocusableElement(); + const removedNodeElem = + this.testFocusableGroup1Node1.getFocusableElement(); + assert.include( + Array.from(otherNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(otherNodeElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude( + Array.from(removedNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(removedNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('focusNode() multiple nodes in same tree with switches ensure passive focus has gone', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableGroup1Node1); + this.focusManager.focusNode(this.testFocusableGroup2Node1); + + this.focusManager.focusNode(this.testFocusableGroup1Node2); + + // When switching back to the first tree, ensure the original passive node is no longer + // passive now that the new node is active. + const node1 = this.testFocusableGroup1Node1.getFocusableElement(); + const node2 = this.testFocusableGroup1Node2.getFocusableElement(); + assert.notInclude(Array.from(node1.classList), 'blocklyPassiveFocus'); + assert.notInclude(Array.from(node2.classList), 'blocklyPassiveFocus'); + }); + + test('registered tree focusTree()ed other tree node passively focused tree node now has active property', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableGroup1Node1); + this.focusManager.focusNode(this.testFocusableGroup2Node1); + + this.focusManager.focusTree(this.testFocusableGroup1); + + // The original node in the tree should be moved from passive to active focus per the + // contract of focusTree). Also, the root of the tree should have no focus indication. + const nodeElem = this.testFocusableGroup1Node1.getFocusableElement(); + const rootElem = this.testFocusableGroup1 + .getRootFocusableNode() + .getFocusableElement(); + assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(nodeElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('focus on root, node in diff tree, then node in first tree; root should have focus gone', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusTree(this.testFocusableGroup1); + this.focusManager.focusNode(this.testFocusableGroup2Node1); + + this.focusManager.focusNode(this.testFocusableGroup1Node1); + + const nodeElem = this.testFocusableGroup1Node1.getFocusableElement(); + const rootElem = this.testFocusableGroup1 + .getRootFocusableNode() + .getFocusableElement(); + assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(nodeElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + }); + }); + + suite('DOM focus() switching in SVG tree', function () { + suite('getFocusedTree()', function () { + test('registered root focus()ed no prev focus returns tree', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + + document.getElementById('testFocusableGroup1').focus(); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableGroup1, + ); + }); + + test("registered node focus()ed no prev focus returns node's tree", function () { + this.focusManager.registerTree(this.testFocusableGroup1); + + document.getElementById('testFocusableGroup1.node1').focus(); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableGroup1, + ); + }); + + test("registered subnode focus()ed no prev focus returns node's tree", function () { + this.focusManager.registerTree(this.testFocusableGroup1); + + document.getElementById('testFocusableGroup1.node1.child1').focus(); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableGroup1, + ); + }); + + test('registered node focus()ed after prev node focus returns same tree', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + document.getElementById('testFocusableGroup1.node1').focus(); + + document.getElementById('testFocusableGroup1.node2').focus(); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableGroup1, + ); + }); + + test("registered node focus()ed after prev node focus diff tree returns new node's tree", function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + document.getElementById('testFocusableGroup1.node1').focus(); + + document.getElementById('testFocusableGroup2.node1').focus(); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableGroup2, + ); + }); + + test("registered tree root focus()ed after prev node focus diff tree returns new node's tree", function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + document.getElementById('testFocusableGroup1.node1').focus(); + + document.getElementById('testFocusableGroup2').focus(); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableGroup2, + ); + }); + + test("non-registered node subelement focus()ed returns node's tree", function () { + this.focusManager.registerTree(this.testFocusableGroup1); + + document + .getElementById('testFocusableGroup1.node2.unregisteredChild1') + .focus(); + + // The tree of the unregistered child element should take focus. + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableGroup1, + ); + }); + + test('non-registered tree focus()ed returns null', function () { + document.getElementById('testUnregisteredFocusableGroup3').focus(); + + assert.isNull(this.focusManager.getFocusedTree()); + }); + + test('non-registered tree node focus()ed returns null', function () { + document + .getElementById('testUnregisteredFocusableGroup3.node1') + .focus(); + + assert.isNull(this.focusManager.getFocusedTree()); + }); + + test('non-registered tree node focus()ed after registered node focused returns original tree', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + document.getElementById('testFocusableGroup1.node1').focus(); + + document + .getElementById('testUnregisteredFocusableGroup3.node1') + .focus(); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableGroup1, + ); + }); + + test('unregistered tree focus()ed with no prev focus returns null', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + document.getElementById('testFocusableGroup1').focus(); + + this.focusManager.unregisterTree(this.testFocusableGroup1); + + assert.isNull(this.focusManager.getFocusedTree()); + }); + + test('unregistered tree focus()ed with no prev focus returns null', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + document.getElementById('testFocusableGroup1.node1').focus(); + + this.focusManager.unregisterTree(this.testFocusableGroup1); + + assert.isNull(this.focusManager.getFocusedTree()); + }); + + test('unregistered tree focus()ed with prev node prior focused returns null', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + document.getElementById('testFocusableGroup2.node1').focus(); + document.getElementById('testFocusableGroup1.node1').focus(); + + this.focusManager.unregisterTree(this.testFocusableGroup1); + + // Since the more recent tree was removed, there's no tree currently focused. + assert.isNull(this.focusManager.getFocusedTree()); + }); + + test('unregistered tree focus()ed with prev node recently focused returns new tree', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + document.getElementById('testFocusableGroup1.node1').focus(); + document.getElementById('testFocusableGroup2.node1').focus(); + + this.focusManager.unregisterTree(this.testFocusableGroup1); + + // Since the most recent tree still exists, it still has focus. + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableGroup2, + ); + }); + + test('unregistered tree focus()ed with prev node after unregistering still returns old tree', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + document.getElementById('testFocusableGroup1.node1').focus(); + document.getElementById('testFocusableGroup2.node1').focus(); + this.focusManager.unregisterTree(this.testFocusableGroup1); + + document.getElementById('testFocusableGroup1.node1').focus(); + + // Attempting to focus a now removed tree should have no effect. + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableGroup2, + ); + }); + }); + suite('getFocusedNode()', function () { + test('registered root focus()ed no prev focus returns root node', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + + document.getElementById('testFocusableGroup1').focus(); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup1.getRootFocusableNode(), + ); + }); + + test('registered node focus()ed no prev focus returns node', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + + document.getElementById('testFocusableGroup1.node1').focus(); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup1Node1, + ); + }); + + test('registered subnode focus()ed no prev focus returns subnode', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + + document.getElementById('testFocusableGroup1.node1.child1').focus(); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup1Node1Child1, + ); + }); + + test('registered node focus()ed after prev node focus returns new node', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + document.getElementById('testFocusableGroup1.node1').focus(); + + document.getElementById('testFocusableGroup1.node2').focus(); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup1Node2, + ); + }); + + test('registered node focus()ed after prev node focus diff tree returns new node', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + document.getElementById('testFocusableGroup1.node1').focus(); + + document.getElementById('testFocusableGroup2.node1').focus(); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup2Node1, + ); + }); + + test('registered tree root focus()ed after prev node focus diff tree returns new root', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + document.getElementById('testFocusableGroup1.node1').focus(); + + document.getElementById('testFocusableGroup2').focus(); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup2.getRootFocusableNode(), + ); + }); + + test('non-registered node subelement focus()ed returns nearest node', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + + document + .getElementById('testFocusableGroup1.node2.unregisteredChild1') + .focus(); + + // The nearest node of the unregistered child element should take focus. + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup1Node2, + ); + }); + + test('non-registered tree focus()ed returns null', function () { + document.getElementById('testUnregisteredFocusableGroup3').focus(); + + assert.isNull(this.focusManager.getFocusedNode()); + }); + + test('non-registered tree node focus()ed returns null', function () { + document + .getElementById('testUnregisteredFocusableGroup3.node1') + .focus(); + + assert.isNull(this.focusManager.getFocusedNode()); + }); + + test('non-registered tree node focus()ed after registered node focused returns original node', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + document.getElementById('testFocusableGroup1.node1').focus(); + + document + .getElementById('testUnregisteredFocusableGroup3.node1') + .focus(); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup1Node1, + ); + }); + + test('unregistered tree focus()ed with no prev focus returns null', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + document.getElementById('testFocusableGroup1').focus(); + + this.focusManager.unregisterTree(this.testFocusableGroup1); + + assert.isNull(this.focusManager.getFocusedNode()); + }); + + test('unregistered tree focus()ed with no prev focus returns null', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + document.getElementById('testFocusableGroup1.node1').focus(); + + this.focusManager.unregisterTree(this.testFocusableGroup1); + + assert.isNull(this.focusManager.getFocusedNode()); + }); + + test('unregistered tree focus()ed with prev node prior focused returns null', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + document.getElementById('testFocusableGroup2.node1').focus(); + document.getElementById('testFocusableGroup1.node1').focus(); + + this.focusManager.unregisterTree(this.testFocusableGroup1); + + // Since the more recent tree was removed, there's no tree currently focused. + assert.isNull(this.focusManager.getFocusedNode()); + }); + + test('unregistered tree focus()ed with prev node recently focused returns new node', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + document.getElementById('testFocusableGroup1.node1').focus(); + document.getElementById('testFocusableGroup2.node1').focus(); + + this.focusManager.unregisterTree(this.testFocusableGroup1); + + // Since the most recent tree still exists, it still has focus. + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup2Node1, + ); + }); + + test('unregistered tree focus()ed with prev node after unregistering still returns old node', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + document.getElementById('testFocusableGroup1.node1').focus(); + document.getElementById('testFocusableGroup2.node1').focus(); + this.focusManager.unregisterTree(this.testFocusableGroup1); + + document.getElementById('testFocusableGroup1.node1').focus(); + + // Attempting to focus a now removed tree should have no effect. + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup2Node1, + ); + }); + }); + suite('CSS classes', function () { + test('registered root focus()ed no prev focus returns root elem has active property', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + + document.getElementById('testFocusableGroup1').focus(); + + const rootElem = this.testFocusableGroup1 + .getRootFocusableNode() + .getFocusableElement(); + assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered node focus()ed no prev focus node elem has active property', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + + document.getElementById('testFocusableGroup1.node1').focus(); + + const nodeElem = this.testFocusableGroup1Node1.getFocusableElement(); + assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(nodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered node focus()ed after prev node focus same tree old node elem has no focus property', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + document.getElementById('testFocusableGroup1.node1').focus(); + + document.getElementById('testFocusableGroup1.node2').focus(); + + const prevNodeElem = + this.testFocusableGroup1Node1.getFocusableElement(); + assert.notInclude( + Array.from(prevNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(prevNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered node focus()ed after prev node focus same tree new node elem has active property', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + document.getElementById('testFocusableGroup1.node1').focus(); + + document.getElementById('testFocusableGroup1.node2').focus(); + + const newNodeElem = this.testFocusableGroup1Node2.getFocusableElement(); + assert.include(Array.from(newNodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(newNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered node focus()ed after prev node focus diff tree old node elem has passive property', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + document.getElementById('testFocusableGroup1.node1').focus(); + + document.getElementById('testFocusableGroup2.node1').focus(); + + const prevNodeElem = + this.testFocusableGroup1Node1.getFocusableElement(); + assert.notInclude( + Array.from(prevNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.include( + Array.from(prevNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered node focus()ed after prev node focus diff tree new node elem has active property', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + document.getElementById('testFocusableGroup1.node1').focus(); + + document.getElementById('testFocusableGroup2.node1').focus(); + + const newNodeElem = this.testFocusableGroup2Node1.getFocusableElement(); + assert.include(Array.from(newNodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(newNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('registered tree root focus()ed after prev node focus diff tree new root has active property', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + document.getElementById('testFocusableGroup1.node1').focus(); + + document.getElementById('testFocusableGroup2').focus(); + + const rootElem = this.testFocusableGroup2 + .getRootFocusableNode() + .getFocusableElement(); + assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('non-registered node subelement focus()ed nearest node has active property', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + + document + .getElementById('testFocusableGroup1.node2.unregisteredChild1') + .focus(); + + // The nearest node of the unregistered child element should be actively focused. + const nodeElem = this.testFocusableGroup1Node2.getFocusableElement(); + assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(nodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('non-registered tree focus()ed has no focus', function () { + document.getElementById('testUnregisteredFocusableGroup3').focus(); + + assert.isNull(this.focusManager.getFocusedNode()); + + const rootElem = document.getElementById( + 'testUnregisteredFocusableGroup3', + ); + assert.notInclude(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('non-registered tree node focus()ed has no focus', function () { + document + .getElementById('testUnregisteredFocusableGroup3.node1') + .focus(); + + assert.isNull(this.focusManager.getFocusedNode()); + + const nodeElem = document.getElementById( + 'testUnregisteredFocusableGroup3.node1', + ); + assert.notInclude(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(nodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('non-registered tree node focus()ed after registered node focused original node has active focus', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + document.getElementById('testFocusableGroup1.node1').focus(); + + document + .getElementById('testUnregisteredFocusableGroup3.node1') + .focus(); + + // The original node should be unchanged, and the unregistered node should not have any + // focus indicators. + const nodeElem = document.getElementById('testFocusableGroup1.node1'); + const attemptedNewNodeElem = document.getElementById( + 'testUnregisteredFocusableGroup3.node1', + ); + assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(nodeElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude( + Array.from(attemptedNewNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(attemptedNewNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('unregistered tree focus()ed with no prev focus removes focus', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + document.getElementById('testFocusableGroup1').focus(); + + this.focusManager.unregisterTree(this.testFocusableGroup1); + + // Since the tree was unregistered it no longer has focus indicators. + const rootElem = this.testFocusableGroup1 + .getRootFocusableNode() + .getFocusableElement(); + assert.notInclude(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('unregistered tree focus()ed with no prev focus removes focus', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + document.getElementById('testFocusableGroup1.node1').focus(); + + this.focusManager.unregisterTree(this.testFocusableGroup1); + + // Since the tree was unregistered it no longer has focus indicators. + const nodeElem = this.testFocusableGroup1Node1.getFocusableElement(); + assert.notInclude(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(nodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('unregistered tree focus()ed with prev node prior removes focus from removed tree', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + document.getElementById('testFocusableGroup2.node1').focus(); + document.getElementById('testFocusableGroup1.node1').focus(); + + this.focusManager.unregisterTree(this.testFocusableGroup1); + + // Since the tree was unregistered it no longer has focus indicators. However, the old node + // should still have passive indication. + const otherNodeElem = + this.testFocusableGroup2Node1.getFocusableElement(); + const removedNodeElem = + this.testFocusableGroup1Node1.getFocusableElement(); + assert.include( + Array.from(otherNodeElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude( + Array.from(otherNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(removedNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(removedNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('unregistered tree focus()ed with prev node recently removes focus from removed tree', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + document.getElementById('testFocusableGroup1.node1').focus(); + document.getElementById('testFocusableGroup2.node1').focus(); + + this.focusManager.unregisterTree(this.testFocusableGroup1); + + // Since the tree was unregistered it no longer has focus indicators. However, the new node + // should still have active indication. + const otherNodeElem = + this.testFocusableGroup2Node1.getFocusableElement(); + const removedNodeElem = + this.testFocusableGroup1Node1.getFocusableElement(); + assert.include( + Array.from(otherNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(otherNodeElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude( + Array.from(removedNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(removedNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('unregistered tree focus()ed with prev node after unregistering does not change indicators', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + document.getElementById('testFocusableGroup1.node1').focus(); + document.getElementById('testFocusableGroup2.node1').focus(); + this.focusManager.unregisterTree(this.testFocusableGroup1); + + document.getElementById('testFocusableGroup1.node1').focus(); + + // Attempting to focus a now removed tree should have no effect. + const otherNodeElem = + this.testFocusableGroup2Node1.getFocusableElement(); + const removedNodeElem = + this.testFocusableGroup1Node1.getFocusableElement(); + assert.include( + Array.from(otherNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(otherNodeElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude( + Array.from(removedNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(removedNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('focus() multiple nodes in same tree with switches ensure passive focus has gone', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + document.getElementById('testFocusableGroup1.node1').focus(); + document.getElementById('testFocusableGroup2.node1').focus(); + + document.getElementById('testFocusableGroup1.node2').focus(); + + // When switching back to the first tree, ensure the original passive node is no longer + // passive now that the new node is active. + const node1 = this.testFocusableGroup1Node1.getFocusableElement(); + const node2 = this.testFocusableGroup1Node2.getFocusableElement(); + assert.notInclude(Array.from(node1.classList), 'blocklyPassiveFocus'); + assert.notInclude(Array.from(node2.classList), 'blocklyPassiveFocus'); + }); + + test('registered tree focus()ed other tree node passively focused tree root now has active property', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + document.getElementById('testFocusableGroup1.node1').focus(); + document.getElementById('testFocusableGroup2.node1').focus(); + + document.getElementById('testFocusableGroup1').focus(); + + // This differs from the behavior of focusTree() since directly focusing a tree's root will + // coerce it to now have focus. + const rootElem = this.testFocusableGroup1 + .getRootFocusableNode() + .getFocusableElement(); + const nodeElem = this.testFocusableGroup1Node1.getFocusableElement(); + assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(nodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('focus on root, node in diff tree, then node in first tree; root should have focus gone', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + this.focusManager.registerTree(this.testFocusableGroup2); + document.getElementById('testFocusableGroup1').focus(); + document.getElementById('testFocusableGroup2.node1').focus(); + + document.getElementById('testFocusableGroup1.node1').focus(); + + const nodeElem = this.testFocusableGroup1Node1.getFocusableElement(); + const rootElem = this.testFocusableGroup1 + .getRootFocusableNode() + .getFocusableElement(); + assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(nodeElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + }); + }); + + /* Combined HTML/SVG tree focus tests. */ + + suite('HTML/SVG focus tree switching', function () { + suite('Focus HTML tree then SVG tree', function () { + test('HTML focusTree()ed then SVG focusTree()ed correctly updates getFocusedTree() and indicators', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusTree(this.testFocusableTree2); + + this.focusManager.focusTree(this.testFocusableGroup2); + + const prevElem = this.testFocusableTree2 + .getRootFocusableNode() + .getFocusableElement(); + const currElem = this.testFocusableGroup2 + .getRootFocusableNode() + .getFocusableElement(); + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableGroup2, + ); + assert.strictEqual(document.activeElement, currElem); + assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(currElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); + assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + }); + + test('HTML focusTree()ed then SVG focusNode()ed correctly updates getFocusedNode() and indicators', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusTree(this.testFocusableTree2); + + this.focusManager.focusNode(this.testFocusableGroup2Node1); + + const prevElem = this.testFocusableTree2 + .getRootFocusableNode() + .getFocusableElement(); + const currElem = this.testFocusableGroup2Node1.getFocusableElement(); + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup2Node1, + ); + assert.strictEqual(document.activeElement, currElem); + assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(currElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); + assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + }); + + test('HTML focusTree()ed then SVG DOM focus()ed correctly updates getFocusedNode() and indicators', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusTree(this.testFocusableTree2); + + document.getElementById('testFocusableGroup2.node1').focus(); + + const prevElem = this.testFocusableTree2 + .getRootFocusableNode() + .getFocusableElement(); + const currElem = this.testFocusableGroup2Node1.getFocusableElement(); + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup2Node1, + ); + assert.strictEqual(document.activeElement, currElem); + assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(currElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); + assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + }); + + test('HTML focusNode()ed then SVG focusTree()ed correctly updates getFocusedTree() and indicators', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableTree2Node1); + + this.focusManager.focusTree(this.testFocusableGroup2); + + const prevElem = this.testFocusableTree2Node1.getFocusableElement(); + const currElem = this.testFocusableGroup2 + .getRootFocusableNode() + .getFocusableElement(); + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableGroup2, + ); + assert.strictEqual(document.activeElement, currElem); + assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(currElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); + assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + }); + + test('HTML focusNode()ed then SVG focusNode()ed correctly updates getFocusedNode() and indicators', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableTree2Node1); + + this.focusManager.focusNode(this.testFocusableGroup2Node1); + + const prevElem = this.testFocusableTree2Node1.getFocusableElement(); + const currElem = this.testFocusableGroup2Node1.getFocusableElement(); + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup2Node1, + ); + assert.strictEqual(document.activeElement, currElem); + assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(currElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); + assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + }); + + test('HTML focusNode()ed then SVG DOM focus()ed correctly updates getFocusedNode() and indicators', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableTree2Node1); + + document.getElementById('testFocusableGroup2.node1').focus(); + + const prevElem = this.testFocusableTree2Node1.getFocusableElement(); + const currElem = this.testFocusableGroup2Node1.getFocusableElement(); + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup2Node1, + ); + assert.strictEqual(document.activeElement, currElem); + assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(currElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); + assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + }); + + test('HTML DOM focus()ed then SVG focusTree()ed correctly updates getFocusedTree() and indicators', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + document.getElementById('testFocusableTree2.node1').focus(); + + this.focusManager.focusTree(this.testFocusableGroup2); + + const prevElem = this.testFocusableTree2Node1.getFocusableElement(); + const currElem = this.testFocusableGroup2 + .getRootFocusableNode() + .getFocusableElement(); + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableGroup2, + ); + assert.strictEqual(document.activeElement, currElem); + assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(currElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); + assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + }); + + test('HTML DOM focus()ed then SVG focusNode()ed correctly updates getFocusedNode() and indicators', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + document.getElementById('testFocusableTree2.node1').focus(); + + this.focusManager.focusNode(this.testFocusableGroup2Node1); + + const prevElem = this.testFocusableTree2Node1.getFocusableElement(); + const currElem = this.testFocusableGroup2Node1.getFocusableElement(); + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup2Node1, + ); + assert.strictEqual(document.activeElement, currElem); + assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(currElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); + assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + }); + + test('HTML DOM focus()ed then SVG DOM focus()ed correctly updates getFocusedNode() and indicators', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + document.getElementById('testFocusableTree2.node1').focus(); + + document.getElementById('testFocusableGroup2.node1').focus(); + + const prevElem = this.testFocusableTree2Node1.getFocusableElement(); + const currElem = this.testFocusableGroup2Node1.getFocusableElement(); + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup2Node1, + ); + assert.strictEqual(document.activeElement, currElem); + assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(currElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); + assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + }); + }); + suite('Focus SVG tree then HTML tree', function () { + test('SVG focusTree()ed then HTML focusTree()ed correctly updates getFocusedTree() and indicators', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusTree(this.testFocusableGroup2); + + this.focusManager.focusTree(this.testFocusableTree2); + + const prevElem = this.testFocusableGroup2 + .getRootFocusableNode() + .getFocusableElement(); + const currElem = this.testFocusableTree2 + .getRootFocusableNode() + .getFocusableElement(); + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableTree2, + ); + assert.strictEqual(document.activeElement, currElem); + assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(currElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); + assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + }); + + test('SVG focusTree()ed then HTML focusNode()ed correctly updates getFocusedNode() and indicators', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusTree(this.testFocusableGroup2); + + this.focusManager.focusNode(this.testFocusableTree2Node1); + + const prevElem = this.testFocusableGroup2 + .getRootFocusableNode() + .getFocusableElement(); + const currElem = this.testFocusableTree2Node1.getFocusableElement(); + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree2Node1, + ); + assert.strictEqual(document.activeElement, currElem); + assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(currElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); + assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + }); + + test('SVG focusTree()ed then HTML DOM focus()ed correctly updates getFocusedNode() and indicators', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusTree(this.testFocusableGroup2); + + document.getElementById('testFocusableTree2.node1').focus(); + + const prevElem = this.testFocusableGroup2 + .getRootFocusableNode() + .getFocusableElement(); + const currElem = this.testFocusableTree2Node1.getFocusableElement(); + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree2Node1, + ); + assert.strictEqual(document.activeElement, currElem); + assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(currElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); + assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + }); + + test('SVG focusNode()ed then HTML focusTree()ed correctly updates getFocusedTree() and indicators', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableGroup2Node1); + + this.focusManager.focusTree(this.testFocusableTree2); + + const prevElem = this.testFocusableGroup2Node1.getFocusableElement(); + const currElem = this.testFocusableTree2 + .getRootFocusableNode() + .getFocusableElement(); + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableTree2, + ); + assert.strictEqual(document.activeElement, currElem); + assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(currElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); + assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + }); + + test('SVG focusNode()ed then HTML focusNode()ed correctly updates getFocusedNode() and indicators', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableGroup2Node1); + + this.focusManager.focusNode(this.testFocusableTree2Node1); + + const prevElem = this.testFocusableGroup2Node1.getFocusableElement(); + const currElem = this.testFocusableTree2Node1.getFocusableElement(); + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree2Node1, + ); + assert.strictEqual(document.activeElement, currElem); + assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(currElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); + assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + }); + + test('SVG focusNode()ed then HTML DOM focus()ed correctly updates getFocusedNode() and indicators', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableGroup2Node1); + + document.getElementById('testFocusableTree2.node1').focus(); + + const prevElem = this.testFocusableGroup2Node1.getFocusableElement(); + const currElem = this.testFocusableTree2Node1.getFocusableElement(); + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree2Node1, + ); + assert.strictEqual(document.activeElement, currElem); + assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(currElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); + assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + }); + + test('SVG DOM focus()ed then HTML focusTree()ed correctly updates getFocusedTree() and indicators', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + document.getElementById('testFocusableGroup2.node1').focus(); + + this.focusManager.focusTree(this.testFocusableTree2); + + const prevElem = this.testFocusableGroup2Node1.getFocusableElement(); + const currElem = this.testFocusableTree2 + .getRootFocusableNode() + .getFocusableElement(); + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableTree2, + ); + assert.strictEqual(document.activeElement, currElem); + assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(currElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); + assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + }); + + test('SVG DOM focus()ed then HTML focusNode()ed correctly updates getFocusedNode() and indicators', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + document.getElementById('testFocusableGroup2.node1').focus(); + + this.focusManager.focusNode(this.testFocusableTree2Node1); + + const prevElem = this.testFocusableGroup2Node1.getFocusableElement(); + const currElem = this.testFocusableTree2Node1.getFocusableElement(); + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree2Node1, + ); + assert.strictEqual(document.activeElement, currElem); + assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(currElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); + assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + }); + + test('SVG DOM focus()ed then HTML DOM focus()ed correctly updates getFocusedNode() and indicators', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + document.getElementById('testFocusableGroup2.node1').focus(); + + document.getElementById('testFocusableTree2.node1').focus(); + + const prevElem = this.testFocusableGroup2Node1.getFocusableElement(); + const currElem = this.testFocusableTree2Node1.getFocusableElement(); + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree2Node1, + ); + assert.strictEqual(document.activeElement, currElem); + assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(currElem.classList), + 'blocklyPassiveFocus', + ); + assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); + assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + }); + }); + }); + + /* Ephemeral focus tests. */ + + suite('takeEphemeralFocus()', function () { + function classListOf(node) { + return Array.from(node.getFocusableElement().classList); + } + + test('with no focused node does not change states', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + + const ephemeralElement = document.getElementById( + 'nonTreeElementForEphemeralFocus', + ); + this.focusManager.takeEphemeralFocus(ephemeralElement); + + // Taking focus without an existing node having focus should change no focus indicators. + const activeElems = Array.from( + document.querySelectorAll('.blocklyActiveFocus'), + ); + const passiveElems = Array.from( + document.querySelectorAll('.blocklyPassiveFocus'), + ); + assert.isEmpty(activeElems); + assert.isEmpty(passiveElems); + }); + + test('with focused node changes focused node to passive', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableTree2Node1); + + const ephemeralElement = document.getElementById( + 'nonTreeElementForEphemeralFocus', + ); + this.focusManager.takeEphemeralFocus(ephemeralElement); + + // Taking focus without an existing node having focus should change no focus indicators. + const activeElems = Array.from( + document.querySelectorAll('.blocklyActiveFocus'), + ); + const passiveElems = Array.from( + document.querySelectorAll('.blocklyPassiveFocus'), + ); + assert.isEmpty(activeElems); + assert.equal(passiveElems.length, 1); + assert.include( + classListOf(this.testFocusableTree2Node1), + 'blocklyPassiveFocus', + ); + }); + + test('focuses provided HTML element', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + + const ephemeralElement = document.getElementById( + 'nonTreeElementForEphemeralFocus', + ); + this.focusManager.takeEphemeralFocus(ephemeralElement); + + assert.strictEqual(document.activeElement, ephemeralElement); + }); + + test('focuses provided SVG element', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + + const ephemeralElement = document.getElementById( + 'nonTreeGroupForEphemeralFocus', + ); + this.focusManager.takeEphemeralFocus(ephemeralElement); + + assert.strictEqual(document.activeElement, ephemeralElement); + }); + + test('twice for without finishing previous throws error', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + const ephemeralGroupElement = document.getElementById( + 'nonTreeGroupForEphemeralFocus', + ); + const ephemeralDivElement = document.getElementById( + 'nonTreeElementForEphemeralFocus', + ); + this.focusManager.takeEphemeralFocus(ephemeralGroupElement); + + const errorMsgRegex = + /Attempted to take ephemeral focus when it's already held+?/; + assert.throws( + () => this.focusManager.takeEphemeralFocus(ephemeralDivElement), + errorMsgRegex, + ); + }); + + test('then focusTree() changes getFocusedTree() but not active state', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusTree(this.testFocusableTree2); + const ephemeralElement = document.getElementById( + 'nonTreeGroupForEphemeralFocus', + ); + this.focusManager.takeEphemeralFocus(ephemeralElement); + + this.focusManager.focusTree(this.testFocusableGroup2); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableGroup2, + ); + const activeElems = Array.from( + document.querySelectorAll('.blocklyActiveFocus'), + ); + assert.isEmpty(activeElems); + }); + + test('then focusNode() changes getFocusedNode() but not active state', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableTree2Node1); + const ephemeralElement = document.getElementById( + 'nonTreeGroupForEphemeralFocus', + ); + this.focusManager.takeEphemeralFocus(ephemeralElement); + + this.focusManager.focusNode(this.testFocusableGroup2Node1); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup2Node1, + ); + const activeElems = Array.from( + document.querySelectorAll('.blocklyActiveFocus'), + ); + assert.isEmpty(activeElems); + }); + + test('then DOM refocus changes getFocusedNode() but not active state', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableTree2Node1); + const ephemeralElement = document.getElementById( + 'nonTreeGroupForEphemeralFocus', + ); + this.focusManager.takeEphemeralFocus(ephemeralElement); + + // Force focus to change via the DOM. + document.getElementById('testFocusableGroup2.node1').focus(); + + // The focus() state change will affect getFocusedNode() but it will not cause the node to now + // be active. + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup2Node1, + ); + const activeElems = Array.from( + document.querySelectorAll('.blocklyActiveFocus'), + ); + assert.isEmpty(activeElems); + }); + + test('then finish ephemeral callback with no node does not change indicators', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + const ephemeralElement = document.getElementById( + 'nonTreeElementForEphemeralFocus', + ); + const finishFocusCallback = + this.focusManager.takeEphemeralFocus(ephemeralElement); + + finishFocusCallback(); + + // Finishing ephemeral focus without a previously focused node should not change indicators. + const activeElems = Array.from( + document.querySelectorAll('.blocklyActiveFocus'), + ); + const passiveElems = Array.from( + document.querySelectorAll('.blocklyPassiveFocus'), + ); + assert.isEmpty(activeElems); + assert.isEmpty(passiveElems); + }); + + test('again after finishing previous empheral focus should focus new element', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + const ephemeralGroupElement = document.getElementById( + 'nonTreeGroupForEphemeralFocus', + ); + const ephemeralDivElement = document.getElementById( + 'nonTreeElementForEphemeralFocus', + ); + const finishFocusCallback = this.focusManager.takeEphemeralFocus( + ephemeralGroupElement, + ); + + finishFocusCallback(); + this.focusManager.takeEphemeralFocus(ephemeralDivElement); + + // An exception should not be thrown and the new element should receive focus. + assert.strictEqual(document.activeElement, ephemeralDivElement); + }); + + test('calling ephemeral callback twice throws error', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + const ephemeralElement = document.getElementById( + 'nonTreeElementForEphemeralFocus', + ); + const finishFocusCallback = + this.focusManager.takeEphemeralFocus(ephemeralElement); + finishFocusCallback(); + + const errorMsgRegex = + /Attempted to finish ephemeral focus twice for element+?/; + assert.throws(() => finishFocusCallback(), errorMsgRegex); + }); + + test('then finish ephemeral callback should restore focused node', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableTree2Node1); + const ephemeralElement = document.getElementById( + 'nonTreeGroupForEphemeralFocus', + ); + const finishFocusCallback = + this.focusManager.takeEphemeralFocus(ephemeralElement); + + finishFocusCallback(); + + // The original focused node should be restored. + const nodeElem = this.testFocusableTree2Node1.getFocusableElement(); + const activeElems = Array.from( + document.querySelectorAll('.blocklyActiveFocus'), + ); + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree2Node1, + ); + assert.equal(activeElems.length, 1); + assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.strictEqual(document.activeElement, nodeElem); + }); + + test('then focusTree() and finish ephemeral callback correctly sets new active state', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusTree(this.testFocusableTree2); + const ephemeralElement = document.getElementById( + 'nonTreeGroupForEphemeralFocus', + ); + const finishFocusCallback = + this.focusManager.takeEphemeralFocus(ephemeralElement); + + this.focusManager.focusTree(this.testFocusableGroup2); + finishFocusCallback(); + + // The tree's root should now be the active element since focus changed between the start and + // end of the ephemeral flow. + const rootElem = this.testFocusableGroup2 + .getRootFocusableNode() + .getFocusableElement(); + const activeElems = Array.from( + document.querySelectorAll('.blocklyActiveFocus'), + ); + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableGroup2, + ); + assert.equal(activeElems.length, 1); + assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.strictEqual(document.activeElement, rootElem); + }); + + test('then focusNode() and finish ephemeral callback correctly sets new active state', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableTree2Node1); + const ephemeralElement = document.getElementById( + 'nonTreeGroupForEphemeralFocus', + ); + const finishFocusCallback = + this.focusManager.takeEphemeralFocus(ephemeralElement); + + this.focusManager.focusNode(this.testFocusableGroup2Node1); + finishFocusCallback(); + + // The tree's root should now be the active element since focus changed between the start and + // end of the ephemeral flow. + const nodeElem = this.testFocusableGroup2Node1.getFocusableElement(); + const activeElems = Array.from( + document.querySelectorAll('.blocklyActiveFocus'), + ); + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup2Node1, + ); + assert.equal(activeElems.length, 1); + assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.strictEqual(document.activeElement, nodeElem); + }); + + test('then DOM focus change and finish ephemeral callback correctly sets new active state', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.focusNode(this.testFocusableTree2Node1); + const ephemeralElement = document.getElementById( + 'nonTreeGroupForEphemeralFocus', + ); + const finishFocusCallback = + this.focusManager.takeEphemeralFocus(ephemeralElement); + + document.getElementById('testFocusableGroup2.node1').focus(); + finishFocusCallback(); + + // The tree's root should now be the active element since focus changed between the start and + // end of the ephemeral flow. + const nodeElem = this.testFocusableGroup2Node1.getFocusableElement(); + const activeElems = Array.from( + document.querySelectorAll('.blocklyActiveFocus'), + ); + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableGroup2Node1, + ); + assert.equal(activeElems.length, 1); + assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.strictEqual(document.activeElement, nodeElem); + }); + }); +}); diff --git a/tests/mocha/index.html b/tests/mocha/index.html index 008d1f1b1..2eb42869a 100644 --- a/tests/mocha/index.html +++ b/tests/mocha/index.html @@ -13,11 +13,82 @@ visibility: hidden; width: 1000px; } + + .blocklyActiveFocus { + outline-color: #0f0; + outline-width: 2px; + } + .blocklyPassiveFocus { + outline-color: #00f; + outline-width: 1.5px; + } + div.blocklyActiveFocus { + color: #0f0; + } + div.blocklyPassiveFocus { + color: #00f; + } + g.blocklyActiveFocus { + fill: #0f0; + } + g.blocklyPassiveFocus { + fill: #00f; + }
+
+
+ Tree 1 node 1 +
Tree 1 node 1 child 1
+
+
+ Tree 1 node 2 +
Tree 1 node 2 child 2 (unregistered)
+
+
+
+
Tree 2 node 1
+
+
+
Tree 3 node 1 (unregistered)
+
+
+ + + + + Group 1 node 1 + + + Tree 1 node 1 child 1 + + + + + Group 1 node 2 + + + Tree 1 node 2 child 2 (unregistered) + + + + + + + Group 2 node 1 + + + + + + Tree 3 node 1 (unregistered) + + + + @@ -90,6 +161,8 @@ import './field_textinput_test.js'; import './field_variable_test.js'; import './flyout_test.js'; + import './focus_manager_test.js'; + // import './test_event_reduction.js'; import './generator_test.js'; import './gesture_test.js'; import './icon_test.js'; From 516e3af936b2ba0cba511dc22378d4361be96d80 Mon Sep 17 00:00:00 2001 From: Ben Henning Date: Thu, 27 Mar 2025 21:57:30 +0000 Subject: [PATCH 2/7] feat: finish core impl + tests This adds new tests for the FocusableTreeTraverser and fixes a number of issues with the original implementation (one of which required two new API methods to be added to IFocusableTree). More tests have also been added for FocusManager, and defocusing tracked nodes/trees has been fully implemented in FocusManager. --- core/focus_manager.ts | 12 +- core/interfaces/i_focusable_tree.ts | 28 +- core/utils/focusable_tree_traverser.ts | 76 +- tests/mocha/focus_manager_test.js | 833 +++++++++++++++++-- tests/mocha/focusable_tree_traverser_test.js | 480 +++++++++++ tests/mocha/index.html | 62 +- 6 files changed, 1400 insertions(+), 91 deletions(-) create mode 100644 tests/mocha/focusable_tree_traverser_test.js diff --git a/core/focus_manager.ts b/core/focus_manager.ts index 5e6e0af48..d79db4b4b 100644 --- a/core/focus_manager.ts +++ b/core/focus_manager.ts @@ -62,7 +62,7 @@ export class FocusManager { if (newNode) { this.focusNode(newNode); } else { - // TODO: Set previous to passive if all trees are losing active focus. + this.defocusCurrentFocusedNode(); } }); } @@ -259,6 +259,16 @@ export class FocusManager { }; } + private defocusCurrentFocusedNode(): void { + // The current node will likely be defocused while ephemeral focus is held, + // but internal manager state shouldn't change since the node should be + // restored upon exiting ephemeral focus mode. + if (this.focusedNode && !this.currentlyHoldsEphemeralFocus) { + this.setNodeToPassive(this.focusedNode); + this.focusedNode = null; + } + } + private setNodeToActive(node: IFocusableNode): void { const element = node.getFocusableElement(); dom.addClass(element, 'blocklyActiveFocus'); diff --git a/core/interfaces/i_focusable_tree.ts b/core/interfaces/i_focusable_tree.ts index 1a8ccf82b..9cedba732 100644 --- a/core/interfaces/i_focusable_tree.ts +++ b/core/interfaces/i_focusable_tree.ts @@ -40,6 +40,28 @@ export interface IFocusableTree { */ getRootFocusableNode(): IFocusableNode; + /** + * Returns all directly nested trees under this tree. + * + * Note that the returned list of trees doesn't need to be stable, however all + * returned trees *do* need to be registered with FocusManager. Additionally, + * this must return actual nested trees as omitting a nested tree will affect + * how focus changes map to a specific node and its tree, potentially leading + * to user confusion. + */ + getNestedTrees(): Array; + + /** + * Returns the IFocusableNode corresponding to the specified element ID, or + * null if there's no exact node within this tree with that ID or if the ID + * corresponds to the root of the tree. + * + * This will never match against nested trees. + * + * @param id The ID of the node's focusable HTMLElement or SVGElement. + */ + lookUpFocusableNode(id: string): IFocusableNode | null; + /** * Returns the IFocusableNode corresponding to the select element, or null if * the element does not have such a node. @@ -47,7 +69,11 @@ export interface IFocusableTree { * The provided element must have a non-null ID that conforms to the contract * mentioned in IFocusableNode. * - * This function may match against the root node of the tree. + * This function may match against the root node of the tree. It will also map + * against the nearest node to the provided element if the element does not + * have an exact matching corresponding node. This function filters out + * matches against nested trees, so long as they are represented in the return + * value of getNestedTrees. */ findFocusableNodeFor( element: HTMLElement | SVGElement, diff --git a/core/utils/focusable_tree_traverser.ts b/core/utils/focusable_tree_traverser.ts index b7465e884..eb6de1e05 100644 --- a/core/utils/focusable_tree_traverser.ts +++ b/core/utils/focusable_tree_traverser.ts @@ -6,6 +6,7 @@ import type {IFocusableNode} from '../interfaces/i_focusable_node.js'; import type {IFocusableTree} from '../interfaces/i_focusable_tree.js'; +import * as dom from '../utils/dom.js'; /** * A helper utility for IFocusableTree implementations to aid with common @@ -24,20 +25,29 @@ export class FocusableTreeTraverser { */ static findFocusedNode(tree: IFocusableTree): IFocusableNode | null { const root = tree.getRootFocusableNode().getFocusableElement(); - const activeElem = root.querySelector('.blocklyActiveFocus'); - let active: IFocusableNode | null = null; - if (activeElem instanceof HTMLElement || activeElem instanceof SVGElement) { - active = tree.findFocusableNodeFor(activeElem); + if ( + dom.hasClass(root, 'blocklyActiveFocus') || + dom.hasClass(root, 'blocklyPassiveFocus') + ) { + // The root has focus. + return tree.getRootFocusableNode(); } - const passiveElems = Array.from( - root.querySelectorAll('.blocklyPassiveFocus'), - ); - const passive = passiveElems.map((elem) => { - if (elem instanceof HTMLElement || elem instanceof SVGElement) { - return tree.findFocusableNodeFor(elem); - } else return null; - }); - return active || passive.find((node) => !!node) || null; + + const activeEl = root.querySelector('.blocklyActiveFocus'); + let active: IFocusableNode | null = null; + if (activeEl instanceof HTMLElement || activeEl instanceof SVGElement) { + active = tree.findFocusableNodeFor(activeEl); + } + + // At most there should be one passive indicator per tree (not considering + // subtrees). + const passiveEl = root.querySelector('.blocklyPassiveFocus'); + let passive: IFocusableNode | null = null; + if (passiveEl instanceof HTMLElement || passiveEl instanceof SVGElement) { + passive = tree.findFocusableNodeFor(passiveEl); + } + + return active ?? passive; } /** @@ -47,38 +57,42 @@ export class FocusableTreeTraverser { * * If the tree contains another nested IFocusableTree, the nested tree may be * traversed but its nodes will never be returned here per the contract of - * findChildById. - * - * findChildById is a provided callback that takes an element ID and maps it - * back to the corresponding IFocusableNode within the provided - * IFocusableTree. These IDs will match the contract specified in the - * documentation for IFocusableNode. This function must not return any node - * that doesn't directly belong to the node's nearest parent tree. + * IFocusableTree.lookUpFocusableNode. * * @param element The HTML or SVG element being sought. * @param tree The tree under which the provided element may be a descendant. - * @param findChildById The ID->IFocusableNode mapping callback that must - * follow the contract mentioned above. * @returns The matching IFocusableNode, or null if there is no match. */ static findFocusableNodeFor( element: HTMLElement | SVGElement, tree: IFocusableTree, - findChildById: (id: string) => IFocusableNode | null, ): IFocusableNode | null { + // First, match against subtrees. + const subTreeMatches = tree + .getNestedTrees() + .map((tree) => tree.findFocusableNodeFor(element)); + if (subTreeMatches.findIndex((match) => !!match) !== -1) { + // At least one subtree has a match for the element so it cannot be part + // of the outer tree. + return null; + } + + // Second, check against the tree's root. if (element === tree.getRootFocusableNode().getFocusableElement()) { return tree.getRootFocusableNode(); } - const matchedChildNode = findChildById(element.id); + + // Third, check if the element has a node. + const matchedChildNode = tree.lookUpFocusableNode(element.id) ?? null; + if (matchedChildNode) return matchedChildNode; + + // Fourth, recurse up to find the nearest tree/node if it's possible. const elementParent = element.parentElement; if (!matchedChildNode && elementParent) { - // Recurse up to find the nearest tree/node. - return FocusableTreeTraverser.findFocusableNodeFor( - elementParent, - tree, - findChildById, - ); + return FocusableTreeTraverser.findFocusableNodeFor(elementParent, tree); } - return matchedChildNode; + + // Otherwise, there's no matching node. + return null; } } diff --git a/tests/mocha/focus_manager_test.js b/tests/mocha/focus_manager_test.js index 86a19fd18..e18dbc79e 100644 --- a/tests/mocha/focus_manager_test.js +++ b/tests/mocha/focus_manager_test.js @@ -1,10 +1,13 @@ /** * @license - * Copyright 2020 Google LLC + * Copyright 2025 Google LLC * SPDX-License-Identifier: Apache-2.0 */ -import {FocusManager} from '../../build/src/core/focus_manager.js'; +import { + FocusManager, + getFocusManager, +} from '../../build/src/core/focus_manager.js'; import {FocusableTreeTraverser} from '../../build/src/core/utils/focusable_tree_traverser.js'; import {assert} from '../../node_modules/chai/chai.js'; import { @@ -33,7 +36,7 @@ suite('FocusManager', function () { return tree; }; }; - const FocusableTreeImpl = function (rootElement) { + const FocusableTreeImpl = function (rootElement, nestedTrees) { this.idToNodeMap = {}; this.addNode = function (element) { @@ -50,19 +53,26 @@ suite('FocusManager', function () { return this.rootNode; }; + this.getNestedTrees = function () { + return nestedTrees; + }; + + this.lookUpFocusableNode = function (id) { + return this.idToNodeMap[id]; + }; + this.findFocusableNodeFor = function (element) { - return FocusableTreeTraverser.findFocusableNodeFor( - element, - this, - (id) => this.idToNodeMap[id], - ); + return FocusableTreeTraverser.findFocusableNodeFor(element, this); }; this.rootNode = this.addNode(rootElement); }; - const createFocusableTree = function (rootElementId) { - return new FocusableTreeImpl(document.getElementById(rootElementId)); + const createFocusableTree = function (rootElementId, nestedTrees) { + return new FocusableTreeImpl( + document.getElementById(rootElementId), + nestedTrees || [], + ); }; const createFocusableNode = function (tree, elementId) { return tree.addNode(document.getElementById(elementId)); @@ -81,11 +91,29 @@ suite('FocusManager', function () { this.testFocusableTree1, 'testFocusableTree1.node2', ); - this.testFocusableTree2 = createFocusableTree('testFocusableTree2'); + this.testFocusableNestedTree4 = createFocusableTree( + 'testFocusableNestedTree4', + ); + this.testFocusableNestedTree4Node1 = createFocusableNode( + this.testFocusableNestedTree4, + 'testFocusableNestedTree4.node1', + ); + this.testFocusableNestedTree5 = createFocusableTree( + 'testFocusableNestedTree5', + ); + this.testFocusableNestedTree5Node1 = createFocusableNode( + this.testFocusableNestedTree5, + 'testFocusableNestedTree5.node1', + ); + this.testFocusableTree2 = createFocusableTree('testFocusableTree2', [ + this.testFocusableNestedTree4, + this.testFocusableNestedTree5, + ]); this.testFocusableTree2Node1 = createFocusableNode( this.testFocusableTree2, 'testFocusableTree2.node1', ); + this.testFocusableGroup1 = createFocusableTree('testFocusableGroup1'); this.testFocusableGroup1Node1 = createFocusableNode( this.testFocusableGroup1, @@ -99,7 +127,16 @@ suite('FocusManager', function () { this.testFocusableGroup1, 'testFocusableGroup1.node2', ); - this.testFocusableGroup2 = createFocusableTree('testFocusableGroup2'); + this.testFocusableNestedGroup4 = createFocusableTree( + 'testFocusableNestedGroup4', + ); + this.testFocusableNestedGroup4Node1 = createFocusableNode( + this.testFocusableNestedGroup4, + 'testFocusableNestedGroup4.node1', + ); + this.testFocusableGroup2 = createFocusableTree('testFocusableGroup2', [ + this.testFocusableNestedGroup4, + ]); this.testFocusableGroup2Node1 = createFocusableNode( this.testFocusableGroup2, 'testFocusableGroup2.node1', @@ -128,6 +165,10 @@ suite('FocusManager', function () { removeFocusIndicators(document.getElementById('testFocusableTree1.node2')); removeFocusIndicators(document.getElementById('testFocusableTree2')); removeFocusIndicators(document.getElementById('testFocusableTree2.node1')); + removeFocusIndicators(document.getElementById('testFocusableNestedTree4')); + removeFocusIndicators( + document.getElementById('testFocusableNestedTree4.node1'), + ); removeFocusIndicators(document.getElementById('testFocusableGroup1')); removeFocusIndicators(document.getElementById('testFocusableGroup1.node1')); removeFocusIndicators( @@ -136,6 +177,13 @@ suite('FocusManager', function () { removeFocusIndicators(document.getElementById('testFocusableGroup1.node2')); removeFocusIndicators(document.getElementById('testFocusableGroup2')); removeFocusIndicators(document.getElementById('testFocusableGroup2.node1')); + removeFocusIndicators(document.getElementById('testFocusableNestedGroup4')); + removeFocusIndicators( + document.getElementById('testFocusableNestedGroup4.node1'), + ); + + // Reset the current active element. + document.body.focus(); }); /* Basic lifecycle tests. */ @@ -303,6 +351,43 @@ suite('FocusManager', function () { errorMsgRegex, ); }); + + test('focuses element', function () { + this.focusManager.registerTree(this.testFocusableTree1); + + this.focusManager.focusNode(this.testFocusableTree1Node1); + + const nodeElem = this.testFocusableTree1Node1.getFocusableElement(); + assert.strictEqual(document.activeElement, nodeElem); + }); + + test('fires focusin event', function () { + let focusCount = 0; + const focusListener = () => focusCount++; + document.addEventListener('focusin', focusListener); + this.focusManager.registerTree(this.testFocusableTree1); + + this.focusManager.focusNode(this.testFocusableTree1Node1); + document.removeEventListener('focusin', focusListener); + + // There should be exactly 1 focus event fired from focusNode(). + assert.equal(focusCount, 1); + }); + }); + + suite('getFocusManager()', function () { + test('returns non-null manager', function () { + const manager = getFocusManager(); + + assert.isNotNull(manager); + }); + + test('returns the exact same instance in subsequent calls', function () { + const manager1 = getFocusManager(); + const manager2 = getFocusManager(); + + assert.strictEqual(manager2, manager1); + }); }); /* Focus tests for HTML trees. */ @@ -477,6 +562,43 @@ suite('FocusManager', function () { this.testFocusableTree2, ); }); + + test('nested tree focusTree()ed with no prev focus returns nested tree', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableNestedTree4); + + this.focusManager.focusTree(this.testFocusableNestedTree4); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableNestedTree4, + ); + }); + + test('nested tree node focusNode()ed with no prev focus returns nested tree', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableNestedTree4); + + this.focusManager.focusNode(this.testFocusableNestedTree4Node1); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableNestedTree4, + ); + }); + + test('nested tree node focusNode()ed after parent focused returns nested tree', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableNestedTree4); + this.focusManager.focusNode(this.testFocusableTree2Node1); + + this.focusManager.focusNode(this.testFocusableNestedTree4Node1); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableNestedTree4, + ); + }); }); suite('getFocusedNode()', function () { test('registered tree focusTree()ed no prev focus returns root node', function () { @@ -649,6 +771,43 @@ suite('FocusManager', function () { this.testFocusableTree2Node1, ); }); + + test('nested tree focusTree()ed with no prev focus returns nested root', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableNestedTree4); + + this.focusManager.focusTree(this.testFocusableNestedTree4); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableNestedTree4.getRootFocusableNode(), + ); + }); + + test('nested tree node focusNode()ed with no prev focus returns focused node', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableNestedTree4); + + this.focusManager.focusNode(this.testFocusableNestedTree4Node1); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableNestedTree4Node1, + ); + }); + + test('nested tree node focusNode()ed after parent focused returns focused node', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableNestedTree4); + this.focusManager.focusNode(this.testFocusableTree2Node1); + + this.focusManager.focusNode(this.testFocusableNestedTree4Node1); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableNestedTree4Node1, + ); + }); }); suite('CSS classes', function () { test('registered tree focusTree()ed no prev focus root elem has active property', function () { @@ -990,6 +1149,65 @@ suite('FocusManager', function () { 'blocklyPassiveFocus', ); }); + + test('nested tree focusTree()ed with no prev root has active focus', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableNestedTree4); + + this.focusManager.focusTree(this.testFocusableNestedTree4); + + const rootElem = this.testFocusableNestedTree4 + .getRootFocusableNode() + .getFocusableElement(); + assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('nested tree node focusNode()ed with no prev focus node has active focus', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableNestedTree4); + + this.focusManager.focusNode(this.testFocusableNestedTree4Node1); + + const nodeElem = + this.testFocusableNestedTree4Node1.getFocusableElement(); + assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(nodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('nested tree node focusNode()ed after parent focused prev has passive node has active', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableNestedTree4); + this.focusManager.focusNode(this.testFocusableTree2Node1); + + this.focusManager.focusNode(this.testFocusableNestedTree4Node1); + + const prevNodeElem = this.testFocusableTree2Node1.getFocusableElement(); + const currNodeElem = + this.testFocusableNestedTree4Node1.getFocusableElement(); + assert.notInclude( + Array.from(prevNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.include( + Array.from(prevNodeElem.classList), + 'blocklyPassiveFocus', + ); + assert.include( + Array.from(currNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(currNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); }); }); @@ -1092,12 +1310,21 @@ suite('FocusManager', function () { assert.isNull(this.focusManager.getFocusedTree()); }); - test('non-registered tree node focus()ed after registered node focused returns original tree', function () { + test('non-registered tree node focus()ed after registered node focused returns null', function () { this.focusManager.registerTree(this.testFocusableTree1); document.getElementById('testFocusableTree1.node1').focus(); document.getElementById('testUnregisteredFocusableTree3.node1').focus(); + assert.isNull(this.focusManager.getFocusedTree()); + }); + + test('unfocusable element focus()ed after registered node focused returns original tree', function () { + this.focusManager.registerTree(this.testFocusableTree1); + document.getElementById('testFocusableTree1.node1').focus(); + + document.getElementById('testUnfocusableElement').focus(); + assert.equal( this.focusManager.getFocusedTree(), this.testFocusableTree1, @@ -1149,7 +1376,7 @@ suite('FocusManager', function () { ); }); - test('unregistered tree focus()ed with prev node after unregistering still returns old tree', function () { + test('unregistered tree focus()ed with prev node after unregistering returns null', function () { this.focusManager.registerTree(this.testFocusableTree1); this.focusManager.registerTree(this.testFocusableTree2); document.getElementById('testFocusableTree1.node1').focus(); @@ -1158,10 +1385,46 @@ suite('FocusManager', function () { document.getElementById('testFocusableTree1.node1').focus(); - // Attempting to focus a now removed tree should have no effect. + // Attempting to focus a now removed tree should result in nothing being + // focused since the removed tree can have DOM focus, but that focus is + // ignored by FocusManager. + assert.isNull(this.focusManager.getFocusedTree()); + }); + + test('nested tree focusTree()ed with no prev focus returns nested tree', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableNestedTree4); + + document.getElementById('testFocusableNestedTree4').focus(); + assert.equal( this.focusManager.getFocusedTree(), - this.testFocusableTree2, + this.testFocusableNestedTree4, + ); + }); + + test('nested tree node focusNode()ed with no prev focus returns nested tree', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableNestedTree4); + + document.getElementById('testFocusableNestedTree4.node1').focus(); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableNestedTree4, + ); + }); + + test('nested tree node focusNode()ed after parent focused returns nested tree', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableNestedTree4); + document.getElementById('testFocusableTree2.node1').focus(); + + document.getElementById('testFocusableNestedTree4.node1').focus(); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableNestedTree4, ); }); }); @@ -1263,12 +1526,21 @@ suite('FocusManager', function () { assert.isNull(this.focusManager.getFocusedNode()); }); - test('non-registered tree node focus()ed after registered node focused returns original node', function () { + test('non-registered tree node focus()ed after registered node focused returns null', function () { this.focusManager.registerTree(this.testFocusableTree1); document.getElementById('testFocusableTree1.node1').focus(); document.getElementById('testUnregisteredFocusableTree3.node1').focus(); + assert.isNull(this.focusManager.getFocusedNode()); + }); + + test('unfocuasble element focus()ed after registered node focused returns original node', function () { + this.focusManager.registerTree(this.testFocusableTree1); + document.getElementById('testFocusableTree1.node1').focus(); + + document.getElementById('testUnfocusableElement').focus(); + assert.equal( this.focusManager.getFocusedNode(), this.testFocusableTree1Node1, @@ -1320,7 +1592,7 @@ suite('FocusManager', function () { ); }); - test('unregistered tree focus()ed with prev node after unregistering still returns old node', function () { + test('unregistered tree focus()ed with prev node after unregistering returns null', function () { this.focusManager.registerTree(this.testFocusableTree1); this.focusManager.registerTree(this.testFocusableTree2); document.getElementById('testFocusableTree1.node1').focus(); @@ -1329,10 +1601,46 @@ suite('FocusManager', function () { document.getElementById('testFocusableTree1.node1').focus(); - // Attempting to focus a now removed tree should have no effect. + // Attempting to focus a now removed tree should result in nothing being + // focused since the removed tree can have DOM focus, but that focus is + // ignored by FocusManager. + assert.isNull(this.focusManager.getFocusedNode()); + }); + + test('nested tree focus()ed with no prev focus returns nested root', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableNestedTree4); + + document.getElementById('testFocusableNestedTree4').focus(); + assert.equal( this.focusManager.getFocusedNode(), - this.testFocusableTree2Node1, + this.testFocusableNestedTree4.getRootFocusableNode(), + ); + }); + + test('nested tree node focus()ed with no prev focus returns focused node', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableNestedTree4); + + document.getElementById('testFocusableNestedTree4.node1').focus(); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableNestedTree4Node1, + ); + }); + + test('nested tree node focus()ed after parent focused returns focused node', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableNestedTree4); + document.getElementById('testFocusableTree2.node1').focus(); + + document.getElementById('testFocusableNestedTree4.node1').focus(); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableNestedTree4Node1, ); }); }); @@ -1492,17 +1800,17 @@ suite('FocusManager', function () { ); }); - test('non-registered tree node focus()ed after registered node focused original node has active focus', function () { + test('unfocsable element focus()ed after registered node focused original node has active focus', function () { this.focusManager.registerTree(this.testFocusableTree1); document.getElementById('testFocusableTree1.node1').focus(); - document.getElementById('testUnregisteredFocusableTree3.node1').focus(); + document.getElementById('testUnfocusableElement').focus(); // The original node should be unchanged, and the unregistered node should not have any // focus indicators. const nodeElem = document.getElementById('testFocusableTree1.node1'); const attemptedNewNodeElem = document.getElementById( - 'testUnregisteredFocusableTree3.node1', + 'testUnfocusableElement', ); assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); assert.notInclude( @@ -1615,7 +1923,7 @@ suite('FocusManager', function () { ); }); - test('unregistered tree focus()ed with prev node after unregistering does not change indicators', function () { + test('unregistered tree focus()ed with prev node after unregistering removes active indicator', function () { this.focusManager.registerTree(this.testFocusableTree1); this.focusManager.registerTree(this.testFocusableTree2); document.getElementById('testFocusableTree1.node1').focus(); @@ -1624,16 +1932,16 @@ suite('FocusManager', function () { document.getElementById('testFocusableTree1.node1').focus(); - // Attempting to focus a now removed tree should have no effect. + // Attempting to focus a now removed tree should remove active. const otherNodeElem = this.testFocusableTree2Node1.getFocusableElement(); const removedNodeElem = this.testFocusableTree1Node1.getFocusableElement(); - assert.include( + assert.notInclude( Array.from(otherNodeElem.classList), 'blocklyActiveFocus', ); - assert.notInclude( + assert.include( Array.from(otherNodeElem.classList), 'blocklyPassiveFocus', ); @@ -1712,6 +2020,65 @@ suite('FocusManager', function () { 'blocklyPassiveFocus', ); }); + + test('nested tree focus()ed with no prev root has active focus', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableNestedTree4); + + document.getElementById('testFocusableNestedTree4').focus(); + + const rootElem = this.testFocusableNestedTree4 + .getRootFocusableNode() + .getFocusableElement(); + assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('nested tree node focus()ed with no prev focus node has active focus', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableNestedTree4); + + document.getElementById('testFocusableNestedTree4.node1').focus(); + + const nodeElem = + this.testFocusableNestedTree4Node1.getFocusableElement(); + assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(nodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('nested tree node focus()ed after parent focused prev has passive node has active', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableNestedTree4); + document.getElementById('testFocusableTree2.node1').focus(); + + document.getElementById('testFocusableNestedTree4.node1').focus(); + + const prevNodeElem = this.testFocusableTree2Node1.getFocusableElement(); + const currNodeElem = + this.testFocusableNestedTree4Node1.getFocusableElement(); + assert.notInclude( + Array.from(prevNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.include( + Array.from(prevNodeElem.classList), + 'blocklyPassiveFocus', + ); + assert.include( + Array.from(currNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(currNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); }); }); @@ -1887,6 +2254,43 @@ suite('FocusManager', function () { this.testFocusableGroup2, ); }); + + test('nested tree focusTree()ed with no prev focus returns nested tree', function () { + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.registerTree(this.testFocusableNestedGroup4); + + this.focusManager.focusTree(this.testFocusableNestedGroup4); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableNestedGroup4, + ); + }); + + test('nested tree node focusNode()ed with no prev focus returns nested tree', function () { + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.registerTree(this.testFocusableNestedGroup4); + + this.focusManager.focusNode(this.testFocusableNestedGroup4Node1); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableNestedGroup4, + ); + }); + + test('nested tree node focusNode()ed after parent focused returns nested tree', function () { + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.registerTree(this.testFocusableNestedGroup4); + this.focusManager.focusNode(this.testFocusableGroup2Node1); + + this.focusManager.focusNode(this.testFocusableNestedGroup4Node1); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableNestedGroup4, + ); + }); }); suite('getFocusedNode()', function () { test('registered tree focusTree()ed no prev focus returns root node', function () { @@ -2059,6 +2463,43 @@ suite('FocusManager', function () { this.testFocusableGroup2Node1, ); }); + + test('nested tree focusTree()ed with no prev focus returns nested root', function () { + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.registerTree(this.testFocusableNestedGroup4); + + this.focusManager.focusTree(this.testFocusableNestedGroup4); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableNestedGroup4.getRootFocusableNode(), + ); + }); + + test('nested tree node focusNode()ed with no prev focus returns focused node', function () { + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.registerTree(this.testFocusableNestedGroup4); + + this.focusManager.focusNode(this.testFocusableNestedGroup4Node1); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableNestedGroup4Node1, + ); + }); + + test('nested tree node focusNode()ed after parent focused returns focused node', function () { + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.registerTree(this.testFocusableNestedGroup4); + this.focusManager.focusNode(this.testFocusableGroup2Node1); + + this.focusManager.focusNode(this.testFocusableNestedGroup4Node1); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableNestedGroup4Node1, + ); + }); }); suite('CSS classes', function () { test('registered tree focusTree()ed no prev focus root elem has active property', function () { @@ -2402,6 +2843,66 @@ suite('FocusManager', function () { 'blocklyPassiveFocus', ); }); + + test('nested tree focusTree()ed with no prev root has active focus', function () { + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.registerTree(this.testFocusableNestedGroup4); + + this.focusManager.focusTree(this.testFocusableNestedGroup4); + + const rootElem = this.testFocusableNestedGroup4 + .getRootFocusableNode() + .getFocusableElement(); + assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('nested tree node focusNode()ed with no prev focus node has active focus', function () { + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.registerTree(this.testFocusableNestedGroup4); + + this.focusManager.focusNode(this.testFocusableNestedGroup4Node1); + + const nodeElem = + this.testFocusableNestedGroup4Node1.getFocusableElement(); + assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(nodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('nested tree node focusNode()ed after parent focused prev has passive node has active', function () { + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.registerTree(this.testFocusableNestedGroup4); + this.focusManager.focusNode(this.testFocusableGroup2Node1); + + this.focusManager.focusNode(this.testFocusableNestedGroup4Node1); + + const prevNodeElem = + this.testFocusableGroup2Node1.getFocusableElement(); + const currNodeElem = + this.testFocusableNestedGroup4Node1.getFocusableElement(); + assert.notInclude( + Array.from(prevNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.include( + Array.from(prevNodeElem.classList), + 'blocklyPassiveFocus', + ); + assert.include( + Array.from(currNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(currNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); }); }); @@ -2506,7 +3007,7 @@ suite('FocusManager', function () { assert.isNull(this.focusManager.getFocusedTree()); }); - test('non-registered tree node focus()ed after registered node focused returns original tree', function () { + test('non-registered tree node focus()ed after registered node focused returns null', function () { this.focusManager.registerTree(this.testFocusableGroup1); document.getElementById('testFocusableGroup1.node1').focus(); @@ -2514,10 +3015,10 @@ suite('FocusManager', function () { .getElementById('testUnregisteredFocusableGroup3.node1') .focus(); - assert.equal( - this.focusManager.getFocusedTree(), - this.testFocusableGroup1, - ); + // Attempting to focus a now removed tree should result in nothing being + // focused since the removed tree can have DOM focus, but that focus is + // ignored by FocusManager. + assert.isNull(this.focusManager.getFocusedTree()); }); test('unregistered tree focus()ed with no prev focus returns null', function () { @@ -2565,7 +3066,7 @@ suite('FocusManager', function () { ); }); - test('unregistered tree focus()ed with prev node after unregistering still returns old tree', function () { + test('unregistered tree focus()ed with prev node after unregistering returns null', function () { this.focusManager.registerTree(this.testFocusableGroup1); this.focusManager.registerTree(this.testFocusableGroup2); document.getElementById('testFocusableGroup1.node1').focus(); @@ -2574,10 +3075,46 @@ suite('FocusManager', function () { document.getElementById('testFocusableGroup1.node1').focus(); - // Attempting to focus a now removed tree should have no effect. + // Attempting to focus a now removed tree should result in nothing being + // focused since the removed tree can have DOM focus, but that focus is + // ignored by FocusManager. + assert.isNull(this.focusManager.getFocusedTree()); + }); + + test('nested tree focusTree()ed with no prev focus returns nested tree', function () { + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.registerTree(this.testFocusableNestedGroup4); + + document.getElementById('testFocusableNestedGroup4').focus(); + assert.equal( this.focusManager.getFocusedTree(), - this.testFocusableGroup2, + this.testFocusableNestedGroup4, + ); + }); + + test('nested tree node focusNode()ed with no prev focus returns nested tree', function () { + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.registerTree(this.testFocusableNestedGroup4); + + document.getElementById('testFocusableNestedGroup4.node1').focus(); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableNestedGroup4, + ); + }); + + test('nested tree node focusNode()ed after parent focused returns nested tree', function () { + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.registerTree(this.testFocusableNestedGroup4); + document.getElementById('testFocusableGroup2.node1').focus(); + + document.getElementById('testFocusableNestedGroup4.node1').focus(); + + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableNestedGroup4, ); }); }); @@ -2681,7 +3218,7 @@ suite('FocusManager', function () { assert.isNull(this.focusManager.getFocusedNode()); }); - test('non-registered tree node focus()ed after registered node focused returns original node', function () { + test('non-registered tree node focus()ed after registered node focused returns null', function () { this.focusManager.registerTree(this.testFocusableGroup1); document.getElementById('testFocusableGroup1.node1').focus(); @@ -2689,6 +3226,15 @@ suite('FocusManager', function () { .getElementById('testUnregisteredFocusableGroup3.node1') .focus(); + assert.isNull(this.focusManager.getFocusedNode()); + }); + + test('unfocusable element focus()ed after registered node focused returns original node', function () { + this.focusManager.registerTree(this.testFocusableGroup1); + document.getElementById('testFocusableGroup1.node1').focus(); + + document.getElementById('testUnfocusableElement').focus(); + assert.equal( this.focusManager.getFocusedNode(), this.testFocusableGroup1Node1, @@ -2740,7 +3286,7 @@ suite('FocusManager', function () { ); }); - test('unregistered tree focus()ed with prev node after unregistering still returns old node', function () { + test('unregistered tree focus()ed with prev node after unregistering returns null', function () { this.focusManager.registerTree(this.testFocusableGroup1); this.focusManager.registerTree(this.testFocusableGroup2); document.getElementById('testFocusableGroup1.node1').focus(); @@ -2749,10 +3295,46 @@ suite('FocusManager', function () { document.getElementById('testFocusableGroup1.node1').focus(); - // Attempting to focus a now removed tree should have no effect. + // Attempting to focus a now removed tree should result in nothing being + // focused since the removed tree can have DOM focus, but that focus is + // ignored by FocusManager. + assert.isNull(this.focusManager.getFocusedNode()); + }); + + test('nested tree focus()ed with no prev focus returns nested root', function () { + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.registerTree(this.testFocusableNestedGroup4); + + document.getElementById('testFocusableNestedGroup4').focus(); + assert.equal( this.focusManager.getFocusedNode(), - this.testFocusableGroup2Node1, + this.testFocusableNestedGroup4.getRootFocusableNode(), + ); + }); + + test('nested tree node focus()ed with no prev focus returns focused node', function () { + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.registerTree(this.testFocusableNestedGroup4); + + document.getElementById('testFocusableNestedGroup4.node1').focus(); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableNestedGroup4Node1, + ); + }); + + test('nested tree node focus()ed after parent focused returns focused node', function () { + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.registerTree(this.testFocusableNestedGroup4); + document.getElementById('testFocusableGroup2.node1').focus(); + + document.getElementById('testFocusableNestedGroup4.node1').focus(); + + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableNestedGroup4Node1, ); }); }); @@ -2916,19 +3498,17 @@ suite('FocusManager', function () { ); }); - test('non-registered tree node focus()ed after registered node focused original node has active focus', function () { + test('unfocusable element focus()ed after registered node focused original node has active focus', function () { this.focusManager.registerTree(this.testFocusableGroup1); document.getElementById('testFocusableGroup1.node1').focus(); - document - .getElementById('testUnregisteredFocusableGroup3.node1') - .focus(); + document.getElementById('testUnfocusableElement').focus(); // The original node should be unchanged, and the unregistered node should not have any // focus indicators. const nodeElem = document.getElementById('testFocusableGroup1.node1'); const attemptedNewNodeElem = document.getElementById( - 'testUnregisteredFocusableGroup3.node1', + 'testUnfocusableElement', ); assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); assert.notInclude( @@ -3041,7 +3621,7 @@ suite('FocusManager', function () { ); }); - test('unregistered tree focus()ed with prev node after unregistering does not change indicators', function () { + test('unregistered tree focus()ed with prev node after unregistering removes active indicator', function () { this.focusManager.registerTree(this.testFocusableGroup1); this.focusManager.registerTree(this.testFocusableGroup2); document.getElementById('testFocusableGroup1.node1').focus(); @@ -3050,16 +3630,16 @@ suite('FocusManager', function () { document.getElementById('testFocusableGroup1.node1').focus(); - // Attempting to focus a now removed tree should have no effect. + // Attempting to focus a now removed tree should remove active. const otherNodeElem = this.testFocusableGroup2Node1.getFocusableElement(); const removedNodeElem = this.testFocusableGroup1Node1.getFocusableElement(); - assert.include( + assert.notInclude( Array.from(otherNodeElem.classList), 'blocklyActiveFocus', ); - assert.notInclude( + assert.include( Array.from(otherNodeElem.classList), 'blocklyPassiveFocus', ); @@ -3138,6 +3718,163 @@ suite('FocusManager', function () { 'blocklyPassiveFocus', ); }); + + test('nested tree focus()ed with no prev root has active focus', function () { + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.registerTree(this.testFocusableNestedGroup4); + + document.getElementById('testFocusableNestedGroup4').focus(); + + const rootElem = this.testFocusableNestedGroup4 + .getRootFocusableNode() + .getFocusableElement(); + assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(rootElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('nested tree node focus()ed with no prev focus node has active focus', function () { + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.registerTree(this.testFocusableNestedGroup4); + + document.getElementById('testFocusableNestedGroup4.node1').focus(); + + const nodeElem = + this.testFocusableNestedGroup4Node1.getFocusableElement(); + assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notInclude( + Array.from(nodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + + test('nested tree node focus()ed after parent focused prev has passive node has active', function () { + this.focusManager.registerTree(this.testFocusableGroup2); + this.focusManager.registerTree(this.testFocusableNestedGroup4); + document.getElementById('testFocusableGroup2.node1').focus(); + + document.getElementById('testFocusableNestedGroup4.node1').focus(); + + const prevNodeElem = + this.testFocusableGroup2Node1.getFocusableElement(); + const currNodeElem = + this.testFocusableNestedGroup4Node1.getFocusableElement(); + assert.notInclude( + Array.from(prevNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.include( + Array.from(prevNodeElem.classList), + 'blocklyPassiveFocus', + ); + assert.include( + Array.from(currNodeElem.classList), + 'blocklyActiveFocus', + ); + assert.notInclude( + Array.from(currNodeElem.classList), + 'blocklyPassiveFocus', + ); + }); + }); + }); + + /* High-level focus/defocusing tests. */ + suite('Defocusing and refocusing', function () { + test('Defocusing actively focused root HTML tree switches to passive highlight', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.focusTree(this.testFocusableTree2); + + document.getElementById('testUnregisteredFocusableTree3').focus(); + + const rootNode = this.testFocusableTree2.getRootFocusableNode(); + const rootElem = rootNode.getFocusableElement(); + assert.isNull(this.focusManager.getFocusedTree()); + assert.isNull(this.focusManager.getFocusedNode()); + assert.include(Array.from(rootElem.classList), 'blocklyPassiveFocus'); + assert.notInclude(Array.from(rootElem.classList), 'blocklyActiveFocus'); + }); + + test('Defocusing actively focused HTML tree node switches to passive highlight', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.focusNode(this.testFocusableTree2Node1); + + document.getElementById('testUnregisteredFocusableTree3').focus(); + + const nodeElem = this.testFocusableTree2Node1.getFocusableElement(); + assert.isNull(this.focusManager.getFocusedTree()); + assert.isNull(this.focusManager.getFocusedNode()); + assert.include(Array.from(nodeElem.classList), 'blocklyPassiveFocus'); + assert.notInclude(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + }); + + test('Defocusing actively focused HTML subtree node switches to passive highlight', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableNestedTree4); + this.focusManager.focusNode(this.testFocusableNestedTree4Node1); + + document.getElementById('testUnregisteredFocusableTree3').focus(); + + const nodeElem = this.testFocusableNestedTree4Node1.getFocusableElement(); + assert.isNull(this.focusManager.getFocusedTree()); + assert.isNull(this.focusManager.getFocusedNode()); + assert.include(Array.from(nodeElem.classList), 'blocklyPassiveFocus'); + assert.notInclude(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + }); + + test('Refocusing actively focused root HTML tree restores to active highlight', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.focusTree(this.testFocusableTree2); + document.getElementById('testUnregisteredFocusableTree3').focus(); + + document.getElementById('testFocusableTree2').focus(); + + const rootNode = this.testFocusableTree2.getRootFocusableNode(); + const rootElem = rootNode.getFocusableElement(); + assert.equal(this.focusManager.getFocusedTree(), this.testFocusableTree2); + assert.equal(this.focusManager.getFocusedNode(), rootNode); + assert.notInclude(Array.from(rootElem.classList), 'blocklyPassiveFocus'); + assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); + }); + + test('Refocusing actively focused HTML tree node restores to active highlight', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.focusNode(this.testFocusableTree2Node1); + document.getElementById('testUnregisteredFocusableTree3').focus(); + + document.getElementById('testFocusableTree2.node1').focus(); + + const nodeElem = this.testFocusableTree2Node1.getFocusableElement(); + assert.equal(this.focusManager.getFocusedTree(), this.testFocusableTree2); + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableTree2Node1, + ); + assert.notInclude(Array.from(nodeElem.classList), 'blocklyPassiveFocus'); + assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + }); + + test('Refocusing actively focused HTML subtree node restores to active highlight', function () { + this.focusManager.registerTree(this.testFocusableTree2); + this.focusManager.registerTree(this.testFocusableNestedTree4); + this.focusManager.focusNode(this.testFocusableNestedTree4Node1); + document.getElementById('testUnregisteredFocusableTree3').focus(); + + document.getElementById('testFocusableNestedTree4.node1').focus(); + + const nodeElem = this.testFocusableNestedTree4Node1.getFocusableElement(); + assert.equal( + this.focusManager.getFocusedTree(), + this.testFocusableNestedTree4, + ); + assert.equal( + this.focusManager.getFocusedNode(), + this.testFocusableNestedTree4Node1, + ); + assert.notInclude(Array.from(nodeElem.classList), 'blocklyPassiveFocus'); + assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); }); }); diff --git a/tests/mocha/focusable_tree_traverser_test.js b/tests/mocha/focusable_tree_traverser_test.js new file mode 100644 index 000000000..2069132fe --- /dev/null +++ b/tests/mocha/focusable_tree_traverser_test.js @@ -0,0 +1,480 @@ +/** + * @license + * Copyright 2025 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + +import {FocusableTreeTraverser} from '../../build/src/core/utils/focusable_tree_traverser.js'; +import {assert} from '../../node_modules/chai/chai.js'; +import { + sharedTestSetup, + sharedTestTeardown, +} from './test_helpers/setup_teardown.js'; + +suite('FocusableTreeTraverser', function () { + setup(function () { + sharedTestSetup.call(this); + + const FocusableNodeImpl = function (element, tree) { + this.getFocusableElement = function () { + return element; + }; + + this.getFocusableTree = function () { + return tree; + }; + }; + const FocusableTreeImpl = function (rootElement, nestedTrees) { + this.idToNodeMap = {}; + + this.addNode = function (element) { + const node = new FocusableNodeImpl(element, this); + this.idToNodeMap[element.id] = node; + return node; + }; + + this.getFocusedNode = function () { + throw Error('Unused in test suite.'); + }; + + this.getRootFocusableNode = function () { + return this.rootNode; + }; + + this.getNestedTrees = function () { + return nestedTrees; + }; + + this.lookUpFocusableNode = function (id) { + return this.idToNodeMap[id]; + }; + + this.findFocusableNodeFor = function (element) { + return FocusableTreeTraverser.findFocusableNodeFor(element, this); + }; + + this.rootNode = this.addNode(rootElement); + }; + + const createFocusableTree = function (rootElementId, nestedTrees) { + return new FocusableTreeImpl( + document.getElementById(rootElementId), + nestedTrees || [], + ); + }; + const createFocusableNode = function (tree, elementId) { + return tree.addNode(document.getElementById(elementId)); + }; + + this.testFocusableTree1 = createFocusableTree('testFocusableTree1'); + this.testFocusableTree1Node1 = createFocusableNode( + this.testFocusableTree1, + 'testFocusableTree1.node1', + ); + this.testFocusableTree1Node1Child1 = createFocusableNode( + this.testFocusableTree1, + 'testFocusableTree1.node1.child1', + ); + this.testFocusableTree1Node2 = createFocusableNode( + this.testFocusableTree1, + 'testFocusableTree1.node2', + ); + this.testFocusableNestedTree4 = createFocusableTree( + 'testFocusableNestedTree4', + ); + this.testFocusableNestedTree4Node1 = createFocusableNode( + this.testFocusableNestedTree4, + 'testFocusableNestedTree4.node1', + ); + this.testFocusableNestedTree5 = createFocusableTree( + 'testFocusableNestedTree5', + ); + this.testFocusableNestedTree5Node1 = createFocusableNode( + this.testFocusableNestedTree5, + 'testFocusableNestedTree5.node1', + ); + this.testFocusableTree2 = createFocusableTree('testFocusableTree2', [ + this.testFocusableNestedTree4, + this.testFocusableNestedTree5, + ]); + this.testFocusableTree2Node1 = createFocusableNode( + this.testFocusableTree2, + 'testFocusableTree2.node1', + ); + }); + + teardown(function () { + sharedTestTeardown.call(this); + + const removeFocusIndicators = function (element) { + element.classList.remove('blocklyActiveFocus', 'blocklyPassiveFocus'); + }; + + // Ensure all node CSS styles are reset so that state isn't leaked between tests. + removeFocusIndicators(document.getElementById('testFocusableTree1')); + removeFocusIndicators(document.getElementById('testFocusableTree1.node1')); + removeFocusIndicators( + document.getElementById('testFocusableTree1.node1.child1'), + ); + removeFocusIndicators(document.getElementById('testFocusableTree1.node2')); + removeFocusIndicators(document.getElementById('testFocusableTree2')); + removeFocusIndicators(document.getElementById('testFocusableTree2.node1')); + removeFocusIndicators(document.getElementById('testFocusableNestedTree4')); + removeFocusIndicators( + document.getElementById('testFocusableNestedTree4.node1'), + ); + removeFocusIndicators(document.getElementById('testFocusableNestedTree5')); + removeFocusIndicators( + document.getElementById('testFocusableNestedTree5.node1'), + ); + }); + + suite('findFocusedNode()', function () { + test('for tree with no highlights returns null', function () { + const tree = this.testFocusableTree1; + + const finding = FocusableTreeTraverser.findFocusedNode(tree); + + assert.isNull(finding); + }); + + test('for tree with root active highlight returns root node', function () { + const tree = this.testFocusableTree1; + const rootNode = tree.getRootFocusableNode(); + rootNode.getFocusableElement().classList.add('blocklyActiveFocus'); + + const finding = FocusableTreeTraverser.findFocusedNode(tree); + + assert.equal(finding, rootNode); + }); + + test('for tree with root passive highlight returns root node', function () { + const tree = this.testFocusableTree1; + const rootNode = tree.getRootFocusableNode(); + rootNode.getFocusableElement().classList.add('blocklyPassiveFocus'); + + const finding = FocusableTreeTraverser.findFocusedNode(tree); + + assert.equal(finding, rootNode); + }); + + test('for tree with node active highlight returns node', function () { + const tree = this.testFocusableTree1; + const node = this.testFocusableTree1Node1; + node.getFocusableElement().classList.add('blocklyActiveFocus'); + + const finding = FocusableTreeTraverser.findFocusedNode(tree); + + assert.equal(finding, node); + }); + + test('for tree with node passive highlight returns node', function () { + const tree = this.testFocusableTree1; + const node = this.testFocusableTree1Node1; + node.getFocusableElement().classList.add('blocklyPassiveFocus'); + + const finding = FocusableTreeTraverser.findFocusedNode(tree); + + assert.equal(finding, node); + }); + + test('for tree with nested node active highlight returns node', function () { + const tree = this.testFocusableTree1; + const node = this.testFocusableTree1Node1Child1; + node.getFocusableElement().classList.add('blocklyActiveFocus'); + + const finding = FocusableTreeTraverser.findFocusedNode(tree); + + assert.equal(finding, node); + }); + + test('for tree with nested node passive highlight returns node', function () { + const tree = this.testFocusableTree1; + const node = this.testFocusableTree1Node1Child1; + node.getFocusableElement().classList.add('blocklyPassiveFocus'); + + const finding = FocusableTreeTraverser.findFocusedNode(tree); + + assert.equal(finding, node); + }); + + test('for tree with nested tree root active no parent highlights returns null', function () { + const tree = this.testFocusableNestedTree4; + const rootNode = this.testFocusableNestedTree4.getRootFocusableNode(); + rootNode.getFocusableElement().classList.add('blocklyActiveFocus'); + + const finding = FocusableTreeTraverser.findFocusedNode(tree); + + assert.equal(finding, rootNode); + }); + + test('for tree with nested tree root passive no parent highlights returns null', function () { + const tree = this.testFocusableNestedTree4; + const rootNode = this.testFocusableNestedTree4.getRootFocusableNode(); + rootNode.getFocusableElement().classList.add('blocklyPassiveFocus'); + + const finding = FocusableTreeTraverser.findFocusedNode(tree); + + assert.equal(finding, rootNode); + }); + + test('for tree with nested tree root active no parent highlights returns null', function () { + const tree = this.testFocusableNestedTree4; + const node = this.testFocusableNestedTree4Node1; + node.getFocusableElement().classList.add('blocklyActiveFocus'); + + const finding = FocusableTreeTraverser.findFocusedNode(tree); + + assert.equal(finding, node); + }); + + test('for tree with nested tree root passive no parent highlights returns null', function () { + const tree = this.testFocusableNestedTree4; + const node = this.testFocusableNestedTree4Node1; + node.getFocusableElement().classList.add('blocklyPassiveFocus'); + + const finding = FocusableTreeTraverser.findFocusedNode(tree); + + assert.equal(finding, node); + }); + + test('for tree with nested tree root active parent node passive returns parent node', function () { + const tree = this.testFocusableNestedTree4; + const rootNode = this.testFocusableNestedTree4.getRootFocusableNode(); + this.testFocusableTree2Node1 + .getFocusableElement() + .classList.add('blocklyPassiveFocus'); + rootNode.getFocusableElement().classList.add('blocklyActiveFocus'); + + const finding = FocusableTreeTraverser.findFocusedNode( + this.testFocusableTree2, + ); + + assert.equal(finding, this.testFocusableTree2Node1); + }); + + test('for tree with nested tree root passive parent node passive returns parent node', function () { + const tree = this.testFocusableNestedTree4; + const rootNode = this.testFocusableNestedTree4.getRootFocusableNode(); + this.testFocusableTree2Node1 + .getFocusableElement() + .classList.add('blocklyPassiveFocus'); + rootNode.getFocusableElement().classList.add('blocklyPassiveFocus'); + + const finding = FocusableTreeTraverser.findFocusedNode( + this.testFocusableTree2, + ); + + assert.equal(finding, this.testFocusableTree2Node1); + }); + + test('for tree with nested tree node active parent node passive returns parent node', function () { + const tree = this.testFocusableNestedTree4; + const node = this.testFocusableNestedTree4Node1; + this.testFocusableTree2Node1 + .getFocusableElement() + .classList.add('blocklyPassiveFocus'); + node.getFocusableElement().classList.add('blocklyActiveFocus'); + + const finding = FocusableTreeTraverser.findFocusedNode( + this.testFocusableTree2, + ); + + assert.equal(finding, this.testFocusableTree2Node1); + }); + + test('for tree with nested tree node passive parent node passive returns parent node', function () { + const tree = this.testFocusableNestedTree4; + const node = this.testFocusableNestedTree4Node1; + this.testFocusableTree2Node1 + .getFocusableElement() + .classList.add('blocklyPassiveFocus'); + node.getFocusableElement().classList.add('blocklyPassiveFocus'); + + const finding = FocusableTreeTraverser.findFocusedNode( + this.testFocusableTree2, + ); + + assert.equal(finding, this.testFocusableTree2Node1); + }); + }); + + suite('findFocusableNodeFor()', function () { + test('for root element returns root', function () { + const tree = this.testFocusableTree1; + const rootNode = tree.getRootFocusableNode(); + const rootElem = rootNode.getFocusableElement(); + + const finding = FocusableTreeTraverser.findFocusableNodeFor( + rootElem, + tree, + ); + + assert.equal(finding, rootNode); + }); + + test('for element for different tree root returns null', function () { + const tree = this.testFocusableTree1; + const rootNode = this.testFocusableTree2.getRootFocusableNode(); + const rootElem = rootNode.getFocusableElement(); + + const finding = FocusableTreeTraverser.findFocusableNodeFor( + rootElem, + tree, + ); + + assert.isNull(finding); + }); + + test('for element for different tree node returns null', function () { + const tree = this.testFocusableTree1; + const nodeElem = this.testFocusableTree2Node1.getFocusableElement(); + + const finding = FocusableTreeTraverser.findFocusableNodeFor( + nodeElem, + tree, + ); + + assert.isNull(finding); + }); + + test('for node element in tree returns node', function () { + const tree = this.testFocusableTree1; + const nodeElem = this.testFocusableTree1Node1.getFocusableElement(); + + const finding = FocusableTreeTraverser.findFocusableNodeFor( + nodeElem, + tree, + ); + + assert.equal(finding, this.testFocusableTree1Node1); + }); + + test('for non-node element in tree returns root', function () { + const tree = this.testFocusableTree1; + const unregElem = document.getElementById( + 'testFocusableTree1.node2.unregisteredChild1', + ); + + const finding = FocusableTreeTraverser.findFocusableNodeFor( + unregElem, + tree, + ); + + // An unregistered element should map to the closest node. + assert.equal(finding, this.testFocusableTree1Node2); + }); + + test('for nested node element in tree returns node', function () { + const tree = this.testFocusableTree1; + const nodeElem = this.testFocusableTree1Node1Child1.getFocusableElement(); + + const finding = FocusableTreeTraverser.findFocusableNodeFor( + nodeElem, + tree, + ); + + // The nested node should be returned. + assert.equal(finding, this.testFocusableTree1Node1Child1); + }); + + test('for nested node element in tree returns node', function () { + const tree = this.testFocusableTree1; + const unregElem = document.getElementById( + 'testFocusableTree1.node1.child1.unregisteredChild1', + ); + + const finding = FocusableTreeTraverser.findFocusableNodeFor( + unregElem, + tree, + ); + + // An unregistered element should map to the closest node. + assert.equal(finding, this.testFocusableTree1Node1Child1); + }); + + test('for nested node element in tree returns node', function () { + const tree = this.testFocusableTree1; + const unregElem = document.getElementById( + 'testFocusableTree1.unregisteredChild1', + ); + + const finding = FocusableTreeTraverser.findFocusableNodeFor( + unregElem, + tree, + ); + + // An unregistered element should map to the closest node (or root). + assert.equal(finding, tree.getRootFocusableNode()); + }); + + test('for nested tree root returns nested tree root', function () { + const tree = this.testFocusableNestedTree4; + const rootNode = tree.getRootFocusableNode(); + const rootElem = rootNode.getFocusableElement(); + + const finding = FocusableTreeTraverser.findFocusableNodeFor( + rootElem, + tree, + ); + + assert.equal(finding, rootNode); + }); + + test('for nested tree node returns nested tree node', function () { + const tree = this.testFocusableNestedTree4; + const nodeElem = this.testFocusableNestedTree4Node1.getFocusableElement(); + + const finding = FocusableTreeTraverser.findFocusableNodeFor( + nodeElem, + tree, + ); + + // The node of the nested tree should be returned. + assert.equal(finding, this.testFocusableNestedTree4Node1); + }); + + test('for nested element in nested tree node returns nearest nested node', function () { + const tree = this.testFocusableNestedTree4; + const unregElem = document.getElementById( + 'testFocusableNestedTree4.node1.unregisteredChild1', + ); + + const finding = FocusableTreeTraverser.findFocusableNodeFor( + unregElem, + tree, + ); + + // An unregistered element should map to the closest node. + assert.equal(finding, this.testFocusableNestedTree4Node1); + }); + + test('for nested tree node under root with different tree base returns null', function () { + const tree = this.testFocusableTree2; + const nodeElem = this.testFocusableNestedTree5Node1.getFocusableElement(); + + const finding = FocusableTreeTraverser.findFocusableNodeFor( + nodeElem, + tree, + ); + + // The nested node hierarchically sits below the outer tree, but using + // that tree as the basis should yield null since it's not a direct child. + assert.isNull(finding); + }); + + test('for nested tree node under node with different tree base returns null', function () { + const tree = this.testFocusableTree2; + const nodeElem = this.testFocusableNestedTree4Node1.getFocusableElement(); + + const finding = FocusableTreeTraverser.findFocusableNodeFor( + nodeElem, + tree, + ); + + // The nested node hierarchically sits below the outer tree, but using + // that tree as the basis should yield null since it's not a direct child. + assert.isNull(finding); + }); + }); +}); diff --git a/tests/mocha/index.html b/tests/mocha/index.html index 2eb42869a..17e15d2c7 100644 --- a/tests/mocha/index.html +++ b/tests/mocha/index.html @@ -35,26 +35,57 @@ fill: #00f; } - +
-
+ Focusable tree 1 +
Tree 1 node 1 -
Tree 1 node 1 child 1
+
+ Tree 1 node 1 child 1 +
+ Tree 1 node 1 child 1 child 1 (unregistered) +
+
-
+
Tree 1 node 2 -
Tree 1 node 2 child 2 (unregistered)
+
+ Tree 1 node 2 child 2 (unregistered) +
+
+
+ Tree 1 child 1 (unregistered)
-
Tree 2 node 1
+ Focusable tree 2 +
+ Tree 2 node 1 +
+ Nested tree 4 +
+ Tree 4 node 1 (nested) +
+ Tree 4 node 1 child 1 (unregistered) +
+
+
+
+
+ Nested tree 5 +
Tree 5 node 1 (nested)
+
-
Tree 3 node 1 (unregistered)
+ Unregistered tree 3 +
+ Tree 3 node 1 (unregistered) +
+
Unfocusable element
@@ -71,7 +102,9 @@ Group 1 node 2 - Tree 1 node 2 child 2 (unregistered) + + Tree 1 node 2 child 2 (unregistered) + @@ -80,11 +113,19 @@ Group 2 node 1 + + + + Group 4 node 1 (nested) + + - - Tree 3 node 1 (unregistered) + + + Tree 3 node 1 (unregistered) + @@ -162,6 +203,7 @@ import './field_variable_test.js'; import './flyout_test.js'; import './focus_manager_test.js'; + import './focusable_tree_traverser_test.js'; // import './test_event_reduction.js'; import './generator_test.js'; import './gesture_test.js'; From 9ab77cedff1dbca50a5fb6bdff43016f876317ad Mon Sep 17 00:00:00 2001 From: Ben Henning Date: Thu, 27 Mar 2025 22:04:51 +0000 Subject: [PATCH 3/7] chore: fix formatting issues --- tests/mocha/index.html | 55 ++++++++++++++++++++++++++++++++---------- 1 file changed, 42 insertions(+), 13 deletions(-) diff --git a/tests/mocha/index.html b/tests/mocha/index.html index 17e15d2c7..6231da3ea 100644 --- a/tests/mocha/index.html +++ b/tests/mocha/index.html @@ -41,47 +41,76 @@
Focusable tree 1 -
+
Tree 1 node 1 -
+
Tree 1 node 1 child 1 -
+
Tree 1 node 1 child 1 child 1 (unregistered)
-
+
Tree 1 node 2 -
+
Tree 1 node 2 child 2 (unregistered)
-
+
Tree 1 child 1 (unregistered)
Focusable tree 2 -
+
Tree 2 node 1 -
+
Nested tree 4 -
+
Tree 4 node 1 (nested) -
+
Tree 4 node 1 child 1 (unregistered)
-
+
Nested tree 5 -
Tree 5 node 1 (nested)
+
+ Tree 5 node 1 (nested) +
Unregistered tree 3 -
+
Tree 3 node 1 (unregistered)
From 3dc4d17b304b66cc2c22c2739fb8b2516afe72a2 Mon Sep 17 00:00:00 2001 From: Ben Henning Date: Thu, 27 Mar 2025 16:54:19 -0700 Subject: [PATCH 4/7] Update tests/mocha/index.html --- tests/mocha/index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/tests/mocha/index.html b/tests/mocha/index.html index 6231da3ea..690b75a77 100644 --- a/tests/mocha/index.html +++ b/tests/mocha/index.html @@ -233,7 +233,6 @@ import './flyout_test.js'; import './focus_manager_test.js'; import './focusable_tree_traverser_test.js'; - // import './test_event_reduction.js'; import './generator_test.js'; import './gesture_test.js'; import './icon_test.js'; From 902b26b1a1b7552652cc46a41d73b1a6d424b638 Mon Sep 17 00:00:00 2001 From: Ben Henning Date: Thu, 3 Apr 2025 22:25:50 +0000 Subject: [PATCH 5/7] chore: part 1 of addressing reviewer comments. --- core/blockly.ts | 3 +- core/focus_manager.ts | 51 +- core/utils/focusable_tree_traverser.ts | 22 +- tests/mocha/focus_manager_test.js | 1695 +++++++++--------- tests/mocha/focusable_tree_traverser_test.js | 181 +- 5 files changed, 997 insertions(+), 955 deletions(-) diff --git a/core/blockly.ts b/core/blockly.ts index c29961f59..a98f0f695 100644 --- a/core/blockly.ts +++ b/core/blockly.ts @@ -106,7 +106,7 @@ import {FlyoutItem} from './flyout_item.js'; import {FlyoutMetricsManager} from './flyout_metrics_manager.js'; import {FlyoutSeparator} from './flyout_separator.js'; import {VerticalFlyout} from './flyout_vertical.js'; -import {FocusManager, getFocusManager} from './focus_manager.js'; +import {FocusManager, getFocusManager, ReturnEphemeralFocus} from './focus_manager.js'; import {CodeGenerator} from './generator.js'; import {Gesture} from './gesture.js'; import {Grid} from './grid.js'; @@ -523,6 +523,7 @@ export { FlyoutMetricsManager, FlyoutSeparator, FocusManager, + ReturnEphemeralFocus, CodeGenerator as Generator, Gesture, Grid, diff --git a/core/focus_manager.ts b/core/focus_manager.ts index d79db4b4b..f0cc32b74 100644 --- a/core/focus_manager.ts +++ b/core/focus_manager.ts @@ -30,6 +30,9 @@ export type ReturnEphemeralFocus = () => void; * focusNode(). */ export class FocusManager { + static readonly ACTIVE_FOCUS_NODE_CSS_CLASS_NAME = 'blocklyActiveFocus'; + static readonly PASSIVE_FOCUS_NODE_CSS_CLASS_NAME = 'blocklyPassiveFocus'; + focusedNode: IFocusableNode | null = null; registeredTrees: Array = []; @@ -45,7 +48,7 @@ export class FocusManager { // The target that now has focus. const activeElement = document.activeElement; - let newNode: IFocusableNode | null = null; + let newNode: IFocusableNode | null | undefined = null; if ( activeElement instanceof HTMLElement || activeElement instanceof SVGElement @@ -53,10 +56,10 @@ export class FocusManager { // If the target losing focus maps to any tree, then it should be // updated. Per the contract of findFocusableNodeFor only one tree // should claim the element. - const matchingNodes = this.registeredTrees.map((tree) => - tree.findFocusableNodeFor(activeElement), - ); - newNode = matchingNodes.find((node) => !!node) ?? null; + for (const tree of this.registeredTrees) { + newNode = tree.findFocusableNodeFor(activeElement); + if (newNode) break; + } } if (newNode) { @@ -91,7 +94,7 @@ export class FocusManager { * unregisterTree. */ isRegistered(tree: IFocusableTree): boolean { - return this.registeredTrees.findIndex((reg) => reg == tree) !== -1; + return this.registeredTrees.findIndex((reg) => reg === tree) !== -1; } /** @@ -107,13 +110,13 @@ export class FocusManager { if (!this.isRegistered(tree)) { throw Error(`Attempted to unregister not registered tree: ${tree}.`); } - const treeIndex = this.registeredTrees.findIndex((tree) => tree == tree); + const treeIndex = this.registeredTrees.findIndex((tree) => tree === tree); this.registeredTrees.splice(treeIndex, 1); const focusedNode = tree.getFocusedNode(); const root = tree.getRootFocusableNode(); - if (focusedNode != null) this.removeHighlight(focusedNode); - if (this.focusedNode == focusedNode || this.focusedNode == root) { + if (focusedNode) this.removeHighlight(focusedNode); + if (this.focusedNode === focusedNode || this.focusedNode === root) { this.focusedNode = null; } this.removeHighlight(root); @@ -181,25 +184,25 @@ export class FocusManager { * focus. */ focusNode(focusableNode: IFocusableNode): void { - const curTree = focusableNode.getFocusableTree(); - if (!this.isRegistered(curTree)) { + const nextTree = focusableNode.getFocusableTree(); + if (!this.isRegistered(nextTree)) { throw Error(`Attempted to focus unregistered node: ${focusableNode}.`); } const prevNode = this.focusedNode; - if (prevNode && prevNode.getFocusableTree() !== curTree) { + if (prevNode && prevNode.getFocusableTree() !== nextTree) { this.setNodeToPassive(prevNode); } // If there's a focused node in the new node's tree, ensure it's reset. - const prevNodeCurTree = curTree.getFocusedNode(); - const curTreeRoot = curTree.getRootFocusableNode(); - if (prevNodeCurTree) { - this.removeHighlight(prevNodeCurTree); + const prevNodeNextTree = nextTree.getFocusedNode(); + const nextTreeRoot = nextTree.getRootFocusableNode(); + if (prevNodeNextTree) { + this.removeHighlight(prevNodeNextTree); } // For caution, ensure that the root is always reset since getFocusedNode() // is expected to return null if the root was highlighted, if the root is // not the node now being set to active. - if (curTreeRoot !== focusableNode) { - this.removeHighlight(curTreeRoot); + if (nextTreeRoot !== focusableNode) { + this.removeHighlight(nextTreeRoot); } if (!this.currentlyHoldsEphemeralFocus) { // Only change the actively focused node if ephemeral state isn't held. @@ -271,21 +274,21 @@ export class FocusManager { private setNodeToActive(node: IFocusableNode): void { const element = node.getFocusableElement(); - dom.addClass(element, 'blocklyActiveFocus'); - dom.removeClass(element, 'blocklyPassiveFocus'); + dom.addClass(element, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + dom.removeClass(element, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); element.focus(); } private setNodeToPassive(node: IFocusableNode): void { const element = node.getFocusableElement(); - dom.removeClass(element, 'blocklyActiveFocus'); - dom.addClass(element, 'blocklyPassiveFocus'); + dom.removeClass(element, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + dom.addClass(element, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); } private removeHighlight(node: IFocusableNode): void { const element = node.getFocusableElement(); - dom.removeClass(element, 'blocklyActiveFocus'); - dom.removeClass(element, 'blocklyPassiveFocus'); + dom.removeClass(element, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + dom.removeClass(element, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); } } diff --git a/core/utils/focusable_tree_traverser.ts b/core/utils/focusable_tree_traverser.ts index eb6de1e05..8061e981b 100644 --- a/core/utils/focusable_tree_traverser.ts +++ b/core/utils/focusable_tree_traverser.ts @@ -4,6 +4,7 @@ * SPDX-License-Identifier: Apache-2.0 */ +import {FocusManager} from '../focus_manager.js'; import type {IFocusableNode} from '../interfaces/i_focusable_node.js'; import type {IFocusableTree} from '../interfaces/i_focusable_tree.js'; import * as dom from '../utils/dom.js'; @@ -13,6 +14,9 @@ import * as dom from '../utils/dom.js'; * tree traversals. */ export class FocusableTreeTraverser { + static readonly ACTIVE_FOCUS_NODE_CSS_SELECTOR = `.${FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME}`; + static readonly PASSIVE_FOCUS_NODE_CSS_SELECTOR = `.${FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME}`; + /** * Returns the current IFocusableNode that either has the CSS class * 'blocklyActiveFocus' or 'blocklyPassiveFocus', only considering HTML and @@ -26,28 +30,28 @@ export class FocusableTreeTraverser { static findFocusedNode(tree: IFocusableTree): IFocusableNode | null { const root = tree.getRootFocusableNode().getFocusableElement(); if ( - dom.hasClass(root, 'blocklyActiveFocus') || - dom.hasClass(root, 'blocklyPassiveFocus') + dom.hasClass(root, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME) || + dom.hasClass(root, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME) ) { // The root has focus. return tree.getRootFocusableNode(); } - const activeEl = root.querySelector('.blocklyActiveFocus'); - let active: IFocusableNode | null = null; + const activeEl = root.querySelector(this.ACTIVE_FOCUS_NODE_CSS_SELECTOR); if (activeEl instanceof HTMLElement || activeEl instanceof SVGElement) { - active = tree.findFocusableNodeFor(activeEl); + const active = tree.findFocusableNodeFor(activeEl); + if (active) return active; } // At most there should be one passive indicator per tree (not considering // subtrees). - const passiveEl = root.querySelector('.blocklyPassiveFocus'); - let passive: IFocusableNode | null = null; + const passiveEl = root.querySelector(this.PASSIVE_FOCUS_NODE_CSS_SELECTOR); if (passiveEl instanceof HTMLElement || passiveEl instanceof SVGElement) { - passive = tree.findFocusableNodeFor(passiveEl); + const passive = tree.findFocusableNodeFor(passiveEl); + if (passive) return passive; } - return active ?? passive; + return null; } /** diff --git a/tests/mocha/focus_manager_test.js b/tests/mocha/focus_manager_test.js index e18dbc79e..fa8f12083 100644 --- a/tests/mocha/focus_manager_test.js +++ b/tests/mocha/focus_manager_test.js @@ -15,6 +15,55 @@ import { sharedTestTeardown, } from './test_helpers/setup_teardown.js'; +class FocusableNodeImpl { + constructor(element, tree) { + this.element = element; + this.tree = tree; + } + + getFocusableElement() { + return this.element; + } + + getFocusableTree() { + return this.tree; + } +} + +class FocusableTreeImpl { + constructor(rootElement, nestedTrees) { + this.nestedTrees = nestedTrees; + this.idToNodeMap = {}; + this.rootNode = this.addNode(rootElement); + } + + addNode(element) { + const node = new FocusableNodeImpl(element, this); + this.idToNodeMap[element.id] = node; + return node; + } + + getFocusedNode() { + return FocusableTreeTraverser.findFocusedNode(this); + } + + getRootFocusableNode() { + return this.rootNode; + } + + getNestedTrees() { + return this.nestedTrees; + } + + lookUpFocusableNode(id) { + return this.idToNodeMap[id]; + } + + findFocusableNodeFor(element) { + return FocusableTreeTraverser.findFocusableNodeFor(element, this); + } +} + suite('FocusManager', function () { setup(function () { sharedTestSetup.call(this); @@ -27,47 +76,6 @@ suite('FocusManager', function () { }; this.focusManager = new FocusManager(addDocumentEventListener); - const FocusableNodeImpl = function (element, tree) { - this.getFocusableElement = function () { - return element; - }; - - this.getFocusableTree = function () { - return tree; - }; - }; - const FocusableTreeImpl = function (rootElement, nestedTrees) { - this.idToNodeMap = {}; - - this.addNode = function (element) { - const node = new FocusableNodeImpl(element, this); - this.idToNodeMap[element.id] = node; - return node; - }; - - this.getFocusedNode = function () { - return FocusableTreeTraverser.findFocusedNode(this); - }; - - this.getRootFocusableNode = function () { - return this.rootNode; - }; - - this.getNestedTrees = function () { - return nestedTrees; - }; - - this.lookUpFocusableNode = function (id) { - return this.idToNodeMap[id]; - }; - - this.findFocusableNodeFor = function (element) { - return FocusableTreeTraverser.findFocusableNodeFor(element, this); - }; - - this.rootNode = this.addNode(rootElement); - }; - const createFocusableTree = function (rootElementId, nestedTrees) { return new FocusableTreeImpl( document.getElementById(rootElementId), @@ -153,7 +161,7 @@ suite('FocusManager', function () { document.removeEventListener(eventType, eventListener); const removeFocusIndicators = function (element) { - element.classList.remove('blocklyActiveFocus', 'blocklyPassiveFocus'); + element.classList.remove(FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); }; // Ensure all node CSS styles are reset so that state isn't leaked between tests. @@ -186,6 +194,14 @@ suite('FocusManager', function () { document.body.focus(); }); + assert.includesClass = function(classList, className) { + assert.isTrue(classList.contains(className), 'Expected class list to include: ' + className); + }; + + assert.notIncludesClass = function(classList, className) { + assert.isFalse(classList.contains(className), 'Expected class list to not include: ' + className); + }; + /* Basic lifecycle tests. */ suite('registerTree()', function () { @@ -371,7 +387,7 @@ suite('FocusManager', function () { document.removeEventListener('focusin', focusListener); // There should be exactly 1 focus event fired from focusNode(). - assert.equal(focusCount, 1); + assert.strictEqual(focusCount, 1); }); }); @@ -399,7 +415,7 @@ suite('FocusManager', function () { this.focusManager.focusTree(this.testFocusableTree1); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableTree1, ); @@ -411,7 +427,7 @@ suite('FocusManager', function () { this.focusManager.focusTree(this.testFocusableTree1); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableTree1, ); @@ -424,7 +440,7 @@ suite('FocusManager', function () { this.focusManager.focusTree(this.testFocusableTree2); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableTree2, ); @@ -437,7 +453,7 @@ suite('FocusManager', function () { this.focusManager.focusTree(this.testFocusableTree2); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableTree2, ); @@ -450,7 +466,7 @@ suite('FocusManager', function () { this.testFocusableTree1.getRootFocusableNode(), ); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableTree1, ); @@ -461,7 +477,7 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableTree1Node1); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableTree1, ); @@ -472,7 +488,7 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableTree1Node1Child1); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableTree1, ); @@ -484,7 +500,7 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableTree1Node2); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableTree1, ); @@ -497,7 +513,7 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableTree2Node1); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableTree2, ); @@ -512,7 +528,7 @@ suite('FocusManager', function () { this.testFocusableTree2.getRootFocusableNode(), ); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableTree2, ); @@ -557,7 +573,7 @@ suite('FocusManager', function () { this.focusManager.unregisterTree(this.testFocusableTree1); // Since the most recent tree still exists, it still has focus. - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableTree2, ); @@ -569,7 +585,7 @@ suite('FocusManager', function () { this.focusManager.focusTree(this.testFocusableNestedTree4); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableNestedTree4, ); @@ -581,7 +597,7 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableNestedTree4Node1); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableNestedTree4, ); @@ -594,7 +610,7 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableNestedTree4Node1); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableNestedTree4, ); @@ -606,7 +622,7 @@ suite('FocusManager', function () { this.focusManager.focusTree(this.testFocusableTree1); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree1.getRootFocusableNode(), ); @@ -620,7 +636,7 @@ suite('FocusManager', function () { // The original node retains focus since the tree already holds focus (per focusTree's // contract). - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree1Node1, ); @@ -633,7 +649,7 @@ suite('FocusManager', function () { this.focusManager.focusTree(this.testFocusableTree2); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree2.getRootFocusableNode(), ); @@ -646,7 +662,7 @@ suite('FocusManager', function () { this.focusManager.focusTree(this.testFocusableTree2); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree2.getRootFocusableNode(), ); @@ -659,7 +675,7 @@ suite('FocusManager', function () { this.testFocusableTree1.getRootFocusableNode(), ); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree1.getRootFocusableNode(), ); @@ -670,7 +686,7 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableTree1Node1); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree1Node1, ); @@ -681,7 +697,7 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableTree1Node1Child1); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree1Node1Child1, ); @@ -693,7 +709,7 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableTree1Node2); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree1Node2, ); @@ -706,7 +722,7 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableTree2Node1); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree2Node1, ); @@ -721,7 +737,7 @@ suite('FocusManager', function () { this.testFocusableTree2.getRootFocusableNode(), ); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree2.getRootFocusableNode(), ); @@ -766,7 +782,7 @@ suite('FocusManager', function () { this.focusManager.unregisterTree(this.testFocusableTree1); // Since the most recent tree still exists, it still has focus. - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree2Node1, ); @@ -778,7 +794,7 @@ suite('FocusManager', function () { this.focusManager.focusTree(this.testFocusableNestedTree4); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableNestedTree4.getRootFocusableNode(), ); @@ -790,7 +806,7 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableNestedTree4Node1); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableNestedTree4Node1, ); @@ -803,7 +819,7 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableNestedTree4Node1); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableNestedTree4Node1, ); @@ -818,10 +834,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableTree1 .getRootFocusableNode() .getFocusableElement(); - assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -834,10 +850,10 @@ suite('FocusManager', function () { // The original node retains active focus since the tree already holds focus (per // focusTree's contract). const nodeElem = this.testFocusableTree1Node1.getFocusableElement(); - assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(nodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -851,10 +867,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableTree2 .getRootFocusableNode() .getFocusableElement(); - assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -868,10 +884,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableTree2 .getRootFocusableNode() .getFocusableElement(); - assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -885,10 +901,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableTree1 .getRootFocusableNode() .getFocusableElement(); - assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -898,10 +914,10 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableTree1Node1); const nodeElem = this.testFocusableTree1Node1.getFocusableElement(); - assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(nodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -912,13 +928,13 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableTree1Node2); const prevNodeElem = this.testFocusableTree1Node1.getFocusableElement(); - assert.notInclude( - Array.from(prevNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + prevNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(prevNodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass( + prevNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -929,10 +945,10 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableTree1Node2); const newNodeElem = this.testFocusableTree1Node2.getFocusableElement(); - assert.include(Array.from(newNodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(newNodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(newNodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + newNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -944,13 +960,13 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableTree2Node1); const prevNodeElem = this.testFocusableTree1Node1.getFocusableElement(); - assert.notInclude( - Array.from(prevNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + prevNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.include( - Array.from(prevNodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass( + prevNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -962,10 +978,10 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableTree2Node1); const newNodeElem = this.testFocusableTree2Node1.getFocusableElement(); - assert.include(Array.from(newNodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(newNodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(newNodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + newNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -981,10 +997,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableTree2 .getRootFocusableNode() .getFocusableElement(); - assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -998,10 +1014,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableTree1 .getRootFocusableNode() .getFocusableElement(); - assert.notInclude(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -1013,10 +1029,10 @@ suite('FocusManager', function () { // Since the tree was unregistered it no longer has focus indicators. const nodeElem = this.testFocusableTree1Node1.getFocusableElement(); - assert.notInclude(Array.from(nodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(nodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -1034,21 +1050,21 @@ suite('FocusManager', function () { this.testFocusableTree2Node1.getFocusableElement(); const removedNodeElem = this.testFocusableTree1Node1.getFocusableElement(); - assert.include( - Array.from(otherNodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass( + otherNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(otherNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + otherNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(removedNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + removedNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(removedNodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass( + removedNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -1066,21 +1082,21 @@ suite('FocusManager', function () { this.testFocusableTree2Node1.getFocusableElement(); const removedNodeElem = this.testFocusableTree1Node1.getFocusableElement(); - assert.include( - Array.from(otherNodeElem.classList), - 'blocklyActiveFocus', + assert.includesClass( + otherNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(otherNodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass( + otherNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(removedNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + removedNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(removedNodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass( + removedNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -1096,8 +1112,8 @@ suite('FocusManager', function () { // passive now that the new node is active. const node1 = this.testFocusableTree1Node1.getFocusableElement(); const node2 = this.testFocusableTree1Node2.getFocusableElement(); - assert.notInclude(Array.from(node1.classList), 'blocklyPassiveFocus'); - assert.notInclude(Array.from(node2.classList), 'blocklyPassiveFocus'); + assert.notIncludesClass(node1.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass(node2.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); }); test('registered tree focusTree()ed other tree node passively focused tree node now has active property', function () { @@ -1114,15 +1130,15 @@ suite('FocusManager', function () { const rootElem = this.testFocusableTree1 .getRootFocusableNode() .getFocusableElement(); - assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(nodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -1138,15 +1154,15 @@ suite('FocusManager', function () { const rootElem = this.testFocusableTree1 .getRootFocusableNode() .getFocusableElement(); - assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(nodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -1159,10 +1175,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableNestedTree4 .getRootFocusableNode() .getFocusableElement(); - assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -1174,10 +1190,10 @@ suite('FocusManager', function () { const nodeElem = this.testFocusableNestedTree4Node1.getFocusableElement(); - assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(nodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -1191,21 +1207,21 @@ suite('FocusManager', function () { const prevNodeElem = this.testFocusableTree2Node1.getFocusableElement(); const currNodeElem = this.testFocusableNestedTree4Node1.getFocusableElement(); - assert.notInclude( - Array.from(prevNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + prevNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.include( - Array.from(prevNodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass( + prevNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.include( - Array.from(currNodeElem.classList), - 'blocklyActiveFocus', + assert.includesClass( + currNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(currNodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass( + currNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); }); @@ -1218,7 +1234,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableTree1').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableTree1, ); @@ -1229,7 +1245,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableTree1.node1').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableTree1, ); @@ -1240,7 +1256,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableTree1.node1.child1').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableTree1, ); @@ -1252,7 +1268,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableTree1.node2').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableTree1, ); @@ -1265,7 +1281,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableTree2.node1').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableTree2, ); @@ -1278,7 +1294,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableTree2').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableTree2, ); @@ -1292,7 +1308,7 @@ suite('FocusManager', function () { .focus(); // The tree of the unregistered child element should take focus. - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableTree1, ); @@ -1325,7 +1341,7 @@ suite('FocusManager', function () { document.getElementById('testUnfocusableElement').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableTree1, ); @@ -1370,7 +1386,7 @@ suite('FocusManager', function () { this.focusManager.unregisterTree(this.testFocusableTree1); // Since the most recent tree still exists, it still has focus. - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableTree2, ); @@ -1397,7 +1413,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableNestedTree4').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableNestedTree4, ); @@ -1409,7 +1425,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableNestedTree4.node1').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableNestedTree4, ); @@ -1422,7 +1438,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableNestedTree4.node1').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableNestedTree4, ); @@ -1434,7 +1450,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableTree1').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree1.getRootFocusableNode(), ); @@ -1445,7 +1461,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableTree1.node1').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree1Node1, ); @@ -1456,7 +1472,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableTree1.node1.child1').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree1Node1Child1, ); @@ -1468,7 +1484,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableTree1.node2').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree1Node2, ); @@ -1481,7 +1497,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableTree2.node1').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree2Node1, ); @@ -1494,7 +1510,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableTree2').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree2.getRootFocusableNode(), ); @@ -1508,7 +1524,7 @@ suite('FocusManager', function () { .focus(); // The nearest node of the unregistered child element should take focus. - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree1Node2, ); @@ -1535,13 +1551,13 @@ suite('FocusManager', function () { assert.isNull(this.focusManager.getFocusedNode()); }); - test('unfocuasble element focus()ed after registered node focused returns original node', function () { + test('unfocusable element focus()ed after registered node focused returns original node', function () { this.focusManager.registerTree(this.testFocusableTree1); document.getElementById('testFocusableTree1.node1').focus(); document.getElementById('testUnfocusableElement').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree1Node1, ); @@ -1586,7 +1602,7 @@ suite('FocusManager', function () { this.focusManager.unregisterTree(this.testFocusableTree1); // Since the most recent tree still exists, it still has focus. - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree2Node1, ); @@ -1613,7 +1629,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableNestedTree4').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableNestedTree4.getRootFocusableNode(), ); @@ -1625,7 +1641,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableNestedTree4.node1').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableNestedTree4Node1, ); @@ -1638,7 +1654,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableNestedTree4.node1').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableNestedTree4Node1, ); @@ -1653,10 +1669,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableTree1 .getRootFocusableNode() .getFocusableElement(); - assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -1666,10 +1682,10 @@ suite('FocusManager', function () { document.getElementById('testFocusableTree1.node1').focus(); const nodeElem = this.testFocusableTree1Node1.getFocusableElement(); - assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(nodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -1680,13 +1696,13 @@ suite('FocusManager', function () { document.getElementById('testFocusableTree1.node2').focus(); const prevNodeElem = this.testFocusableTree1Node1.getFocusableElement(); - assert.notInclude( - Array.from(prevNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + prevNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(prevNodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass( + prevNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -1697,10 +1713,10 @@ suite('FocusManager', function () { document.getElementById('testFocusableTree1.node2').focus(); const newNodeElem = this.testFocusableTree1Node2.getFocusableElement(); - assert.include(Array.from(newNodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(newNodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(newNodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + newNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -1712,13 +1728,13 @@ suite('FocusManager', function () { document.getElementById('testFocusableTree2.node1').focus(); const prevNodeElem = this.testFocusableTree1Node1.getFocusableElement(); - assert.notInclude( - Array.from(prevNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + prevNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.include( - Array.from(prevNodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass( + prevNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -1730,10 +1746,10 @@ suite('FocusManager', function () { document.getElementById('testFocusableTree2.node1').focus(); const newNodeElem = this.testFocusableTree2Node1.getFocusableElement(); - assert.include(Array.from(newNodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(newNodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(newNodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + newNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -1747,10 +1763,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableTree2 .getRootFocusableNode() .getFocusableElement(); - assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -1763,10 +1779,10 @@ suite('FocusManager', function () { // The nearest node of the unregistered child element should be actively focused. const nodeElem = this.testFocusableTree1Node2.getFocusableElement(); - assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(nodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -1778,10 +1794,10 @@ suite('FocusManager', function () { const rootElem = document.getElementById( 'testUnregisteredFocusableTree3', ); - assert.notInclude(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -1793,10 +1809,10 @@ suite('FocusManager', function () { const nodeElem = document.getElementById( 'testUnregisteredFocusableTree3.node1', ); - assert.notInclude(Array.from(nodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(nodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -1812,18 +1828,18 @@ suite('FocusManager', function () { const attemptedNewNodeElem = document.getElementById( 'testUnfocusableElement', ); - assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(nodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(attemptedNewNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + attemptedNewNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(attemptedNewNodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass( + attemptedNewNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -1837,10 +1853,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableTree1 .getRootFocusableNode() .getFocusableElement(); - assert.notInclude(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -1852,10 +1868,10 @@ suite('FocusManager', function () { // Since the tree was unregistered it no longer has focus indicators. const nodeElem = this.testFocusableTree1Node1.getFocusableElement(); - assert.notInclude(Array.from(nodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(nodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -1873,21 +1889,21 @@ suite('FocusManager', function () { this.testFocusableTree2Node1.getFocusableElement(); const removedNodeElem = this.testFocusableTree1Node1.getFocusableElement(); - assert.include( - Array.from(otherNodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass( + otherNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(otherNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + otherNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(removedNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + removedNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(removedNodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass( + removedNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -1905,21 +1921,21 @@ suite('FocusManager', function () { this.testFocusableTree2Node1.getFocusableElement(); const removedNodeElem = this.testFocusableTree1Node1.getFocusableElement(); - assert.include( - Array.from(otherNodeElem.classList), - 'blocklyActiveFocus', + assert.includesClass( + otherNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(otherNodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass( + otherNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(removedNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + removedNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(removedNodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass( + removedNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -1937,21 +1953,21 @@ suite('FocusManager', function () { this.testFocusableTree2Node1.getFocusableElement(); const removedNodeElem = this.testFocusableTree1Node1.getFocusableElement(); - assert.notInclude( - Array.from(otherNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + otherNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.include( - Array.from(otherNodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass( + otherNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(removedNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + removedNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(removedNodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass( + removedNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -1967,8 +1983,8 @@ suite('FocusManager', function () { // passive now that the new node is active. const node1 = this.testFocusableTree1Node1.getFocusableElement(); const node2 = this.testFocusableTree1Node2.getFocusableElement(); - assert.notInclude(Array.from(node1.classList), 'blocklyPassiveFocus'); - assert.notInclude(Array.from(node2.classList), 'blocklyPassiveFocus'); + assert.notIncludesClass(node1.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass(node2.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); }); test('registered tree focus()ed other tree node passively focused tree root now has active property', function () { @@ -1985,15 +2001,15 @@ suite('FocusManager', function () { .getRootFocusableNode() .getFocusableElement(); const nodeElem = this.testFocusableTree1Node1.getFocusableElement(); - assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude(Array.from(nodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(nodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -2009,15 +2025,15 @@ suite('FocusManager', function () { const rootElem = this.testFocusableTree1 .getRootFocusableNode() .getFocusableElement(); - assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(nodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -2030,10 +2046,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableNestedTree4 .getRootFocusableNode() .getFocusableElement(); - assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -2045,10 +2061,10 @@ suite('FocusManager', function () { const nodeElem = this.testFocusableNestedTree4Node1.getFocusableElement(); - assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(nodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -2062,21 +2078,21 @@ suite('FocusManager', function () { const prevNodeElem = this.testFocusableTree2Node1.getFocusableElement(); const currNodeElem = this.testFocusableNestedTree4Node1.getFocusableElement(); - assert.notInclude( - Array.from(prevNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + prevNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.include( - Array.from(prevNodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass( + prevNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.include( - Array.from(currNodeElem.classList), - 'blocklyActiveFocus', + assert.includesClass( + currNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(currNodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass( + currNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); }); @@ -2091,7 +2107,7 @@ suite('FocusManager', function () { this.focusManager.focusTree(this.testFocusableGroup1); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableGroup1, ); @@ -2103,7 +2119,7 @@ suite('FocusManager', function () { this.focusManager.focusTree(this.testFocusableGroup1); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableGroup1, ); @@ -2116,7 +2132,7 @@ suite('FocusManager', function () { this.focusManager.focusTree(this.testFocusableGroup2); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableGroup2, ); @@ -2129,7 +2145,7 @@ suite('FocusManager', function () { this.focusManager.focusTree(this.testFocusableGroup2); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableGroup2, ); @@ -2142,7 +2158,7 @@ suite('FocusManager', function () { this.testFocusableGroup1.getRootFocusableNode(), ); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableGroup1, ); @@ -2153,7 +2169,7 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableGroup1Node1); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableGroup1, ); @@ -2164,7 +2180,7 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableGroup1Node1Child1); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableGroup1, ); @@ -2176,7 +2192,7 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableGroup1Node2); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableGroup1, ); @@ -2189,7 +2205,7 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableGroup2Node1); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableGroup2, ); @@ -2204,7 +2220,7 @@ suite('FocusManager', function () { this.testFocusableGroup2.getRootFocusableNode(), ); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableGroup2, ); @@ -2249,7 +2265,7 @@ suite('FocusManager', function () { this.focusManager.unregisterTree(this.testFocusableGroup1); // Since the most recent tree still exists, it still has focus. - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableGroup2, ); @@ -2261,7 +2277,7 @@ suite('FocusManager', function () { this.focusManager.focusTree(this.testFocusableNestedGroup4); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableNestedGroup4, ); @@ -2273,7 +2289,7 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableNestedGroup4Node1); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableNestedGroup4, ); @@ -2286,7 +2302,7 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableNestedGroup4Node1); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableNestedGroup4, ); @@ -2298,7 +2314,7 @@ suite('FocusManager', function () { this.focusManager.focusTree(this.testFocusableGroup1); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup1.getRootFocusableNode(), ); @@ -2312,7 +2328,7 @@ suite('FocusManager', function () { // The original node retains focus since the tree already holds focus (per focusTree's // contract). - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup1Node1, ); @@ -2325,7 +2341,7 @@ suite('FocusManager', function () { this.focusManager.focusTree(this.testFocusableGroup2); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup2.getRootFocusableNode(), ); @@ -2338,7 +2354,7 @@ suite('FocusManager', function () { this.focusManager.focusTree(this.testFocusableGroup2); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup2.getRootFocusableNode(), ); @@ -2351,7 +2367,7 @@ suite('FocusManager', function () { this.testFocusableGroup1.getRootFocusableNode(), ); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup1.getRootFocusableNode(), ); @@ -2362,7 +2378,7 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableGroup1Node1); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup1Node1, ); @@ -2373,7 +2389,7 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableGroup1Node1Child1); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup1Node1Child1, ); @@ -2385,7 +2401,7 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableGroup1Node2); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup1Node2, ); @@ -2398,7 +2414,7 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableGroup2Node1); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup2Node1, ); @@ -2413,7 +2429,7 @@ suite('FocusManager', function () { this.testFocusableGroup2.getRootFocusableNode(), ); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup2.getRootFocusableNode(), ); @@ -2458,7 +2474,7 @@ suite('FocusManager', function () { this.focusManager.unregisterTree(this.testFocusableGroup1); // Since the most recent tree still exists, it still has focus. - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup2Node1, ); @@ -2470,7 +2486,7 @@ suite('FocusManager', function () { this.focusManager.focusTree(this.testFocusableNestedGroup4); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableNestedGroup4.getRootFocusableNode(), ); @@ -2482,7 +2498,7 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableNestedGroup4Node1); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableNestedGroup4Node1, ); @@ -2495,7 +2511,7 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableNestedGroup4Node1); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableNestedGroup4Node1, ); @@ -2510,10 +2526,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableGroup1 .getRootFocusableNode() .getFocusableElement(); - assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -2526,10 +2542,10 @@ suite('FocusManager', function () { // The original node retains active focus since the tree already holds focus (per // focusTree's contract). const nodeElem = this.testFocusableGroup1Node1.getFocusableElement(); - assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(nodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -2543,10 +2559,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableGroup2 .getRootFocusableNode() .getFocusableElement(); - assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -2560,10 +2576,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableGroup2 .getRootFocusableNode() .getFocusableElement(); - assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -2577,10 +2593,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableGroup1 .getRootFocusableNode() .getFocusableElement(); - assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -2590,10 +2606,10 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableGroup1Node1); const nodeElem = this.testFocusableGroup1Node1.getFocusableElement(); - assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(nodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -2605,13 +2621,13 @@ suite('FocusManager', function () { const prevNodeElem = this.testFocusableGroup1Node1.getFocusableElement(); - assert.notInclude( - Array.from(prevNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + prevNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(prevNodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass( + prevNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -2622,10 +2638,10 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableGroup1Node2); const newNodeElem = this.testFocusableGroup1Node2.getFocusableElement(); - assert.include(Array.from(newNodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(newNodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(newNodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + newNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -2638,13 +2654,13 @@ suite('FocusManager', function () { const prevNodeElem = this.testFocusableGroup1Node1.getFocusableElement(); - assert.notInclude( - Array.from(prevNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + prevNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.include( - Array.from(prevNodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass( + prevNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -2656,10 +2672,10 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableGroup2Node1); const newNodeElem = this.testFocusableGroup2Node1.getFocusableElement(); - assert.include(Array.from(newNodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(newNodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(newNodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + newNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -2675,10 +2691,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableGroup2 .getRootFocusableNode() .getFocusableElement(); - assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -2692,10 +2708,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableGroup1 .getRootFocusableNode() .getFocusableElement(); - assert.notInclude(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -2707,10 +2723,10 @@ suite('FocusManager', function () { // Since the tree was unregistered it no longer has focus indicators. const nodeElem = this.testFocusableGroup1Node1.getFocusableElement(); - assert.notInclude(Array.from(nodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(nodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -2728,21 +2744,21 @@ suite('FocusManager', function () { this.testFocusableGroup2Node1.getFocusableElement(); const removedNodeElem = this.testFocusableGroup1Node1.getFocusableElement(); - assert.include( - Array.from(otherNodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass( + otherNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(otherNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + otherNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(removedNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + removedNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(removedNodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass( + removedNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -2760,21 +2776,21 @@ suite('FocusManager', function () { this.testFocusableGroup2Node1.getFocusableElement(); const removedNodeElem = this.testFocusableGroup1Node1.getFocusableElement(); - assert.include( - Array.from(otherNodeElem.classList), - 'blocklyActiveFocus', + assert.includesClass( + otherNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(otherNodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass( + otherNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(removedNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + removedNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(removedNodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass( + removedNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -2790,8 +2806,8 @@ suite('FocusManager', function () { // passive now that the new node is active. const node1 = this.testFocusableGroup1Node1.getFocusableElement(); const node2 = this.testFocusableGroup1Node2.getFocusableElement(); - assert.notInclude(Array.from(node1.classList), 'blocklyPassiveFocus'); - assert.notInclude(Array.from(node2.classList), 'blocklyPassiveFocus'); + assert.notIncludesClass(node1.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass(node2.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); }); test('registered tree focusTree()ed other tree node passively focused tree node now has active property', function () { @@ -2808,15 +2824,15 @@ suite('FocusManager', function () { const rootElem = this.testFocusableGroup1 .getRootFocusableNode() .getFocusableElement(); - assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(nodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -2832,15 +2848,15 @@ suite('FocusManager', function () { const rootElem = this.testFocusableGroup1 .getRootFocusableNode() .getFocusableElement(); - assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(nodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -2853,10 +2869,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableNestedGroup4 .getRootFocusableNode() .getFocusableElement(); - assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -2868,10 +2884,10 @@ suite('FocusManager', function () { const nodeElem = this.testFocusableNestedGroup4Node1.getFocusableElement(); - assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(nodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -2886,21 +2902,21 @@ suite('FocusManager', function () { this.testFocusableGroup2Node1.getFocusableElement(); const currNodeElem = this.testFocusableNestedGroup4Node1.getFocusableElement(); - assert.notInclude( - Array.from(prevNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + prevNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.include( - Array.from(prevNodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass( + prevNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.include( - Array.from(currNodeElem.classList), - 'blocklyActiveFocus', + assert.includesClass( + currNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(currNodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass( + currNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); }); @@ -2913,7 +2929,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableGroup1').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableGroup1, ); @@ -2924,7 +2940,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableGroup1.node1').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableGroup1, ); @@ -2935,7 +2951,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableGroup1.node1.child1').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableGroup1, ); @@ -2947,7 +2963,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableGroup1.node2').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableGroup1, ); @@ -2960,7 +2976,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableGroup2.node1').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableGroup2, ); @@ -2973,7 +2989,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableGroup2').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableGroup2, ); @@ -2987,7 +3003,7 @@ suite('FocusManager', function () { .focus(); // The tree of the unregistered child element should take focus. - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableGroup1, ); @@ -3060,7 +3076,7 @@ suite('FocusManager', function () { this.focusManager.unregisterTree(this.testFocusableGroup1); // Since the most recent tree still exists, it still has focus. - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableGroup2, ); @@ -3087,7 +3103,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableNestedGroup4').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableNestedGroup4, ); @@ -3099,7 +3115,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableNestedGroup4.node1').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableNestedGroup4, ); @@ -3112,7 +3128,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableNestedGroup4.node1').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableNestedGroup4, ); @@ -3124,7 +3140,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableGroup1').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup1.getRootFocusableNode(), ); @@ -3135,7 +3151,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableGroup1.node1').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup1Node1, ); @@ -3146,7 +3162,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableGroup1.node1.child1').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup1Node1Child1, ); @@ -3158,7 +3174,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableGroup1.node2').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup1Node2, ); @@ -3171,7 +3187,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableGroup2.node1').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup2Node1, ); @@ -3184,7 +3200,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableGroup2').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup2.getRootFocusableNode(), ); @@ -3198,7 +3214,7 @@ suite('FocusManager', function () { .focus(); // The nearest node of the unregistered child element should take focus. - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup1Node2, ); @@ -3235,7 +3251,7 @@ suite('FocusManager', function () { document.getElementById('testUnfocusableElement').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup1Node1, ); @@ -3280,7 +3296,7 @@ suite('FocusManager', function () { this.focusManager.unregisterTree(this.testFocusableGroup1); // Since the most recent tree still exists, it still has focus. - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup2Node1, ); @@ -3307,7 +3323,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableNestedGroup4').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableNestedGroup4.getRootFocusableNode(), ); @@ -3319,7 +3335,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableNestedGroup4.node1').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableNestedGroup4Node1, ); @@ -3332,7 +3348,7 @@ suite('FocusManager', function () { document.getElementById('testFocusableNestedGroup4.node1').focus(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableNestedGroup4Node1, ); @@ -3347,10 +3363,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableGroup1 .getRootFocusableNode() .getFocusableElement(); - assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -3360,10 +3376,10 @@ suite('FocusManager', function () { document.getElementById('testFocusableGroup1.node1').focus(); const nodeElem = this.testFocusableGroup1Node1.getFocusableElement(); - assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(nodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -3375,13 +3391,13 @@ suite('FocusManager', function () { const prevNodeElem = this.testFocusableGroup1Node1.getFocusableElement(); - assert.notInclude( - Array.from(prevNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + prevNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(prevNodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass( + prevNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -3392,10 +3408,10 @@ suite('FocusManager', function () { document.getElementById('testFocusableGroup1.node2').focus(); const newNodeElem = this.testFocusableGroup1Node2.getFocusableElement(); - assert.include(Array.from(newNodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(newNodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(newNodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + newNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -3408,13 +3424,13 @@ suite('FocusManager', function () { const prevNodeElem = this.testFocusableGroup1Node1.getFocusableElement(); - assert.notInclude( - Array.from(prevNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + prevNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.include( - Array.from(prevNodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass( + prevNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -3426,10 +3442,10 @@ suite('FocusManager', function () { document.getElementById('testFocusableGroup2.node1').focus(); const newNodeElem = this.testFocusableGroup2Node1.getFocusableElement(); - assert.include(Array.from(newNodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(newNodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(newNodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + newNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -3443,10 +3459,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableGroup2 .getRootFocusableNode() .getFocusableElement(); - assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -3459,10 +3475,10 @@ suite('FocusManager', function () { // The nearest node of the unregistered child element should be actively focused. const nodeElem = this.testFocusableGroup1Node2.getFocusableElement(); - assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(nodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -3474,10 +3490,10 @@ suite('FocusManager', function () { const rootElem = document.getElementById( 'testUnregisteredFocusableGroup3', ); - assert.notInclude(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -3491,10 +3507,10 @@ suite('FocusManager', function () { const nodeElem = document.getElementById( 'testUnregisteredFocusableGroup3.node1', ); - assert.notInclude(Array.from(nodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(nodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -3510,18 +3526,18 @@ suite('FocusManager', function () { const attemptedNewNodeElem = document.getElementById( 'testUnfocusableElement', ); - assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(nodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(attemptedNewNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + attemptedNewNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(attemptedNewNodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass( + attemptedNewNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -3535,10 +3551,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableGroup1 .getRootFocusableNode() .getFocusableElement(); - assert.notInclude(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -3550,10 +3566,10 @@ suite('FocusManager', function () { // Since the tree was unregistered it no longer has focus indicators. const nodeElem = this.testFocusableGroup1Node1.getFocusableElement(); - assert.notInclude(Array.from(nodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(nodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -3571,21 +3587,21 @@ suite('FocusManager', function () { this.testFocusableGroup2Node1.getFocusableElement(); const removedNodeElem = this.testFocusableGroup1Node1.getFocusableElement(); - assert.include( - Array.from(otherNodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass( + otherNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(otherNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + otherNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(removedNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + removedNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(removedNodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass( + removedNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -3603,21 +3619,21 @@ suite('FocusManager', function () { this.testFocusableGroup2Node1.getFocusableElement(); const removedNodeElem = this.testFocusableGroup1Node1.getFocusableElement(); - assert.include( - Array.from(otherNodeElem.classList), - 'blocklyActiveFocus', + assert.includesClass( + otherNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(otherNodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass( + otherNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(removedNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + removedNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(removedNodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass( + removedNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -3635,21 +3651,21 @@ suite('FocusManager', function () { this.testFocusableGroup2Node1.getFocusableElement(); const removedNodeElem = this.testFocusableGroup1Node1.getFocusableElement(); - assert.notInclude( - Array.from(otherNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + otherNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.include( - Array.from(otherNodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass( + otherNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(removedNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + removedNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(removedNodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass( + removedNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -3665,8 +3681,8 @@ suite('FocusManager', function () { // passive now that the new node is active. const node1 = this.testFocusableGroup1Node1.getFocusableElement(); const node2 = this.testFocusableGroup1Node2.getFocusableElement(); - assert.notInclude(Array.from(node1.classList), 'blocklyPassiveFocus'); - assert.notInclude(Array.from(node2.classList), 'blocklyPassiveFocus'); + assert.notIncludesClass(node1.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass(node2.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); }); test('registered tree focus()ed other tree node passively focused tree root now has active property', function () { @@ -3683,15 +3699,15 @@ suite('FocusManager', function () { .getRootFocusableNode() .getFocusableElement(); const nodeElem = this.testFocusableGroup1Node1.getFocusableElement(); - assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude(Array.from(nodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(nodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -3707,15 +3723,15 @@ suite('FocusManager', function () { const rootElem = this.testFocusableGroup1 .getRootFocusableNode() .getFocusableElement(); - assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(nodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -3728,10 +3744,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableNestedGroup4 .getRootFocusableNode() .getFocusableElement(); - assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(rootElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -3743,10 +3759,10 @@ suite('FocusManager', function () { const nodeElem = this.testFocusableNestedGroup4Node1.getFocusableElement(); - assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(nodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -3761,21 +3777,21 @@ suite('FocusManager', function () { this.testFocusableGroup2Node1.getFocusableElement(); const currNodeElem = this.testFocusableNestedGroup4Node1.getFocusableElement(); - assert.notInclude( - Array.from(prevNodeElem.classList), - 'blocklyActiveFocus', + assert.notIncludesClass( + prevNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.include( - Array.from(prevNodeElem.classList), - 'blocklyPassiveFocus', + assert.includesClass( + prevNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.include( - Array.from(currNodeElem.classList), - 'blocklyActiveFocus', + assert.includesClass( + currNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude( - Array.from(currNodeElem.classList), - 'blocklyPassiveFocus', + assert.notIncludesClass( + currNodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); }); @@ -3793,8 +3809,8 @@ suite('FocusManager', function () { const rootElem = rootNode.getFocusableElement(); assert.isNull(this.focusManager.getFocusedTree()); assert.isNull(this.focusManager.getFocusedNode()); - assert.include(Array.from(rootElem.classList), 'blocklyPassiveFocus'); - assert.notInclude(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.includesClass(rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); }); test('Defocusing actively focused HTML tree node switches to passive highlight', function () { @@ -3806,8 +3822,8 @@ suite('FocusManager', function () { const nodeElem = this.testFocusableTree2Node1.getFocusableElement(); assert.isNull(this.focusManager.getFocusedTree()); assert.isNull(this.focusManager.getFocusedNode()); - assert.include(Array.from(nodeElem.classList), 'blocklyPassiveFocus'); - assert.notInclude(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.includesClass(nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); }); test('Defocusing actively focused HTML subtree node switches to passive highlight', function () { @@ -3820,8 +3836,8 @@ suite('FocusManager', function () { const nodeElem = this.testFocusableNestedTree4Node1.getFocusableElement(); assert.isNull(this.focusManager.getFocusedTree()); assert.isNull(this.focusManager.getFocusedNode()); - assert.include(Array.from(nodeElem.classList), 'blocklyPassiveFocus'); - assert.notInclude(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.includesClass(nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); }); test('Refocusing actively focused root HTML tree restores to active highlight', function () { @@ -3833,10 +3849,10 @@ suite('FocusManager', function () { const rootNode = this.testFocusableTree2.getRootFocusableNode(); const rootElem = rootNode.getFocusableElement(); - assert.equal(this.focusManager.getFocusedTree(), this.testFocusableTree2); - assert.equal(this.focusManager.getFocusedNode(), rootNode); - assert.notInclude(Array.from(rootElem.classList), 'blocklyPassiveFocus'); - assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.strictEqual(this.focusManager.getFocusedTree(), this.testFocusableTree2); + assert.strictEqual(this.focusManager.getFocusedNode(), rootNode); + assert.notIncludesClass(rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); }); test('Refocusing actively focused HTML tree node restores to active highlight', function () { @@ -3847,13 +3863,13 @@ suite('FocusManager', function () { document.getElementById('testFocusableTree2.node1').focus(); const nodeElem = this.testFocusableTree2Node1.getFocusableElement(); - assert.equal(this.focusManager.getFocusedTree(), this.testFocusableTree2); - assert.equal( + assert.strictEqual(this.focusManager.getFocusedTree(), this.testFocusableTree2); + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree2Node1, ); - assert.notInclude(Array.from(nodeElem.classList), 'blocklyPassiveFocus'); - assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notIncludesClass(nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); }); test('Refocusing actively focused HTML subtree node restores to active highlight', function () { @@ -3865,16 +3881,16 @@ suite('FocusManager', function () { document.getElementById('testFocusableNestedTree4.node1').focus(); const nodeElem = this.testFocusableNestedTree4Node1.getFocusableElement(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableNestedTree4, ); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableNestedTree4Node1, ); - assert.notInclude(Array.from(nodeElem.classList), 'blocklyPassiveFocus'); - assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.notIncludesClass(nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); }); }); @@ -3895,18 +3911,18 @@ suite('FocusManager', function () { const currElem = this.testFocusableGroup2 .getRootFocusableNode() .getFocusableElement(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableGroup2, ); assert.strictEqual(document.activeElement, currElem); - assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(currElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + currElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); - assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); }); test('HTML focusTree()ed then SVG focusNode()ed correctly updates getFocusedNode() and indicators', function () { @@ -3920,18 +3936,18 @@ suite('FocusManager', function () { .getRootFocusableNode() .getFocusableElement(); const currElem = this.testFocusableGroup2Node1.getFocusableElement(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup2Node1, ); assert.strictEqual(document.activeElement, currElem); - assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(currElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + currElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); - assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); }); test('HTML focusTree()ed then SVG DOM focus()ed correctly updates getFocusedNode() and indicators', function () { @@ -3945,18 +3961,18 @@ suite('FocusManager', function () { .getRootFocusableNode() .getFocusableElement(); const currElem = this.testFocusableGroup2Node1.getFocusableElement(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup2Node1, ); assert.strictEqual(document.activeElement, currElem); - assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(currElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + currElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); - assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); }); test('HTML focusNode()ed then SVG focusTree()ed correctly updates getFocusedTree() and indicators', function () { @@ -3970,18 +3986,18 @@ suite('FocusManager', function () { const currElem = this.testFocusableGroup2 .getRootFocusableNode() .getFocusableElement(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableGroup2, ); assert.strictEqual(document.activeElement, currElem); - assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(currElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + currElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); - assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); }); test('HTML focusNode()ed then SVG focusNode()ed correctly updates getFocusedNode() and indicators', function () { @@ -3993,18 +4009,18 @@ suite('FocusManager', function () { const prevElem = this.testFocusableTree2Node1.getFocusableElement(); const currElem = this.testFocusableGroup2Node1.getFocusableElement(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup2Node1, ); assert.strictEqual(document.activeElement, currElem); - assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(currElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + currElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); - assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); }); test('HTML focusNode()ed then SVG DOM focus()ed correctly updates getFocusedNode() and indicators', function () { @@ -4016,18 +4032,18 @@ suite('FocusManager', function () { const prevElem = this.testFocusableTree2Node1.getFocusableElement(); const currElem = this.testFocusableGroup2Node1.getFocusableElement(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup2Node1, ); assert.strictEqual(document.activeElement, currElem); - assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(currElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + currElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); - assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); }); test('HTML DOM focus()ed then SVG focusTree()ed correctly updates getFocusedTree() and indicators', function () { @@ -4041,18 +4057,18 @@ suite('FocusManager', function () { const currElem = this.testFocusableGroup2 .getRootFocusableNode() .getFocusableElement(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableGroup2, ); assert.strictEqual(document.activeElement, currElem); - assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(currElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + currElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); - assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); }); test('HTML DOM focus()ed then SVG focusNode()ed correctly updates getFocusedNode() and indicators', function () { @@ -4064,18 +4080,18 @@ suite('FocusManager', function () { const prevElem = this.testFocusableTree2Node1.getFocusableElement(); const currElem = this.testFocusableGroup2Node1.getFocusableElement(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup2Node1, ); assert.strictEqual(document.activeElement, currElem); - assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(currElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + currElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); - assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); }); test('HTML DOM focus()ed then SVG DOM focus()ed correctly updates getFocusedNode() and indicators', function () { @@ -4087,18 +4103,18 @@ suite('FocusManager', function () { const prevElem = this.testFocusableTree2Node1.getFocusableElement(); const currElem = this.testFocusableGroup2Node1.getFocusableElement(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup2Node1, ); assert.strictEqual(document.activeElement, currElem); - assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(currElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + currElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); - assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); }); }); suite('Focus SVG tree then HTML tree', function () { @@ -4115,18 +4131,18 @@ suite('FocusManager', function () { const currElem = this.testFocusableTree2 .getRootFocusableNode() .getFocusableElement(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableTree2, ); assert.strictEqual(document.activeElement, currElem); - assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(currElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + currElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); - assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); }); test('SVG focusTree()ed then HTML focusNode()ed correctly updates getFocusedNode() and indicators', function () { @@ -4140,18 +4156,18 @@ suite('FocusManager', function () { .getRootFocusableNode() .getFocusableElement(); const currElem = this.testFocusableTree2Node1.getFocusableElement(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree2Node1, ); assert.strictEqual(document.activeElement, currElem); - assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(currElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + currElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); - assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); }); test('SVG focusTree()ed then HTML DOM focus()ed correctly updates getFocusedNode() and indicators', function () { @@ -4165,18 +4181,18 @@ suite('FocusManager', function () { .getRootFocusableNode() .getFocusableElement(); const currElem = this.testFocusableTree2Node1.getFocusableElement(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree2Node1, ); assert.strictEqual(document.activeElement, currElem); - assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(currElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + currElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); - assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); }); test('SVG focusNode()ed then HTML focusTree()ed correctly updates getFocusedTree() and indicators', function () { @@ -4190,18 +4206,18 @@ suite('FocusManager', function () { const currElem = this.testFocusableTree2 .getRootFocusableNode() .getFocusableElement(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableTree2, ); assert.strictEqual(document.activeElement, currElem); - assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(currElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + currElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); - assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); }); test('SVG focusNode()ed then HTML focusNode()ed correctly updates getFocusedNode() and indicators', function () { @@ -4213,18 +4229,18 @@ suite('FocusManager', function () { const prevElem = this.testFocusableGroup2Node1.getFocusableElement(); const currElem = this.testFocusableTree2Node1.getFocusableElement(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree2Node1, ); assert.strictEqual(document.activeElement, currElem); - assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(currElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + currElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); - assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); }); test('SVG focusNode()ed then HTML DOM focus()ed correctly updates getFocusedNode() and indicators', function () { @@ -4236,18 +4252,18 @@ suite('FocusManager', function () { const prevElem = this.testFocusableGroup2Node1.getFocusableElement(); const currElem = this.testFocusableTree2Node1.getFocusableElement(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree2Node1, ); assert.strictEqual(document.activeElement, currElem); - assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(currElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + currElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); - assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); }); test('SVG DOM focus()ed then HTML focusTree()ed correctly updates getFocusedTree() and indicators', function () { @@ -4261,18 +4277,18 @@ suite('FocusManager', function () { const currElem = this.testFocusableTree2 .getRootFocusableNode() .getFocusableElement(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableTree2, ); assert.strictEqual(document.activeElement, currElem); - assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(currElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + currElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); - assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); }); test('SVG DOM focus()ed then HTML focusNode()ed correctly updates getFocusedNode() and indicators', function () { @@ -4284,18 +4300,18 @@ suite('FocusManager', function () { const prevElem = this.testFocusableGroup2Node1.getFocusableElement(); const currElem = this.testFocusableTree2Node1.getFocusableElement(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree2Node1, ); assert.strictEqual(document.activeElement, currElem); - assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(currElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + currElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); - assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); }); test('SVG DOM focus()ed then HTML DOM focus()ed correctly updates getFocusedNode() and indicators', function () { @@ -4307,18 +4323,18 @@ suite('FocusManager', function () { const prevElem = this.testFocusableGroup2Node1.getFocusableElement(); const currElem = this.testFocusableTree2Node1.getFocusableElement(); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree2Node1, ); assert.strictEqual(document.activeElement, currElem); - assert.include(Array.from(currElem.classList), 'blocklyActiveFocus'); - assert.notInclude( - Array.from(currElem.classList), - 'blocklyPassiveFocus', + assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + currElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notInclude(Array.from(prevElem.classList), 'blocklyActiveFocus'); - assert.include(Array.from(prevElem.classList), 'blocklyPassiveFocus'); + assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); }); }); }); @@ -4326,10 +4342,6 @@ suite('FocusManager', function () { /* Ephemeral focus tests. */ suite('takeEphemeralFocus()', function () { - function classListOf(node) { - return Array.from(node.getFocusableElement().classList); - } - test('with no focused node does not change states', function () { this.focusManager.registerTree(this.testFocusableTree2); this.focusManager.registerTree(this.testFocusableGroup2); @@ -4341,10 +4353,12 @@ suite('FocusManager', function () { // Taking focus without an existing node having focus should change no focus indicators. const activeElems = Array.from( - document.querySelectorAll('.blocklyActiveFocus'), + document.querySelectorAll( + FocusableTreeTraverser.ACTIVE_FOCUS_NODE_CSS_SELECTOR), ); const passiveElems = Array.from( - document.querySelectorAll('.blocklyPassiveFocus'), + document.querySelectorAll( + FocusableTreeTraverser.PASSIVE_FOCUS_NODE_CSS_SELECTOR), ); assert.isEmpty(activeElems); assert.isEmpty(passiveElems); @@ -4362,16 +4376,18 @@ suite('FocusManager', function () { // Taking focus without an existing node having focus should change no focus indicators. const activeElems = Array.from( - document.querySelectorAll('.blocklyActiveFocus'), + document.querySelectorAll( + FocusableTreeTraverser.ACTIVE_FOCUS_NODE_CSS_SELECTOR), ); const passiveElems = Array.from( - document.querySelectorAll('.blocklyPassiveFocus'), + document.querySelectorAll( + FocusableTreeTraverser.PASSIVE_FOCUS_NODE_CSS_SELECTOR), ); assert.isEmpty(activeElems); - assert.equal(passiveElems.length, 1); - assert.include( - classListOf(this.testFocusableTree2Node1), - 'blocklyPassiveFocus', + assert.strictEqual(passiveElems.length, 1); + assert.includesClass( + this.testFocusableTree2Node1.getFocusableElement().classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); }); @@ -4429,12 +4445,13 @@ suite('FocusManager', function () { this.focusManager.focusTree(this.testFocusableGroup2); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableGroup2, ); const activeElems = Array.from( - document.querySelectorAll('.blocklyActiveFocus'), + document.querySelectorAll( + FocusableTreeTraverser.ACTIVE_FOCUS_NODE_CSS_SELECTOR), ); assert.isEmpty(activeElems); }); @@ -4450,12 +4467,13 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableGroup2Node1); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup2Node1, ); const activeElems = Array.from( - document.querySelectorAll('.blocklyActiveFocus'), + document.querySelectorAll( + FocusableTreeTraverser.ACTIVE_FOCUS_NODE_CSS_SELECTOR), ); assert.isEmpty(activeElems); }); @@ -4474,12 +4492,13 @@ suite('FocusManager', function () { // The focus() state change will affect getFocusedNode() but it will not cause the node to now // be active. - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup2Node1, ); const activeElems = Array.from( - document.querySelectorAll('.blocklyActiveFocus'), + document.querySelectorAll( + FocusableTreeTraverser.ACTIVE_FOCUS_NODE_CSS_SELECTOR), ); assert.isEmpty(activeElems); }); @@ -4497,10 +4516,12 @@ suite('FocusManager', function () { // Finishing ephemeral focus without a previously focused node should not change indicators. const activeElems = Array.from( - document.querySelectorAll('.blocklyActiveFocus'), + document.querySelectorAll( + FocusableTreeTraverser.ACTIVE_FOCUS_NODE_CSS_SELECTOR), ); const passiveElems = Array.from( - document.querySelectorAll('.blocklyPassiveFocus'), + document.querySelectorAll( + FocusableTreeTraverser.PASSIVE_FOCUS_NODE_CSS_SELECTOR), ); assert.isEmpty(activeElems); assert.isEmpty(passiveElems); @@ -4556,14 +4577,15 @@ suite('FocusManager', function () { // The original focused node should be restored. const nodeElem = this.testFocusableTree2Node1.getFocusableElement(); const activeElems = Array.from( - document.querySelectorAll('.blocklyActiveFocus'), + document.querySelectorAll( + FocusableTreeTraverser.ACTIVE_FOCUS_NODE_CSS_SELECTOR), ); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree2Node1, ); - assert.equal(activeElems.length, 1); - assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.strictEqual(activeElems.length, 1); + assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); assert.strictEqual(document.activeElement, nodeElem); }); @@ -4586,14 +4608,15 @@ suite('FocusManager', function () { .getRootFocusableNode() .getFocusableElement(); const activeElems = Array.from( - document.querySelectorAll('.blocklyActiveFocus'), + document.querySelectorAll( + FocusableTreeTraverser.ACTIVE_FOCUS_NODE_CSS_SELECTOR), ); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedTree(), this.testFocusableGroup2, ); - assert.equal(activeElems.length, 1); - assert.include(Array.from(rootElem.classList), 'blocklyActiveFocus'); + assert.strictEqual(activeElems.length, 1); + assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); assert.strictEqual(document.activeElement, rootElem); }); @@ -4614,14 +4637,15 @@ suite('FocusManager', function () { // end of the ephemeral flow. const nodeElem = this.testFocusableGroup2Node1.getFocusableElement(); const activeElems = Array.from( - document.querySelectorAll('.blocklyActiveFocus'), + document.querySelectorAll( + FocusableTreeTraverser.ACTIVE_FOCUS_NODE_CSS_SELECTOR), ); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup2Node1, ); - assert.equal(activeElems.length, 1); - assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.strictEqual(activeElems.length, 1); + assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); assert.strictEqual(document.activeElement, nodeElem); }); @@ -4642,14 +4666,15 @@ suite('FocusManager', function () { // end of the ephemeral flow. const nodeElem = this.testFocusableGroup2Node1.getFocusableElement(); const activeElems = Array.from( - document.querySelectorAll('.blocklyActiveFocus'), + document.querySelectorAll( + FocusableTreeTraverser.ACTIVE_FOCUS_NODE_CSS_SELECTOR), ); - assert.equal( + assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableGroup2Node1, ); - assert.equal(activeElems.length, 1); - assert.include(Array.from(nodeElem.classList), 'blocklyActiveFocus'); + assert.strictEqual(activeElems.length, 1); + assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); assert.strictEqual(document.activeElement, nodeElem); }); }); diff --git a/tests/mocha/focusable_tree_traverser_test.js b/tests/mocha/focusable_tree_traverser_test.js index 2069132fe..00b2c5390 100644 --- a/tests/mocha/focusable_tree_traverser_test.js +++ b/tests/mocha/focusable_tree_traverser_test.js @@ -4,6 +4,7 @@ * SPDX-License-Identifier: Apache-2.0 */ +import {FocusManager} from '../../build/src/core/focus_manager.js'; import {FocusableTreeTraverser} from '../../build/src/core/utils/focusable_tree_traverser.js'; import {assert} from '../../node_modules/chai/chai.js'; import { @@ -11,51 +12,59 @@ import { sharedTestTeardown, } from './test_helpers/setup_teardown.js'; +class FocusableNodeImpl { + constructor(element, tree) { + this.element = element; + this.tree = tree; + } + + getFocusableElement() { + return this.element; + } + + getFocusableTree() { + return this.tree; + } +} + +class FocusableTreeImpl { + constructor(rootElement, nestedTrees) { + this.nestedTrees = nestedTrees; + this.idToNodeMap = {}; + this.rootNode = this.addNode(rootElement); + } + + addNode(element) { + const node = new FocusableNodeImpl(element, this); + this.idToNodeMap[element.id] = node; + return node; + } + + getFocusedNode() { + throw Error('Unused in test suite.'); + } + + getRootFocusableNode() { + return this.rootNode; + } + + getNestedTrees() { + return this.nestedTrees; + } + + lookUpFocusableNode(id) { + return this.idToNodeMap[id]; + } + + findFocusableNodeFor(element) { + return FocusableTreeTraverser.findFocusableNodeFor(element, this); + } +} + suite('FocusableTreeTraverser', function () { setup(function () { sharedTestSetup.call(this); - const FocusableNodeImpl = function (element, tree) { - this.getFocusableElement = function () { - return element; - }; - - this.getFocusableTree = function () { - return tree; - }; - }; - const FocusableTreeImpl = function (rootElement, nestedTrees) { - this.idToNodeMap = {}; - - this.addNode = function (element) { - const node = new FocusableNodeImpl(element, this); - this.idToNodeMap[element.id] = node; - return node; - }; - - this.getFocusedNode = function () { - throw Error('Unused in test suite.'); - }; - - this.getRootFocusableNode = function () { - return this.rootNode; - }; - - this.getNestedTrees = function () { - return nestedTrees; - }; - - this.lookUpFocusableNode = function (id) { - return this.idToNodeMap[id]; - }; - - this.findFocusableNodeFor = function (element) { - return FocusableTreeTraverser.findFocusableNodeFor(element, this); - }; - - this.rootNode = this.addNode(rootElement); - }; - const createFocusableTree = function (rootElementId, nestedTrees) { return new FocusableTreeImpl( document.getElementById(rootElementId), @@ -107,7 +116,7 @@ suite('FocusableTreeTraverser', function () { sharedTestTeardown.call(this); const removeFocusIndicators = function (element) { - element.classList.remove('blocklyActiveFocus', 'blocklyPassiveFocus'); + element.classList.remove(FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); }; // Ensure all node CSS styles are reset so that state isn't leaked between tests. @@ -141,101 +150,101 @@ suite('FocusableTreeTraverser', function () { test('for tree with root active highlight returns root node', function () { const tree = this.testFocusableTree1; const rootNode = tree.getRootFocusableNode(); - rootNode.getFocusableElement().classList.add('blocklyActiveFocus'); + rootNode.getFocusableElement().classList.add(FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); const finding = FocusableTreeTraverser.findFocusedNode(tree); - assert.equal(finding, rootNode); + assert.strictEqual(finding, rootNode); }); test('for tree with root passive highlight returns root node', function () { const tree = this.testFocusableTree1; const rootNode = tree.getRootFocusableNode(); - rootNode.getFocusableElement().classList.add('blocklyPassiveFocus'); + rootNode.getFocusableElement().classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); const finding = FocusableTreeTraverser.findFocusedNode(tree); - assert.equal(finding, rootNode); + assert.strictEqual(finding, rootNode); }); test('for tree with node active highlight returns node', function () { const tree = this.testFocusableTree1; const node = this.testFocusableTree1Node1; - node.getFocusableElement().classList.add('blocklyActiveFocus'); + node.getFocusableElement().classList.add(FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); const finding = FocusableTreeTraverser.findFocusedNode(tree); - assert.equal(finding, node); + assert.strictEqual(finding, node); }); test('for tree with node passive highlight returns node', function () { const tree = this.testFocusableTree1; const node = this.testFocusableTree1Node1; - node.getFocusableElement().classList.add('blocklyPassiveFocus'); + node.getFocusableElement().classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); const finding = FocusableTreeTraverser.findFocusedNode(tree); - assert.equal(finding, node); + assert.strictEqual(finding, node); }); test('for tree with nested node active highlight returns node', function () { const tree = this.testFocusableTree1; const node = this.testFocusableTree1Node1Child1; - node.getFocusableElement().classList.add('blocklyActiveFocus'); + node.getFocusableElement().classList.add(FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); const finding = FocusableTreeTraverser.findFocusedNode(tree); - assert.equal(finding, node); + assert.strictEqual(finding, node); }); test('for tree with nested node passive highlight returns node', function () { const tree = this.testFocusableTree1; const node = this.testFocusableTree1Node1Child1; - node.getFocusableElement().classList.add('blocklyPassiveFocus'); + node.getFocusableElement().classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); const finding = FocusableTreeTraverser.findFocusedNode(tree); - assert.equal(finding, node); + assert.strictEqual(finding, node); }); - test('for tree with nested tree root active no parent highlights returns null', function () { + test('for tree with nested tree root active no parent highlights returns root', function () { const tree = this.testFocusableNestedTree4; const rootNode = this.testFocusableNestedTree4.getRootFocusableNode(); - rootNode.getFocusableElement().classList.add('blocklyActiveFocus'); + rootNode.getFocusableElement().classList.add(FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); const finding = FocusableTreeTraverser.findFocusedNode(tree); - assert.equal(finding, rootNode); + assert.strictEqual(finding, rootNode); }); - test('for tree with nested tree root passive no parent highlights returns null', function () { + test('for tree with nested tree root passive no parent highlights returns root', function () { const tree = this.testFocusableNestedTree4; const rootNode = this.testFocusableNestedTree4.getRootFocusableNode(); - rootNode.getFocusableElement().classList.add('blocklyPassiveFocus'); + rootNode.getFocusableElement().classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); const finding = FocusableTreeTraverser.findFocusedNode(tree); - assert.equal(finding, rootNode); + assert.strictEqual(finding, rootNode); }); - test('for tree with nested tree root active no parent highlights returns null', function () { + test('for tree with nested tree node active no parent highlights returns node', function () { const tree = this.testFocusableNestedTree4; const node = this.testFocusableNestedTree4Node1; - node.getFocusableElement().classList.add('blocklyActiveFocus'); + node.getFocusableElement().classList.add(FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); const finding = FocusableTreeTraverser.findFocusedNode(tree); - assert.equal(finding, node); + assert.strictEqual(finding, node); }); test('for tree with nested tree root passive no parent highlights returns null', function () { const tree = this.testFocusableNestedTree4; const node = this.testFocusableNestedTree4Node1; - node.getFocusableElement().classList.add('blocklyPassiveFocus'); + node.getFocusableElement().classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); const finding = FocusableTreeTraverser.findFocusedNode(tree); - assert.equal(finding, node); + assert.strictEqual(finding, node); }); test('for tree with nested tree root active parent node passive returns parent node', function () { @@ -243,14 +252,14 @@ suite('FocusableTreeTraverser', function () { const rootNode = this.testFocusableNestedTree4.getRootFocusableNode(); this.testFocusableTree2Node1 .getFocusableElement() - .classList.add('blocklyPassiveFocus'); - rootNode.getFocusableElement().classList.add('blocklyActiveFocus'); + .classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + rootNode.getFocusableElement().classList.add(FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); const finding = FocusableTreeTraverser.findFocusedNode( this.testFocusableTree2, ); - assert.equal(finding, this.testFocusableTree2Node1); + assert.strictEqual(finding, this.testFocusableTree2Node1); }); test('for tree with nested tree root passive parent node passive returns parent node', function () { @@ -258,14 +267,14 @@ suite('FocusableTreeTraverser', function () { const rootNode = this.testFocusableNestedTree4.getRootFocusableNode(); this.testFocusableTree2Node1 .getFocusableElement() - .classList.add('blocklyPassiveFocus'); - rootNode.getFocusableElement().classList.add('blocklyPassiveFocus'); + .classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + rootNode.getFocusableElement().classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); const finding = FocusableTreeTraverser.findFocusedNode( this.testFocusableTree2, ); - assert.equal(finding, this.testFocusableTree2Node1); + assert.strictEqual(finding, this.testFocusableTree2Node1); }); test('for tree with nested tree node active parent node passive returns parent node', function () { @@ -273,14 +282,14 @@ suite('FocusableTreeTraverser', function () { const node = this.testFocusableNestedTree4Node1; this.testFocusableTree2Node1 .getFocusableElement() - .classList.add('blocklyPassiveFocus'); - node.getFocusableElement().classList.add('blocklyActiveFocus'); + .classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + node.getFocusableElement().classList.add(FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); const finding = FocusableTreeTraverser.findFocusedNode( this.testFocusableTree2, ); - assert.equal(finding, this.testFocusableTree2Node1); + assert.strictEqual(finding, this.testFocusableTree2Node1); }); test('for tree with nested tree node passive parent node passive returns parent node', function () { @@ -288,14 +297,14 @@ suite('FocusableTreeTraverser', function () { const node = this.testFocusableNestedTree4Node1; this.testFocusableTree2Node1 .getFocusableElement() - .classList.add('blocklyPassiveFocus'); - node.getFocusableElement().classList.add('blocklyPassiveFocus'); + .classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + node.getFocusableElement().classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); const finding = FocusableTreeTraverser.findFocusedNode( this.testFocusableTree2, ); - assert.equal(finding, this.testFocusableTree2Node1); + assert.strictEqual(finding, this.testFocusableTree2Node1); }); }); @@ -310,7 +319,7 @@ suite('FocusableTreeTraverser', function () { tree, ); - assert.equal(finding, rootNode); + assert.strictEqual(finding, rootNode); }); test('for element for different tree root returns null', function () { @@ -347,7 +356,7 @@ suite('FocusableTreeTraverser', function () { tree, ); - assert.equal(finding, this.testFocusableTree1Node1); + assert.strictEqual(finding, this.testFocusableTree1Node1); }); test('for non-node element in tree returns root', function () { @@ -362,7 +371,7 @@ suite('FocusableTreeTraverser', function () { ); // An unregistered element should map to the closest node. - assert.equal(finding, this.testFocusableTree1Node2); + assert.strictEqual(finding, this.testFocusableTree1Node2); }); test('for nested node element in tree returns node', function () { @@ -375,7 +384,7 @@ suite('FocusableTreeTraverser', function () { ); // The nested node should be returned. - assert.equal(finding, this.testFocusableTree1Node1Child1); + assert.strictEqual(finding, this.testFocusableTree1Node1Child1); }); test('for nested node element in tree returns node', function () { @@ -390,7 +399,7 @@ suite('FocusableTreeTraverser', function () { ); // An unregistered element should map to the closest node. - assert.equal(finding, this.testFocusableTree1Node1Child1); + assert.strictEqual(finding, this.testFocusableTree1Node1Child1); }); test('for nested node element in tree returns node', function () { @@ -405,7 +414,7 @@ suite('FocusableTreeTraverser', function () { ); // An unregistered element should map to the closest node (or root). - assert.equal(finding, tree.getRootFocusableNode()); + assert.strictEqual(finding, tree.getRootFocusableNode()); }); test('for nested tree root returns nested tree root', function () { @@ -418,7 +427,7 @@ suite('FocusableTreeTraverser', function () { tree, ); - assert.equal(finding, rootNode); + assert.strictEqual(finding, rootNode); }); test('for nested tree node returns nested tree node', function () { @@ -431,7 +440,7 @@ suite('FocusableTreeTraverser', function () { ); // The node of the nested tree should be returned. - assert.equal(finding, this.testFocusableNestedTree4Node1); + assert.strictEqual(finding, this.testFocusableNestedTree4Node1); }); test('for nested element in nested tree node returns nearest nested node', function () { @@ -446,7 +455,7 @@ suite('FocusableTreeTraverser', function () { ); // An unregistered element should map to the closest node. - assert.equal(finding, this.testFocusableNestedTree4Node1); + assert.strictEqual(finding, this.testFocusableNestedTree4Node1); }); test('for nested tree node under root with different tree base returns null', function () { From 720e8dab2b2786887e2d0dbabb8a7e64d4a68d64 Mon Sep 17 00:00:00 2001 From: Ben Henning Date: Thu, 3 Apr 2025 22:55:35 +0000 Subject: [PATCH 6/7] chore: part 2 of addressing reviewer comments. --- core/focus_manager.ts | 35 ++++++-- core/interfaces/i_focusable_tree.ts | 32 ++----- core/utils/focusable_tree_traverser.ts | 39 ++++++--- tests/mocha/focus_manager_test.js | 89 ++++++-------------- tests/mocha/focusable_tree_traverser_test.js | 8 -- 5 files changed, 89 insertions(+), 114 deletions(-) diff --git a/core/focus_manager.ts b/core/focus_manager.ts index f0cc32b74..228f659a8 100644 --- a/core/focus_manager.ts +++ b/core/focus_manager.ts @@ -6,6 +6,7 @@ import type {IFocusableNode} from './interfaces/i_focusable_node.js'; import type {IFocusableTree} from './interfaces/i_focusable_tree.js'; +import {FocusableTreeTraverser} from './utils/focusable_tree_traverser.js'; import * as dom from './utils/dom.js'; /** @@ -30,7 +31,29 @@ export type ReturnEphemeralFocus = () => void; * focusNode(). */ export class FocusManager { + /** + * The CSS class assigned to IFocusableNode elements that presently have + * active DOM and Blockly focus. + * + * This should never be used directly. Instead, rely on FocusManager to ensure + * nodes have active focus (either automatically through DOM focus or manually + * through the various focus* methods provided by this class). + * + * It's recommended to not query using this class name, either. Instead, use + * FocusableTreeTraverser or IFocusableTree's methods to find a specific node. + */ static readonly ACTIVE_FOCUS_NODE_CSS_CLASS_NAME = 'blocklyActiveFocus'; + + /** + * The CSS class assigned to IFocusableNode elements that presently have + * passive focus (that is, they were the most recent node in their relative + * tree to have active focus--see ACTIVE_FOCUS_NODE_CSS_CLASS_NAME--and will + * receive active focus again if their surrounding tree is requested to become + * focused, i.e. using focusTree below). + * + * See ACTIVE_FOCUS_NODE_CSS_CLASS_NAME for caveats and limitations around + * using this constant directly (generally it never should need to be used). + */ static readonly PASSIVE_FOCUS_NODE_CSS_CLASS_NAME = 'blocklyPassiveFocus'; focusedNode: IFocusableNode | null = null; @@ -57,7 +80,8 @@ export class FocusManager { // updated. Per the contract of findFocusableNodeFor only one tree // should claim the element. for (const tree of this.registeredTrees) { - newNode = tree.findFocusableNodeFor(activeElement); + newNode = FocusableTreeTraverser.findFocusableNodeFor( + activeElement, tree); if (newNode) break; } } @@ -113,7 +137,7 @@ export class FocusManager { const treeIndex = this.registeredTrees.findIndex((tree) => tree === tree); this.registeredTrees.splice(treeIndex, 1); - const focusedNode = tree.getFocusedNode(); + const focusedNode = FocusableTreeTraverser.findFocusedNode(tree); const root = tree.getRootFocusableNode(); if (focusedNode) this.removeHighlight(focusedNode); if (this.focusedNode === focusedNode || this.focusedNode === root) { @@ -169,9 +193,8 @@ export class FocusManager { if (!this.isRegistered(focusableTree)) { throw Error(`Attempted to focus unregistered tree: ${focusableTree}.`); } - this.focusNode( - focusableTree.getFocusedNode() ?? focusableTree.getRootFocusableNode(), - ); + const currNode = FocusableTreeTraverser.findFocusedNode(focusableTree); + this.focusNode(currNode ?? focusableTree.getRootFocusableNode()); } /** @@ -193,7 +216,7 @@ export class FocusManager { this.setNodeToPassive(prevNode); } // If there's a focused node in the new node's tree, ensure it's reset. - const prevNodeNextTree = nextTree.getFocusedNode(); + const prevNodeNextTree = FocusableTreeTraverser.findFocusedNode(nextTree); const nextTreeRoot = nextTree.getRootFocusableNode(); if (prevNodeNextTree) { this.removeHighlight(prevNodeNextTree); diff --git a/core/interfaces/i_focusable_tree.ts b/core/interfaces/i_focusable_tree.ts index 9cedba732..bc0c38849 100644 --- a/core/interfaces/i_focusable_tree.ts +++ b/core/interfaces/i_focusable_tree.ts @@ -20,17 +20,14 @@ import type {IFocusableNode} from './i_focusable_node.js'; * page at any given time). The idea of passive focus is to provide context to * users on where their focus will be restored upon navigating back to a * previously focused tree. + * + * Note that if the tree's current focused node (passive or active) is needed, + * FocusableTreeTraverser.findFocusedNode can be used. + * + * Note that if specific nodes are needed to be retrieved for this tree, either + * use lookUpFocusableNode or FocusableTreeTraverser.findFocusableNodeFor. */ export interface IFocusableTree { - /** - * Returns the current node with focus in this tree, or null if none (or if - * the root has focus). - * - * Note that this will never return a node from a nested sub-tree as that tree - * should specifically be called in order to retrieve its focused node. - */ - getFocusedNode(): IFocusableNode | null; - /** * Returns the top-level focusable node of the tree. * @@ -61,21 +58,4 @@ export interface IFocusableTree { * @param id The ID of the node's focusable HTMLElement or SVGElement. */ lookUpFocusableNode(id: string): IFocusableNode | null; - - /** - * Returns the IFocusableNode corresponding to the select element, or null if - * the element does not have such a node. - * - * The provided element must have a non-null ID that conforms to the contract - * mentioned in IFocusableNode. - * - * This function may match against the root node of the tree. It will also map - * against the nearest node to the provided element if the element does not - * have an exact matching corresponding node. This function filters out - * matches against nested trees, so long as they are represented in the return - * value of getNestedTrees. - */ - findFocusableNodeFor( - element: HTMLElement | SVGElement, - ): IFocusableNode | null; } diff --git a/core/utils/focusable_tree_traverser.ts b/core/utils/focusable_tree_traverser.ts index 8061e981b..6ea95b0b0 100644 --- a/core/utils/focusable_tree_traverser.ts +++ b/core/utils/focusable_tree_traverser.ts @@ -4,7 +4,6 @@ * SPDX-License-Identifier: Apache-2.0 */ -import {FocusManager} from '../focus_manager.js'; import type {IFocusableNode} from '../interfaces/i_focusable_node.js'; import type {IFocusableTree} from '../interfaces/i_focusable_tree.js'; import * as dom from '../utils/dom.js'; @@ -14,24 +13,31 @@ import * as dom from '../utils/dom.js'; * tree traversals. */ export class FocusableTreeTraverser { - static readonly ACTIVE_FOCUS_NODE_CSS_SELECTOR = `.${FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME}`; - static readonly PASSIVE_FOCUS_NODE_CSS_SELECTOR = `.${FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME}`; + private static readonly ACTIVE_CLASS_NAME = 'blocklyActiveFocus'; + private static readonly PASSIVE_CSS_CLASS_NAME = 'blocklyPassiveFocus'; + private static readonly ACTIVE_FOCUS_NODE_CSS_SELECTOR = ( + `.${FocusableTreeTraverser.ACTIVE_CLASS_NAME}`); + private static readonly PASSIVE_FOCUS_NODE_CSS_SELECTOR = ( + `.${FocusableTreeTraverser.PASSIVE_CSS_CLASS_NAME}`); /** - * Returns the current IFocusableNode that either has the CSS class - * 'blocklyActiveFocus' or 'blocklyPassiveFocus', only considering HTML and - * SVG elements. + * Returns the current IFocusableNode that is styled (and thus represented) as + * having either passive or active focus, only considering HTML and SVG + * elements. * * This can match against the tree's root. * + * Note that this will never return a node from a nested sub-tree as that tree + * should specifically be used to retrieve its focused node. + * * @param tree The IFocusableTree in which to search for a focused node. * @returns The IFocusableNode currently with focus, or null if none. */ static findFocusedNode(tree: IFocusableTree): IFocusableNode | null { const root = tree.getRootFocusableNode().getFocusableElement(); if ( - dom.hasClass(root, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME) || - dom.hasClass(root, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME) + dom.hasClass(root, FocusableTreeTraverser.ACTIVE_CLASS_NAME) || + dom.hasClass(root, FocusableTreeTraverser.PASSIVE_CSS_CLASS_NAME) ) { // The root has focus. return tree.getRootFocusableNode(); @@ -39,7 +45,8 @@ export class FocusableTreeTraverser { const activeEl = root.querySelector(this.ACTIVE_FOCUS_NODE_CSS_SELECTOR); if (activeEl instanceof HTMLElement || activeEl instanceof SVGElement) { - const active = tree.findFocusableNodeFor(activeEl); + const active = FocusableTreeTraverser.findFocusableNodeFor( + activeEl, tree); if (active) return active; } @@ -47,7 +54,8 @@ export class FocusableTreeTraverser { // subtrees). const passiveEl = root.querySelector(this.PASSIVE_FOCUS_NODE_CSS_SELECTOR); if (passiveEl instanceof HTMLElement || passiveEl instanceof SVGElement) { - const passive = tree.findFocusableNodeFor(passiveEl); + const passive = FocusableTreeTraverser.findFocusableNodeFor( + passiveEl, tree); if (passive) return passive; } @@ -59,10 +67,17 @@ export class FocusableTreeTraverser { * element iff it's the root element or a descendent of the root element of * the specified IFocusableTree. * + * If the element exists within the specified tree's DOM structure but does + * not directly correspond to a node, the nearest parent node (or the tree's + * root) will be returned to represent the provided element. + * * If the tree contains another nested IFocusableTree, the nested tree may be * traversed but its nodes will never be returned here per the contract of * IFocusableTree.lookUpFocusableNode. * + * The provided element must have a non-null ID that conforms to the contract + * mentioned in IFocusableNode. + * * @param element The HTML or SVG element being sought. * @param tree The tree under which the provided element may be a descendant. * @returns The matching IFocusableNode, or null if there is no match. @@ -74,7 +89,9 @@ export class FocusableTreeTraverser { // First, match against subtrees. const subTreeMatches = tree .getNestedTrees() - .map((tree) => tree.findFocusableNodeFor(element)); + .map((tree) => { + return FocusableTreeTraverser.findFocusableNodeFor(element, tree); + }); if (subTreeMatches.findIndex((match) => !!match) !== -1) { // At least one subtree has a match for the element so it cannot be part // of the outer tree. diff --git a/tests/mocha/focus_manager_test.js b/tests/mocha/focus_manager_test.js index fa8f12083..f61e9d371 100644 --- a/tests/mocha/focus_manager_test.js +++ b/tests/mocha/focus_manager_test.js @@ -8,7 +8,6 @@ import { FocusManager, getFocusManager, } from '../../build/src/core/focus_manager.js'; -import {FocusableTreeTraverser} from '../../build/src/core/utils/focusable_tree_traverser.js'; import {assert} from '../../node_modules/chai/chai.js'; import { sharedTestSetup, @@ -43,10 +42,6 @@ class FocusableTreeImpl { return node; } - getFocusedNode() { - return FocusableTreeTraverser.findFocusedNode(this); - } - getRootFocusableNode() { return this.rootNode; } @@ -58,13 +53,14 @@ class FocusableTreeImpl { lookUpFocusableNode(id) { return this.idToNodeMap[id]; } - - findFocusableNodeFor(element) { - return FocusableTreeTraverser.findFocusableNodeFor(element, this); - } } suite('FocusManager', function () { + const ACTIVE_FOCUS_NODE_CSS_SELECTOR = ( + `.${FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME}`); + const PASSIVE_FOCUS_NODE_CSS_SELECTOR = ( + `.${FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME}`); + setup(function () { sharedTestSetup.call(this); @@ -160,35 +156,15 @@ suite('FocusManager', function () { const eventListener = this.globalDocumentEventListener; document.removeEventListener(eventType, eventListener); - const removeFocusIndicators = function (element) { - element.classList.remove(FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); - }; - // Ensure all node CSS styles are reset so that state isn't leaked between tests. - removeFocusIndicators(document.getElementById('testFocusableTree1')); - removeFocusIndicators(document.getElementById('testFocusableTree1.node1')); - removeFocusIndicators( - document.getElementById('testFocusableTree1.node1.child1'), - ); - removeFocusIndicators(document.getElementById('testFocusableTree1.node2')); - removeFocusIndicators(document.getElementById('testFocusableTree2')); - removeFocusIndicators(document.getElementById('testFocusableTree2.node1')); - removeFocusIndicators(document.getElementById('testFocusableNestedTree4')); - removeFocusIndicators( - document.getElementById('testFocusableNestedTree4.node1'), - ); - removeFocusIndicators(document.getElementById('testFocusableGroup1')); - removeFocusIndicators(document.getElementById('testFocusableGroup1.node1')); - removeFocusIndicators( - document.getElementById('testFocusableGroup1.node1.child1'), - ); - removeFocusIndicators(document.getElementById('testFocusableGroup1.node2')); - removeFocusIndicators(document.getElementById('testFocusableGroup2')); - removeFocusIndicators(document.getElementById('testFocusableGroup2.node1')); - removeFocusIndicators(document.getElementById('testFocusableNestedGroup4')); - removeFocusIndicators( - document.getElementById('testFocusableNestedGroup4.node1'), - ); + const activeElems = document.querySelectorAll(ACTIVE_FOCUS_NODE_CSS_SELECTOR); + const passiveElems = document.querySelectorAll(PASSIVE_FOCUS_NODE_CSS_SELECTOR); + for (const elem of activeElems) { + elem.classList.remove(FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + } + for (const elem of passiveElems) { + elem.classList.remove(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + } // Reset the current active element. document.body.focus(); @@ -4353,12 +4329,10 @@ suite('FocusManager', function () { // Taking focus without an existing node having focus should change no focus indicators. const activeElems = Array.from( - document.querySelectorAll( - FocusableTreeTraverser.ACTIVE_FOCUS_NODE_CSS_SELECTOR), + document.querySelectorAll(ACTIVE_FOCUS_NODE_CSS_SELECTOR), ); const passiveElems = Array.from( - document.querySelectorAll( - FocusableTreeTraverser.PASSIVE_FOCUS_NODE_CSS_SELECTOR), + document.querySelectorAll(PASSIVE_FOCUS_NODE_CSS_SELECTOR), ); assert.isEmpty(activeElems); assert.isEmpty(passiveElems); @@ -4376,12 +4350,10 @@ suite('FocusManager', function () { // Taking focus without an existing node having focus should change no focus indicators. const activeElems = Array.from( - document.querySelectorAll( - FocusableTreeTraverser.ACTIVE_FOCUS_NODE_CSS_SELECTOR), + document.querySelectorAll(ACTIVE_FOCUS_NODE_CSS_SELECTOR), ); const passiveElems = Array.from( - document.querySelectorAll( - FocusableTreeTraverser.PASSIVE_FOCUS_NODE_CSS_SELECTOR), + document.querySelectorAll(PASSIVE_FOCUS_NODE_CSS_SELECTOR), ); assert.isEmpty(activeElems); assert.strictEqual(passiveElems.length, 1); @@ -4450,8 +4422,7 @@ suite('FocusManager', function () { this.testFocusableGroup2, ); const activeElems = Array.from( - document.querySelectorAll( - FocusableTreeTraverser.ACTIVE_FOCUS_NODE_CSS_SELECTOR), + document.querySelectorAll(ACTIVE_FOCUS_NODE_CSS_SELECTOR), ); assert.isEmpty(activeElems); }); @@ -4472,8 +4443,7 @@ suite('FocusManager', function () { this.testFocusableGroup2Node1, ); const activeElems = Array.from( - document.querySelectorAll( - FocusableTreeTraverser.ACTIVE_FOCUS_NODE_CSS_SELECTOR), + document.querySelectorAll(ACTIVE_FOCUS_NODE_CSS_SELECTOR), ); assert.isEmpty(activeElems); }); @@ -4497,8 +4467,7 @@ suite('FocusManager', function () { this.testFocusableGroup2Node1, ); const activeElems = Array.from( - document.querySelectorAll( - FocusableTreeTraverser.ACTIVE_FOCUS_NODE_CSS_SELECTOR), + document.querySelectorAll(ACTIVE_FOCUS_NODE_CSS_SELECTOR), ); assert.isEmpty(activeElems); }); @@ -4516,12 +4485,10 @@ suite('FocusManager', function () { // Finishing ephemeral focus without a previously focused node should not change indicators. const activeElems = Array.from( - document.querySelectorAll( - FocusableTreeTraverser.ACTIVE_FOCUS_NODE_CSS_SELECTOR), + document.querySelectorAll(ACTIVE_FOCUS_NODE_CSS_SELECTOR), ); const passiveElems = Array.from( - document.querySelectorAll( - FocusableTreeTraverser.PASSIVE_FOCUS_NODE_CSS_SELECTOR), + document.querySelectorAll(PASSIVE_FOCUS_NODE_CSS_SELECTOR), ); assert.isEmpty(activeElems); assert.isEmpty(passiveElems); @@ -4577,8 +4544,7 @@ suite('FocusManager', function () { // The original focused node should be restored. const nodeElem = this.testFocusableTree2Node1.getFocusableElement(); const activeElems = Array.from( - document.querySelectorAll( - FocusableTreeTraverser.ACTIVE_FOCUS_NODE_CSS_SELECTOR), + document.querySelectorAll(ACTIVE_FOCUS_NODE_CSS_SELECTOR), ); assert.strictEqual( this.focusManager.getFocusedNode(), @@ -4608,8 +4574,7 @@ suite('FocusManager', function () { .getRootFocusableNode() .getFocusableElement(); const activeElems = Array.from( - document.querySelectorAll( - FocusableTreeTraverser.ACTIVE_FOCUS_NODE_CSS_SELECTOR), + document.querySelectorAll(ACTIVE_FOCUS_NODE_CSS_SELECTOR), ); assert.strictEqual( this.focusManager.getFocusedTree(), @@ -4637,8 +4602,7 @@ suite('FocusManager', function () { // end of the ephemeral flow. const nodeElem = this.testFocusableGroup2Node1.getFocusableElement(); const activeElems = Array.from( - document.querySelectorAll( - FocusableTreeTraverser.ACTIVE_FOCUS_NODE_CSS_SELECTOR), + document.querySelectorAll(ACTIVE_FOCUS_NODE_CSS_SELECTOR), ); assert.strictEqual( this.focusManager.getFocusedNode(), @@ -4666,8 +4630,7 @@ suite('FocusManager', function () { // end of the ephemeral flow. const nodeElem = this.testFocusableGroup2Node1.getFocusableElement(); const activeElems = Array.from( - document.querySelectorAll( - FocusableTreeTraverser.ACTIVE_FOCUS_NODE_CSS_SELECTOR), + document.querySelectorAll(ACTIVE_FOCUS_NODE_CSS_SELECTOR), ); assert.strictEqual( this.focusManager.getFocusedNode(), diff --git a/tests/mocha/focusable_tree_traverser_test.js b/tests/mocha/focusable_tree_traverser_test.js index 00b2c5390..59eae38c1 100644 --- a/tests/mocha/focusable_tree_traverser_test.js +++ b/tests/mocha/focusable_tree_traverser_test.js @@ -40,10 +40,6 @@ class FocusableTreeImpl { return node; } - getFocusedNode() { - throw Error('Unused in test suite.'); - } - getRootFocusableNode() { return this.rootNode; } @@ -55,10 +51,6 @@ class FocusableTreeImpl { lookUpFocusableNode(id) { return this.idToNodeMap[id]; } - - findFocusableNodeFor(element) { - return FocusableTreeTraverser.findFocusableNodeFor(element, this); - } } suite('FocusableTreeTraverser', function () { From c5404af82e3542bb806a287a318c55dde4fd6bb1 Mon Sep 17 00:00:00 2001 From: Ben Henning Date: Thu, 3 Apr 2025 23:04:06 +0000 Subject: [PATCH 7/7] chore: lint fixes. --- core/blockly.ts | 8 +- core/focus_manager.ts | 6 +- core/utils/focusable_tree_traverser.ts | 22 +- tests/mocha/focus_manager_test.js | 768 +++++++++++++++---- tests/mocha/focusable_tree_traverser_test.js | 61 +- 5 files changed, 677 insertions(+), 188 deletions(-) diff --git a/core/blockly.ts b/core/blockly.ts index a98f0f695..1a06014f7 100644 --- a/core/blockly.ts +++ b/core/blockly.ts @@ -106,7 +106,11 @@ import {FlyoutItem} from './flyout_item.js'; import {FlyoutMetricsManager} from './flyout_metrics_manager.js'; import {FlyoutSeparator} from './flyout_separator.js'; import {VerticalFlyout} from './flyout_vertical.js'; -import {FocusManager, getFocusManager, ReturnEphemeralFocus} from './focus_manager.js'; +import { + FocusManager, + ReturnEphemeralFocus, + getFocusManager, +} from './focus_manager.js'; import {CodeGenerator} from './generator.js'; import {Gesture} from './gesture.js'; import {Grid} from './grid.js'; @@ -523,7 +527,6 @@ export { FlyoutMetricsManager, FlyoutSeparator, FocusManager, - ReturnEphemeralFocus, CodeGenerator as Generator, Gesture, Grid, @@ -588,6 +591,7 @@ export { Names, Options, RenderedConnection, + ReturnEphemeralFocus, Scrollbar, ScrollbarPair, SeparatorFlyoutInflater, diff --git a/core/focus_manager.ts b/core/focus_manager.ts index 228f659a8..c1fc295b9 100644 --- a/core/focus_manager.ts +++ b/core/focus_manager.ts @@ -6,8 +6,8 @@ import type {IFocusableNode} from './interfaces/i_focusable_node.js'; import type {IFocusableTree} from './interfaces/i_focusable_tree.js'; -import {FocusableTreeTraverser} from './utils/focusable_tree_traverser.js'; import * as dom from './utils/dom.js'; +import {FocusableTreeTraverser} from './utils/focusable_tree_traverser.js'; /** * Type declaration for returning focus to FocusManager upon completing an @@ -81,7 +81,9 @@ export class FocusManager { // should claim the element. for (const tree of this.registeredTrees) { newNode = FocusableTreeTraverser.findFocusableNodeFor( - activeElement, tree); + activeElement, + tree, + ); if (newNode) break; } } diff --git a/core/utils/focusable_tree_traverser.ts b/core/utils/focusable_tree_traverser.ts index 6ea95b0b0..94603edd0 100644 --- a/core/utils/focusable_tree_traverser.ts +++ b/core/utils/focusable_tree_traverser.ts @@ -15,10 +15,8 @@ import * as dom from '../utils/dom.js'; export class FocusableTreeTraverser { private static readonly ACTIVE_CLASS_NAME = 'blocklyActiveFocus'; private static readonly PASSIVE_CSS_CLASS_NAME = 'blocklyPassiveFocus'; - private static readonly ACTIVE_FOCUS_NODE_CSS_SELECTOR = ( - `.${FocusableTreeTraverser.ACTIVE_CLASS_NAME}`); - private static readonly PASSIVE_FOCUS_NODE_CSS_SELECTOR = ( - `.${FocusableTreeTraverser.PASSIVE_CSS_CLASS_NAME}`); + private static readonly ACTIVE_FOCUS_NODE_CSS_SELECTOR = `.${FocusableTreeTraverser.ACTIVE_CLASS_NAME}`; + private static readonly PASSIVE_FOCUS_NODE_CSS_SELECTOR = `.${FocusableTreeTraverser.PASSIVE_CSS_CLASS_NAME}`; /** * Returns the current IFocusableNode that is styled (and thus represented) as @@ -46,7 +44,9 @@ export class FocusableTreeTraverser { const activeEl = root.querySelector(this.ACTIVE_FOCUS_NODE_CSS_SELECTOR); if (activeEl instanceof HTMLElement || activeEl instanceof SVGElement) { const active = FocusableTreeTraverser.findFocusableNodeFor( - activeEl, tree); + activeEl, + tree, + ); if (active) return active; } @@ -55,7 +55,9 @@ export class FocusableTreeTraverser { const passiveEl = root.querySelector(this.PASSIVE_FOCUS_NODE_CSS_SELECTOR); if (passiveEl instanceof HTMLElement || passiveEl instanceof SVGElement) { const passive = FocusableTreeTraverser.findFocusableNodeFor( - passiveEl, tree); + passiveEl, + tree, + ); if (passive) return passive; } @@ -87,11 +89,9 @@ export class FocusableTreeTraverser { tree: IFocusableTree, ): IFocusableNode | null { // First, match against subtrees. - const subTreeMatches = tree - .getNestedTrees() - .map((tree) => { - return FocusableTreeTraverser.findFocusableNodeFor(element, tree); - }); + const subTreeMatches = tree.getNestedTrees().map((tree) => { + return FocusableTreeTraverser.findFocusableNodeFor(element, tree); + }); if (subTreeMatches.findIndex((match) => !!match) !== -1) { // At least one subtree has a match for the element so it cannot be part // of the outer tree. diff --git a/tests/mocha/focus_manager_test.js b/tests/mocha/focus_manager_test.js index f61e9d371..4a3f6b3ad 100644 --- a/tests/mocha/focus_manager_test.js +++ b/tests/mocha/focus_manager_test.js @@ -56,10 +56,8 @@ class FocusableTreeImpl { } suite('FocusManager', function () { - const ACTIVE_FOCUS_NODE_CSS_SELECTOR = ( - `.${FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME}`); - const PASSIVE_FOCUS_NODE_CSS_SELECTOR = ( - `.${FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME}`); + const ACTIVE_FOCUS_NODE_CSS_SELECTOR = `.${FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME}`; + const PASSIVE_FOCUS_NODE_CSS_SELECTOR = `.${FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME}`; setup(function () { sharedTestSetup.call(this); @@ -157,8 +155,12 @@ suite('FocusManager', function () { document.removeEventListener(eventType, eventListener); // Ensure all node CSS styles are reset so that state isn't leaked between tests. - const activeElems = document.querySelectorAll(ACTIVE_FOCUS_NODE_CSS_SELECTOR); - const passiveElems = document.querySelectorAll(PASSIVE_FOCUS_NODE_CSS_SELECTOR); + const activeElems = document.querySelectorAll( + ACTIVE_FOCUS_NODE_CSS_SELECTOR, + ); + const passiveElems = document.querySelectorAll( + PASSIVE_FOCUS_NODE_CSS_SELECTOR, + ); for (const elem of activeElems) { elem.classList.remove(FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); } @@ -170,12 +172,18 @@ suite('FocusManager', function () { document.body.focus(); }); - assert.includesClass = function(classList, className) { - assert.isTrue(classList.contains(className), 'Expected class list to include: ' + className); + assert.includesClass = function (classList, className) { + assert.isTrue( + classList.contains(className), + 'Expected class list to include: ' + className, + ); }; - assert.notIncludesClass = function(classList, className) { - assert.isFalse(classList.contains(className), 'Expected class list to not include: ' + className); + assert.notIncludesClass = function (classList, className) { + assert.isFalse( + classList.contains(className), + 'Expected class list to not include: ' + className, + ); }; /* Basic lifecycle tests. */ @@ -810,7 +818,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableTree1 .getRootFocusableNode() .getFocusableElement(); - assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -826,7 +837,10 @@ suite('FocusManager', function () { // The original node retains active focus since the tree already holds focus (per // focusTree's contract). const nodeElem = this.testFocusableTree1Node1.getFocusableElement(); - assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -843,7 +857,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableTree2 .getRootFocusableNode() .getFocusableElement(); - assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -860,7 +877,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableTree2 .getRootFocusableNode() .getFocusableElement(); - assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -877,7 +897,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableTree1 .getRootFocusableNode() .getFocusableElement(); - assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -890,7 +913,10 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableTree1Node1); const nodeElem = this.testFocusableTree1Node1.getFocusableElement(); - assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -921,7 +947,10 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableTree1Node2); const newNodeElem = this.testFocusableTree1Node2.getFocusableElement(); - assert.includesClass(newNodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + newNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( newNodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -954,7 +983,10 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableTree2Node1); const newNodeElem = this.testFocusableTree2Node1.getFocusableElement(); - assert.includesClass(newNodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + newNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( newNodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -973,7 +1005,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableTree2 .getRootFocusableNode() .getFocusableElement(); - assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -990,7 +1025,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableTree1 .getRootFocusableNode() .getFocusableElement(); - assert.notIncludesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -1005,7 +1043,10 @@ suite('FocusManager', function () { // Since the tree was unregistered it no longer has focus indicators. const nodeElem = this.testFocusableTree1Node1.getFocusableElement(); - assert.notIncludesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -1088,8 +1129,14 @@ suite('FocusManager', function () { // passive now that the new node is active. const node1 = this.testFocusableTree1Node1.getFocusableElement(); const node2 = this.testFocusableTree1Node2.getFocusableElement(); - assert.notIncludesClass(node1.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); - assert.notIncludesClass(node2.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + node1.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); + assert.notIncludesClass( + node2.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }); test('registered tree focusTree()ed other tree node passively focused tree node now has active property', function () { @@ -1106,12 +1153,18 @@ suite('FocusManager', function () { const rootElem = this.testFocusableTree1 .getRootFocusableNode() .getFocusableElement(); - assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notIncludesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -1130,12 +1183,18 @@ suite('FocusManager', function () { const rootElem = this.testFocusableTree1 .getRootFocusableNode() .getFocusableElement(); - assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notIncludesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -1151,7 +1210,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableNestedTree4 .getRootFocusableNode() .getFocusableElement(); - assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -1166,7 +1228,10 @@ suite('FocusManager', function () { const nodeElem = this.testFocusableNestedTree4Node1.getFocusableElement(); - assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -1645,7 +1710,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableTree1 .getRootFocusableNode() .getFocusableElement(); - assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -1658,7 +1726,10 @@ suite('FocusManager', function () { document.getElementById('testFocusableTree1.node1').focus(); const nodeElem = this.testFocusableTree1Node1.getFocusableElement(); - assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -1689,7 +1760,10 @@ suite('FocusManager', function () { document.getElementById('testFocusableTree1.node2').focus(); const newNodeElem = this.testFocusableTree1Node2.getFocusableElement(); - assert.includesClass(newNodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + newNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( newNodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -1722,7 +1796,10 @@ suite('FocusManager', function () { document.getElementById('testFocusableTree2.node1').focus(); const newNodeElem = this.testFocusableTree2Node1.getFocusableElement(); - assert.includesClass(newNodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + newNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( newNodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -1739,7 +1816,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableTree2 .getRootFocusableNode() .getFocusableElement(); - assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -1755,7 +1835,10 @@ suite('FocusManager', function () { // The nearest node of the unregistered child element should be actively focused. const nodeElem = this.testFocusableTree1Node2.getFocusableElement(); - assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -1770,7 +1853,10 @@ suite('FocusManager', function () { const rootElem = document.getElementById( 'testUnregisteredFocusableTree3', ); - assert.notIncludesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -1785,7 +1871,10 @@ suite('FocusManager', function () { const nodeElem = document.getElementById( 'testUnregisteredFocusableTree3.node1', ); - assert.notIncludesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -1804,7 +1893,10 @@ suite('FocusManager', function () { const attemptedNewNodeElem = document.getElementById( 'testUnfocusableElement', ); - assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -1829,7 +1921,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableTree1 .getRootFocusableNode() .getFocusableElement(); - assert.notIncludesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -1844,7 +1939,10 @@ suite('FocusManager', function () { // Since the tree was unregistered it no longer has focus indicators. const nodeElem = this.testFocusableTree1Node1.getFocusableElement(); - assert.notIncludesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -1959,8 +2057,14 @@ suite('FocusManager', function () { // passive now that the new node is active. const node1 = this.testFocusableTree1Node1.getFocusableElement(); const node2 = this.testFocusableTree1Node2.getFocusableElement(); - assert.notIncludesClass(node1.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); - assert.notIncludesClass(node2.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + node1.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); + assert.notIncludesClass( + node2.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }); test('registered tree focus()ed other tree node passively focused tree root now has active property', function () { @@ -1977,12 +2081,18 @@ suite('FocusManager', function () { .getRootFocusableNode() .getFocusableElement(); const nodeElem = this.testFocusableTree1Node1.getFocusableElement(); - assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notIncludesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -2001,12 +2111,18 @@ suite('FocusManager', function () { const rootElem = this.testFocusableTree1 .getRootFocusableNode() .getFocusableElement(); - assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notIncludesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -2022,7 +2138,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableNestedTree4 .getRootFocusableNode() .getFocusableElement(); - assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -2037,7 +2156,10 @@ suite('FocusManager', function () { const nodeElem = this.testFocusableNestedTree4Node1.getFocusableElement(); - assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -2502,7 +2624,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableGroup1 .getRootFocusableNode() .getFocusableElement(); - assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -2518,7 +2643,10 @@ suite('FocusManager', function () { // The original node retains active focus since the tree already holds focus (per // focusTree's contract). const nodeElem = this.testFocusableGroup1Node1.getFocusableElement(); - assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -2535,7 +2663,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableGroup2 .getRootFocusableNode() .getFocusableElement(); - assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -2552,7 +2683,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableGroup2 .getRootFocusableNode() .getFocusableElement(); - assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -2569,7 +2703,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableGroup1 .getRootFocusableNode() .getFocusableElement(); - assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -2582,7 +2719,10 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableGroup1Node1); const nodeElem = this.testFocusableGroup1Node1.getFocusableElement(); - assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -2614,7 +2754,10 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableGroup1Node2); const newNodeElem = this.testFocusableGroup1Node2.getFocusableElement(); - assert.includesClass(newNodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + newNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( newNodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -2648,7 +2791,10 @@ suite('FocusManager', function () { this.focusManager.focusNode(this.testFocusableGroup2Node1); const newNodeElem = this.testFocusableGroup2Node1.getFocusableElement(); - assert.includesClass(newNodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + newNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( newNodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -2667,7 +2813,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableGroup2 .getRootFocusableNode() .getFocusableElement(); - assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -2684,7 +2833,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableGroup1 .getRootFocusableNode() .getFocusableElement(); - assert.notIncludesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -2699,7 +2851,10 @@ suite('FocusManager', function () { // Since the tree was unregistered it no longer has focus indicators. const nodeElem = this.testFocusableGroup1Node1.getFocusableElement(); - assert.notIncludesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -2782,8 +2937,14 @@ suite('FocusManager', function () { // passive now that the new node is active. const node1 = this.testFocusableGroup1Node1.getFocusableElement(); const node2 = this.testFocusableGroup1Node2.getFocusableElement(); - assert.notIncludesClass(node1.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); - assert.notIncludesClass(node2.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + node1.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); + assert.notIncludesClass( + node2.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }); test('registered tree focusTree()ed other tree node passively focused tree node now has active property', function () { @@ -2800,12 +2961,18 @@ suite('FocusManager', function () { const rootElem = this.testFocusableGroup1 .getRootFocusableNode() .getFocusableElement(); - assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notIncludesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -2824,12 +2991,18 @@ suite('FocusManager', function () { const rootElem = this.testFocusableGroup1 .getRootFocusableNode() .getFocusableElement(); - assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notIncludesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -2845,7 +3018,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableNestedGroup4 .getRootFocusableNode() .getFocusableElement(); - assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -2860,7 +3036,10 @@ suite('FocusManager', function () { const nodeElem = this.testFocusableNestedGroup4Node1.getFocusableElement(); - assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -3339,7 +3518,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableGroup1 .getRootFocusableNode() .getFocusableElement(); - assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -3352,7 +3534,10 @@ suite('FocusManager', function () { document.getElementById('testFocusableGroup1.node1').focus(); const nodeElem = this.testFocusableGroup1Node1.getFocusableElement(); - assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -3384,7 +3569,10 @@ suite('FocusManager', function () { document.getElementById('testFocusableGroup1.node2').focus(); const newNodeElem = this.testFocusableGroup1Node2.getFocusableElement(); - assert.includesClass(newNodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + newNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( newNodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -3418,7 +3606,10 @@ suite('FocusManager', function () { document.getElementById('testFocusableGroup2.node1').focus(); const newNodeElem = this.testFocusableGroup2Node1.getFocusableElement(); - assert.includesClass(newNodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + newNodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( newNodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -3435,7 +3626,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableGroup2 .getRootFocusableNode() .getFocusableElement(); - assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -3451,7 +3645,10 @@ suite('FocusManager', function () { // The nearest node of the unregistered child element should be actively focused. const nodeElem = this.testFocusableGroup1Node2.getFocusableElement(); - assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -3466,7 +3663,10 @@ suite('FocusManager', function () { const rootElem = document.getElementById( 'testUnregisteredFocusableGroup3', ); - assert.notIncludesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -3483,7 +3683,10 @@ suite('FocusManager', function () { const nodeElem = document.getElementById( 'testUnregisteredFocusableGroup3.node1', ); - assert.notIncludesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -3502,7 +3705,10 @@ suite('FocusManager', function () { const attemptedNewNodeElem = document.getElementById( 'testUnfocusableElement', ); - assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -3527,7 +3733,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableGroup1 .getRootFocusableNode() .getFocusableElement(); - assert.notIncludesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -3542,7 +3751,10 @@ suite('FocusManager', function () { // Since the tree was unregistered it no longer has focus indicators. const nodeElem = this.testFocusableGroup1Node1.getFocusableElement(); - assert.notIncludesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -3657,8 +3869,14 @@ suite('FocusManager', function () { // passive now that the new node is active. const node1 = this.testFocusableGroup1Node1.getFocusableElement(); const node2 = this.testFocusableGroup1Node2.getFocusableElement(); - assert.notIncludesClass(node1.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); - assert.notIncludesClass(node2.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + node1.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); + assert.notIncludesClass( + node2.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }); test('registered tree focus()ed other tree node passively focused tree root now has active property', function () { @@ -3675,12 +3893,18 @@ suite('FocusManager', function () { .getRootFocusableNode() .getFocusableElement(); const nodeElem = this.testFocusableGroup1Node1.getFocusableElement(); - assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notIncludesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -3699,12 +3923,18 @@ suite('FocusManager', function () { const rootElem = this.testFocusableGroup1 .getRootFocusableNode() .getFocusableElement(); - assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notIncludesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -3720,7 +3950,10 @@ suite('FocusManager', function () { const rootElem = this.testFocusableNestedGroup4 .getRootFocusableNode() .getFocusableElement(); - assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -3735,7 +3968,10 @@ suite('FocusManager', function () { const nodeElem = this.testFocusableNestedGroup4Node1.getFocusableElement(); - assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, @@ -3785,8 +4021,14 @@ suite('FocusManager', function () { const rootElem = rootNode.getFocusableElement(); assert.isNull(this.focusManager.getFocusedTree()); assert.isNull(this.focusManager.getFocusedNode()); - assert.includesClass(rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); - assert.notIncludesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); + assert.notIncludesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }); test('Defocusing actively focused HTML tree node switches to passive highlight', function () { @@ -3798,8 +4040,14 @@ suite('FocusManager', function () { const nodeElem = this.testFocusableTree2Node1.getFocusableElement(); assert.isNull(this.focusManager.getFocusedTree()); assert.isNull(this.focusManager.getFocusedNode()); - assert.includesClass(nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); - assert.notIncludesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }); test('Defocusing actively focused HTML subtree node switches to passive highlight', function () { @@ -3812,8 +4060,14 @@ suite('FocusManager', function () { const nodeElem = this.testFocusableNestedTree4Node1.getFocusableElement(); assert.isNull(this.focusManager.getFocusedTree()); assert.isNull(this.focusManager.getFocusedNode()); - assert.includesClass(nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); - assert.notIncludesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }); test('Refocusing actively focused root HTML tree restores to active highlight', function () { @@ -3825,10 +4079,19 @@ suite('FocusManager', function () { const rootNode = this.testFocusableTree2.getRootFocusableNode(); const rootElem = rootNode.getFocusableElement(); - assert.strictEqual(this.focusManager.getFocusedTree(), this.testFocusableTree2); + assert.strictEqual( + this.focusManager.getFocusedTree(), + this.testFocusableTree2, + ); assert.strictEqual(this.focusManager.getFocusedNode(), rootNode); - assert.notIncludesClass(rootElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); - assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + rootElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); + assert.includesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }); test('Refocusing actively focused HTML tree node restores to active highlight', function () { @@ -3839,13 +4102,22 @@ suite('FocusManager', function () { document.getElementById('testFocusableTree2.node1').focus(); const nodeElem = this.testFocusableTree2Node1.getFocusableElement(); - assert.strictEqual(this.focusManager.getFocusedTree(), this.testFocusableTree2); + assert.strictEqual( + this.focusManager.getFocusedTree(), + this.testFocusableTree2, + ); assert.strictEqual( this.focusManager.getFocusedNode(), this.testFocusableTree2Node1, ); - assert.notIncludesClass(nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); - assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); + assert.includesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }); test('Refocusing actively focused HTML subtree node restores to active highlight', function () { @@ -3865,8 +4137,14 @@ suite('FocusManager', function () { this.focusManager.getFocusedNode(), this.testFocusableNestedTree4Node1, ); - assert.notIncludesClass(nodeElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); - assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + nodeElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); + assert.includesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }); }); @@ -3892,13 +4170,22 @@ suite('FocusManager', function () { this.testFocusableGroup2, ); assert.strictEqual(document.activeElement, currElem); - assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + currElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( currElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); - assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + prevElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); + assert.includesClass( + prevElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }); test('HTML focusTree()ed then SVG focusNode()ed correctly updates getFocusedNode() and indicators', function () { @@ -3917,13 +4204,22 @@ suite('FocusManager', function () { this.testFocusableGroup2Node1, ); assert.strictEqual(document.activeElement, currElem); - assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + currElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( currElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); - assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + prevElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); + assert.includesClass( + prevElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }); test('HTML focusTree()ed then SVG DOM focus()ed correctly updates getFocusedNode() and indicators', function () { @@ -3942,13 +4238,22 @@ suite('FocusManager', function () { this.testFocusableGroup2Node1, ); assert.strictEqual(document.activeElement, currElem); - assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + currElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( currElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); - assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + prevElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); + assert.includesClass( + prevElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }); test('HTML focusNode()ed then SVG focusTree()ed correctly updates getFocusedTree() and indicators', function () { @@ -3967,13 +4272,22 @@ suite('FocusManager', function () { this.testFocusableGroup2, ); assert.strictEqual(document.activeElement, currElem); - assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + currElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( currElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); - assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + prevElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); + assert.includesClass( + prevElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }); test('HTML focusNode()ed then SVG focusNode()ed correctly updates getFocusedNode() and indicators', function () { @@ -3990,13 +4304,22 @@ suite('FocusManager', function () { this.testFocusableGroup2Node1, ); assert.strictEqual(document.activeElement, currElem); - assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + currElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( currElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); - assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + prevElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); + assert.includesClass( + prevElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }); test('HTML focusNode()ed then SVG DOM focus()ed correctly updates getFocusedNode() and indicators', function () { @@ -4013,13 +4336,22 @@ suite('FocusManager', function () { this.testFocusableGroup2Node1, ); assert.strictEqual(document.activeElement, currElem); - assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + currElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( currElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); - assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + prevElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); + assert.includesClass( + prevElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }); test('HTML DOM focus()ed then SVG focusTree()ed correctly updates getFocusedTree() and indicators', function () { @@ -4038,13 +4370,22 @@ suite('FocusManager', function () { this.testFocusableGroup2, ); assert.strictEqual(document.activeElement, currElem); - assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + currElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( currElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); - assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + prevElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); + assert.includesClass( + prevElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }); test('HTML DOM focus()ed then SVG focusNode()ed correctly updates getFocusedNode() and indicators', function () { @@ -4061,13 +4402,22 @@ suite('FocusManager', function () { this.testFocusableGroup2Node1, ); assert.strictEqual(document.activeElement, currElem); - assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + currElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( currElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); - assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + prevElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); + assert.includesClass( + prevElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }); test('HTML DOM focus()ed then SVG DOM focus()ed correctly updates getFocusedNode() and indicators', function () { @@ -4084,13 +4434,22 @@ suite('FocusManager', function () { this.testFocusableGroup2Node1, ); assert.strictEqual(document.activeElement, currElem); - assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + currElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( currElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); - assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + prevElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); + assert.includesClass( + prevElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }); }); suite('Focus SVG tree then HTML tree', function () { @@ -4112,13 +4471,22 @@ suite('FocusManager', function () { this.testFocusableTree2, ); assert.strictEqual(document.activeElement, currElem); - assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + currElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( currElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); - assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + prevElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); + assert.includesClass( + prevElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }); test('SVG focusTree()ed then HTML focusNode()ed correctly updates getFocusedNode() and indicators', function () { @@ -4137,13 +4505,22 @@ suite('FocusManager', function () { this.testFocusableTree2Node1, ); assert.strictEqual(document.activeElement, currElem); - assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + currElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( currElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); - assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + prevElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); + assert.includesClass( + prevElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }); test('SVG focusTree()ed then HTML DOM focus()ed correctly updates getFocusedNode() and indicators', function () { @@ -4162,13 +4539,22 @@ suite('FocusManager', function () { this.testFocusableTree2Node1, ); assert.strictEqual(document.activeElement, currElem); - assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + currElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( currElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); - assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + prevElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); + assert.includesClass( + prevElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }); test('SVG focusNode()ed then HTML focusTree()ed correctly updates getFocusedTree() and indicators', function () { @@ -4187,13 +4573,22 @@ suite('FocusManager', function () { this.testFocusableTree2, ); assert.strictEqual(document.activeElement, currElem); - assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + currElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( currElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); - assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + prevElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); + assert.includesClass( + prevElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }); test('SVG focusNode()ed then HTML focusNode()ed correctly updates getFocusedNode() and indicators', function () { @@ -4210,13 +4605,22 @@ suite('FocusManager', function () { this.testFocusableTree2Node1, ); assert.strictEqual(document.activeElement, currElem); - assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + currElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( currElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); - assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + prevElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); + assert.includesClass( + prevElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }); test('SVG focusNode()ed then HTML DOM focus()ed correctly updates getFocusedNode() and indicators', function () { @@ -4233,13 +4637,22 @@ suite('FocusManager', function () { this.testFocusableTree2Node1, ); assert.strictEqual(document.activeElement, currElem); - assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + currElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( currElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); - assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + prevElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); + assert.includesClass( + prevElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }); test('SVG DOM focus()ed then HTML focusTree()ed correctly updates getFocusedTree() and indicators', function () { @@ -4258,13 +4671,22 @@ suite('FocusManager', function () { this.testFocusableTree2, ); assert.strictEqual(document.activeElement, currElem); - assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + currElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( currElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); - assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + prevElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); + assert.includesClass( + prevElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }); test('SVG DOM focus()ed then HTML focusNode()ed correctly updates getFocusedNode() and indicators', function () { @@ -4281,13 +4703,22 @@ suite('FocusManager', function () { this.testFocusableTree2Node1, ); assert.strictEqual(document.activeElement, currElem); - assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + currElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( currElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); - assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + prevElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); + assert.includesClass( + prevElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }); test('SVG DOM focus()ed then HTML DOM focus()ed correctly updates getFocusedNode() and indicators', function () { @@ -4304,13 +4735,22 @@ suite('FocusManager', function () { this.testFocusableTree2Node1, ); assert.strictEqual(document.activeElement, currElem); - assert.includesClass(currElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + currElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.notIncludesClass( currElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.notIncludesClass(prevElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); - assert.includesClass(prevElem.classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.notIncludesClass( + prevElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); + assert.includesClass( + prevElem.classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }); }); }); @@ -4551,7 +4991,10 @@ suite('FocusManager', function () { this.testFocusableTree2Node1, ); assert.strictEqual(activeElems.length, 1); - assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.strictEqual(document.activeElement, nodeElem); }); @@ -4581,7 +5024,10 @@ suite('FocusManager', function () { this.testFocusableGroup2, ); assert.strictEqual(activeElems.length, 1); - assert.includesClass(rootElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + rootElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.strictEqual(document.activeElement, rootElem); }); @@ -4609,7 +5055,10 @@ suite('FocusManager', function () { this.testFocusableGroup2Node1, ); assert.strictEqual(activeElems.length, 1); - assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.strictEqual(document.activeElement, nodeElem); }); @@ -4637,7 +5086,10 @@ suite('FocusManager', function () { this.testFocusableGroup2Node1, ); assert.strictEqual(activeElems.length, 1); - assert.includesClass(nodeElem.classList, FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + assert.includesClass( + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); assert.strictEqual(document.activeElement, nodeElem); }); }); diff --git a/tests/mocha/focusable_tree_traverser_test.js b/tests/mocha/focusable_tree_traverser_test.js index 59eae38c1..b6674573e 100644 --- a/tests/mocha/focusable_tree_traverser_test.js +++ b/tests/mocha/focusable_tree_traverser_test.js @@ -108,7 +108,10 @@ suite('FocusableTreeTraverser', function () { sharedTestTeardown.call(this); const removeFocusIndicators = function (element) { - element.classList.remove(FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + element.classList.remove( + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + ); }; // Ensure all node CSS styles are reset so that state isn't leaked between tests. @@ -142,7 +145,9 @@ suite('FocusableTreeTraverser', function () { test('for tree with root active highlight returns root node', function () { const tree = this.testFocusableTree1; const rootNode = tree.getRootFocusableNode(); - rootNode.getFocusableElement().classList.add(FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + rootNode + .getFocusableElement() + .classList.add(FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); const finding = FocusableTreeTraverser.findFocusedNode(tree); @@ -152,7 +157,9 @@ suite('FocusableTreeTraverser', function () { test('for tree with root passive highlight returns root node', function () { const tree = this.testFocusableTree1; const rootNode = tree.getRootFocusableNode(); - rootNode.getFocusableElement().classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + rootNode + .getFocusableElement() + .classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); const finding = FocusableTreeTraverser.findFocusedNode(tree); @@ -162,7 +169,9 @@ suite('FocusableTreeTraverser', function () { test('for tree with node active highlight returns node', function () { const tree = this.testFocusableTree1; const node = this.testFocusableTree1Node1; - node.getFocusableElement().classList.add(FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + node + .getFocusableElement() + .classList.add(FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); const finding = FocusableTreeTraverser.findFocusedNode(tree); @@ -172,7 +181,9 @@ suite('FocusableTreeTraverser', function () { test('for tree with node passive highlight returns node', function () { const tree = this.testFocusableTree1; const node = this.testFocusableTree1Node1; - node.getFocusableElement().classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + node + .getFocusableElement() + .classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); const finding = FocusableTreeTraverser.findFocusedNode(tree); @@ -182,7 +193,9 @@ suite('FocusableTreeTraverser', function () { test('for tree with nested node active highlight returns node', function () { const tree = this.testFocusableTree1; const node = this.testFocusableTree1Node1Child1; - node.getFocusableElement().classList.add(FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + node + .getFocusableElement() + .classList.add(FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); const finding = FocusableTreeTraverser.findFocusedNode(tree); @@ -192,7 +205,9 @@ suite('FocusableTreeTraverser', function () { test('for tree with nested node passive highlight returns node', function () { const tree = this.testFocusableTree1; const node = this.testFocusableTree1Node1Child1; - node.getFocusableElement().classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + node + .getFocusableElement() + .classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); const finding = FocusableTreeTraverser.findFocusedNode(tree); @@ -202,7 +217,9 @@ suite('FocusableTreeTraverser', function () { test('for tree with nested tree root active no parent highlights returns root', function () { const tree = this.testFocusableNestedTree4; const rootNode = this.testFocusableNestedTree4.getRootFocusableNode(); - rootNode.getFocusableElement().classList.add(FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + rootNode + .getFocusableElement() + .classList.add(FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); const finding = FocusableTreeTraverser.findFocusedNode(tree); @@ -212,7 +229,9 @@ suite('FocusableTreeTraverser', function () { test('for tree with nested tree root passive no parent highlights returns root', function () { const tree = this.testFocusableNestedTree4; const rootNode = this.testFocusableNestedTree4.getRootFocusableNode(); - rootNode.getFocusableElement().classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + rootNode + .getFocusableElement() + .classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); const finding = FocusableTreeTraverser.findFocusedNode(tree); @@ -222,7 +241,9 @@ suite('FocusableTreeTraverser', function () { test('for tree with nested tree node active no parent highlights returns node', function () { const tree = this.testFocusableNestedTree4; const node = this.testFocusableNestedTree4Node1; - node.getFocusableElement().classList.add(FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + node + .getFocusableElement() + .classList.add(FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); const finding = FocusableTreeTraverser.findFocusedNode(tree); @@ -232,7 +253,9 @@ suite('FocusableTreeTraverser', function () { test('for tree with nested tree root passive no parent highlights returns null', function () { const tree = this.testFocusableNestedTree4; const node = this.testFocusableNestedTree4Node1; - node.getFocusableElement().classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + node + .getFocusableElement() + .classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); const finding = FocusableTreeTraverser.findFocusedNode(tree); @@ -245,7 +268,9 @@ suite('FocusableTreeTraverser', function () { this.testFocusableTree2Node1 .getFocusableElement() .classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); - rootNode.getFocusableElement().classList.add(FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + rootNode + .getFocusableElement() + .classList.add(FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); const finding = FocusableTreeTraverser.findFocusedNode( this.testFocusableTree2, @@ -260,7 +285,9 @@ suite('FocusableTreeTraverser', function () { this.testFocusableTree2Node1 .getFocusableElement() .classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); - rootNode.getFocusableElement().classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + rootNode + .getFocusableElement() + .classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); const finding = FocusableTreeTraverser.findFocusedNode( this.testFocusableTree2, @@ -275,7 +302,9 @@ suite('FocusableTreeTraverser', function () { this.testFocusableTree2Node1 .getFocusableElement() .classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); - node.getFocusableElement().classList.add(FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); + node + .getFocusableElement() + .classList.add(FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME); const finding = FocusableTreeTraverser.findFocusedNode( this.testFocusableTree2, @@ -290,7 +319,9 @@ suite('FocusableTreeTraverser', function () { this.testFocusableTree2Node1 .getFocusableElement() .classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); - node.getFocusableElement().classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); + node + .getFocusableElement() + .classList.add(FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME); const finding = FocusableTreeTraverser.findFocusedNode( this.testFocusableTree2,