mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-19 13:04:39 +08:00
Alex Rudenko
e92fe9d745
The click helper now only accepts selectors so that it is able to recover from unstable DOM situations. A new deprecated helper clickElement is introduced for tests that cannot use a selector currently. This should serve as a red flag that the test might suffer from flakiness. Bounding box and offset computation is removed for now. New Puppeteer version allows providing relative click coordinates so we need to use that. Bug: 1411188, 1409768, 1411196, 1410437 Change-Id: I94a272184530842476bb2a879d862c4bd0930dba Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4194329 Reviewed-by: Philip Pfaffe <pfaffe@chromium.org> Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
58 lines
2.2 KiB
TypeScript
58 lines
2.2 KiB
TypeScript
// 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 {assert} from 'chai';
|
|
|
|
import {clickElement, goToResource, waitForElementWithTextContent} from '../../shared/helper.js';
|
|
import {describe, it} from '../../shared/mocha-extensions.js';
|
|
import {
|
|
assertSelectedElementsNodeTextIncludes,
|
|
expandSelectedNodeRecursively,
|
|
getBreadcrumbsTextContent,
|
|
getSelectedBreadcrumbTextContent,
|
|
waitForContentOfSelectedElementsNode,
|
|
waitForElementsStyleSection,
|
|
waitForSelectedTreeElementSelectorWithTextcontent,
|
|
} from '../helpers/elements-helpers.js';
|
|
|
|
const EXPECTED_TEXT_CONTENT = '<div class=\u200B"div2">\u200B last child \u200B</div>\u200B';
|
|
|
|
describe('Element breadcrumbs', async () => {
|
|
beforeEach(async function() {
|
|
await goToResource('elements/element-breadcrumbs.html');
|
|
await waitForElementsStyleSection();
|
|
|
|
// Check to make sure we have the correct node selected after opening a file
|
|
await waitForContentOfSelectedElementsNode('<body>\u200B');
|
|
|
|
// expand the tree and then navigate down to the target node
|
|
await expandSelectedNodeRecursively();
|
|
const targetChildNode = await waitForElementWithTextContent(EXPECTED_TEXT_CONTENT);
|
|
await clickElement(targetChildNode);
|
|
|
|
// double check we got to the node we expect
|
|
await waitForSelectedTreeElementSelectorWithTextcontent(EXPECTED_TEXT_CONTENT);
|
|
await assertSelectedElementsNodeTextIncludes('last child');
|
|
});
|
|
|
|
it('lists all the elements in the tree', async () => {
|
|
const expectedCrumbsText = [
|
|
'html',
|
|
'body',
|
|
'div#div1',
|
|
'span#span1',
|
|
'div.div2',
|
|
];
|
|
const actualCrumbsText = await getBreadcrumbsTextContent({expectedNodeCount: expectedCrumbsText.length});
|
|
assert.deepEqual(actualCrumbsText, expectedCrumbsText);
|
|
});
|
|
|
|
it('correctly highlights the active node', async () => {
|
|
// Wait for the crumbs to render with all the elements we expect.
|
|
await getBreadcrumbsTextContent({expectedNodeCount: 5});
|
|
const selectedCrumbText = await getSelectedBreadcrumbTextContent();
|
|
assert.strictEqual(selectedCrumbText, 'div.div2');
|
|
});
|
|
});
|