test_fxview_search_textbox.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>FxviewSearchTextbox Tests</title>

  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>

  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>

  <link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>

  <link rel="localization" href="browser/firefoxView.ftl"/>

  <script type="module" src="chrome://browser/content/firefoxview/fxview-search-textbox.mjs"></script>

</head>

<body>

<p id="display"></p>

<div id="search-test">

  <fxview-search-textbox></fxview-search-textbox>

</div>

<div id="focus-test"></div>

<pre id="test"></pre>

<script>

  add_task(async function test_search_and_clear() {

    const component = document.querySelector("#search-test fxview-search-textbox");

    info("Enter a search query.");

    let eventDeferred = Promise.withResolvers();

    component.addEventListener("fxview-search-textbox-query", e =>

      eventDeferred.resolve(e)

);

    synthesizeMouseAtCenter(component, {});

    sendChar("Q");

    let query = (await eventDeferred.promise).detail.query;

    is(query, "Q", "Event was fired with the correct query.");

    info("Clear the search query.");

    eventDeferred = Promise.withResolvers();

    synthesizeMouseAtCenter(component.clearButton, {});

    query = (await eventDeferred.promise).detail.query;

    is(query, "", "Event was fired with a blank query.");

});

  add_task(async function test_search_autofocus() {

    const container = document.querySelector('#focus-test');

    const componentWithAutofocus = document.createElement('fxview-search-textbox');

    componentWithAutofocus.toggleAttribute('autofocus', true);

    container.appendChild(componentWithAutofocus);

    await componentWithAutofocus.updateCompleted;

    isnot(componentWithAutofocus.input, null, 'component input should not be null');

    is(componentWithAutofocus.shadowRoot.activeElement, componentWithAutofocus.input, 'Search input has focus');

    container.removeChild(componentWithAutofocus);

    const component = document.createElement('fxview-search-textbox');

    container.appendChild(component);

    await component.updateCompleted;

    isnot(component.input, null, 'component input should not be null');

    isnot(component.shadowRoot.activeElement, component.input, 'Search input does not have focus');

    container.removeChild(component);

});

</script>

</body>

</html>