UNPKG

chrome-devtools-frontend

Version:
113 lines (85 loc) 4.08 kB
// Copyright 2020 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. import * as Platform from '../../core/platform/platform.js'; import {dispatchKeyDownEvent, renderElementIntoDOM} from '../../testing/DOMHelpers.js'; import * as UI from './legacy.js'; describe('TreeOutline', () => { describe('correctly reacts to Enter key', () => { it('by expanding collapsed parent nodes', () => { const tree = new UI.TreeOutline.TreeOutlineInShadow(); renderElementIntoDOM(tree.element); const parent = new UI.TreeOutline.TreeElement('parent', true); parent.appendChild(new UI.TreeOutline.TreeElement('child', false)); tree.appendChild(parent); parent.select(); dispatchKeyDownEvent(tree.contentElement, {bubbles: true, key: 'Enter'}); assert.isTrue(parent.expanded, 'Enter key was supposed to expand the parent node'); }); it('by collapsing expanded parent nodes', () => { const tree = new UI.TreeOutline.TreeOutlineInShadow(); renderElementIntoDOM(tree.element); const parent = new UI.TreeOutline.TreeElement('parent', true); parent.appendChild(new UI.TreeOutline.TreeElement('child', false)); tree.appendChild(parent); parent.select(); parent.expand(); dispatchKeyDownEvent(tree.contentElement, {bubbles: true, key: 'Enter'}); assert.isFalse(parent.expanded, 'Enter key was supposed to collapse the parent node'); }); }); it('responds correctly to navigation keys', () => { const treeOutline = new UI.TreeOutline.TreeOutlineInShadow(); renderElementIntoDOM(treeOutline.element); for (let i = 0; i < 10; i++) { const treeElement = new UI.TreeOutline.TreeElement(String(i), true); treeElement.appendChild(new UI.TreeOutline.TreeElement(String(i) + ' child')); treeOutline.appendChild(treeElement); } let selectedTitles: string[] = []; treeOutline.addEventListener(UI.TreeOutline.Events.ElementSelected, event => { selectedTitles.push(String(event.data.title)); }); treeOutline.firstChild()!.select(false, true); const distance = 25; assert.deepEqual(selectedTitles, ['0']); selectedTitles = []; function sendKeyMultipleTimes(key: string, n: number) { for (let i = 0; i < n; i++) { sendKey(key); } } sendKeyMultipleTimes('ArrowDown', distance); assert.deepEqual(selectedTitles, ['1', '2', '3', '4', '5', '6', '7', '8', '9']); selectedTitles = []; sendKeyMultipleTimes('ArrowUp', distance); assert.deepEqual(selectedTitles, ['8', '7', '6', '5', '4', '3', '2', '1', '0']); selectedTitles = []; sendKey('End'); assert.deepEqual(selectedTitles, ['9']); selectedTitles = []; sendKey('Home'); assert.deepEqual(selectedTitles, ['0']); selectedTitles = []; sendKeyMultipleTimes('ArrowRight', distance); assert.deepEqual(selectedTitles, ['0 child']); selectedTitles = []; sendKeyMultipleTimes('ArrowLeft', distance); assert.deepEqual(selectedTitles, ['0']); selectedTitles = []; const innerTreeOutline = new UI.TreeOutline.TreeOutlineInShadow(); const firstInnerChild = new UI.TreeOutline.TreeElement('First inner child'); const firstInnerGrandChild = new UI.TreeOutline.TreeElement('First inner grandchild'); innerTreeOutline.appendChild(firstInnerChild); firstInnerChild.appendChild(firstInnerGrandChild); const treeElementForNestedTree = new UI.TreeOutline.TreeElement(innerTreeOutline.element); treeOutline.appendChild(treeElementForNestedTree); innerTreeOutline.firstChild()!.select(false, true); sendKey('ArrowRight'); assert.isTrue(innerTreeOutline.firstChild()!.expanded, 'child is not expanded'); function sendKey(key: string) { const deepActiveElement = Platform.DOMUtilities.deepActiveElement(document); deepActiveElement!.dispatchEvent(new KeyboardEvent('keydown', {bubbles: true, cancelable: true, key})); } }); });