Updated GroupEdit to testing-library. Added tests

jsx/src/components/GroupEdit/GroupEdit.jsx

@@ -42,7 +42,7 @@ const GroupEdit = (props) => {
   if (!group_data) return <div></div>;
 
   return (
-    <div className="container">
+    <div className="container" data-testid="container">
       {errorAlert != null ? (
         <div className="row">
           <div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
@@ -84,6 +84,7 @@ const GroupEdit = (props) => {
           <span> </span>
           <button
             id="submit"
+            data-testid="submit"
             className="btn btn-primary"
             onClick={() => {
               // check for changes
@@ -108,31 +109,35 @@ const GroupEdit = (props) => {
                 );
 
               Promise.all(promiseQueue)
-                // TODO add error if res not ok
+                .then((data) => {
-                .then(() => {
+                  data.status < 300
-                  updateGroups(0, limit)
+                    ? updateGroups(0, limit)
-                    .then((data) => dispatchPageUpdate(data, 0))
+                        .then((data) => dispatchPageUpdate(data, 0))
-                    .then(() => history.push("/groups"));
+                        .then(() => history.push("/groups"))
+                    : setErrorAlert(`Failed to edit group.`);
                 })
-                .catch((err) => setErrorAlert(`Could not edit group.`));
+                .catch((err) => setErrorAlert(`Failed to edit group.`));
             }}
           >
             Apply
           </button>
           <button
             id="delete-group"
+            data-testid="delete-group"
             className="btn btn-danger"
             style={{ float: "right" }}
             onClick={() => {
               var groupName = group_data.name;
               deleteGroup(groupName)
                 // TODO add error if res not ok
-                .then(() => {
+                .then((data) => {
-                  updateGroups(0, limit)
+                  data.status < 300
-                    .then((data) => dispatchPageUpdate(data, 0))
+                    ? updateGroups(0, limit)
-                    .then(() => history.push("/groups"));
+                        .then((data) => dispatchPageUpdate(data, 0))
+                        .then(() => history.push("/groups"))
+                    : setErrorAlert(`Failed to delete group.`);
                 })
-                .catch((err) => setErrorAlert(`Could not delete group.`));
+                .catch((err) => setErrorAlert(`Failed to delete group.`));
             }}
           >
             Delete Group

jsx/src/components/GroupEdit/GroupEdit.test.jsx

@@ -1,100 +1,228 @@
 import React from "react";
-import Enzyme, { mount } from "enzyme";
+import "@testing-library/jest-dom";
-import GroupEdit from "./GroupEdit";
+import { act } from "react-dom/test-utils";
-import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
+import { render, screen, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { Provider, useSelector } from "react-redux";
 import { createStore } from "redux";
 import { HashRouter } from "react-router-dom";
-import { act } from "react-dom/test-utils";
+// eslint-disable-next-line
-import regeneratorRuntime from "regenerator-runtime"; // eslint-disable-line
+import regeneratorRuntime from "regenerator-runtime"; 
 
-Enzyme.configure({ adapter: new Adapter() });
+import GroupEdit from "./GroupEdit";
 
 jest.mock("react-redux", () => ({
   ...jest.requireActual("react-redux"),
   useSelector: jest.fn(),
 }));
 
-describe("GroupEdit Component: ", () => {
+var mockAsync = (data) =>
-  var mockAsync = () => jest.fn().mockImplementation(() => Promise.resolve());
+  jest.fn().mockImplementation(() => Promise.resolve(data));
 
-  var okPacket = new Promise((resolve) => resolve(true));
+var mockAsyncRejection = () =>
+  jest.fn().mockImplementation(() => Promise.reject());
 
-  var groupEditJsx = (callbackSpy) => (
+var okPacket = new Promise((resolve) => resolve(true));
-    <Provider store={createStore(() => {}, {})}>
-      <HashRouter>
-        <GroupEdit
-          location={{
-            state: {
-              group_data: { users: ["foo"], name: "group" },
-              callback: () => {},
-            },
-          }}
-          addToGroup={callbackSpy}
-          removeFromGroup={callbackSpy}
-          deleteGroup={callbackSpy}
-          history={{ push: () => callbackSpy }}
-          updateGroups={callbackSpy}
-          validateUser={jest.fn().mockImplementation(() => okPacket)}
-        />
-      </HashRouter>
-    </Provider>
-  );
 
-  var mockAppState = () => ({
+var groupEditJsx = (callbackSpy) => (
-    limit: 3,
+  <Provider store={createStore(() => {}, {})}>
-  });
+    <HashRouter>
+      <GroupEdit
+        location={{
+          state: {
+            group_data: { users: ["foo"], name: "group" },
+            callback: () => {},
+          },
+        }}
+        addToGroup={callbackSpy}
+        removeFromGroup={callbackSpy}
+        deleteGroup={callbackSpy}
+        history={{ push: () => callbackSpy }}
+        updateGroups={callbackSpy}
+        validateUser={jest.fn().mockImplementation(() => okPacket)}
+      />
+    </HashRouter>
+  </Provider>
+);
 
-  beforeEach(() => {
+var mockAppState = () => ({
-    useSelector.mockImplementation((callback) => {
+  limit: 3,
-      return callback(mockAppState());
+});
-    });
-  });
 
-  afterEach(() => {
+beforeEach(() => {
-    useSelector.mockClear();
+  useSelector.mockImplementation((callback) => {
-  });
+    return callback(mockAppState());
-
-  it("Adds user from input to user selectables on button click", async () => {
-    let callbackSpy = mockAsync(),
-      component = mount(groupEditJsx(callbackSpy)),
-      input = component.find("#username-input"),
-      validateUser = component.find("#validate-user"),
-      submit = component.find("#submit");
-
-    input.simulate("change", { target: { value: "bar" } });
-    validateUser.simulate("click");
-    await act(() => okPacket);
-    submit.simulate("click");
-    expect(callbackSpy).toHaveBeenNthCalledWith(1, ["bar"], "group");
-  });
-
-  it("Removes a user recently added from input from the selectables list", () => {
-    let callbackSpy = mockAsync(),
-      component = mount(groupEditJsx(callbackSpy)),
-      unsubmittedUser = component.find(".item.selected").last();
-    unsubmittedUser.simulate("click");
-    expect(component.find(".item").length).toBe(1);
-  });
-
-  it("Grays out a user, already in the group, when unselected and calls deleteUser on submit", () => {
-    let callbackSpy = mockAsync(),
-      component = mount(groupEditJsx(callbackSpy)),
-      groupUser = component.find(".item.selected").first();
-    groupUser.simulate("click");
-    expect(component.find(".item.unselected").length).toBe(1);
-    expect(component.find(".item").length).toBe(1);
-    // test deleteUser call
-    let submit = component.find("#submit");
-    submit.simulate("click");
-    expect(callbackSpy).toHaveBeenNthCalledWith(1, ["foo"], "group");
-  });
-
-  it("Calls deleteGroup on button click", () => {
-    let callbackSpy = mockAsync(),
-      component = mount(groupEditJsx(callbackSpy)),
-      deleteGroup = component.find("#delete-group").first();
-    deleteGroup.simulate("click");
-    expect(callbackSpy).toHaveBeenNthCalledWith(1, "group");
   });
 });
+
+afterEach(() => {
+  useSelector.mockClear();
+});
+
+test("Renders", async () => {
+  let callbackSpy = mockAsync();
+
+  await act(async () => {
+    render(groupEditJsx(callbackSpy));
+  });
+
+  expect(screen.getByTestId("container")).toBeVisible();
+});
+
+test("Adds user from input to user selectables on button click", async () => {
+  let callbackSpy = mockAsync();
+
+  await act(async () => {
+    render(groupEditJsx(callbackSpy));
+  });
+
+  let input = screen.getByTestId("username-input");
+  let validateUser = screen.getByTestId("validate-user");
+  let submit = screen.getByTestId("submit");
+
+  userEvent.type(input, "bar");
+  fireEvent.click(validateUser);
+  await act(async () => okPacket);
+
+  await act(async () => {
+    fireEvent.click(submit);
+  });
+
+  expect(callbackSpy).toHaveBeenNthCalledWith(1, ["bar"], "group");
+});
+
+test("Removes a user recently added from input from the selectables list", async () => {
+  let callbackSpy = mockAsync();
+
+  await act(async () => {
+    render(groupEditJsx(callbackSpy));
+  });
+
+  let selectedUser = screen.getByText("foo");
+  fireEvent.click(selectedUser);
+
+  let unselectedUser = screen.getByText("foo");
+
+  expect(unselectedUser.className).toBe("item unselected");
+});
+
+test("Grays out a user, already in the group, when unselected and calls deleteUser on submit", async () => {
+  let callbackSpy = mockAsync();
+
+  await act(async () => {
+    render(groupEditJsx(callbackSpy));
+  });
+
+  let submit = screen.getByTestId("submit");
+
+  let groupUser = screen.getByText("foo");
+  fireEvent.click(groupUser);
+
+  let unselectedUser = screen.getByText("foo");
+  expect(unselectedUser.className).toBe("item unselected");
+
+  // test deleteUser call
+  await act(async () => {
+    fireEvent.click(submit);
+  });
+
+  expect(callbackSpy).toHaveBeenNthCalledWith(1, ["foo"], "group");
+});
+
+test("Calls deleteGroup on button click", async () => {
+  let callbackSpy = mockAsync();
+
+  await act(async () => {
+    render(groupEditJsx(callbackSpy));
+  });
+
+  let deleteGroup = screen.getByTestId("delete-group");
+
+  await act(async () => {
+    fireEvent.click(deleteGroup);
+  });
+
+  expect(callbackSpy).toHaveBeenNthCalledWith(1, "group");
+});
+
+test("Shows a UI error dialogue when group edit fails", async () => {
+  let callbackSpy = mockAsyncRejection();
+
+  await act(async () => {
+    render(groupEditJsx(callbackSpy));
+  });
+
+  let groupUser = screen.getByText("foo");
+  fireEvent.click(groupUser);
+
+  let submit = screen.getByTestId("submit");
+
+  await act(async () => {
+    fireEvent.click(submit);
+  });
+
+  let errorDialog = screen.getByText("Failed to edit group.");
+
+  expect(errorDialog).toBeVisible();
+  expect(callbackSpy).toHaveBeenCalled();
+});
+
+test("Shows a UI error dialogue when group edit returns an improper status code", async () => {
+  let callbackSpy = mockAsync({ status: 403 });
+
+  await act(async () => {
+    render(groupEditJsx(callbackSpy));
+  });
+
+  let groupUser = screen.getByText("foo");
+  fireEvent.click(groupUser);
+
+  let submit = screen.getByTestId("submit");
+
+  await act(async () => {
+    fireEvent.click(submit);
+  });
+
+  let errorDialog = screen.getByText("Failed to edit group.");
+
+  expect(errorDialog).toBeVisible();
+  expect(callbackSpy).toHaveBeenCalled();
+});
+
+test("Shows a UI error dialogue when group delete fails", async () => {
+  let callbackSpy = mockAsyncRejection();
+
+  await act(async () => {
+    render(groupEditJsx(callbackSpy));
+  });
+
+  let deleteGroup = screen.getByTestId("delete-group");
+
+  await act(async () => {
+    fireEvent.click(deleteGroup);
+  });
+
+  let errorDialog = screen.getByText("Failed to delete group.");
+
+  expect(errorDialog).toBeVisible();
+  expect(callbackSpy).toHaveBeenCalled();
+});
+
+test("Shows a UI error dialogue when group delete returns an improper status code", async () => {
+  let callbackSpy = mockAsync({ status: 403 });
+
+  await act(async () => {
+    render(groupEditJsx(callbackSpy));
+  });
+
+  let deleteGroup = screen.getByTestId("delete-group");
+
+  await act(async () => {
+    fireEvent.click(deleteGroup);
+  });
+
+  let errorDialog = screen.getByText("Failed to delete group.");
+
+  expect(errorDialog).toBeVisible();
+  expect(callbackSpy).toHaveBeenCalled();
+});

jsx/src/components/GroupSelect/GroupSelect.jsx

@@ -24,6 +24,7 @@ const GroupSelect = (props) => {
         <div className="input-group">
           <input
             id="username-input"
+            data-testid="username-input"
             type="text"
             className="form-control"
             placeholder="Add by username"
@@ -35,6 +36,7 @@ const GroupSelect = (props) => {
           <span className="input-group-btn">
             <button
               id="validate-user"
+              data-testid="validate-user"
               className="btn btn-default"
               type="button"
               onClick={() => {