added tests

.eslintrc.json

@@ -3,7 +3,8 @@
         "browser": true,
         "commonjs": true,
         "es6": true,
-        "node": true
+        "node": true,
+        "jest": true
     },
     "plugins": ["react"],
     "extends": ["eslint:recommended", "plugin:react/recommended"],

src/app.js

@@ -109,9 +109,11 @@ export default class App extends React.Component {
                                             birthday={this.state.birthday}
                                             gender={this.state.gender}
                                             seeking={this.state.seeking}
-                                            interests={this.state.interests}
-                                            symptoms={this.state.symptoms}
-                                            about={this.state.about}
+                                            interests={
+                                                this.state.interests || []
+                                            }
+                                            symptoms={this.state.symptoms || []}
+                                            about={this.state.about || ""}
                                             setProfile={userData =>
                                                 this.setProfile(userData)
                                             }

src/other-profile.js

@@ -30,7 +30,7 @@ export default class OtherProfile extends React.Component {
                     {
                         first: first,
                         last: last,
-                        imgUrl: imgUrl,
+                        imgUrl: imgUrl || "/default.png",
                         birthday: birthday,
                         gender: gender,
                         seeking: seeking,

src/profile-editor.js

@@ -52,9 +52,9 @@ export default class ProfileEditor extends React.Component {
             birthday: this.props.birthday,
             gender: this.props.gender,
             seeking: this.props.seeking,
-            interests: this.props.interests || [],
-            symptoms: this.props.symptoms || [],
-            about: this.props.about || ""
+            interests: this.props.interests,
+            symptoms: this.props.symptoms,
+            about: this.props.about
         });
         console.log("current state: ", this.state);
     }
@@ -226,7 +226,9 @@ export default class ProfileEditor extends React.Component {
                         onChange={e => this.handleChange(e)}
                     />
                     <br />
-                    <button onClick={() => this.updateProfile()}>Save</button>
+                    <button id="save" onClick={() => this.updateProfile()}>
+                        Save
+                    </button>
                     <button
                         onClick={() =>
                             this.setState({ beingEdited: false, error: false })

src/tests/profile-editor.test.js

@@ -0,0 +1,87 @@
+import React from "react";
+import ProfileEditor from "../profile-editor";
+import { render, fireEvent, waitForElement } from "@testing-library/react";
+import axios from "../axios";
+
+test("When no profile props passed to it, an 'Add' button is rendered", () => {
+    const { container } = render(<ProfileEditor />);
+
+    expect(container.querySelector("button").innerHTML).toBe("Add profile");
+});
+
+test("When profile has been updated, an 'Edit' button is rendered", () => {
+    const { container } = render(
+        <ProfileEditor
+            profileUpdated={true}
+            birthday="1990-06-29"
+            gender="male"
+            seeking="females"
+            interests={[]}
+            symptoms={[]}
+            about=""
+        />
+    );
+
+    expect(container.querySelector("button").innerHTML).toBe("Edit profile");
+});
+
+test("Clicking 'Add' button causes editProfile div and save button to be rendered", () => {
+    const myMockOnClick = jest.fn();
+    const { container } = render(
+        <ProfileEditor interests={[]} symptoms={[]} onClick={myMockOnClick} />
+    );
+
+    fireEvent.click(container.querySelector("button"));
+
+    expect(container.querySelector(".editProfile").innerHTML).toContain(
+        '<button id="save">Save</button>'
+    );
+});
+
+jest.mock("../axios.js");
+
+test("Clicking the 'Save' button causes an ajax request", () => {
+    axios.post.mockResolvedValue({
+        data: {
+            success: true
+        }
+    });
+
+    const { container } = render(
+        <ProfileEditor interests={[]} symptoms={[]} />
+    );
+
+    fireEvent.click(container.querySelector("button"));
+
+    fireEvent.click(container.querySelector("#save"));
+
+    axios.post().then(({ data }) => {
+        expect(data.success).toBe(true);
+    });
+});
+
+test("When the mock request is successful, the function that was passed as a prop to the component gets called", async () => {
+    const myMockSetProfile = jest.fn();
+
+    axios.post.mockResolvedValue({
+        data: {
+            success: true
+        }
+    });
+
+    const { container } = render(
+        <ProfileEditor
+            interests={[]}
+            symptoms={[]}
+            setProfile={() => myMockSetProfile()}
+        />
+    );
+
+    fireEvent.click(container.querySelector("button"));
+
+    fireEvent.click(container.querySelector("#save"));
+
+    await waitForElement(() => container.querySelector("div"));
+
+    expect(myMockSetProfile.mock.calls.length).toBe(1);
+});