nagai/fune
3
0
Fork 0
forked from mirrors/gecko-dev
Code Pull requests Activity

Bug 1691579 - [devtools] Enable browser_spectrum.js on Fission. r=jdescottes.

Browse source 
The test failure doesn't seem to have anything to do with Fission,
but this might have introduce some changes in timings that would
trigger a race condition somehow.
The test was failing because in one of the test we were moving a slider
to change a color, while the slider element had a height of 0, which
would interfere with the computations that are done later.
This patch adds a helper function to create the Spectrum widget, wait for the
slider to have a non-zero height and then calling `show` (where some dimensions
are being cached).

Differential Revision: https://phabricator.services.mozilla.com/D109876
This commit is contained in:
Nicolas Chevobbe 2021-03-26 12:42:29 +00:00
parent 97478c3d2b
commit 092b9b3e4d
2 changed files with 32 additions and 36 deletions
repo.diff.show_diff_stats Download patch file Download diff file Expand all files Collapse all files

3
devtools/client/shared/test/browser.ini
View file

@ -198,9 +198,6 @@ skip-if = verify
[browser_prefs-02.js] [browser_prefs-02.js]
[browser_require_raw.js] [browser_require_raw.js]
[browser_spectrum.js] [browser_spectrum.js]
skip-if =
verify # Bug 1478156 test verify fails on master
fission && debug # Fails intermittently.
[browser_theme.js] [browser_theme.js]
[browser_tableWidget_basic.js] [browser_tableWidget_basic.js]
[browser_tableWidget_keyboard_interaction.js] [browser_tableWidget_keyboard_interaction.js]

65
devtools/client/shared/test/browser_spectrum.js
View file

@ -34,7 +34,6 @@ add_task(async function() {
const { host, doc } = await createHost("bottom", TEST_URI); const { host, doc } = await createHost("bottom", TEST_URI);
const container = doc.getElementById("spectrum-container"); const container = doc.getElementById("spectrum-container");
await testCreateAndDestroyShouldAppendAndRemoveElements(container); await testCreateAndDestroyShouldAppendAndRemoveElements(container);
await testPassingAColorAtInitShouldSetThatColor(container); await testPassingAColorAtInitShouldSetThatColor(container);
await testSettingAndGettingANewColor(container); await testSettingAndGettingANewColor(container);
@ -104,23 +103,21 @@ function testColorPreviewDisplay(
); );
} }
function testCreateAndDestroyShouldAppendAndRemoveElements(container) { async function testCreateAndDestroyShouldAppendAndRemoveElements(container) {
ok(container, "We have the root node to append spectrum to"); ok(container, "We have the root node to append spectrum to");
is(container.childElementCount, 0, "Root node is empty"); is(container.childElementCount, 0, "Root node is empty");
const s = new Spectrum(container, cssColors.white); const s = await createSpectrum(container, cssColors.white);
s.show();
ok(container.childElementCount > 0, "Spectrum has appended elements"); ok(container.childElementCount > 0, "Spectrum has appended elements");
s.destroy(); s.destroy();
is(container.childElementCount, 0, "Destroying spectrum removed all nodes"); is(container.childElementCount, 0, "Destroying spectrum removed all nodes");
} }
function testPassingAColorAtInitShouldSetThatColor(container) { async function testPassingAColorAtInitShouldSetThatColor(container) {
const initRgba = cssColors.white; const initRgba = cssColors.white;
const s = new Spectrum(container, initRgba); const s = await createSpectrum(container, initRgba);
s.show();
const setRgba = s.rgb; const setRgba = s.rgb;
@ -132,9 +129,8 @@ function testPassingAColorAtInitShouldSetThatColor(container) {
s.destroy(); s.destroy();
} }
function testSettingAndGettingANewColor(container) { async function testSettingAndGettingANewColor(container) {
const s = new Spectrum(container, cssColors.black); const s = await createSpectrum(container, cssColors.black);
s.show();
const colorToSet = cssColors.white; const colorToSet = cssColors.white;
s.rgb = colorToSet; s.rgb = colorToSet;
@ -166,9 +162,8 @@ async function testChangingColorShouldEmitEventsHelper(
ok(true, "Changed event was emitted on color change"); ok(true, "Changed event was emitted on color change");
} }
function testChangingColorShouldEmitEvents(container, doc) { async function testChangingColorShouldEmitEvents(container, doc) {
const s = new Spectrum(container, cssColors.white); const s = await createSpectrum(container, cssColors.white);
s.show();
const sendUpKey = () => EventUtils.sendKey("Up"); const sendUpKey = () => EventUtils.sendKey("Up");
const sendDownKey = () => EventUtils.sendKey("Down"); const sendDownKey = () => EventUtils.sendKey("Down");
@ -273,9 +268,8 @@ function testAriaAttributesOnSpectrumElements(
); );
} }
function testSettingColorShoudUpdateTheUI(container) { async function testSettingColorShoudUpdateTheUI(container) {
const s = new Spectrum(container, cssColors.white); const s = await createSpectrum(container, cssColors.white);
s.show();
const dragHelperOriginalPos = [ const dragHelperOriginalPos = [
s.dragHelper.style.top, s.dragHelper.style.top,
s.dragHelper.style.left, s.dragHelper.style.left,
@ -315,9 +309,8 @@ function testSettingColorShoudUpdateTheUI(container) {
s.destroy(); s.destroy();
} }
function testChangingColorShouldUpdateColorPreview(container) { async function testChangingColorShouldUpdateColorPreview(container) {
const s = new Spectrum(container, [0, 0, 1, 1]); const s = await createSpectrum(container, [0, 0, 1, 1]);
s.show();
info("Test that color preview is black."); info("Test that color preview is black.");
testColorPreviewDisplay(s, "rgb(0, 0, 1)", "transparent"); testColorPreviewDisplay(s, "rgb(0, 0, 1)", "transparent");
@ -337,9 +330,8 @@ function testChangingColorShouldUpdateColorPreview(container) {
s.destroy(); s.destroy();
} }
function testNotSettingTextPropsShouldNotShowContrastSection(container) { async function testNotSettingTextPropsShouldNotShowContrastSection(container) {
const s = new Spectrum(container, cssColors.white); const s = await createSpectrum(container, cssColors.white);
s.show();
setSpectrumProps(s, { rgb: cssColors.black }); setSpectrumProps(s, { rgb: cssColors.black });
ok( ok(
@ -379,9 +371,10 @@ function testSpectrumContrast(
); );
} }
function testSettingTextPropsAndColorShouldUpdateContrastValue(container) { async function testSettingTextPropsAndColorShouldUpdateContrastValue(
const s = new Spectrum(container, cssColors.white); container
s.show(); ) {
const s = await createSpectrum(container, cssColors.white);
ok( ok(
!s.spectrumContrast.classList.contains("visible"), !s.spectrumContrast.classList.contains("visible"),
@ -412,11 +405,10 @@ function testSettingTextPropsAndColorShouldUpdateContrastValue(container) {
s.destroy(); s.destroy();
} }
function testOnlySelectingLargeTextWithNonZeroAlphaShouldShowIndicator( async function testOnlySelectingLargeTextWithNonZeroAlphaShouldShowIndicator(
container container
) { ) {
let s = new Spectrum(container, cssColors.white); let s = await createSpectrum(container, cssColors.white);
s.show();
ok( ok(
s.contrastLabel.childNodes.length !== 3, s.contrastLabel.childNodes.length !== 3,
@ -452,8 +444,7 @@ function testOnlySelectingLargeTextWithNonZeroAlphaShouldShowIndicator(
// Spectrum should be closed and opened again to reflect changes in text size // Spectrum should be closed and opened again to reflect changes in text size
s.destroy(); s.destroy();
s = new Spectrum(container, cssColors.white); s = await createSpectrum(container, cssColors.white);
s.show();
info("Test that selecting regular text does not show large text indicator."); info("Test that selecting regular text does not show large text indicator.");
setSpectrumProps( setSpectrumProps(
@ -466,9 +457,10 @@ function testOnlySelectingLargeTextWithNonZeroAlphaShouldShowIndicator(
s.destroy(); s.destroy();
} }
function testSettingMultiColoredBackgroundShouldShowContrastRange(container) { async function testSettingMultiColoredBackgroundShouldShowContrastRange(
const s = new Spectrum(container, cssColors.white); container
s.show(); ) {
const s = await createSpectrum(container, cssColors.white);
info( info(
"Test setting text with non-zero alpha and multi-colored bg shows contrast range and empty single contrast." "Test setting text with non-zero alpha and multi-colored bg shows contrast range and empty single contrast."
@ -502,3 +494,10 @@ function testSettingMultiColoredBackgroundShouldShowContrastRange(container) {
s.destroy(); s.destroy();
} }
async function createSpectrum(...spectrumConstructorParams) {
const s = new Spectrum(...spectrumConstructorParams);
await waitFor(() => s.dragger.offsetHeight > 0);
s.show();
return s;
}