1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
<!-- 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");
}
add_task(async function () {
await testSimpleSearchBox();
});
};
</script>
</body>
</html>
|
