[Files]: Updates the query state in the store.

Updates the query on user input or clear calls. Adds a unit tests for
search container.

Bug: b:241868715
Change-Id: Id8621bd3e6cb5f595af56aef38074bd1cefabcbd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4113041
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Commit-Queue: Bo Majewski <majewski@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1085190}

chrome/browser/ash/file_manager/file_manager_jstest.cc

@@ -326,6 +326,14 @@ IN_PROC_BROWSER_TEST_F(FileManagerJsTest, ReducerSearch) {
   RunTestURL("state/reducers/search_unittest.js");
 }
 
+IN_PROC_BROWSER_TEST_F(FileManagerJsTest, NudgeContainer) {
+  RunTestURL("containers/nudge_container_unittest.js");
+}
+
+IN_PROC_BROWSER_TEST_F(FileManagerJsTest, SearchContainer) {
+  RunTestURL("containers/search_container_unittest.js");
+}
+
 IN_PROC_BROWSER_TEST_F(FileManagerJsTest, XfConflictDialog) {
   RunTestURL("widgets/xf_conflict_dialog_unittest.js");
 }
@@ -346,10 +354,6 @@ IN_PROC_BROWSER_TEST_F(FileManagerJsTest, XfSplitter) {
   RunTestURL("widgets/xf_splitter_unittest.js");
 }
 
-IN_PROC_BROWSER_TEST_F(FileManagerJsTest, NudgeContainer) {
-  RunTestURL("containers/nudge_container_unittest.js");
-}
-
 IN_PROC_BROWSER_TEST_F(FileManagerJsTest, XfTree) {
   RunTestURL("widgets/xf_tree_unittest.js");
 }

ui/file_manager/file_manager/containers/search_container.ts

@@ -152,7 +152,7 @@ export class SearchContainer extends EventTarget {
     const value = this.inputElement_.value;
     if (value !== '') {
       this.inputElement_.value = '';
-      this.postQueryChangedEvent();
+      this.onQueryChanged_();
       requestAnimationFrame(() => {
         this.closeSearch();
       });
@@ -488,7 +488,7 @@ export class SearchContainer extends EventTarget {
       }
     });
     this.inputElement_.addEventListener('input', () => {
-      this.postQueryChangedEvent();
+      this.onQueryChanged_();
     });
     this.inputElement_.addEventListener('keydown', (event: KeyboardEvent) => {
       if (!this.inputElement_.value) {
@@ -582,14 +582,20 @@ export class SearchContainer extends EventTarget {
    * Generates a custom event with the current value of the input element as the
    * search query.
    */
-  private postQueryChangedEvent() {
+  private onQueryChanged_() {
+    const query = this.inputElement_.value.trimStart();
     this.dispatchEvent(new CustomEvent(SEARCH_QUERY_CHANGED, {
       bubbles: true,
       composed: true,
       detail: {
-        query: this.inputElement_.value,
+        query: query,
       },
     }));
+    this.store_.dispatch(updateSearch({
+      query: query,
+      status: undefined,   // do not change
+      options: undefined,  // do not change
+    }));
   }
 
   private postItemChangedEvent() {

ui/file_manager/file_manager/containers/search_container_unittest.ts

@@ -0,0 +1,88 @@
+// Copyright 2022 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {CrInputElement} from 'chrome://resources/cr_elements/cr_input/cr_input.js';
+
+import {EntryLocation} from '../externs/entry_location.js';
+import {State} from '../externs/ts/state.js';
+import {VolumeManager} from '../externs/volume_manager.js';
+import {waitDeepEquals} from '../state/for_tests.js';
+import {getEmptyState, getStore, Store} from '../state/store.js';
+
+import {SearchContainer} from './search_container.js';
+
+
+const searchWrapper: HTMLElement = document.createElement('div');
+const optionsContainer: HTMLElement = document.createElement('div');
+const pathContainer: HTMLElement = document.createElement('div');
+
+let store: Store|undefined;
+let searchContainer: SearchContainer|undefined;
+
+function setupStore(): Store {
+  const store = getStore();
+  store.init(getEmptyState());
+  return store;
+}
+
+/**
+ * Creates new <search-container> element for each test.
+ */
+export function setUp() {
+  const root = document.createElement('div');
+  document.body.replaceChildren(root);
+  searchWrapper.innerHTML = `
+      <cr-button id="search-button" tabindex="0">
+        <div class="icon"></div>
+      </cr-button>
+      <div id="search-box">
+        <cr-input type="search" disabled placeholder="Search">
+          <cr-button class="clear" slot="suffix" tabindex="0" has-tooltip>
+            <div class="icon"></div>
+          </cr-button>
+        </cr-input>
+      </div>`;
+  root.appendChild(searchWrapper);
+  root.appendChild(optionsContainer);
+  root.appendChild(pathContainer);
+
+  store = setupStore();
+  const volumeManager: VolumeManager = {
+    getLocationInfo: (_entry: Entry): EntryLocation => {
+      return new EntryLocation();
+    },
+  } as unknown as VolumeManager;
+
+  searchContainer = new SearchContainer(
+      volumeManager, searchWrapper, optionsContainer, pathContainer);
+}
+
+export async function testQueryUpdated() {
+  // Test 1: Enter a query.
+  const input = searchWrapper.querySelector('cr-input') as CrInputElement;
+  input.value = 'hello';
+  input.dispatchEvent(new Event('input', {
+    bubbles: true,
+    cancelable: true,
+  }));
+  const want1 = {
+    query: 'hello',
+    status: undefined,
+    options: undefined,
+  };
+  await waitDeepEquals(store!, want1, (state: State) => {
+    return state.search;
+  });
+
+  // Test 2: Clear the query.
+  searchContainer!.clear();
+  const want2 = {
+    query: '',
+    status: undefined,
+    options: undefined,
+  };
+  await waitDeepEquals(store!, want2, (state: State) => {
+    return state.search;
+  });
+}

ui/file_manager/file_manager/state/reducers/search.ts

@@ -25,13 +25,13 @@ export function search(state: State, action: SearchAction): State {
   // as store customers are free to cache it and check for changes. If we modify
   // the original object the check for changes incorrectly return false.
   const search: SearchData = {...currentSearch};
-  if (payload.query) {
+  if (payload.query !== undefined) {
     search.query = payload.query;
   }
-  if (payload.status) {
+  if (payload.status !== undefined) {
     search.status = payload.status;
   }
-  if (payload.options) {
+  if (payload.options !== undefined) {
     search.options = payload.options;
   }
   return {...state, search};

ui/file_manager/file_names.gni

@@ -312,6 +312,7 @@ ts_test_files = [
   # Containers
   "file_manager/containers/breadcrumb_container_unittest.ts",
   "file_manager/containers/nudge_container_unittest.ts",
+  "file_manager/containers/search_container_unittest.ts",
 
   # Lib:
   "file_manager/lib/base_store_unittest.ts",