Update unit tests to spec

jsx/src/App.jsx

@@ -19,34 +19,6 @@ import "./style/root.css";
 const store = createStore(reducers, initialState);
 
 const App = () => {
-  // useEffect(() => {
-  //   let { limit, user_page, groups_page } = initialState;
-  //   let api = withAPI()().props;
-  //   api
-  //     .updateUsers(user_page * limit, limit)
-  //     .then((data) => {
-  //       console.log(data);
-  //       let { _pagination, items } = data;
-  //       store.dispatch({
-  //         type: "USER_PAGE",
-  //         value: { data: items, page: _pagination },
-  //       });
-  //     })
-  //     .catch((err) => console.log(err));
-
-  //   api
-  //     .updateGroups(groups_page * limit, limit)
-  //     .then((data) => {
-  //       console.log(data);
-  //       let { _pagination, items } = data;
-  //       store.dispatch({
-  //         type: "GROUPS_PAGE",
-  //         value: { data: items, page: _pagination },
-  //       });
-  //     })
-  //     .catch((err) => console.log(err));
-  // });
-
   return (
     <div className="resets">
       <Provider store={store}>

jsx/src/components/GroupEdit/GroupEdit.jsx

@@ -122,7 +122,6 @@ const GroupEdit = (props) => {
                     : setErrorAlert(`Failed to edit group.`);
                 })
                 .catch(() => {
-                  console.log("outer");
                   setErrorAlert(`Failed to edit group.`);
                 });
             }}

jsx/src/components/Groups/Groups.jsx

@@ -16,8 +16,6 @@ const Groups = (props) => {
 
   var { updateGroups, history } = props;
 
-  console.log(groups_data, groups_page);
-
   const dispatchPageUpdate = (data, page) => {
     dispatch({
       type: "GROUPS_PAGE",

jsx/src/components/Groups/Groups.test.js

@@ -1,7 +1,7 @@
 import React from "react";
 import "@testing-library/jest-dom";
 import { act } from "react-dom/test-utils";
-import { render, screen } from "@testing-library/react";
+import { render, screen, fireEvent } from "@testing-library/react";
 import { Provider, useDispatch, useSelector } from "react-redux";
 import { createStore } from "redux";
 import { HashRouter } from "react-router-dom";
@@ -28,13 +28,19 @@ var groupsJsx = (callbackSpy) => (
 );
 
 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":{}}]'
-  ),
   groups_data: JSON.parse(
     '[{"kind":"group","name":"testgroup","users":[]}, {"kind":"group","name":"testgroup2","users":["foo", "bar"]}]'
   ),
-  limit: 10,
+  groups_page: {
+    offset: 0,
+    limit: 2,
+    total: 4,
+    next: {
+      offset: 2,
+      limit: 2,
+      url: "http://localhost:8000/hub/api/groups?offset=2&limit=2",
+    },
+  },
 });
 
 beforeEach(() => {
@@ -88,3 +94,18 @@ test("Renders nothing if required data is not available", async () => {
   let noShow = screen.getByTestId("no-show");
   expect(noShow).toBeVisible();
 });
+
+test("Interacting with PaginationFooter causes state update and refresh via useEffect call", async () => {
+  let callbackSpy = mockAsync();
+
+  await act(async () => {
+    render(groupsJsx(callbackSpy));
+  });
+
+  expect(callbackSpy).toBeCalledWith(0, 2);
+
+  let next = screen.getByTestId("paginate-next");
+  fireEvent.click(next);
+
+  expect(callbackSpy).toHaveBeenCalledWith(2, 2);
+});

jsx/src/components/PaginationFooter/PaginationFooter.jsx

@@ -13,7 +13,11 @@ const PaginationFooter = (props) => {
         <br></br>
         {offset >= limit ? (
           <button className="btn btn-sm btn-light spaced">
-            <span className="active-pagination" onClick={prev}>
+            <span
+              className="active-pagination"
+              data-testid="paginate-prev"
+              onClick={prev}
+            >
               Previous
             </span>
           </button>
@@ -24,7 +28,11 @@ const PaginationFooter = (props) => {
         )}
         {offset + visible < total ? (
           <button className="btn btn-sm btn-light spaced">
-            <span className="active-pagination" onClick={next}>
+            <span
+              className="active-pagination"
+              data-testid="paginate-next"
+              onClick={next}
+            >
               Next
             </span>
           </button>

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

@@ -46,6 +46,16 @@ 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":{}}]'
   ),
+  user_page: {
+    offset: 0,
+    limit: 2,
+    total: 4,
+    next: {
+      offset: 2,
+      limit: 2,
+      url: "http://localhost:8000/hub/api/groups?offset=2&limit=2",
+    },
+  },
 });
 
 beforeEach(() => {
@@ -533,3 +543,18 @@ test("Search for user calls updateUsers with name filter", async () => {
   expect(mockUpdateUsers.mock.calls[2][2]).toEqual("ab");
   expect(mockUpdateUsers.mock.calls).toHaveLength(3);
 });
+
+test("Interacting with PaginationFooter causes state update and refresh via useEffect call", async () => {
+  let callbackSpy = mockAsync();
+
+  await act(async () => {
+    render(serverDashboardJsx(callbackSpy));
+  });
+
+  expect(callbackSpy).toBeCalledWith(0, 2, undefined);
+
+  let next = screen.getByTestId("paginate-next");
+  fireEvent.click(next);
+
+  expect(callbackSpy).toHaveBeenCalledWith(2, 2, undefined);
+});