test_searchbox.html (3271B)
1 <!-- This Source Code Form is subject to the terms of the Mozilla Public 2 - License, v. 2.0. If a copy of the MPL was not distributed with this 3 - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> 4 <!DOCTYPE html> 5 <html> 6 <!-- 7 Test the searchbox component 8 --> 9 <head> 10 <meta charset="utf-8"> 11 <title>SearchBox component test</title> 12 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 13 <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script> 14 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> 15 </head> 16 <body> 17 <script src="head.js"></script> 18 <script> 19 "use strict"; 20 window.onload = function () { 21 const React = browserRequire("devtools/client/shared/vendor/react"); 22 const SearchBox = React.createFactory( 23 browserRequire("devtools/client/shared/components/SearchBox") 24 ); 25 ok(SearchBox, "Got the SearchBox factory"); 26 27 async function testSimpleSearchBox() { 28 // Test initial state 29 const { component, $ } = await createComponentTest(SearchBox, { 30 type: "search", 31 keyShortcut: "CmdOrCtrl+F", 32 placeholder: "crazy placeholder", 33 }); 34 35 is(component.state.value, "", "Initial value is blank"); 36 ok(!component.state.focused, "Input isn't initially focused"); 37 ok($(".devtools-searchinput-clear").hidden, "Clear button hidden"); 38 is($(".devtools-searchinput").placeholder, "crazy placeholder", 39 "Placeholder is properly set"); 40 41 synthesizeKey("f", { accelKey: true }); 42 await forceRender(component); // Wait for state update 43 ok(component.state.focused, "Shortcut key focused the input box"); 44 45 $(".devtools-searchinput").blur(); 46 await forceRender(component); 47 ok(!component.state.focused, "`focused` state set to false after blur"); 48 49 // Test changing value in state 50 await setState(component, { 51 value: "foo", 52 }); 53 54 is(component.state.value, "foo", "value was properly set on state"); 55 is($(".devtools-searchinput").value, "foo", "value was properly set on element"); 56 57 // Filling input should show clear button 58 ok(!$(".devtools-searchinput-clear").hidden, "Clear button shown"); 59 60 // Clearing value should hide clear button 61 await setState(component, { 62 value: "", 63 }); 64 await forceRender(component); 65 ok($(".devtools-searchinput-clear").hidden, "Clear button was hidden"); 66 } 67 68 async function testSearchBoxWithSummary() { 69 const { $ } = await createComponentTest(SearchBox, { 70 summary: "my summary", 71 summaryId: "my-summary-id", 72 summaryTooltip: "my summary tooltip", 73 }); 74 75 const summaryEl = $(".devtools-searchinput-summary"); 76 is(summaryEl.textContent, "my summary", "Summary has expected content"); 77 is( 78 summaryEl.getAttribute("title"), 79 "my summary tooltip", 80 "Summary has expected title attribute" 81 ); 82 is(summaryEl.id, "my-summary-id", "Summary has expected id"); 83 is( 84 $(".devtools-searchinput").getAttribute("aria-describedby"), 85 "my-summary-id", 86 "input aria-describedby attribute is the summary element id" 87 ); 88 } 89 90 add_task(async function () { 91 await testSimpleSearchBox(); 92 await testSearchBoxWithSummary(); 93 }); 94 }; 95 </script> 96 </body> 97 </html>