Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>MozInputFolder Tests</title>
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
<link
rel="stylesheet"
/>
<link rel="localization" href="toolkit/global/mozInputFolder.ftl" />
<script src="lit-test-helpers.js"></script>
<script class="testbody" type="application/javascript">
let testHelpers = new InputTestHelpers();
let html;
const { MockFilePicker } = SpecialPowers;
add_setup(async function setup() {
({ html } = await testHelpers.setupLit());
testHelpers.setupTests({
templateFn: (attrs, children) =>
html`<moz-input-folder ${attrs}>${children}</moz-input-folder>`,
});
});
add_task(async function testMozInputFolderProperties() {
await testHelpers.testCommonInputProperties("moz-input-folder");
});
add_task(async function testDisabledStates() {
let inputFolder = document.querySelector("moz-input-folder");
let chooseFolderButton = inputFolder.chooseFolderButtonEl;
ok(chooseFolderButton, "Choose folder button is present.");
inputFolder.disabled = true;
await inputFolder.updateComplete;
ok(inputFolder.disabled, "Input is disabled.");
ok(
chooseFolderButton.disabled,
"Disabled state is propagated to the button."
);
inputFolder.disabled = false;
await inputFolder.updateComplete;
ok(!inputFolder.disabled, "Input can be re-enabled.");
ok(
!chooseFolderButton.disabled,
"Disabled state is propagated to the button."
);
});
add_task(async function testMozInputFolderFunctionality() {
let { trackEvent, verifyEvents } = testHelpers.getInputEventHelpers();
let target = await testHelpers.renderTemplate();
let inputFolder = target.querySelector("moz-input-folder");
let inputElement = inputFolder.inputEl;
let chooseFolderButton = inputFolder.chooseFolderButtonEl;
inputFolder.addEventListener("input", trackEvent);
inputFolder.addEventListener("change", trackEvent);
// Set up the file picker.
const mockCustomParentDir = await IOUtils.createUniqueDirectory(
PathUtils.tempDir,
"input-folder-custom-dir-test"
);
const dummyFile = Cc["@mozilla.org/file/local;1"].createInstance(
Ci.nsIFile
);
dummyFile.initWithPath(mockCustomParentDir);
MockFilePicker.init(window.browsingContext);
let filePickerShownPromise = new Promise(resolve => {
MockFilePicker.showCallback = () => {
ok(true, "Filepicker shown");
MockFilePicker.setFiles([dummyFile]);
resolve();
};
});
MockFilePicker.returnValue = MockFilePicker.returnOK;
//Check initial values.
is(
inputFolder.value,
"",
"The initial value of the component is an empty string."
);
is(
inputElement.value,
"",
"The initial value of the input element is an empty string."
);
is(inputFolder.folder, null, "The folder is null.");
ok(
!inputElement.classList.contains("with-icon"),
"The input element has no background image."
);
//Choose a new folder.
let folderChanged = BrowserTestUtils.waitForEvent(
inputFolder,
"change"
);
chooseFolderButton.click();
await filePickerShownPromise;
await folderChanged;
await inputFolder.updateComplete;
await TestUtils.waitForTick();
verifyEvents([
{
type: "input",
localName: "moz-input-folder",
value: mockCustomParentDir,
},
{
type: "change",
localName: "moz-input-folder",
value: mockCustomParentDir,
},
]);
//Check if the values were updated.
is(
inputFolder.folder.path,
mockCustomParentDir,
"The folder path is the same as the path to the temporary folder."
);
is(
inputFolder.value,
mockCustomParentDir,
"The value of the moz-input-folder is set as a path to the temporary folder."
);
is(
inputElement.value,
mockCustomParentDir,
"The value of the input element is set as a path to the temporary folder."
);
ok(
inputElement.classList.contains("with-icon"),
"The input element has a background image."
);
// Ensure selecting the same folder does not send any events.
let filePickerClosed = BrowserTestUtils.waitForEvent(
inputFolder,
"moz-input-folder-picker-close"
);
chooseFolderButton.click();
await filePickerClosed;
await TestUtils.waitForTick();
verifyEvents([]);
// Ensure cancelling the file picker does not send any events.
MockFilePicker.returnValue = MockFilePicker.returnCancel;
filePickerClosed = BrowserTestUtils.waitForEvent(
inputFolder,
"moz-input-folder-picker-close"
);
chooseFolderButton.click();
await filePickerClosed;
await TestUtils.waitForTick();
verifyEvents([]);
MockFilePicker.cleanup();
});
add_task(async function testInputFolderDisplayValue() {
let target = await testHelpers.renderTemplate();
let inputFolder = target.querySelector("moz-input-folder");
let inputElement = inputFolder.inputEl;
let chooseFolderButton = inputFolder.chooseFolderButtonEl;
inputFolder.addEventListener("change", () => {
inputFolder.displayValue = "My Test Folder";
});
// Set up the file picker.
const mockCustomParentDir = await IOUtils.createUniqueDirectory(
PathUtils.tempDir,
"input-folder-custom-dir-test"
);
const dummyFile = Cc["@mozilla.org/file/local;1"].createInstance(
Ci.nsIFile
);
dummyFile.initWithPath(mockCustomParentDir);
MockFilePicker.init(window.browsingContext);
MockFilePicker.showCallback = () => {
ok(true, "Filepicker shown");
MockFilePicker.setFiles([dummyFile]);
};
MockFilePicker.returnValue = MockFilePicker.returnOK;
//Check initial values.
is(
inputFolder.value,
"",
"The initial value of the component is an empty string."
);
is(
inputFolder.displayValue,
"",
"The initial displayValue of the component is an empty string."
);
is(
inputElement.value,
"",
"The initial value of the input element is an empty string."
);
//Choose a new folder.
let folderChanged = BrowserTestUtils.waitForEvent(
inputFolder,
"change"
);
chooseFolderButton.click();
await folderChanged;
//Check if the values were updated.
is(
inputFolder.value,
mockCustomParentDir,
"The value of the moz-input-folder is set as a path to the temporary folder."
);
is(
inputFolder.displayValue,
"My Test Folder",
"The component has the expected displayValue."
);
is(
inputElement.value,
inputFolder.displayValue,
"The value of the input element is the same as the displayValue."
);
MockFilePicker.cleanup();
});
</script>
</head>
<body>
<p id="display"></p>
<div id="content" style="display: none"></div>
<pre id="test"></pre>
</body>
</html>