Add front end tests for user search

jsx/src/components/ServerDashboard/ServerDashboard.jsx

@@ -38,12 +38,12 @@ const ServerDashboard = (props) => {
 
   var [errorAlert, setErrorAlert] = useState(null);
   var [sortMethod, setSortMethod] = useState(null);
-  var [name_filter, setNameFilter] = useState("");
   var [disabledButtons, setDisabledButtons] = useState({});
 
   var user_data = useSelector((state) => state.user_data),
     user_page = useSelector((state) => state.user_page),
     limit = useSelector((state) => state.limit),
+    name_filter = useSelector((state) => state.name_filter),
     page = parseInt(new URLSearchParams(props.location.search).get("page"));
 
   page = isNaN(page) ? 0 : page;
@@ -61,12 +61,13 @@ const ServerDashboard = (props) => {
     history,
   } = props;
 
-  var dispatchPageUpdate = (data, page) => {
+  var dispatchPageUpdate = (data, page, name_filter) => {
     dispatch({
       type: "USER_PAGE",
       value: {
         data: data,
         page: page,
+        name_filter: name_filter,
       },
     });
   };
@@ -76,14 +77,16 @@ const ServerDashboard = (props) => {
   }
 
   if (page != user_page) {
-    updateUsers(...slice).then((data) => dispatchPageUpdate(data, page));
+    updateUsers(...slice).then((data) =>
+      dispatchPageUpdate(data, page, name_filter)
+    );
   }
 
   var debounce = require("lodash.debounce");
   const handleSearch = debounce(async (event) => {
-    setNameFilter(event.target.value);
+    // setNameFilter(event.target.value);
     updateUsers(page * limit, limit, event.target.value).then((data) =>
-      dispatchPageUpdate(data, page)
+      dispatchPageUpdate(data, page, name_filter)
     );
   }, 300);
 
@@ -104,7 +107,7 @@ const ServerDashboard = (props) => {
               if (res.status < 300) {
                 updateUsers(...slice)
                   .then((data) => {
-                    dispatchPageUpdate(data, page);
+                    dispatchPageUpdate(data, page, name_filter);
                   })
                   .catch(() => {
                     setIsDisabled(false);
@@ -140,7 +143,7 @@ const ServerDashboard = (props) => {
               if (res.status < 300) {
                 updateUsers(...slice)
                   .then((data) => {
-                    dispatchPageUpdate(data, page);
+                    dispatchPageUpdate(data, page, name_filter);
                   })
                   .catch(() => {
                     setErrorAlert(`Failed to update users list.`);
@@ -220,7 +223,8 @@ const ServerDashboard = (props) => {
               type="text"
               name="user_search"
               placeholder="Search users"
-              defaultValue={name_filter}
+              aria-label="user-search"
+              value={name_filter}
               onChange={handleSearch}
             />
           </Col>
@@ -308,7 +312,7 @@ const ServerDashboard = (props) => {
                       .then((res) => {
                         updateUsers(...slice)
                           .then((data) => {
-                            dispatchPageUpdate(data, page);
+                            dispatchPageUpdate(data, page, name_filter);
                           })
                           .catch(() =>
                             setErrorAlert(`Failed to update users list.`)
@@ -344,7 +348,7 @@ const ServerDashboard = (props) => {
                       .then((res) => {
                         updateUsers(...slice)
                           .then((data) => {
-                            dispatchPageUpdate(data, page);
+                            dispatchPageUpdate(data, page, name_filter);
                           })
                           .catch(() =>
                             setErrorAlert(`Failed to update users list.`)

jsx/src/components/ServerDashboard/ServerDashboard.test.js

@@ -9,6 +9,9 @@ import { createStore } from "redux";
 import regeneratorRuntime from "regenerator-runtime";
 
 import ServerDashboard from "./ServerDashboard";
+import * as sinon from "sinon";
+
+let clock;
 
 jest.mock("react-redux", () => ({
   ...jest.requireActual("react-redux"),
@@ -45,6 +48,7 @@ var mockAppState = () => ({
 });
 
 beforeEach(() => {
+  clock = sinon.useFakeTimers();
   useSelector.mockImplementation((callback) => {
     return callback(mockAppState());
   });
@@ -52,6 +56,7 @@ beforeEach(() => {
 
 afterEach(() => {
   useSelector.mockClear();
+  clock.restore();
 });
 
 test("Renders", async () => {
@@ -435,3 +440,42 @@ test("Shows a UI error dialogue when stop user server returns an improper status
 
   expect(errorDialog).toBeVisible();
 });
+
+test("Search for user calls updateUsers with name filter", async () => {
+  let spy = mockAsync();
+  let mockUpdateUsers = jest.fn((offset, limit, name_filter) => {
+    return Promise.resolve([]);
+  });
+  await act(async () => {
+    render(
+      <Provider store={createStore(() => {}, {})}>
+        <HashRouter>
+          <Switch>
+            <ServerDashboard
+              updateUsers={mockUpdateUsers}
+              shutdownHub={spy}
+              startServer={spy}
+              stopServer={spy}
+              startAll={spy}
+              stopAll={spy}
+            />
+          </Switch>
+        </HashRouter>
+      </Provider>
+    );
+  });
+
+  let search = screen.getByLabelText("user-search");
+
+  fireEvent.change(search, { target: { value: "a" } });
+  clock.tick(400);
+  expect(mockUpdateUsers.mock.calls).toHaveLength(2);
+  expect(mockUpdateUsers.mock.calls[1][3]).toEqual("a");
+  expect(search.value).toEqual("a");
+
+  fireEvent.change(search, { target: { value: "ab" } });
+  clock.tick(400);
+  expect(mockUpdateUsers.mock.calls).toHaveLength(3);
+  expect(mockUpdateUsers.mock.calls[1][3]).toEqual("ab");
+  expect(search.value).toEqual("ab");
+});