react/packages/react-devtools-inline/__tests__/__e2e__/devtools-utils.js at 809aeba8fce380e04aa1056954748ab87dc3dc3f · bvaughn/react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
'use strict';

/** @flow */

async function clickButton(page, buttonTestName) {
  await page.evaluate(testName => {
    const {createTestNameSelector, findAllNodes} = window.REACT_DOM_DEVTOOLS;
    const container = document.getElementById('devtools');

    const button = findAllNodes(container, [
      createTestNameSelector(testName),
    ])[0];
    button.click();
  }, buttonTestName);
}

async function getElementCount(page, displayName) {
  return await page.evaluate(listItemText => {
    const {
      createTestNameSelector,
      createTextSelector,
      findAllNodes,
    } = window.REACT_DOM_DEVTOOLS;
    const container = document.getElementById('devtools');
    const rows = findAllNodes(container, [
      createTestNameSelector('ComponentTreeListItem'),
      createTextSelector(listItemText),
    ]);
    return rows.length;
  }, displayName);
}

async function selectElement(page, displayName, waitForOwnersText) {
  await page.evaluate(listItemText => {
    const {
      createTestNameSelector,
      createTextSelector,
      findAllNodes,
    } = window.REACT_DOM_DEVTOOLS;
    const container = document.getElementById('devtools');

    const listItem = findAllNodes(container, [
      createTestNameSelector('ComponentTreeListItem'),
      createTextSelector(listItemText),
    ])[0];
    listItem.click();
  }, displayName);

  if (waitForOwnersText) {
    // Wait for selected element's props to load.
    await page.waitForFunction(
      ({titleText, ownersListText}) => {
        const {
          createTestNameSelector,
          findAllNodes,
        } = window.REACT_DOM_DEVTOOLS;
        const container = document.getElementById('devtools');

        const title = findAllNodes(container, [
          createTestNameSelector('InspectedElement-Title'),
        ])[0];

        const ownersList = findAllNodes(container, [
          createTestNameSelector('InspectedElementView-Owners'),
        ])[0];

        return (
          title &&
          title.innerText.includes(titleText) &&
          ownersList &&
          ownersList.innerText.includes(ownersListText)
        );
      },
      {titleText: displayName, ownersListText: waitForOwnersText}
    );
  }
}

module.exports = {
  clickButton,
  getElementCount,
  selectElement,
};