UNPKG

chrome-devtools-frontend

Version:
107 lines (98 loc) 3.6 kB
// Copyright 2023 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 Helpers from '../../../testing/DOMHelpers.js'; // eslint-disable-line rulesdir/es-modules-import import { describeWithLocale, } from '../../../testing/EnvironmentHelpers.js'; import {html} from '../../lit/lit.js'; import * as Dialogs from '../dialogs/dialogs.js'; import * as RenderCoordinator from '../render_coordinator/render_coordinator.js'; import * as Menus from './menus.js'; async function createMenu(): Promise<Menus.SelectMenu.SelectMenu> { const menuItems = [ { name: 'Option 1', value: '1', group: '', }, { name: 'Option 2', value: '2', group: '', }, { name: 'Option 3', value: '3', group: '', }, { name: 'Option 4', value: '4', group: '', }, ]; const menu = new Menus.SelectMenu.SelectMenu(); menu.position = Dialogs.Dialog.DialogVerticalPosition.BOTTOM; menuItems.forEach(item => { const selectMenuItem = new Menus.Menu.MenuItem(); selectMenuItem.value = item.value; selectMenuItem.textContent = item.name; menu.appendChild(selectMenuItem); }); await RenderCoordinator.done(); return menu; } describeWithLocale('SelectMenu', () => { it('will use the buttonTitle property if that is provided', async () => { const menu = await createMenu(); const firsItem = menu.querySelector('devtools-menu-item'); if (!firsItem) { assert.fail('No item was found.'); return; } menu.buttonTitle = 'Override Title'; Helpers.renderElementIntoDOM(menu); await RenderCoordinator.done(); assert.isNotNull(menu.shadowRoot); const button = menu.shadowRoot.querySelector('devtools-select-menu-button'); if (!button) { assert.fail('devtools-select-menu-button not found'); return; } assert.instanceOf(button, HTMLElement); assert.strictEqual(button.innerText, 'Override Title'); }); it('allows the buttonTitle to be a function', async () => { const menu = await createMenu(); const firsItem = menu.querySelector('devtools-menu-item'); if (!firsItem) { assert.fail('No item was found.'); return; } firsItem.selected = true; menu.buttonTitle = () => html`Override Title`; Helpers.renderElementIntoDOM(menu); await RenderCoordinator.done(); assert.isNotNull(menu.shadowRoot); const button = menu.shadowRoot.querySelector('devtools-select-menu-button'); if (!button) { assert.fail('devtools-select-menu-button not found'); return; } assert.instanceOf(button, HTMLElement); assert.strictEqual(button.innerText, 'Override Title'); }); it('can render multiple options as selected at once', async () => { const selectMenu = await createMenu(); Helpers.renderElementIntoDOM(selectMenu); [...selectMenu.querySelectorAll('devtools-menu-item')][0].selected = true; [...selectMenu.querySelectorAll('devtools-menu-item')][1].selected = true; assert.isNotNull(selectMenu.shadowRoot); const devtoolsMenu = selectMenu.shadowRoot.querySelector('devtools-menu'); const devtoolsDialog = devtoolsMenu?.shadowRoot?.querySelector('devtools-dialog'); await devtoolsDialog?.setDialogVisible(true); const selectedItems = [...selectMenu.querySelectorAll('devtools-menu-item')].filter(item => item.selected); assert.deepEqual(selectedItems.map(item => item.innerText), ['Option 1', 'Option 2']); }); });