mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-12 17:45:49 +08:00
Johan Bay
fa025f61cf
This CL attempts to fix a few console tests that sometimes fail if some of the console messages are slow to appear. Bug: 1112692 Change-Id: I79d91ce116b63de5bd4f686333e7436de67ac618 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2360375 Reviewed-by: Changhao Han <changhaohan@chromium.org> Reviewed-by: Mathias Bynens <mathias@chromium.org> Commit-Queue: Johan Bay <jobay@google.com>
64 lines
2.5 KiB
TypeScript
64 lines
2.5 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 {$$, getBrowserAndPages, goToResource, timeout, waitFor, waitForFunction} from '../../shared/helper.js';
|
|
import {describe, it} from '../../shared/mocha-extensions.js';
|
|
import {waitForChildrenOfSelectedElementNode, waitForContentOfSelectedElementsNode} from '../helpers/elements-helpers.js';
|
|
|
|
describe('The Elements Tab', async () => {
|
|
it('can show styles in shadow roots', async () => {
|
|
const {frontend} = getBrowserAndPages();
|
|
|
|
await goToResource('elements/shadow-roots.html');
|
|
|
|
// Wait for the file to be loaded and selectors to be shown
|
|
await waitFor('.styles-selector');
|
|
|
|
// Sanity check to make sure we have the correct node selected after opening a file
|
|
await waitForContentOfSelectedElementsNode('<body>\u200B');
|
|
|
|
// FIXME(crbug/1112692): Refactor test to remove the timeout.
|
|
await timeout(50);
|
|
|
|
await frontend.keyboard.press('ArrowRight');
|
|
await waitForContentOfSelectedElementsNode('<div id=\u200B"host">\u200B…\u200B</div>\u200B');
|
|
|
|
// Open the div (shows new nodes, but does not alter the selected node)
|
|
await frontend.keyboard.press('ArrowRight');
|
|
await waitForContentOfSelectedElementsNode('<div id=\u200B"host">\u200B');
|
|
|
|
await frontend.keyboard.press('ArrowRight');
|
|
await waitForContentOfSelectedElementsNode('#shadow-root (open)');
|
|
|
|
// Open the shadow root (shows new nodes, but does not alter the selected node)
|
|
await frontend.keyboard.press('ArrowRight');
|
|
await waitForChildrenOfSelectedElementNode();
|
|
await waitForContentOfSelectedElementsNode('#shadow-root (open)');
|
|
|
|
await frontend.keyboard.press('ArrowRight');
|
|
await waitForContentOfSelectedElementsNode('<style>\u200B .red { color: red; } \u200B</style>\u200B');
|
|
|
|
await frontend.keyboard.press('ArrowDown');
|
|
await waitForContentOfSelectedElementsNode('<div id=\u200B"inner" class=\u200B"red">\u200Bhi!\u200B</div>\u200B');
|
|
|
|
await waitForFunction(async () => {
|
|
const styleSections = await $$('.styles-section');
|
|
const numFound = styleSections.length;
|
|
|
|
return numFound === 3;
|
|
});
|
|
|
|
const styleSections = await $$('.styles-section');
|
|
const selectorTexts = await Promise.all(styleSections.map(n => n.evaluate(node => node.textContent)));
|
|
|
|
assert.deepEqual(selectorTexts, [
|
|
'element.style {}',
|
|
'<style>.red {}',
|
|
'user agent stylesheetdiv {}',
|
|
]);
|
|
});
|
|
});
|