Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>setting-control test</title>
<link
rel="stylesheet"
/>
<link rel="stylesheet" href="chrome://global/skin/global.css" />
<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";
async function renderTemplate(itemConfig) {
let config = {
items: [itemConfig],
};
let result = await testHelpers.renderTemplate(html`
<setting-group
.config=${config}
.getSetting=${(...args) => Preferences.getSetting(...args)}
></setting-group>
`);
await result.firstElementChild.updateComplete;
return result.querySelector("setting-control");
}
function waitForSettingChange(setting) {
return new Promise(resolve => {
setting.on("change", function handler() {
setting.off("change", handler);
resolve();
});
});
}
add_setup(async function setup() {
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 testSimpleCheckbox() {
const PREF = "test.setting-control.one";
const SETTING = "setting-control-one";
await SpecialPowers.pushPrefEnv({
set: [[PREF, true]],
});
Preferences.addAll([{ id: PREF, type: "bool" }]);
Preferences.addSetting({
id: SETTING,
pref: PREF,
});
let itemConfig = { l10nId: LABEL_L10N_ID, id: SETTING };
let setting = Preferences.getSetting(SETTING);
let control = await renderTemplate(itemConfig, setting);
is(
control.inputEl.localName,
"moz-checkbox",
"The control rendered a checkbox"
);
is(control.inputEl.dataset.l10nId, LABEL_L10N_ID, "Label is set");
is(control.inputEl.checked, true, "checkbox is checked");
is(control.inputEl.disabled, false, "checkbox is enabled");
is(Services.prefs.getBoolPref(PREF), true, "pref is true");
let settingChanged = waitForSettingChange(setting);
synthesizeMouseAtCenter(control.inputEl, {});
await settingChanged;
is(
control.inputEl.checked,
false,
"checkbox becomes unchecked after click"
);
is(Services.prefs.getBoolPref(PREF), false, "pref is false");
settingChanged = waitForSettingChange(setting);
Services.prefs.setBoolPref(PREF, true);
await settingChanged;
is(
control.inputEl.checked,
true,
"checkbox becomes checked after pref change"
);
is(Services.prefs.getBoolPref(PREF), true, "pref is true");
// Pref locking
settingChanged = waitForSettingChange(setting);
Services.prefs.lockPref(PREF);
await settingChanged;
is(control.inputEl.disabled, true, "checkbox is disabled when locked");
settingChanged = waitForSettingChange(setting);
Services.prefs.unlockPref(PREF);
await settingChanged;
is(
control.inputEl.disabled,
false,
"checkbox is enabled when unlocked"
);
});
add_task(async function testSupportLinkCheckbox() {
const SETTING = "setting-control-support-link";
Preferences.addSetting({
id: SETTING,
get: () => true,
});
let itemConfig = {
l10nId: LABEL_L10N_ID,
id: SETTING,
supportPage: "foo",
};
let control = await renderTemplate(
itemConfig,
Preferences.getSetting(SETTING)
);
ok(control, "Got a control");
let checkbox = control.inputEl;
is(checkbox.localName, "moz-checkbox", "moz-checkbox is rendered");
is(
checkbox.supportPage,
"foo",
"The checkbox receives the supportPage"
);
});
add_task(async function testSupportLinkSubcategory() {
const SETTING = "setting-control-subcategory";
Preferences.addSetting({
id: SETTING,
get: () => true,
});
let configOne = {
l10nId: LABEL_L10N_ID,
id: SETTING,
subcategory: "exsubcategory",
};
let control = await renderTemplate(
configOne,
Preferences.getSetting(SETTING)
);
ok(control, "Got the control");
is(
control.inputEl.dataset.subcategory,
"exsubcategory",
"Subcategory is set"
);
let configTwo = {
l10nId: LABEL_L10N_ID,
id: SETTING,
subcategory: "exsubcategory2",
supportPage: "foo",
};
control = await renderTemplate(
configTwo,
Preferences.getSetting(SETTING)
);
ok(control, "Got the control");
is(
control.inputEl.dataset.subcategory,
"exsubcategory2",
"Subcategory is set"
);
is(control.inputEl.supportPage, "foo", "Input got the supportPage");
});
add_task(async function testNestedCheckboxes() {
const PREF_PARENT = "test.setting-control.parent";
const SETTING_PARENT = "setting-control-parent";
const PREF_NESTED = "test.setting-control.nested";
const SETTING_NESTED = "setting-control-nested";
await SpecialPowers.pushPrefEnv({
set: [
[PREF_PARENT, false],
[PREF_NESTED, true],
],
});
Preferences.addAll([
{ id: PREF_PARENT, type: "bool" },
{ id: PREF_NESTED, type: "bool" },
]);
Preferences.addSetting({
id: SETTING_PARENT,
pref: PREF_PARENT,
});
Preferences.addSetting({
id: SETTING_NESTED,
pref: PREF_NESTED,
});
let itemConfig = {
l10nId: LABEL_L10N_ID,
id: SETTING_PARENT,
items: [{ l10nId: LABEL_L10N_ID, id: SETTING_NESTED }],
};
let parentSetting = Preferences.getSetting(SETTING_PARENT);
let parentControl = await renderTemplate(itemConfig, parentSetting);
is(
parentControl.setting.id,
SETTING_PARENT,
"Parent control id is set"
);
let nestedControl = parentControl.inputEl.firstElementChild;
info("Nested: " + nestedControl.localName);
is(
nestedControl.setting.id,
SETTING_NESTED,
"Nested control id is set"
);
is(parentControl.inputEl.checked, false, "Parent is unchecked");
is(parentControl.inputEl.inputEl.disabled, false, "Parent is enabled");
is(nestedControl.inputEl.checked, true, "Nested is checked");
is(nestedControl.inputEl.inputEl.disabled, true, "Nested is disabled");
let settingChanged = waitForSettingChange(parentSetting);
// Click the label since the center of the entire <moz-checkbox> would
// be the space between the parent and nested checkboxes.
synthesizeMouseAtCenter(parentControl.inputEl.labelEl, {});
await settingChanged;
await parentControl.updateComplete;
is(
parentControl.inputEl.checked,
true,
"Parent is checked after click"
);
is(
parentControl.inputEl.inputEl.disabled,
false,
"Parent is enabled after click"
);
is(
nestedControl.inputEl.checked,
true,
"Nested is checked after click"
);
is(
nestedControl.inputEl.inputEl.disabled,
false,
"Nested is enabled after click"
);
settingChanged = waitForSettingChange(parentSetting);
Services.prefs.setBoolPref(PREF_PARENT, false);
await settingChanged;
await parentControl.updateComplete;
is(
parentControl.inputEl.checked,
false,
"Parent is unchecked after pref change"
);
is(
parentControl.inputEl.inputEl.disabled,
false,
"Parent is enabled after pref change"
);
is(
nestedControl.inputEl.checked,
true,
"Nested is checked after pref change"
);
is(
nestedControl.inputEl.inputEl.disabled,
true,
"Nested is disabled after pref change"
);
});
</script>
</head>
<body>
<p id="display"></p>
<div id="content" style="display: none"></div>
<pre id="test"></pre>
</body>
</html>