Add React Admin and modify AdminHandler

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

@@ -0,0 +1,152 @@
+import React from "react";
+import Enzyme, { shallow, mount } from "enzyme";
+import { ServerDashboard } from "./ServerDashboard.pre";
+import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
+import { HashRouter, Switch } from "react-router-dom";
+
+Enzyme.configure({ adapter: new Adapter() });
+
+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>
+  );
+
+  var mockAsync = () =>
+    jest
+      .fn()
+      .mockImplementation(() =>
+        Promise.resolve({ json: () => Promise.resolve({ k: "v" }) })
+      );
+
+  it("Renders users from props.user_data into table", () => {
+    let component = shallow(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())),
+      userRows = component.find(".user-row");
+    // Renders .stop-button when server is started
+    // Should be 1 since user foo is started
+    expect(userRows.at(0).find(".stop-button").length).toBe(1);
+    // Renders .start-button when server is stopped
+    // Should be 1 since user bar is stopped
+    expect(userRows.at(1).find(".start-button").length).toBe(1);
+  });
+
+  it("Invokes the startServer event on button click", () => {
+    let callbackSpy = mockAsync(),
+      component = shallow(serverDashboardJsx(callbackSpy)),
+      startBtn = component.find(".start-button");
+    startBtn.simulate("click");
+    expect(callbackSpy).toHaveBeenCalled();
+  });
+
+  it("Invokes the stopServer event on button click", () => {
+    let callbackSpy = mockAsync(),
+      component = shallow(serverDashboardJsx(callbackSpy)),
+      stopBtn = component.find(".stop-button");
+    stopBtn.simulate("click");
+    expect(callbackSpy).toHaveBeenCalled();
+  });
+
+  it("Invokes the shutdownHub event on button click", () => {
+    let callbackSpy = mockAsync(),
+      component = shallow(serverDashboardJsx(callbackSpy)),
+      shutdownBtn = component.find(".shutdown-button");
+    shutdownBtn.simulate("click");
+    expect(callbackSpy).toHaveBeenCalled();
+  });
+
+  it("Sorts according to username", () => {
+    let component = mount(deepServerDashboardJsx(jest.fn())).find(
+        "ServerDashboard"
+      ),
+      handler = component.find("SortHandler").first();
+    handler.simulate("click");
+    let first = component.find(".user-row").first();
+    expect(first.html().includes("bar")).toBe(true);
+    handler.simulate("click");
+    first = component.find(".user-row").first();
+    expect(first.html().includes("foo")).toBe(true);
+  });
+
+  it("Sorts according to admin", () => {
+    let component = mount(deepServerDashboardJsx(jest.fn())).find(
+        "ServerDashboard"
+      ),
+      handler = component.find("SortHandler").at(1);
+    handler.simulate("click");
+    let first = component.find(".user-row").first();
+    expect(first.html().includes("admin")).toBe(true);
+    handler.simulate("click");
+    first = component.find(".user-row").first();
+    expect(first.html().includes("admin")).toBe(false);
+  });
+
+  it("Sorts according to last activity", () => {
+    let component = mount(deepServerDashboardJsx(jest.fn())).find(
+        "ServerDashboard"
+      ),
+      handler = component.find("SortHandler").at(2);
+    handler.simulate("click");
+    let first = component.find(".user-row").first();
+    // foo used most recently
+    expect(first.html().includes("foo")).toBe(true);
+    handler.simulate("click");
+    first = component.find(".user-row").first();
+    // invert sort - bar used least recently
+    expect(first.html().includes("bar")).toBe(true);
+  });
+
+  it("Sorts according to server status (running/not running)", () => {
+    let component = mount(deepServerDashboardJsx(jest.fn())).find(
+        "ServerDashboard"
+      ),
+      handler = component.find("SortHandler").at(3);
+    handler.simulate("click");
+    let first = component.find(".user-row").first();
+    // foo running
+    expect(first.html().includes("foo")).toBe(true);
+    handler.simulate("click");
+    first = component.find(".user-row").first();
+    // invert sort - bar not running
+    expect(first.html().includes("bar")).toBe(true);
+  });
+
+  it("Renders nothing if required data is not available", () => {
+    let component = shallow(<ServerDashboard />);
+    expect(component.html()).toBe("<div></div>");
+  });
+});