Updated CreateGroup, EditUser to testing-library. Added tests

jsx/src/components/AddUser/AddUser.test.js

@@ -1,16 +1,16 @@
 import React from "react";
 import "@testing-library/jest-dom";
 import { act } from "react-dom/test-utils";
-import { render, screen, fireEvent } from '@testing-library/react'
+import { render, screen, fireEvent } from "@testing-library/react";
-import userEvent from '@testing-library/user-event'
+import userEvent from "@testing-library/user-event";
 import { Provider, useDispatch, useSelector } from "react-redux";
 import { createStore } from "redux";
 import { HashRouter } from "react-router-dom";
-
-import AddUser from "./AddUser";
 // eslint-disable-next-line
 import regeneratorRuntime from 'regenerator-runtime'
 
+import AddUser from "./AddUser";
+
 jest.mock("react-redux", () => ({
   ...jest.requireActual("react-redux"),
   useDispatch: jest.fn(),
@@ -18,11 +18,7 @@ jest.mock("react-redux", () => ({
 }));
 
 var mockAsync = (result) =>
-  jest
+  jest.fn().mockImplementation(() => Promise.resolve(result));
-    .fn()
-    .mockImplementation(() =>
-      Promise.resolve(result)
-    );
 
 var mockAsyncRejection = () =>
   jest.fn().mockImplementation(() => Promise.reject());
@@ -59,25 +55,25 @@ afterEach(() => {
 
 test("Renders", async () => {
   await act(async () => {
-    render(addUserJsx())
+    render(addUserJsx());
-  })
+  });
-  expect(screen.getByTestId("container")).toBeVisible()
+  expect(screen.getByTestId("container")).toBeVisible();
 });
 
 test("Removes users when they fail Regex", async () => {
   let callbackSpy = mockAsync();
 
   await act(async () => {
-    render(addUserJsx(callbackSpy))
+    render(addUserJsx(callbackSpy));
-  })
+  });
 
-  let textarea = screen.getByTestId("user-textarea")
+  let textarea = screen.getByTestId("user-textarea");
-  let submit = screen.getByTestId("submit")
+  let submit = screen.getByTestId("submit");
 
-  fireEvent.blur(textarea, { target: { value: "foo\nbar\n!!*&*" }})
+  fireEvent.blur(textarea, { target: { value: "foo\nbar\n!!*&*" } });
   await act(async () => {
-    fireEvent.click(submit)
+    fireEvent.click(submit);
-  })
+  });
 
   expect(callbackSpy).toHaveBeenCalledWith(["foo", "bar"], false);
 });
@@ -86,18 +82,18 @@ test("Correctly submits admin", async () => {
   let callbackSpy = mockAsync();
 
   await act(async () => {
-    render(addUserJsx(callbackSpy))
+    render(addUserJsx(callbackSpy));
-  })
+  });
 
-  let textarea = screen.getByTestId("user-textarea")
+  let textarea = screen.getByTestId("user-textarea");
-  let submit = screen.getByTestId("submit")
+  let submit = screen.getByTestId("submit");
-  let check = screen.getByTestId("check")
+  let check = screen.getByTestId("check");
 
-  userEvent.click(check)
+  userEvent.click(check);
-  fireEvent.blur(textarea, { target: { value: "foo" }})
+  fireEvent.blur(textarea, { target: { value: "foo" } });
   await act(async () => {
-    fireEvent.click(submit)
+    fireEvent.click(submit);
-  })
+  });
 
   expect(callbackSpy).toHaveBeenCalledWith(["foo"], true);
 });
@@ -106,36 +102,38 @@ test("Shows a UI error dialogue when user creation fails", async () => {
   let callbackSpy = mockAsyncRejection();
 
   await act(async () => {
-    render(addUserJsx(callbackSpy))
+    render(addUserJsx(callbackSpy));
-  })
+  });
 
-  let submit = screen.getByTestId("submit")
+  let submit = screen.getByTestId("submit");
 
   await act(async () => {
-    fireEvent.click(submit)
+    fireEvent.click(submit);
-  })
+  });
 
-  let errorDialog = screen.getByText("Failed to create user.")
+  let errorDialog = screen.getByText("Failed to create user.");
 
-  expect(errorDialog).toBeVisible()
+  expect(errorDialog).toBeVisible();
   expect(callbackSpy).toHaveBeenCalled();
 });
 
 test("Shows a more specific UI error dialogue when user creation returns an improper status code", async () => {
-  let callbackSpy = mockAsync({status: 409});
+  let callbackSpy = mockAsync({ status: 409 });
 
   await act(async () => {
-    render(addUserJsx(callbackSpy))
+    render(addUserJsx(callbackSpy));
-  })
+  });
 
-  let submit = screen.getByTestId("submit")
+  let submit = screen.getByTestId("submit");
 
   await act(async () => {
-    fireEvent.click(submit)
+    fireEvent.click(submit);
-  })
+  });
 
-  let errorDialog = screen.getByText("Failed to create user. User already exists.")
+  let errorDialog = screen.getByText(
+    "Failed to create user. User already exists."
+  );
 
-  expect(errorDialog).toBeVisible()
+  expect(errorDialog).toBeVisible();
   expect(callbackSpy).toHaveBeenCalled();
 });

jsx/src/components/CreateGroup/CreateGroup.jsx

@@ -24,7 +24,7 @@ const CreateGroup = (props) => {
 
   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">
@@ -53,6 +53,7 @@ const CreateGroup = (props) => {
                 <div className="input-group">
                   <input
                     className="group-name-input"
+                    data-testid="group-input"
                     type="text"
                     id="group-name"
                     value={groupName}
@@ -70,6 +71,7 @@ const CreateGroup = (props) => {
                 <span> </span>
                 <button
                   id="submit"
+                  data-testid="submit"
                   className="btn btn-primary"
                   onClick={() => {
                     createGroup(groupName)
@@ -89,7 +91,7 @@ const CreateGroup = (props) => {
                               }`
                             );
                       })
-                      .catch((err) => setErrorAlert(`Could not create group.`));
+                      .catch((err) => setErrorAlert(`Failed to create group.`));
                   }}
                 >
                   Create

jsx/src/components/CreateGroup/CreateGroup.test.js

@@ -1,13 +1,14 @@
 import React from "react";
-import Enzyme, { mount } from "enzyme";
+import "@testing-library/jest-dom";
-import CreateGroup from "./CreateGroup";
+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, useDispatch, useSelector } from "react-redux";
 import { createStore } from "redux";
 import { HashRouter } from "react-router-dom";
-import regeneratorRuntime from "regenerator-runtime"; // eslint-disable-line
+// eslint-disable-next-line
-
+import regeneratorRuntime from "regenerator-runtime"; 
-Enzyme.configure({ adapter: new Adapter() });
+import CreateGroup from "./CreateGroup";
 
 jest.mock("react-redux", () => ({
   ...jest.requireActual("react-redux"),
@@ -15,11 +16,13 @@ jest.mock("react-redux", () => ({
   useSelector: jest.fn(),
 }));
 
-describe("CreateGroup Component: ", () => {
+var mockAsync = (result) =>
-  var mockAsync = (result) =>
   jest.fn().mockImplementation(() => Promise.resolve(result));
 
-  var createGroupJsx = (callbackSpy) => (
+var mockAsyncRejection = () =>
+  jest.fn().mockImplementation(() => Promise.reject());
+
+var createGroupJsx = (callbackSpy) => (
   <Provider store={createStore(() => {}, {})}>
     <HashRouter>
       <CreateGroup
@@ -29,38 +32,84 @@ describe("CreateGroup Component: ", () => {
       />
     </HashRouter>
   </Provider>
-  );
+);
 
-  var mockAppState = () => ({
+var mockAppState = () => ({
   limit: 3,
-  });
+});
 
-  beforeEach(() => {
+beforeEach(() => {
   useDispatch.mockImplementation(() => {
     return () => () => {};
   });
   useSelector.mockImplementation((callback) => {
     return callback(mockAppState());
   });
-  });
+});
-
+
-  afterEach(() => {
+afterEach(() => {
-    useDispatch.mockClear();
+  useDispatch.mockClear();
-  });
+});
-
+
-  it("Renders", () => {
+test("Renders", async () => {
-    let component = mount(createGroupJsx());
+  await act(async () => {
-    expect(component.find(".container").length).toBe(1);
+    render(createGroupJsx());
-  });
+  });
-
+  expect(screen.getByTestId("container")).toBeVisible();
-  it("Calls createGroup on submit", () => {
+});
-    let callbackSpy = mockAsync({ status: 200 }),
+
-      component = mount(createGroupJsx(callbackSpy)),
+test("Calls createGroup on submit", async () => {
-      input = component.find("input").first(),
+  let callbackSpy = mockAsync({ status: 200 });
-      submit = component.find("#submit").first();
+
-    input.simulate("change", { target: { value: "" } });
+  await act(async () => {
-    submit.simulate("click");
+    render(createGroupJsx(callbackSpy));
-    expect(callbackSpy).toHaveBeenNthCalledWith(1, "");
+  });
-    expect(component.find(".alert.alert-danger").length).toBe(0);
+
-  });
+  let input = screen.getByTestId("group-input");
+  let submit = screen.getByTestId("submit");
+
+  userEvent.type(input, "groupname");
+  await act(async () => fireEvent.click(submit));
+
+  expect(callbackSpy).toHaveBeenNthCalledWith(1, "groupname");
+});
+
+test("Shows a UI error dialogue when group creation fails", async () => {
+  let callbackSpy = mockAsyncRejection();
+
+  await act(async () => {
+    render(createGroupJsx(callbackSpy));
+  });
+
+  let submit = screen.getByTestId("submit");
+
+  await act(async () => {
+    fireEvent.click(submit);
+  });
+
+  let errorDialog = screen.getByText("Failed to create group.");
+
+  expect(errorDialog).toBeVisible();
+  expect(callbackSpy).toHaveBeenCalled();
+});
+
+test("Shows a more specific UI error dialogue when user creation returns an improper status code", async () => {
+  let callbackSpy = mockAsync({ status: 409 });
+
+  await act(async () => {
+    render(createGroupJsx(callbackSpy));
+  });
+
+  let submit = screen.getByTestId("submit");
+
+  await act(async () => {
+    fireEvent.click(submit);
+  });
+
+  let errorDialog = screen.getByText(
+    "Failed to create group. Group already exists."
+  );
+
+  expect(errorDialog).toBeVisible();
+  expect(callbackSpy).toHaveBeenCalled();
 });

jsx/src/components/EditUser/EditUser.jsx

@@ -40,7 +40,7 @@ const EditUser = (props) => {
 
   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">
@@ -70,6 +70,7 @@ const EditUser = (props) => {
                   <div className="form-group">
                     <textarea
                       className="form-control"
+                      data-testid="edit-username-input"
                       id="exampleFormControlTextarea1"
                       rows="3"
                       placeholder="updated username"
@@ -90,8 +91,10 @@ const EditUser = (props) => {
                     <br></br>
                     <button
                       id="delete-user"
+                      data-testid="delete-user"
                       className="btn btn-danger btn-sm"
-                      onClick={() => {
+                      onClick={(e) => {
+                        e.preventDefault();
                         deleteUser(username)
                           .then((data) => {
                             data.status < 300
@@ -122,8 +125,10 @@ const EditUser = (props) => {
                 <span> </span>
                 <button
                   id="submit"
+                  data-testid="submit"
                   className="btn btn-primary"
-                  onClick={() => {
+                  onClick={(e) => {
+                    e.preventDefault();
                     if (updatedUsername == "" && admin == has_admin) {
                       noChangeEvent();
                       return;

jsx/src/components/EditUser/EditUser.test.js

@@ -1,12 +1,14 @@
 import React from "react";
-import Enzyme, { mount } from "enzyme";
+import "@testing-library/jest-dom";
-import EditUser from "./EditUser";
+import { act } from "react-dom/test-utils";
-import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
+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";
+// eslint-disable-next-line
+import regeneratorRuntime from 'regenerator-runtime'
 
-Enzyme.configure({ adapter: new Adapter() });
+import EditUser from "./EditUser";
 
 jest.mock("react-redux", () => ({
   ...jest.requireActual("react-redux"),
@@ -14,20 +16,17 @@ jest.mock("react-redux", () => ({
   useSelector: jest.fn(),
 }));
 
-describe("EditUser Component: ", () => {
+var mockAsync = (data) =>
-  var mockAsync = () =>
+  jest.fn().mockImplementation(() => Promise.resolve(data));
-    jest
-      .fn()
-      .mockImplementation(() => Promise.resolve({ key: "value", status: 200 }));
-  var mockSync = () => jest.fn();
 
-  var editUserJsx = (callbackSpy, empty) => (
+var mockAsyncRejection = () =>
+  jest.fn().mockImplementation(() => Promise.reject());
+
+var editUserJsx = (callbackSpy, empty) => (
   <Provider store={createStore(() => {}, {})}>
     <HashRouter>
       <EditUser
-          location={
+        location={empty ? {} : { state: { username: "foo", has_admin: false } }}
-            empty ? {} : { state: { username: "foo", has_admin: false } }
-          }
         deleteUser={callbackSpy}
         editUser={callbackSpy}
         updateUsers={callbackSpy}
@@ -37,44 +36,104 @@ describe("EditUser Component: ", () => {
       />
     </HashRouter>
   </Provider>
-  );
+);
 
-  var mockAppState = () => ({
+var mockAppState = () => ({
   limit: 3,
-  });
+});
 
-  beforeEach(() => {
+beforeEach(() => {
   useDispatch.mockImplementation(() => {
     return () => {};
   });
   useSelector.mockImplementation((callback) => {
     return callback(mockAppState());
   });
-  });
+});
-
+
-  afterEach(() => {
+afterEach(() => {
-    useDispatch.mockClear();
+  useDispatch.mockClear();
-  });
+});
-
+
-  it("Calls the delete user function when the button is pressed", () => {
+test("Renders", async () => {
-    let callbackSpy = mockAsync(),
+  let callbackSpy = mockAsync({ key: "value", status: 200 });
-      component = mount(editUserJsx(callbackSpy)),
+
-      deleteUser = component.find("#delete-user");
+  await act(async () => {
-    deleteUser.simulate("click");
+    render(editUserJsx(callbackSpy));
-    expect(callbackSpy).toHaveBeenCalled();
+  });
-  });
+
-
+  expect(screen.getByTestId("container")).toBeVisible();
-  it("Submits the edits when the button is pressed", () => {
+});
-    let callbackSpy = mockSync(),
+
-      component = mount(editUserJsx(callbackSpy)),
+test("Calls the delete user function when the button is pressed", async () => {
-      submit = component.find("#submit");
+  let callbackSpy = mockAsync({ key: "value", status: 200 });
-    submit.simulate("click");
+
-    expect(callbackSpy).toHaveBeenCalled();
+  await act(async () => {
-  });
+    render(editUserJsx(callbackSpy));
-
+  });
-  it("Doesn't render when no data is provided", () => {
+
-    let callbackSpy = mockSync(),
+  let deleteUser = screen.getByTestId("delete-user");
-      component = mount(editUserJsx(callbackSpy, true));
+
-    expect(component.find(".container").length).toBe(0);
+  await act(async () => {
-  });
+    fireEvent.click(deleteUser);
+  });
+
+  expect(callbackSpy).toHaveBeenCalled();
+});
+
+test("Submits the edits when the button is pressed", async () => {
+  let callbackSpy = mockAsync({ key: "value", status: 200 });
+
+  await act(async () => {
+    render(editUserJsx(callbackSpy));
+  });
+
+  let submit = screen.getByTestId("submit");
+  await act(async () => {
+    fireEvent.click(submit);
+  });
+
+  expect(callbackSpy).toHaveBeenCalled();
+});
+
+test("Shows a UI error dialogue when user edit fails", async () => {
+  let callbackSpy = mockAsyncRejection();
+
+  await act(async () => {
+    render(editUserJsx(callbackSpy));
+  });
+
+  let submit = screen.getByTestId("submit");
+  let usernameInput = screen.getByTestId("edit-username-input");
+
+  fireEvent.blur(usernameInput, { target: { value: "whatever" } });
+  await act(async () => {
+    fireEvent.click(submit);
+  });
+
+  let errorDialog = screen.getByText("Failed to edit user.");
+
+  expect(errorDialog).toBeVisible();
+  expect(callbackSpy).toHaveBeenCalled();
+});
+
+test("Shows a UI error dialogue when user edit returns an improper status code", async () => {
+  let callbackSpy = mockAsync({ status: 409 });
+
+  await act(async () => {
+    render(editUserJsx(callbackSpy));
+  });
+
+  let submit = screen.getByTestId("submit");
+  let usernameInput = screen.getByTestId("edit-username-input");
+
+  fireEvent.blur(usernameInput, { target: { value: "whatever" } });
+  await act(async () => {
+    fireEvent.click(submit);
+  });
+
+  let errorDialog = screen.getByText("Failed to edit user.");
+
+  expect(errorDialog).toBeVisible();
+  expect(callbackSpy).toHaveBeenCalled();
 });