test/e2e/helpers/event-listeners-helpers.ts

// 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 {
  $,
  $$,
  click,
  clickElement,
  clickMoreTabsButton,
  getBrowserAndPages,
  goToResource,
  waitFor,
} from '../../shared/helper.js';

import {
  waitForContentOfSelectedElementsNode,
  waitForElementsStyleSection,
  waitForSelectedNodeToBeExpanded,
} from './elements-helpers.js';

export const loadEventListenersAndSelectButtonNode = async () => {
  const {frontend} = getBrowserAndPages();
  await goToResource('elements/sidebar-event-listeners.html');
  await waitForElementsStyleSection();

  // Check to make sure we have the correct node selected after opening a file
  await waitForContentOfSelectedElementsNode('<body class=\u200B"test-js-loaded">\u200B');

  // Wait for element to be expanded
  await waitForSelectedNodeToBeExpanded();

  // Select the button that has the events and make sure it's selected
  await frontend.keyboard.press('ArrowRight');
  await waitForContentOfSelectedElementsNode('<button id=\u200B"test-button">\u200Bhello world\u200B</button>\u200B');
};

const EVENT_LISTENERS_PANEL_LINK = '[aria-label="Event Listeners"]';
/* We add :not(.hidden) here as if you create an event listener + remove it via the UI
 * it gets the class of .hidden rather than being removed
 */
const EVENT_LISTENERS_SELECTOR = '[aria-label$="event listener"]:not(.hidden)';

export const openEventListenersPaneAndWaitForListeners = async () => {
  let eventListenersPanel = await $('Event Listeners', undefined, 'aria');
  if (!eventListenersPanel) {
    await clickMoreTabsButton();
    eventListenersPanel = await waitFor(EVENT_LISTENERS_PANEL_LINK);
  }
  await clickElement(eventListenersPanel);
  await waitFor(EVENT_LISTENERS_SELECTOR);
};

export const getDisplayedEventListenerNames = async () => {
  const eventListeners = await $$(EVENT_LISTENERS_SELECTOR);
  const eventListenerNames = await Promise.all(eventListeners.map(listener => listener.evaluate(l => l.textContent)));
  return eventListenerNames as string[];
};

export const getEventListenerProperties = async (selector: string) => {
  const clickEventProperties = await $$(selector);

  const propertiesOutput = await Promise.all(clickEventProperties.map(n => n.evaluate(node => {
    const nameNode = node.querySelector('.name');
    const valueNode = node.querySelector('.value');

    if (!nameNode || !valueNode) {
      throw new Error('Could not find a name and value node for event listener properties.');
    }

    const key = nameNode.textContent;
    const value = valueNode.textContent;
    return [key, value];
  })));

  return propertiesOutput as Array<string[]>;
};

export const getFirstNodeForEventListener = async (listenerTypeSelector: string) => {
  await click(listenerTypeSelector);

  const listenerNodesSelector = `${listenerTypeSelector} + ol>li`;
  const firstListenerNode = await waitFor(listenerNodesSelector);
  const firstListenerText = await firstListenerNode.evaluate(node => {
    return node.textContent || '';
  });

  return {
    firstListenerText,
    listenerSelector: listenerNodesSelector,
  };
};