97 lines
3.2 KiB
HTML
97 lines
3.2 KiB
HTML
<!-- 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
|
|
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<!--
|
|
Test the searchbox component
|
|
-->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>SearchBox component test</title>
|
|
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
|
|
<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
|
|
</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>
|