mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-30 01:43:36 +08:00
Kim-Anh Tran
cc469e6da5
The css-hints_test is flaky ("CSS hints in the Styles panel/updates
the hint if the styles are edited"), e.g:
https://ci.chromium.org/ui/p/devtools-frontend/builders/ci/Stand-alone%20Win/7025/overview
Bug: 1377773
Change-Id: I4fb7b29a1b9bdae5f1587bef7a9f236f8c3bc942
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3973929
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Commit-Queue: Kim-Anh Tran <kimanh@chromium.org>
Auto-Submit: Kim-Anh Tran <kimanh@chromium.org>
74 lines
2.6 KiB
TypeScript
74 lines
2.6 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 {
|
|
enableExperiment,
|
|
getBrowserAndPages,
|
|
goToResource,
|
|
waitForFunction,
|
|
} from '../../shared/helper.js';
|
|
import {describe, it} from '../../shared/mocha-extensions.js';
|
|
import {
|
|
focusCSSPropertyValue,
|
|
getPropertiesWithHints,
|
|
waitForAndClickTreeElementWithPartialText,
|
|
waitForElementsStyleSection,
|
|
waitForPartialContentOfSelectedElementsNode,
|
|
waitForStyleRule,
|
|
} from '../helpers/elements-helpers.js';
|
|
|
|
const goToResourceAndWaitForStyleSection = async (path: string) => {
|
|
await goToResource(path);
|
|
await waitForElementsStyleSection();
|
|
await waitForPartialContentOfSelectedElementsNode('<body>\u200B');
|
|
};
|
|
|
|
describe('CSS hints in the Styles panel', async () => {
|
|
beforeEach(async () => {
|
|
await enableExperiment('cssAuthoringHints');
|
|
});
|
|
|
|
it('can detect inactive CSS', async () => {
|
|
await goToResourceAndWaitForStyleSection('elements/inactive-css-page.html');
|
|
await waitForStyleRule('body');
|
|
await waitForAndClickTreeElementWithPartialText('wrapper');
|
|
await waitForStyleRule('#wrapper');
|
|
|
|
const propertiesWithHints = await getPropertiesWithHints();
|
|
assert.deepEqual(propertiesWithHints, ['align-content']);
|
|
});
|
|
|
|
it('does not show authoring hint when property value is invalid', async () => {
|
|
await goToResourceAndWaitForStyleSection('elements/inactive-css-with-invalid-value.html');
|
|
await waitForStyleRule('body');
|
|
await waitForAndClickTreeElementWithPartialText('wrapper');
|
|
await waitForStyleRule('#wrapper');
|
|
|
|
const propertiesWithHints = await getPropertiesWithHints();
|
|
assert.deepEqual(propertiesWithHints, []);
|
|
});
|
|
|
|
// Flaky on windows.
|
|
it.skipOnPlatforms(['win32'], '[crbug.com/1377773] updates the hint if the styles are edited', async () => {
|
|
await goToResourceAndWaitForStyleSection('elements/inactive-css-page.html');
|
|
await waitForStyleRule('body');
|
|
await waitForAndClickTreeElementWithPartialText('wrapper');
|
|
await waitForStyleRule('#wrapper');
|
|
|
|
assert.deepEqual(await getPropertiesWithHints(), ['align-content']);
|
|
|
|
await focusCSSPropertyValue('#wrapper', 'flex-wrap');
|
|
const {frontend} = getBrowserAndPages();
|
|
await frontend.keyboard.type('wrap', {delay: 100});
|
|
await frontend.keyboard.press('Enter');
|
|
|
|
await waitForFunction(async () => {
|
|
const propertiesWithHints = await getPropertiesWithHints();
|
|
return propertiesWithHints.length === 0;
|
|
});
|
|
});
|
|
});
|