Reconfigure tests to work with hook approach

jsx/package.json

@@ -45,6 +45,7 @@
     "react-redux": "^7.2.2",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
+    "react-testing-library": "^8.0.1",
     "recompose": "^0.30.0",
     "redux": "^4.0.5",
     "style-loader": "^2.0.0",

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

@@ -18,39 +18,28 @@ describe("AddUser Component: ", () => {
     />
   );
 
-  it("Updates state.users on textbox blur", () => {
+  it("Renders", () => {
-    let component = shallow(addUserJsx(mockAsync())),
+    let component = shallow(addUserJsx(mockAsync()))
-      textarea = component.find("textarea");
+    expect(component.find(".container").length).toBe(1)
-    textarea.simulate("blur", { target: { value: "foo" } });
+  })
-    expect(JSON.stringify(component.state("users"))).toBe('["foo"]');
-  });
 
-  it("Can separate newline spaced names into an array", () => {
+  it("Removes users when they fail Regex", () => {
-    let component = shallow(addUserJsx(mockAsync())),
+    let callbackSpy = mockAsync(),
-      textarea = component.find("textarea");
+      component = shallow(addUserJsx(callbackSpy)),
-    textarea.simulate("blur", { target: { value: "foo\nbar\nsoforth" } });
+      textarea = component.find("textarea").first()
-    expect(JSON.stringify(component.state("users"))).toBe(
+    textarea.simulate("blur", { target: { value: "foo\nbar\n!!*&*"}})
-      '["foo","bar","soforth"]'
+    let submit = component.find("#submit")
-    );
+    submit.simulate("click")
-  });
+    expect(callbackSpy).toHaveBeenCalledWith(["foo", "bar"], false)
+  })
 
-  it("Deliminates names with special / less than 3 characters", () => {
+  it("Correctly submits admin", () => {
-    let component = shallow(addUserJsx(mockAsync())),
+    let callbackSpy = mockAsync(),
-      textarea = component.find("textarea"),
+      component = shallow(addUserJsx(callbackSpy)),
-      submit = component.find("#submit");
+      input = component.find("input").first()
-    textarea.simulate("blur", {
+    input.simulate("change", { target: { checked: true }})
-      target: { value: "foo\nbar\nb%%%\n$andy\nhalfdecent" },
+    let submit = component.find("#submit")
-    });
+    submit.simulate("click")
-    submit.simulate("click");
+    expect(callbackSpy).toHaveBeenCalledWith([], true)
-    expect(JSON.stringify(component.state("users"))).toBe(
+  })
-      '["foo","bar","halfdecent"]'
-    );
-  });
-
-  it("Recognizes admin user selection", () => {
-    let component = shallow(addUserJsx(mockAsync())),
-      admin = component.find("#admin-check");
-    admin.simulate("change", { target: { checked: true } });
-    expect(component.state("admin")).toBe(true);
-  });
 });

jsx/src/components/CreateGroup/CreateGroup.pre.jsx

@@ -21,8 +21,8 @@ const CreateGroup = (props) => {
                   <input
                     className="group-name-input"
                     type="text"
-                    value={groupName}
                     id="group-name"
+                    value={groupName}
                     placeholder="group name..."
                     onChange={(e) => {
                       setGroupName(e.target.value);

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

@@ -0,0 +1,34 @@
+import React from "react";
+import Enzyme, { mount, shallow } from "enzyme";
+import CreateGroup from "./CreateGroup.pre";
+import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe("CreateGroup Component: ", () => {
+  var mockAsync = () =>
+    jest.fn().mockImplementation(() => Promise.resolve({ key: "value" }));
+
+  var createGroupJsx = (callbackSpy) => 
+    <CreateGroup
+      createGroup={callbackSpy}
+      refreshGroupsData={callbackSpy}
+      history={{push: () => {}}}
+    />
+
+  it("Renders", () => {
+    let component = shallow(createGroupJsx())
+    expect(component.find(".container").length).toBe(1)
+  })
+
+  it("Calls createGroup and refreshGroupsData on submit", () => {
+    let callbackSpy = mockAsync(),
+      component = shallow(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(callbackSpy).toHaveBeenNthCalledWith(2)
+  })
+})

jsx/src/components/EditUser/EditUser.js

@@ -14,6 +14,9 @@ const withUserAPI = withProps((props) => ({
     alert(
       "Cannot change username - either contains special characters or is too short."
     ),
+  noChangeEvent: () => {
+    returns
+  },
   refreshUserData: () =>
     jhapiRequest("/users", "GET")
       .then((data) => data.json())

jsx/src/components/EditUser/EditUser.pre.jsx

@@ -7,6 +7,7 @@ const EditUser = (props) => {
     editUser,
     deleteUser,
     failRegexEvent,
+    noChangeEvent,
     refreshUserData,
     history,
   } = props;
@@ -80,6 +81,7 @@ const EditUser = (props) => {
                   className="btn btn-primary"
                   onClick={() => {
                     if (updatedUsername == "" && admin == has_admin) {
+                      noChangeEvent()
                       return;
                     } else if (updatedUsername != "") {
                       if (

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

@@ -18,31 +18,10 @@ describe("EditUser Component: ", () => {
       refreshUserData={mockSync()}
       history={{ push: (a) => {} }}
       failRegexEvent={callbackSpy}
+      noChangeEvent={callbackSpy}
     />
   );
 
-  it("Updates the state whenever a key is pressed on the textarea", () => {
-    let component = shallow(editUserJsx(mockAsync())),
-      textarea = component.find("textarea");
-    textarea.simulate("keydown", { target: { value: "test" } });
-    expect(component.state("updated_username")).toBe("test");
-  });
-
-  it("Updates the state whenever the admin box changes", () => {
-    let component = shallow(editUserJsx(mockAsync())),
-      admin = component.find("#admin-check");
-    admin.simulate("change", { target: { checked: true } });
-    expect(component.state("admin")).toBe(true);
-  });
-
-  it("Delimits the input from the textarea", () => {
-    let component = shallow(editUserJsx(mockAsync())),
-      submit = component.find("#submit");
-    component.setState({ updated_username: "%!@$#&" });
-    submit.simulate("click");
-    expect(component.state("updated_username")).toBe("");
-  });
-
   it("Calls the delete user function when the button is pressed", () => {
     let callbackSpy = mockAsync(),
       component = shallow(editUserJsx(callbackSpy)),
@@ -52,11 +31,9 @@ describe("EditUser Component: ", () => {
   });
 
   it("Submits the edits when the button is pressed", () => {
-    let callbackSpy = mockAsync(),
+    let callbackSpy = mockSync(),
       component = shallow(editUserJsx(callbackSpy)),
-      submit = component.find("#submit"),
+      submit = component.find("#submit");
-      textarea = component.find("textarea");
-    textarea.simulate("keydown", { target: { value: "test" } });
     submit.simulate("click");
     expect(callbackSpy).toHaveBeenCalled();
   });

jsx/src/components/GroupEdit/GroupEdit.pre.jsx

@@ -85,6 +85,7 @@ const GroupEdit = (props) => {
             Apply
           </button>
           <button
+            id="delete-group"
             className="btn btn-danger"
             style={{ float: "right" }}
             onClick={() => {

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

@@ -1,32 +1,62 @@
 import React from "react";
-import Enzyme, { shallow } from "enzyme";
+import Enzyme, { mount, shallow } from "enzyme";
 import GroupEdit from "./GroupEdit.pre";
 import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
+import { HashRouter } from 'react-router-dom'
 
 Enzyme.configure({ adapter: new Adapter() });
 
 describe("GroupEdit Component: ", () => {
-  var groupEditJsx = () => (
+  var mockAsync = () =>
+    jest.fn().mockImplementation(() => Promise.resolve({ key: "value" }));
+
+  var groupEditJsx = (callbackSpy) => 
     <GroupEdit
       location={{
         state: {
           user_data: [{ name: "foo" }, { name: "bar" }],
-          group_data: { users: ["foo"] },
+          group_data: { users: ["foo"], name: "group" },
           callback: () => {},
         },
       }}
-      addToGroup={() => {}}
+      addToGroup={callbackSpy}
-      removeFromGroup={() => {}}
+      removeFromGroup={callbackSpy}
-      history={{ push: (a) => {} }}
+      deleteGroup={callbackSpy}
+      history={{ push: (a) => callbackSpy }}
+      refreshGroupsData={() => {}}
     />
+  
+  var deepGroupEditJsx = (callbackSpy) => (
+    <HashRouter>
+      {groupEditJsx(callbackSpy)}
+    </HashRouter>
   );
 
-  it("Can cleanly separate added and removed users", () => {
+  it("Adds a newly selected user to group on submit", () => {
-    let component = shallow(groupEditJsx()),
+    let callbackSpy = mockAsync(),
-      submit = component.find("#submit");
+      component = mount(deepGroupEditJsx(callbackSpy)),
-    component.setState({ selected: ["bar"], changed: true });
+      unselected = component.find(".unselected"),
-    submit.simulate("click");
+      submit = component.find("#submit")
-    expect(component.state("added")[0]).toBe("bar");
+    unselected.simulate("click")
-    expect(component.state("removed")[0]).toBe("foo");
+    submit.simulate("click")
-  });
+    expect(callbackSpy).toHaveBeenCalledWith(['bar'], "group")
+  })
+
+  it("Removes a user from group on submit", () => {
+    let callbackSpy = mockAsync(),
+      component = mount(deepGroupEditJsx(callbackSpy)),
+      selected = component.find(".selected"),
+      submit = component.find("#submit")
+    selected.simulate("click")
+    submit.simulate("click")
+    expect(callbackSpy).toHaveBeenCalledWith(['foo'], "group")
+  })
+
+  it("Calls deleteGroup on button click", () => {
+    let callbackSpy = mockAsync(),
+      component = shallow(groupEditJsx(callbackSpy)),
+      deleteGroup = component.find("#delete-group").first()
+    deleteGroup.simulate("click")
+    expect(callbackSpy).toHaveBeenCalled()
+  })
 });

jsx/src/components/Multiselect/Multiselect.test.js

@@ -8,7 +8,7 @@ Enzyme.configure({ adapter: new Adapter() });
 describe("Multiselect Component: ", () => {
   var multiselectJsx = () => (
     <Multiselect
-      options={["foo", "bar", "wombat"]}
+      options={["foo", "bar", "wombat"]}s
       value={["wombat"]}
       onChange={() => {}}
     />
@@ -16,22 +16,22 @@ describe("Multiselect Component: ", () => {
 
   it("Renders with initial value selected", () => {
     let component = shallow(multiselectJsx()),
-      selected = component.state("selected");
+      selected = component.find(".item.selected").first();
-    expect(selected.length == 1 && selected[0] == "wombat").toBe(true);
+    expect(selected.text()).toBe("wombat");
   });
 
   it("Deselects a value when div.item.selected is clicked", () => {
     let component = shallow(multiselectJsx()),
       selected = component.find(".item.selected").first();
     selected.simulate("click");
-    expect(component.state("selected").length).toBe(0);
+    expect(component.find(".item.selected").length).toBe(0);
   });
 
   it("Selects a an option when div.item.unselected is clicked", () => {
     let component = shallow(multiselectJsx()),
       unselected = component.find(".item.unselected").first();
     unselected.simulate("click");
-    expect(component.state("selected").length).toBe(2);
+    expect(component.find(".item.selected").length).toBe(2);
   });
 
   it("Triggers callback on any sort of change", () => {

jsx/yarn.lock

@@ -6252,6 +6252,11 @@ react-test-renderer@^17.0.0, react-test-renderer@^17.0.1:
     react-shallow-renderer "^16.13.1"
     scheduler "^0.20.1"
 
+react-testing-library@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/react-testing-library/-/react-testing-library-8.0.1.tgz#b3dd43bce3fa88423cf0a23292fb819023c227cc"
+  integrity sha512-Gq4JC9r3prA4hYwo7afcbHHMFckO29+5Nrh2KblAEPuK/DWaU0bJE1vtpAgLhzhY9bBirmcgjjIHljHEwGAXKw==
+
 react-transition-group@^4.4.1:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"