Migrate test/e2e/elements/sidebar-event-listeners-remove_test.ts

Fixed: 416405447
Change-Id: Ica607f79073616cdaf31f549ec813a0cba75f007
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6837820
Reviewed-by: Philip Pfaffe <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>
Commit-Queue: Philip Pfaffe <[email protected]>
Auto-Submit: Alex Rudenko <[email protected]>

Author: OrKoN

test/e2e/elements/BUILD.gn

@@ -12,7 +12,6 @@ node_ts_library("elements") {
     "layout-pane_test.ts",
     "selection-after-delete_test.ts",
     "shadowroot-styles_test.ts",
-    "sidebar-event-listeners-remove_test.ts",
     "style-pane-properties_test.ts",
     "styles-disable-inherited_test.ts",
   ]

test/e2e/elements/sidebar-event-listeners-remove_test.ts

@@ -17,7 +17,6 @@ node_ts_library("helpers") {
     "datagrid-helpers.ts",
     "elements-helpers.ts",
     "emulation-helpers.ts",
-    "event-listeners-helpers.ts",
     "extension-helpers.ts",
     "issues-helpers.ts",
     "layers-helpers.ts",

test/e2e/helpers/BUILD.gn

@@ -157,4 +157,33 @@ describe('Event listeners in the elements sidebar', () => {
       ['handler', '() => console.log(\'test\')'],
     ]);
   });
+
+  it('shows delete button by each node for a given event', async ({devToolsPage, inspectedPage}) => {
+    await loadEventListenersAndSelectButtonNode(devToolsPage, inspectedPage);
+    await openEventListenersPaneAndWaitForListeners(devToolsPage);
+    const {
+      firstListenerText,
+      listenerSelector,
+    } = await getFirstNodeForEventListener(devToolsPage, '[aria-label="click, event listener"]');
+
+    // Check that we have the right event for the right element
+    // and that it has the delete button within it.
+    assert.include(firstListenerText, 'button#test-button');
+    const removeButtonSelector = `${listenerSelector} devtools-button`;
+    const removeButton = await devToolsPage.waitFor(removeButtonSelector);
+    if (!removeButton) {
+      assert.fail(`Could not find remove button with selector ${removeButtonSelector}`);
+    }
+    const buttonTitle = await removeButton.evaluate(n => {
+      const button = n.shadowRoot?.querySelector('button');
+      return button?.title;
+    });
+    assert.strictEqual(buttonTitle, 'Delete event listener');
+
+    await devToolsPage.click(removeButtonSelector);
+
+    // now we can check that the 'click' event is gone
+    const eventListenerNames = await getDisplayedEventListenerNames(devToolsPage);
+    assert.deepEqual(eventListenerNames, ['custom event', 'hover']);
+  });
 });