Remove SelectMenu interaction test It's not worth to migrate this test since this menu implementation is deprecated and will be removed in the foreseeable future Bug: 413414983 Change-Id: Iea7d311ad97b65d084577216a9adcee15776c635 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6624139 Commit-Queue: Alex Rudenko <alexrudenko@chromium.org> Reviewed-by: Jack Franklin <jacktfranklin@chromium.org> Auto-Submit: Kateryna Prokopenko <kprokopenko@chromium.org>
diff --git a/test/BUILD.gn b/test/BUILD.gn index dde9cd3..3db01c0 100644 --- a/test/BUILD.gn +++ b/test/BUILD.gn
@@ -11,7 +11,6 @@ ":unittests", "e2e", "e2e_non_hosted", - "interactions", "perf", "shared", ]
diff --git a/test/interactions/BUILD.gn b/test/interactions/BUILD.gn deleted file mode 100644 index 543b457..0000000 --- a/test/interactions/BUILD.gn +++ /dev/null
@@ -1,30 +0,0 @@ -# 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("../../scripts/build/ninja/copy.gni") -import("../../scripts/build/typescript/typescript.gni") - -group("interactions") { - deps = [ - ":test_inputs", - ":tests", - ] -} - -node_ts_library("tests") { - deps = [ - "helpers", - "ui/components", - ] - - sources = [ "mocharc.ts" ] -} - -generated_file("test_inputs") { - outputs = [ "$target_gen_dir/tests.txt" ] - data_keys = [ "tests" ] - rebase = target_gen_dir - - deps = [ ":tests" ] -}
diff --git a/test/interactions/goldens/linux/select_menu/select_menu.png b/test/interactions/goldens/linux/select_menu/select_menu.png deleted file mode 100644 index 8f9ef56..0000000 --- a/test/interactions/goldens/linux/select_menu/select_menu.png +++ /dev/null Binary files differ
diff --git a/test/interactions/goldens/linux/select_menu/select_menu_with_groups.png b/test/interactions/goldens/linux/select_menu/select_menu_with_groups.png deleted file mode 100644 index 4a6d7a0..0000000 --- a/test/interactions/goldens/linux/select_menu/select_menu_with_groups.png +++ /dev/null Binary files differ
diff --git a/test/interactions/goldens/mac/select_menu/select_menu_with_groups.png b/test/interactions/goldens/mac/select_menu/select_menu_with_groups.png deleted file mode 100644 index 6b36bff..0000000 --- a/test/interactions/goldens/mac/select_menu/select_menu_with_groups.png +++ /dev/null Binary files differ
diff --git a/test/interactions/goldens/win32/select_menu/select_menu_with_groups.png b/test/interactions/goldens/win32/select_menu/select_menu_with_groups.png deleted file mode 100644 index af28eba..0000000 --- a/test/interactions/goldens/win32/select_menu/select_menu_with_groups.png +++ /dev/null Binary files differ
diff --git a/test/interactions/ui/components/BUILD.gn b/test/interactions/ui/components/BUILD.gn deleted file mode 100644 index c8c6c70..0000000 --- a/test/interactions/ui/components/BUILD.gn +++ /dev/null
@@ -1,17 +0,0 @@ -# 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("../../../../scripts/build/typescript/typescript.gni") - -node_ts_library("components") { - sources = [ "SelectMenu_test.ts" ] - - deps = [ - "../../../../front_end/ui/components/dialogs:bundle", - "../../../../front_end/ui/components/menus:bundle", - "../../../../test/e2e/helpers", - "../../../../test/interactions/helpers", - "../../../../test/shared", - ] -}
diff --git a/test/interactions/ui/components/SelectMenu_test.ts b/test/interactions/ui/components/SelectMenu_test.ts deleted file mode 100644 index 29b8d8a..0000000 --- a/test/interactions/ui/components/SelectMenu_test.ts +++ /dev/null
@@ -1,318 +0,0 @@ -// 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 {assert} from 'chai'; - -import type * as Menus from '../../../../front_end/ui/components/menus/menus.js'; -import {loadComponentDocExample} from '../../../../test/interactions/helpers/shared.js'; -import { - $, - activeElement, - click, - clickElement, - getBrowserAndPages, - waitFor, - waitForFunction, - waitForNone, -} from '../../../../test/shared/helper.js'; -import { - assertElementScreenshotUnchanged, - waitForDialogAnimationEnd, -} from '../../../shared/screenshots.js'; - -interface GetSelectMenuOptions { - placeholderSelector?: string; -} -async function getFocusedItemValue() { - const focusedItem = await waitFor('devtools-menu-item:focus'); - return await focusedItem.evaluate((item: Element) => (item as Menus.Menu.MenuItem).value); -} - -async function getSelectMenu(options: GetSelectMenuOptions = {}) { - await loadComponentDocExample('select_menu/basic.html'); - if (options.placeholderSelector) { - const placeholder = await waitFor(options.placeholderSelector); - return await waitFor('devtools-select-menu', placeholder); - } - return await waitFor('devtools-select-menu'); -} - -async function openMenu(options: GetSelectMenuOptions = {}) { - const selectMenu = await getSelectMenu(options); - const animationEndPromise = waitForDialogAnimationEnd(); - await click('button', { - root: selectMenu, - }); - await animationEndPromise; - return await waitFor('dialog[open]'); -} - -async function testScreenshotOnPlaceholder(placeholderSelector: string, screenshot: string) { - const dialog = await waitFor(placeholderSelector); - const selectMenu = await waitFor('devtools-select-menu', dialog); - const animationEndPromise = waitForDialogAnimationEnd(); - await click('button', { - root: selectMenu, - }); - await animationEndPromise; - - await assertElementScreenshotUnchanged(dialog, screenshot); -} - -describe('SelectMenu', () => { - it('shows the button to open the menu', async () => { - const selectMenu = await getSelectMenu(); - const button = await $('button', selectMenu); - assert.isNotNull(button); - }); - - it('opens the menu when the button is clicked', async () => { - const selectMenu = await getSelectMenu(); - const openDialog = await $('dialog[open]', selectMenu); - assert.isNull(openDialog); - await click('button'); - await waitFor('dialog[open]'); - }); - - it('changes focus across menu\'s items using keyboard arrows', async () => { - const {frontend} = getBrowserAndPages(); - - // First, test navigation on a menu without groups. - await openMenu(); - - await frontend.keyboard.press('ArrowDown'); - assert.strictEqual(await getFocusedItemValue(), '1'); - - await frontend.keyboard.press('ArrowDown'); - assert.strictEqual(await getFocusedItemValue(), '2'); - - await frontend.keyboard.press('ArrowUp'); - assert.strictEqual(await getFocusedItemValue(), '1'); - - await frontend.keyboard.press('Escape'); - - // Next, test navigation on a menu with groups. - await openMenu({placeholderSelector: '#place-holder-4'}); - - await frontend.keyboard.press('ArrowDown'); - assert.strictEqual(await getFocusedItemValue(), '1'); - - await frontend.keyboard.press('ArrowUp'); - assert.strictEqual(await getFocusedItemValue(), '1'); - - await frontend.keyboard.press('ArrowDown'); - assert.strictEqual(await getFocusedItemValue(), '2'); - - await frontend.keyboard.press('ArrowUp'); - assert.strictEqual(await getFocusedItemValue(), '1'); - }); - - it('focuses the first item when pressing the right arrow key ', async () => { - const {frontend} = getBrowserAndPages(); - - // First, test navigation on a menu without groups. - await openMenu(); - - await frontend.keyboard.press('ArrowRight'); - assert.strictEqual(await getFocusedItemValue(), '1'); - - await frontend.keyboard.press('Escape'); - - // Next, test navigation on a menu with groups. - await openMenu({placeholderSelector: '#place-holder-4'}); - - await frontend.keyboard.press('ArrowRight'); - assert.strictEqual(await getFocusedItemValue(), '1'); - }); - - it('focuses the last item when pressing the up arrow key ', async () => { - const {frontend} = getBrowserAndPages(); - - // First, test navigation on a menu without groups. - await openMenu(); - - await frontend.keyboard.press('ArrowUp'); - assert.strictEqual(await getFocusedItemValue(), '4'); - - await frontend.keyboard.press('Escape'); - - // Next, test navigation on a menu with groups. - await openMenu({placeholderSelector: '#place-holder-4'}); - - await frontend.keyboard.press('ArrowUp'); - assert.strictEqual(await getFocusedItemValue(), '4'); - }); - - it('changes focus across menu\'s items using the HOME and END keys', async () => { - const {frontend} = getBrowserAndPages(); - - // First, test navigation on a menu without groups. - await openMenu(); - - await frontend.keyboard.press('ArrowDown'); - assert.strictEqual(await getFocusedItemValue(), '1'); - - await frontend.keyboard.press('End'); - assert.strictEqual(await getFocusedItemValue(), '4'); - - await frontend.keyboard.press('Home'); - assert.strictEqual(await getFocusedItemValue(), '1'); - - await frontend.keyboard.press('Escape'); - - // Next, test navigation on a menu with groups. - await openMenu({placeholderSelector: '#place-holder-4'}); - - await frontend.keyboard.press('ArrowDown'); - assert.strictEqual(await getFocusedItemValue(), '1'); - - await frontend.keyboard.press('End'); - assert.strictEqual(await getFocusedItemValue(), '4'); - - await frontend.keyboard.press('Home'); - assert.strictEqual(await getFocusedItemValue(), '1'); - }); - - it('opens a menu using the UP and DOWN keys appropriately', async () => { - const {frontend} = getBrowserAndPages(); - await loadComponentDocExample('select_menu/basic.html'); - - // Focus the first select menu, which deploys downwards and open it using the - // down arrow key. - await frontend.keyboard.press('Tab'); - await frontend.keyboard.press('ArrowDown'); - await waitFor('dialog[open]'); - - await frontend.keyboard.press('Escape'); - const placeHolder1 = await waitFor('#place-holder-1'); - await waitFor('dialog:not([open])', placeHolder1); - - // Focus the second select menu, which deploys upwards and open it using the - // up arrow key. - await frontend.keyboard.press('Tab'); - await frontend.keyboard.press('ArrowUp'); - await waitFor('dialog[open]'); - }); - - it('can close a menu with ESC and open it again using the keyboard', async () => { - const {frontend} = getBrowserAndPages(); - await loadComponentDocExample('select_menu/basic.html'); - // Focus the first select menu, which deploys downwards and open it using the - // down arrow key. - await frontend.keyboard.press('Tab'); - await frontend.keyboard.press('ArrowDown'); - const placeHolder1 = await waitFor('#place-holder-1'); - await waitFor('dialog[open]', placeHolder1); - - await frontend.keyboard.press('Escape'); - await waitFor('dialog:not([open])', placeHolder1); - - // Wait until the focus is set on the button that opens the menu. - await waitForFunction(async () => { - const activeElementHandle = await activeElement(); - const activeElementName = await activeElementHandle.evaluate(e => e.tagName); - return activeElementName === 'BUTTON'; - }); - await frontend.keyboard.press('ArrowDown'); - await waitFor('dialog[open]'); - }); - - it('triggers a selectmenuselected event when clicking an item from the menu', async () => { - await openMenu(); - const item = await waitFor('devtools-select-menu > devtools-menu-item:nth-child(1)'); - const itemText = await item.evaluate((itemText: Element) => (itemText as HTMLElement).innerText.trim()); - await clickElement(item); - - // Element containing the selected item's text. - const result = await waitFor('#place-holder-1 > div'); - const resultText = await result.evaluate((result: Element) => (result as HTMLElement).innerText.trim()); - assert.strictEqual(resultText, `Selected option: ${itemText}`); - }); - - it('triggers a selectmenuselected event using the enter key', async () => { - const {frontend} = getBrowserAndPages(); - await openMenu(); - await frontend.keyboard.press('ArrowDown'); - const focusedItem = await waitFor('devtools-menu-item:focus'); - const itemText = await focusedItem.evaluate((item: Element) => (item as HTMLElement).innerText.trim()); - await frontend.keyboard.press('Enter'); - - // Element containing the selected item's text. - const result = await waitFor('#place-holder-1 > div'); - const resultText = await result.evaluate((result: Element) => (result as HTMLElement).innerText.trim()); - assert.strictEqual(resultText, `Selected option: ${itemText}`); - }); - - it('closes the dialog by clicking it', async () => { - const dialog = await openMenu(); - await clickElement(dialog); - await waitFor('dialog:not([open])'); - }); - - it('closes the dialog using the esc key', async () => { - const {frontend} = getBrowserAndPages(); - await openMenu(); - await frontend.keyboard.press('Escape'); - - await waitFor('dialog:not([open])'); - }); - - it('renders a menu in its correct position (top or bottom)', async () => { - await getSelectMenu(); - - // Open the first (regular) menu - const placeHolder1 = await waitFor('#place-holder-1'); - let animationEndPromise = waitForDialogAnimationEnd(); - await click('button', { - root: placeHolder1, - }); - await animationEndPromise; - const regularMenuWrapper = await waitFor('devtools-select-menu', placeHolder1); - - const regularDialog = await waitFor('dialog[open]', placeHolder1); - const regularDialogTopBound = await regularDialog.evaluate((dialog: Element) => dialog.getBoundingClientRect().top); - const regularMenuWrapperBottomBound = - await regularMenuWrapper.evaluate((menu: Element) => menu.getBoundingClientRect().bottom); - assert.strictEqual(regularDialogTopBound, regularMenuWrapperBottomBound); - - // Close the first menu - await clickElement(regularDialog); - await waitFor('dialog:not([open])', placeHolder1); - - // Open the second (inverted) menu - const placeHolder2 = await waitFor('#place-holder-2'); - const invertedButton = await waitFor('button', placeHolder2); - animationEndPromise = waitForDialogAnimationEnd(); - await clickElement(invertedButton); - await animationEndPromise; - const invertedMenuWrapper = await waitFor('devtools-select-menu', placeHolder2); - - const invertedDialog = await waitFor('dialog[open]', placeHolder2); - const invertedDialogBottomBound = - await invertedDialog.evaluate((dialog: Element) => dialog.getBoundingClientRect().bottom); - const invertedMenuWrapperTopBound = - await invertedMenuWrapper.evaluate((menu: Element) => menu.getBoundingClientRect().top); - assert.strictEqual(invertedDialogBottomBound, invertedMenuWrapperTopBound); - }); - - it('does not open on click if it\'s disabled', async () => { - await getSelectMenu(); - const selectMenuWrapper = await waitFor('#place-holder-6'); - const selectMenu = await waitFor('devtools-select-menu', selectMenuWrapper); - - const selectMenuButton = await waitFor('devtools-select-menu-button', selectMenu); - await clickElement(selectMenuButton); - await waitForNone('dialog[open]'); - }); - - itScreenshot('renders a menu with a connector', async () => { - await loadComponentDocExample('select_menu/basic.html'); - await testScreenshotOnPlaceholder('#place-holder-3', 'select_menu/select_menu.png'); - }); - - itScreenshot('renders a menu with groups', async () => { - await loadComponentDocExample('select_menu/basic.html'); - await testScreenshotOnPlaceholder('#place-holder-4', 'select_menu/select_menu_with_groups.png'); - }); -});
