corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1953327 - Part 2: Tests for setting-group r=reusable-components-reviewers,settings-reviewers,mossop,hjones,frontend-codestyle-reviewers

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D245480
This commit is contained in:
Mark Striemer
2025-04-24 21:17:29 +00:00
parent ec66fa8068
commit 2a25593516
7 changed files with 310 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.prettierignore
View File

@@ -16,6 +16,7 @@
!toolkit/content/tests/widgets/*.xhtml
!toolkit/content/tests/widgets/*.html
!toolkit/content/tests/chrome/test_preferencesBindings_setting.html
!browser/components/preferences/tests/chrome/*.html
# This should be re-enabled in bug 1827456.
js/src/builtin

1
browser/components/preferences/moz.build
View File

@@ -7,6 +7,7 @@
DIRS += ["dialogs"]
BROWSER_CHROME_MANIFESTS += ["tests/browser.toml", "tests/siteData/browser.toml"]
MOCHITEST_CHROME_MANIFESTS += ["tests/chrome/chrome.toml"]
for var in ("MOZ_APP_NAME", "MOZ_MACBUNDLE_NAME"):
DEFINES[var] = CONFIG[var]

6
browser/components/preferences/tests/chrome/chrome.toml Normal file
View File

@@ -0,0 +1,6 @@
[DEFAULT]
support-files = [
"../../../../../toolkit/content/tests/widgets/lit-test-helpers.js",
]
["test_setting_group.html"]

284
browser/components/preferences/tests/chrome/test_setting_group.html Normal file
View File

@@ -0,0 +1,284 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>setting-group Tests</title>
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link
rel="stylesheet"
href="chrome://mochikit/content/tests/SimpleTest/test.css"
/>
<link rel="stylesheet" href="chrome://global/skin/global.css" />
<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
<script src="../../../../../toolkit/content/tests/widgets/lit-test-helpers.js"></script>
<script
type="module"
src="chrome://browser/content/preferences/widgets/setting-group.mjs"
></script>
<script
type="module"
src="chrome://browser/content/preferences/widgets/setting-control.mjs"
></script>
<script
type="module"
src="chrome://global/content/elements/moz-support-link.mjs"
></script>
<script
type="application/javascript"
src="chrome://global/content/preferencesBindings.js"
></script>
<script>
/* import-globals-from /toolkit/content/preferencesBindings.js */
let html, testHelpers;
const LABEL_L10N_ID = "browsing-use-autoscroll";
const GROUP_L10N_ID = "pane-experimental-reset";
function renderTemplate(config) {
return testHelpers.renderTemplate(html`
<setting-group
.config=${config}
.getSetting=${(...args) => Preferences.getSetting(...args)}
></setting-group>
`);
}
function waitForSettingChange(setting) {
return new Promise(resolve => {
setting.on("change", function handler() {
setting.off("change", handler);
resolve();
});
});
}
add_setup(async function setup() {
await SpecialPowers.pushPrefEnv({
set: [["settings.revamp.design", false]],
});
testHelpers = new InputTestHelpers();
({ html } = await testHelpers.setupLit());
testHelpers.setupTests({
templateFn: () => html`<setting-group></setting-group>`,
});
MozXULElement.insertFTLIfNeeded("branding/brand.ftl");
MozXULElement.insertFTLIfNeeded("browser/preferences/preferences.ftl");
});
add_task(async function testSimpleXulPrefCheckboxes() {
const PREF_ONE = "test.settings-group.one";
const SETTING_ONE = "setting-one";
const PREF_TWO = "test.settings-group.two";
const SETTING_TWO = "setting-two";
await SpecialPowers.pushPrefEnv({
set: [
[PREF_ONE, true],
[PREF_TWO, false],
],
});
Preferences.addAll([
{ id: PREF_ONE, type: "bool" },
{ id: PREF_TWO, type: "bool" },
]);
Preferences.addSetting({
id: SETTING_ONE,
pref: PREF_ONE,
});
Preferences.addSetting({
id: SETTING_TWO,
pref: PREF_TWO,
});
let config = {
items: [
{ l10nId: LABEL_L10N_ID, id: SETTING_ONE },
{ l10nId: LABEL_L10N_ID, id: SETTING_TWO },
],
};
let result = await renderTemplate(config);
let group = result.querySelector("setting-group");
ok(group, "setting-group is created");
ok(group.config, "it got a config");
let checkboxes = result.querySelectorAll("checkbox");
is(checkboxes.length, 2, "Rendered two checkboxes");
is(checkboxes[0].dataset.l10nId, LABEL_L10N_ID, "Label is set");
is(checkboxes[0].checked, true, "First checkbox is checked");
is(Services.prefs.getBoolPref(PREF_ONE), true, "First pref is true");
is(checkboxes[1].checked, false, "Second checkbox is unchecked");
is(Services.prefs.getBoolPref(PREF_TWO), false, "Second pref is false");
let settingChanged = waitForSettingChange(
Preferences.getSetting(SETTING_ONE)
);
synthesizeMouseAtCenter(
checkboxes[0].querySelector(".checkbox-check"),
{}
);
await settingChanged;
is(checkboxes[0].checked, false, "First checkbox is unchecked");
is(Services.prefs.getBoolPref(PREF_ONE), false, "First pref is false");
settingChanged = waitForSettingChange(
Preferences.getSetting(SETTING_TWO)
);
synthesizeMouseAtCenter(
checkboxes[1].querySelector(".checkbox-check"),
{}
);
await settingChanged;
is(checkboxes[1].checked, true, "Second checkbox is checked");
is(Services.prefs.getBoolPref(PREF_TWO), true, "Second pref is true");
settingChanged = waitForSettingChange(
Preferences.getSetting(SETTING_ONE)
);
Services.prefs.setBoolPref(PREF_ONE, true);
await settingChanged;
is(
checkboxes[0].checked,
true,
"First checkbox becomes checked after pref change"
);
is(Services.prefs.getBoolPref(PREF_ONE), true, "First pref is true");
settingChanged = waitForSettingChange(
Preferences.getSetting(SETTING_TWO)
);
Services.prefs.setBoolPref(PREF_TWO, false);
await settingChanged;
is(
checkboxes[1].checked,
false,
"Second checkbox becomes unchecked after pref change"
);
is(Services.prefs.getBoolPref(PREF_TWO), false, "Second pref is false");
});
add_task(async function testSupportLinkXulCheckbox() {
const SETTING = "setting-support-link";
Preferences.addSetting({
id: SETTING,
get: () => true,
});
let config = {
items: [{ l10nId: LABEL_L10N_ID, id: SETTING, supportPage: "foo" }],
};
let result = await renderTemplate(config);
let checkbox = result.querySelector("checkbox");
ok(checkbox, "Got a checkbox");
ok(
checkbox.classList.contains("tail-with-learn-more"),
"Checkbox gets the correct class"
);
let container = checkbox.parentElement;
is(container.localName, "hbox", "Checkbox is in an hbox");
let supportLink = container.querySelector("a");
ok(supportLink, "The support link was created");
is(
supportLink.constructor,
customElements.get("moz-support-link"),
"It's a support link"
);
is(supportLink.supportPage, "foo", "The support page is set");
});
add_task(async function testSupportLinkXulSubcategory() {
const SETTING = "setting-subcategory";
Preferences.addSetting({
id: SETTING,
get: () => true,
});
let config = {
items: [
{
l10nId: LABEL_L10N_ID,
id: SETTING,
subcategory: "exsubcategory",
},
{
l10nId: LABEL_L10N_ID,
id: SETTING,
subcategory: "exsubcategory2",
supportPage: "foo",
},
],
};
let result = await renderTemplate(config);
let [basic, supportLink] = result.querySelectorAll("checkbox");
ok(basic, "Got the basic checkbox");
is(
basic.dataset.subcategory,
"exsubcategory",
"Subcategory is set for basic"
);
ok(supportLink, "Got the support link checkbox");
let container = supportLink.parentElement;
is(container.localName, "hbox", "Support link is in a container");
is(
container.dataset.subcategory,
"exsubcategory2",
"Support link container has subcategory"
);
});
add_task(async function testSettingGroupRevamp() {
const PREF_ONE = "test.settings-group.itemone";
const SETTING_ONE = "setting-item-one";
const PREF_TWO = "test.settings-group.itemtwo";
const SETTING_TWO = "setting-item-two";
await SpecialPowers.pushPrefEnv({
set: [
[PREF_ONE, true],
[PREF_TWO, false],
["settings.revamp.design", true],
],
});
Preferences.addAll([
{ id: PREF_ONE, type: "bool" },
{ id: PREF_TWO, type: "bool" },
]);
Preferences.addSetting({
id: SETTING_ONE,
pref: PREF_ONE,
});
Preferences.addSetting({
id: SETTING_TWO,
pref: PREF_TWO,
});
let config = {
l10nId: GROUP_L10N_ID,
items: [
{ l10nId: LABEL_L10N_ID, id: SETTING_ONE },
{ l10nId: LABEL_L10N_ID, id: SETTING_TWO },
],
};
let result = await renderTemplate(config);
let group = result.querySelector("setting-group");
ok(group, "setting-group is created");
ok(group.config, "it got a config");
let fieldset = group.children[0];
is(fieldset.localName, "moz-fieldset", "First child is a fieldset");
is(
fieldset.dataset.l10nId,
GROUP_L10N_ID,
"Fieldset has the group label"
);
let [item1, item2] = fieldset.children;
is(item1.localName, "setting-control", "First setting-control");
is(item1.config.id, SETTING_ONE, "First setting-control id is correct");
is(item2.localName, "setting-control", "Second setting-control");
is(
item2.config.id,
SETTING_TWO,
"Second setting-control id is correct"
);
});
</script>
</head>
<body>
<p id="display"></p>
<div id="content" style="display: none"></div>
<pre id="test"></pre>
</body>
</html>

1
browser/components/preferences/widgets/setting-group/setting-group.mjs
View File

@@ -36,6 +36,7 @@ export class SettingGroup extends MozLitElement {
checkbox.addEventListener("command", e =>
setting.userChange(e.target.checked)
);
setting.on("change", () => (checkbox.checked = setting.value));
checkbox.checked = setting.value;
if (item.supportPage) {
let container = document.createXULElement("hbox");

7
toolkit/content/preferencesBindings.js
View File

@@ -700,7 +700,7 @@ const Preferences = (window.Preferences = (function () {
};
get value() {
let prefVal = this.pref.value;
let prefVal = this.pref?.value;
if (this.config.get) {
return this.config.get(prefVal);
}
@@ -708,7 +708,10 @@ const Preferences = (window.Preferences = (function () {
}
set value(val) {
this.pref.value = this.config.set ? this.config.set(val) : val;
let newVal = this.config.set ? this.config.set(val) : val;
if (this.pref) {
this.pref.value = newVal;
}
}
get visible() {

12
toolkit/content/tests/widgets/lit-test-helpers.js
View File

@@ -51,7 +51,19 @@ class LitTestHelpers {
return lit.noChange;
}
};
this.PropertySpreadDirective = class extends lit.Directive {
render() {
return lit.nothing;
}
update(part, [attrs]) {
for (let [key, value] of Object.entries(attrs)) {
part[key] = value;
}
return lit.noChange;
}
};
this.spread = lit.directive(this.SpreadDirective);
this.propertySpread = lit.directive(this.PropertySpreadDirective);
return lit;
}