Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
<!DOCTYPE html>
<html>
<!--
Test the searchbox component
-->
<head>
<meta charset="utf-8">
<title>SearchBox component test</title>
</head>
<body>
<script src="head.js"></script>
<script>
"use strict";
window.onload = function () {
const React = browserRequire("devtools/client/shared/vendor/react");
const SearchBox = React.createFactory(
browserRequire("devtools/client/shared/components/SearchBox")
);
ok(SearchBox, "Got the SearchBox factory");
async function testSimpleSearchBox() {
// Test initial state
const { component, $ } = await createComponentTest(SearchBox, {
type: "search",
keyShortcut: "CmdOrCtrl+F",
placeholder: "crazy placeholder",
});
is(component.state.value, "", "Initial value is blank");
ok(!component.state.focused, "Input isn't initially focused");
ok($(".devtools-searchinput-clear").hidden, "Clear button hidden");
is($(".devtools-searchinput").placeholder, "crazy placeholder",
"Placeholder is properly set");
synthesizeKey("f", { accelKey: true });
await forceRender(component); // Wait for state update
ok(component.state.focused, "Shortcut key focused the input box");
$(".devtools-searchinput").blur();
await forceRender(component);
ok(!component.state.focused, "`focused` state set to false after blur");
// Test changing value in state
await setState(component, {
value: "foo",
});
is(component.state.value, "foo", "value was properly set on state");
is($(".devtools-searchinput").value, "foo", "value was properly set on element");
// Filling input should show clear button
ok(!$(".devtools-searchinput-clear").hidden, "Clear button shown");
// Clearing value should hide clear button
await setState(component, {
value: "",
});
await forceRender(component);
ok($(".devtools-searchinput-clear").hidden, "Clear button was hidden");
}
async function testSearchBoxWithSummary() {
const { $ } = await createComponentTest(SearchBox, {
summary: "my summary",
summaryId: "my-summary-id",
summaryTooltip: "my summary tooltip",
});
const summaryEl = $(".devtools-searchinput-summary");
is(summaryEl.textContent, "my summary", "Summary has expected content");
is(
summaryEl.getAttribute("title"),
"my summary tooltip",
"Summary has expected title attribute"
);
is(summaryEl.id, "my-summary-id", "Summary has expected id");
is(
$(".devtools-searchinput").getAttribute("aria-describedby"),
"my-summary-id",
"input aria-describedby attribute is the summary element id"
);
}
add_task(async function () {
await testSimpleSearchBox();
await testSearchBoxWithSummary();
});
};
</script>
</body>
</html>