Updated CreateGroup, EditUser to testing-library. Added tests

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 CreateGroup from "./CreateGroup";
-import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
+import "@testing-library/jest-dom";
+import { act } from "react-dom/test-utils";
+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
-
-Enzyme.configure({ adapter: new Adapter() });
+// eslint-disable-next-line
+import regeneratorRuntime from "regenerator-runtime"; 
+import CreateGroup from "./CreateGroup";
 
 jest.mock("react-redux", () => ({
   ...jest.requireActual("react-redux"),
@@ -15,52 +16,100 @@ jest.mock("react-redux", () => ({
   useSelector: jest.fn(),
 }));
 
-describe("CreateGroup Component: ", () => {
-  var mockAsync = (result) =>
-    jest.fn().mockImplementation(() => Promise.resolve(result));
+var mockAsync = (result) =>
+  jest.fn().mockImplementation(() => Promise.resolve(result));
 
-  var createGroupJsx = (callbackSpy) => (
-    <Provider store={createStore(() => {}, {})}>
-      <HashRouter>
-        <CreateGroup
-          createGroup={callbackSpy}
-          updateGroups={callbackSpy}
-          history={{ push: () => {} }}
-        />
-      </HashRouter>
-    </Provider>
-  );
+var mockAsyncRejection = () =>
+  jest.fn().mockImplementation(() => Promise.reject());
 
-  var mockAppState = () => ({
-    limit: 3,
+var createGroupJsx = (callbackSpy) => (
+  <Provider store={createStore(() => {}, {})}>
+    <HashRouter>
+      <CreateGroup
+        createGroup={callbackSpy}
+        updateGroups={callbackSpy}
+        history={{ push: () => {} }}
+      />
+    </HashRouter>
+  </Provider>
+);
+
+var mockAppState = () => ({
+  limit: 3,
+});
+
+beforeEach(() => {
+  useDispatch.mockImplementation(() => {
+    return () => () => {};
   });
-
-  beforeEach(() => {
-    useDispatch.mockImplementation(() => {
-      return () => () => {};
-    });
-    useSelector.mockImplementation((callback) => {
-      return callback(mockAppState());
-    });
-  });
-
-  afterEach(() => {
-    useDispatch.mockClear();
-  });
-
-  it("Renders", () => {
-    let component = mount(createGroupJsx());
-    expect(component.find(".container").length).toBe(1);
-  });
-
-  it("Calls createGroup on submit", () => {
-    let callbackSpy = mockAsync({ status: 200 }),
-      component = mount(createGroupJsx(callbackSpy)),
-      input = component.find("input").first(),
-      submit = component.find("#submit").first();
-    input.simulate("change", { target: { value: "" } });
-    submit.simulate("click");
-    expect(callbackSpy).toHaveBeenNthCalledWith(1, "");
-    expect(component.find(".alert.alert-danger").length).toBe(0);
+  useSelector.mockImplementation((callback) => {
+    return callback(mockAppState());
   });
 });
+
+afterEach(() => {
+  useDispatch.mockClear();
+});
+
+test("Renders", async () => {
+  await act(async () => {
+    render(createGroupJsx());
+  });
+  expect(screen.getByTestId("container")).toBeVisible();
+});
+
+test("Calls createGroup on submit", async () => {
+  let callbackSpy = mockAsync({ status: 200 });
+
+  await act(async () => {
+    render(createGroupJsx(callbackSpy));
+  });
+
+  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();
+});