Combine API props, update tests for redux hooks

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

@@ -1,44 +1,34 @@
 import React from "react";
 import Enzyme, { shallow, mount } from "enzyme";
-import ServerDashboard from "./ServerDashboard.pre";
+import ServerDashboard from "./ServerDashboard";
 import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
 import { HashRouter, Switch } from "react-router-dom";
+import { Provider, useSelector } from "react-redux";
+import { createStore } from "redux";
 
 Enzyme.configure({ adapter: new Adapter() });
 
+jest.mock("react-redux", () => ({
+  ...jest.requireActual("react-redux"),
+  useSelector: jest.fn(),
+}));
+
 describe("ServerDashboard Component: ", () => {
   var serverDashboardJsx = (callbackSpy) => (
-    <ServerDashboard
-      user_data={JSON.parse(
-        '[{"kind":"user","name":"foo","admin":true,"groups":[],"server":"/user/foo/","pending":null,"created":"2020-12-07T18:46:27.112695Z","last_activity":"2020-12-07T21:00:33.336354Z","servers":{"":{"name":"","last_activity":"2020-12-07T20:58:02.437408Z","started":"2020-12-07T20:58:01.508266Z","pending":null,"ready":true,"state":{"pid":28085},"url":"/user/foo/","user_options":{},"progress_url":"/hub/api/users/foo/server/progress"}}},{"kind":"user","name":"bar","admin":false,"groups":[],"server":null,"pending":null,"created":"2020-12-07T18:46:27.115528Z","last_activity":"2020-12-07T20:43:51.013613Z","servers":{}}]'
-      )}
-      updateUsers={callbackSpy}
-      shutdownHub={callbackSpy}
-      startServer={callbackSpy}
-      stopServer={callbackSpy}
-      startAll={callbackSpy}
-      stopAll={callbackSpy}
-      dispatch={callbackSpy}
-    />
-  );
-
-  var deepServerDashboardJsx = (callbackSpy) => (
-    <HashRouter>
-      <Switch>
-        <ServerDashboard
-          user_data={JSON.parse(
-            '[{"kind":"user","name":"foo","admin":true,"groups":[],"server":"/user/foo/","pending":null,"created":"2020-12-07T18:46:27.112695Z","last_activity":"2020-12-07T21:00:33.336354Z","servers":{"":{"name":"","last_activity":"2020-12-07T20:58:02.437408Z","started":"2020-12-07T20:58:01.508266Z","pending":null,"ready":true,"state":{"pid":28085},"url":"/user/foo/","user_options":{},"progress_url":"/hub/api/users/foo/server/progress"}}},{"kind":"user","name":"bar","admin":false,"groups":[],"server":null,"pending":null,"created":"2020-12-07T18:46:27.115528Z","last_activity":"2020-12-07T20:43:51.013613Z","servers":{}}]'
-          )}
-          updateUsers={callbackSpy}
-          shutdownHub={callbackSpy}
-          startServer={callbackSpy}
-          stopServer={callbackSpy}
-          startAll={callbackSpy}
-          stopAll={callbackSpy}
-          dispatch={callbackSpy}
-        />
-      </Switch>
-    </HashRouter>
+    <Provider store={createStore(() => {}, {})}>
+      <HashRouter>
+        <Switch>
+          <ServerDashboard
+            updateUsers={callbackSpy}
+            shutdownHub={callbackSpy}
+            startServer={callbackSpy}
+            stopServer={callbackSpy}
+            startAll={callbackSpy}
+            stopAll={callbackSpy}
+          />
+        </Switch>
+      </HashRouter>
+    </Provider>
   );
 
   var mockAsync = () =>
@@ -48,14 +38,30 @@ describe("ServerDashboard Component: ", () => {
         Promise.resolve({ json: () => Promise.resolve({ k: "v" }) })
       );
 
+  var mockAppState = () => ({
+    user_data: JSON.parse(
+      '[{"kind":"user","name":"foo","admin":true,"groups":[],"server":"/user/foo/","pending":null,"created":"2020-12-07T18:46:27.112695Z","last_activity":"2020-12-07T21:00:33.336354Z","servers":{"":{"name":"","last_activity":"2020-12-07T20:58:02.437408Z","started":"2020-12-07T20:58:01.508266Z","pending":null,"ready":true,"state":{"pid":28085},"url":"/user/foo/","user_options":{},"progress_url":"/hub/api/users/foo/server/progress"}}},{"kind":"user","name":"bar","admin":false,"groups":[],"server":null,"pending":null,"created":"2020-12-07T18:46:27.115528Z","last_activity":"2020-12-07T20:43:51.013613Z","servers":{}}]'
+    ),
+  });
+
+  beforeEach(() => {
+    useSelector.mockImplementation((callback) => {
+      return callback(mockAppState());
+    });
+  });
+
+  afterEach(() => {
+    useSelector.mockClear();
+  });
+
   it("Renders users from props.user_data into table", () => {
-    let component = shallow(serverDashboardJsx(jest.fn())),
+    let component = mount(serverDashboardJsx(jest.fn())),
       userRows = component.find(".user-row");
     expect(userRows.length).toBe(2);
   });
 
   it("Renders correctly the status of a single-user server", () => {
-    let component = shallow(serverDashboardJsx(jest.fn())),
+    let component = mount(serverDashboardJsx(jest.fn())),
       userRows = component.find(".user-row");
     // Renders .stop-button when server is started
     // Should be 1 since user foo is started
@@ -67,7 +73,7 @@ describe("ServerDashboard Component: ", () => {
 
   it("Invokes the startServer event on button click", () => {
     let callbackSpy = mockAsync(),
-      component = shallow(serverDashboardJsx(callbackSpy)),
+      component = mount(serverDashboardJsx(callbackSpy)),
       startBtn = component.find(".start-button");
     startBtn.simulate("click");
     expect(callbackSpy).toHaveBeenCalled();
@@ -75,7 +81,7 @@ describe("ServerDashboard Component: ", () => {
 
   it("Invokes the stopServer event on button click", () => {
     let callbackSpy = mockAsync(),
-      component = shallow(serverDashboardJsx(callbackSpy)),
+      component = mount(serverDashboardJsx(callbackSpy)),
       stopBtn = component.find(".stop-button");
     stopBtn.simulate("click");
     expect(callbackSpy).toHaveBeenCalled();
@@ -83,14 +89,14 @@ describe("ServerDashboard Component: ", () => {
 
   it("Invokes the shutdownHub event on button click", () => {
     let callbackSpy = mockAsync(),
-      component = shallow(serverDashboardJsx(callbackSpy)),
-      shutdownBtn = component.find(".shutdown-button");
+      component = mount(serverDashboardJsx(callbackSpy)),
+      shutdownBtn = component.find("#shutdown-button").first();
     shutdownBtn.simulate("click");
     expect(callbackSpy).toHaveBeenCalled();
   });
 
   it("Sorts according to username", () => {
-    let component = mount(deepServerDashboardJsx(jest.fn())).find(
+    let component = mount(serverDashboardJsx(jest.fn())).find(
         "ServerDashboard"
       ),
       handler = component.find("SortHandler").first();
@@ -103,7 +109,7 @@ describe("ServerDashboard Component: ", () => {
   });
 
   it("Sorts according to admin", () => {
-    let component = mount(deepServerDashboardJsx(jest.fn())).find(
+    let component = mount(serverDashboardJsx(jest.fn())).find(
         "ServerDashboard"
       ),
       handler = component.find("SortHandler").at(1);
@@ -116,7 +122,7 @@ describe("ServerDashboard Component: ", () => {
   });
 
   it("Sorts according to last activity", () => {
-    let component = mount(deepServerDashboardJsx(jest.fn())).find(
+    let component = mount(serverDashboardJsx(jest.fn())).find(
         "ServerDashboard"
       ),
       handler = component.find("SortHandler").at(2);
@@ -131,7 +137,7 @@ describe("ServerDashboard Component: ", () => {
   });
 
   it("Sorts according to server status (running/not running)", () => {
-    let component = mount(deepServerDashboardJsx(jest.fn())).find(
+    let component = mount(serverDashboardJsx(jest.fn())).find(
         "ServerDashboard"
       ),
       handler = component.find("SortHandler").at(3);
@@ -146,7 +152,10 @@ describe("ServerDashboard Component: ", () => {
   });
 
   it("Renders nothing if required data is not available", () => {
-    let component = shallow(<ServerDashboard />);
+    useSelector.mockImplementation((callback) => {
+      return callback({});
+    });
+    let component = mount(serverDashboardJsx(jest.fn()));
     expect(component.html()).toBe("<div></div>");
   });
 });