Feature/friendslistanddietoptions

__mocks__/FriendsListMock.js

@@ -0,0 +1,40 @@
+import readFileSync from "fs";
+import path from "path";
+import { act } from "@testing-library/react";
+
+const friends = [
+  {
+    friend_profile_image: "",
+    friend_username: "animecody",
+    friend_bio: "DBZ all day bby",
+    friends_id: 8,
+  },
+  {
+    friend_profile_image: "",
+    friend_username: "JDawg",
+    friend_bio: "Ask me about my pizza",
+    friends_id: 9,
+  },
+  {
+    friend_profile_image: "",
+    friend_username: "Buddy",
+    friend_bio: "Pizza without cheese, sauce, and toppings is just bread",
+    friends_id: 10,
+  },
+];
+
+// const friendos = JSON.parse(
+//   readFileSync(path.join(__dirname, "res.json")).toString()
+// );
+
+export const _friends = friends;
+
+const mock = {
+  friends: jest.fn(() => {
+    return {
+      then: (callback) => act(() => callback([friends])),
+    };
+  }),
+};
+
+export default mock;

src/components/users/FriendsComp/FriendOnList.test.js

@@ -1,88 +1,101 @@
-import React from 'react';
-import { render, fireEvent, cleanup, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import { findFirstProp } from '../../../utils/reduxTestingFunctions'
-import FriendOnList from './FriendOnList';
+import React from "react";
+import { render, fireEvent, cleanup, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import { findFirstProp } from "../../../utils/reduxTestingFunctions";
+import FriendOnList from "./FriendOnList";
 
 describe("FriendOnList", () => {
-
-    afterEach(cleanup);
-
-    const friend = {
-        friend_profile_image: "",
-        friend_username: "animecody",
-        friend_bio: "DBZ all day bby",
-        friends_id: 8
-    };
-    const deleteUserMessage = `Are you sure you want to remove ${friend.friend_username} from your friends list?`;
-    const removeFriend = id => {
-        console.log(`${id} was removed`)
-    };
-
-    it('renders text & values from props', () => {
-        const { getByText, getAllByText } = render(<FriendOnList friends={friend} remove={removeFriend} />);
-
-        const removeText = findFirstProp("Remove", getByText, getAllByText);
-        const bioText = findFirstProp("DBZ all day bby", getByText, getAllByText);
-        const usernameText = findFirstProp("animecody", getByText, getAllByText);
-
-        expect(removeText).toBeInTheDocument();
-        expect(bioText).toBeInTheDocument();
-        expect(usernameText).toBeInTheDocument();
-    });
-
-    it('remove onClick toggles modalon', async () => {
-        const { getByText, getAllByText } = render(<FriendOnList friends={friend} remove={removeFriend} />);
-        const removeText = findFirstProp("Remove", getByText, getAllByText);
-
-        fireEvent.click(removeText);
-
-        const delMessage = await waitFor(() => getByText(new RegExp(deleteUserMessage, "i")))
-        const okButton = getByText(/ok/i);
-        const cancelButton = getByText(/cancel/i);
-
-        expect(delMessage).toBeVisible();
-        expect(okButton).toBeInTheDocument();
-        expect(cancelButton).toBeInTheDocument();
-    })
-
-    it('modal cancel button onClick toggles modal off', async () => {
-        const { getByText, getAllByText } = render(<FriendOnList friends={friend} remove={removeFriend} />);
-        const removeText = findFirstProp("Remove", getByText, getAllByText);
-
-        fireEvent.click(removeText);
-
-        const delMessage = await waitFor(() => getByText(new RegExp(deleteUserMessage, "i")))
-        const cancelButton = getByText(/cancel/i);
-        const okButton = getByText(/ok/i);
-
-        expect(delMessage).toBeVisible();
-        expect(cancelButton).toBeInTheDocument();
-        expect(okButton).toBeInTheDocument();
-
-        fireEvent.click(cancelButton);
-
-        await waitFor(() => delMessage)
-        expect(cancelButton).not.toBeInTheDocument();
-        expect(okButton).not.toBeInTheDocument();
-    })
-
-    it('modal OK button runs remove function from props', async () => {
-        const { getByText, getAllByText } = render(<FriendOnList friends={friend} remove={removeFriend} />);
-        const removeText = findFirstProp("Remove", getByText, getAllByText);
-        console.log = jest.fn();
-
-        fireEvent.click(removeText);
-
-        const delMessage = await waitFor(() => getByText(new RegExp(deleteUserMessage, "i")))
-        const cancelButton = getByText(/cancel/i);
-        const okButton = getByText(/ok/i);
-
-        expect(delMessage).toBeVisible();
-        expect(cancelButton).toBeInTheDocument();
-        expect(okButton).toBeInTheDocument();
-
-        fireEvent.click(okButton);
-        await expect(console.log).toHaveBeenCalledWith("8 was removed")
-    })
-})
+  afterEach(cleanup);
+
+  const friend = {
+    friend_profile_image: "",
+    friend_username: "animecody",
+    friend_bio: "DBZ all day bby",
+    friends_id: 8,
+  };
+  const deleteUserMessage = `Are you sure you want to remove ${friend.friend_username} from your friends list?`;
+  const removeFriend = (id) => {
+    console.log(`${id} was removed`);
+  };
+
+  it("renders text & values from props", () => {
+    const { getByText, getAllByText } = render(
+      <FriendOnList friends={friend} remove={removeFriend} />
+    );
+
+    const removeText = findFirstProp("Remove", getByText, getAllByText);
+    const bioText = findFirstProp("DBZ all day bby", getByText, getAllByText);
+    const usernameText = findFirstProp("animecody", getByText, getAllByText);
+
+    expect(removeText).toBeInTheDocument();
+    expect(bioText).toBeInTheDocument();
+    expect(usernameText).toBeInTheDocument();
+  });
+
+  it("remove onClick toggles modalon", async () => {
+    const { getByText, getAllByText } = render(
+      <FriendOnList friends={friend} remove={removeFriend} />
+    );
+    const removeText = findFirstProp("Remove", getByText, getAllByText);
+
+    fireEvent.click(removeText);
+
+    const delMessage = await waitFor(() =>
+      getByText(new RegExp(deleteUserMessage, "i"))
+    );
+    const okButton = getByText(/ok/i);
+    const cancelButton = getByText(/cancel/i);
+
+    expect(delMessage).toBeVisible();
+    expect(okButton).toBeInTheDocument();
+    expect(cancelButton).toBeInTheDocument();
+  });
+
+  it("modal cancel button onClick toggles modal off", async () => {
+    const { getByText, getAllByText } = render(
+      <FriendOnList friends={friend} remove={removeFriend} />
+    );
+    const removeText = findFirstProp("Remove", getByText, getAllByText);
+
+    fireEvent.click(removeText);
+
+    const delMessage = await waitFor(() =>
+      getByText(new RegExp(deleteUserMessage, "i"))
+    );
+    const cancelButton = getByText(/cancel/i);
+    const okButton = getByText(/ok/i);
+
+    expect(delMessage).toBeVisible();
+    expect(cancelButton).toBeInTheDocument();
+    expect(okButton).toBeInTheDocument();
+
+    fireEvent.click(cancelButton);
+
+    await waitFor(() => delMessage);
+    expect(cancelButton).not.toBeInTheDocument();
+    expect(okButton).not.toBeInTheDocument();
+  });
+
+  it("modal OK button runs remove function from props", async () => {
+    const { getByText, getAllByText } = render(
+      <FriendOnList friends={friend} remove={removeFriend} />
+    );
+    const removeText = findFirstProp("Remove", getByText, getAllByText);
+    console.log = jest.fn();
+
+    fireEvent.click(removeText);
+
+    const delMessage = await waitFor(() =>
+      getByText(new RegExp(deleteUserMessage, "i"))
+    );
+    const cancelButton = getByText(/cancel/i);
+    const okButton = getByText(/ok/i);
+
+    expect(delMessage).toBeVisible();
+    expect(cancelButton).toBeInTheDocument();
+    expect(okButton).toBeInTheDocument();
+
+    fireEvent.click(okButton);
+    await expect(console.log).toHaveBeenCalledWith("8 was removed");
+  });
+});

src/components/users/FriendsComp/FriendsList.js

@@ -14,7 +14,7 @@ export default function FriendsList(props) {
   const [itemLength, setItemLength] = useState(0);
   const [currentData, setCurrentData] = useState([]);
   let user = useSelector(({ user }) => user);
-  user = props.user ? props.user : user
+  user = props.user ? props.user : user;
   const dispatch = useDispatch();
 
   const handlePageChange = (pageNumber) => {
@@ -59,7 +59,9 @@ export default function FriendsList(props) {
 
   return user.friends.length != 0 ? (
     <div className="plzaFriendsList">
-      <h1 style={{width: '100%', textAlign: 'center'}}>{user.username}'s Friends</h1>
+      <h1 style={{ width: "100%", textAlign: "center" }}>
+        {user.username}'s Friends
+      </h1>
       <List className="actualList" floated="left" size="big">
         {currentData.map((friend) => {
           return (

src/components/users/FriendsComp/FriendsList.test.js

@@ -0,0 +1,147 @@
+import React from "react";
+import renderer from "react-test-renderer";
+import configureStore from "redux-mock-store";
+import { Provider } from "react-redux";
+import thunk from "redux-thunk";
+import {
+  render,
+  fireEvent,
+  cleanup,
+  waitFor,
+  act,
+} from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import FriendsList from "./FriendsList";
+import FriendOnList from "./FriendOnList";
+
+jest.mock("../../../redux/actions/userActions");
+const mockStore = configureStore();
+
+describe("FriendsList", () => {
+  let store;
+  let component;
+  let friendOnListcomponent;
+
+  let friendsArray = [
+    {
+      friend_profile_image: "",
+      friend_username: "animecody",
+      friend_bio: "DBZ all day bby",
+      friends_id: 8,
+    },
+    {
+      friend_profile_image: "",
+      friend_username: "JDawg",
+      friend_bio: "Ask me about my pizza",
+      friends_id: 9,
+    },
+    {
+      friend_profile_image: "",
+      friend_username: "Buddy",
+      friend_bio: "Pizza without cheese, sauce, and toppings is just bread",
+      friends_id: 10,
+    },
+  ];
+
+  beforeEach(() => {
+    store = mockStore({
+      user: {
+        username: "SteadyFreddie",
+        friends: [
+          {
+            id: 1,
+            friend_profile_image: "image",
+            friend_username: "animecody",
+            friend_bio: "DBZ all day bby",
+            friends_id: 8,
+          },
+          {
+            id: 2,
+            friend_profile_image: "image",
+            friend_username: "JDawg",
+            friends_bio: "Ask me about my pizza",
+            friend_id: 9,
+          },
+          {
+            id: 3,
+            friend_profile_image: "image",
+            friend_username: "Buddy",
+            friend_bio:
+              "Pizza without cheese, sauce, and toppings is just bread",
+            friends_id: 10,
+          },
+        ],
+      },
+    });
+
+    store.dispatch = jest.fn();
+    console.log(store.dispatch.mock, "mock");
+
+    component = renderer.create(
+      <Provider store={store}>
+        <FriendsList />
+        {/* <FriendOnList friends={friendsArray} /> */}
+      </Provider>
+    );
+  });
+  //   friendOnListcomponent = renderer.create(
+  //     <Provider store={store}>
+
+  //     </Provider>
+  //   );
+  //   console.log(friendOnListcomponent);
+
+  it("expect length of friends to be 3", async () => {
+    let children = component.toJSON().children.map((children) => children);
+    console.log(children);
+    expect(children.length).toBe(3);
+  });
+
+  //   const friends = [
+  //     {
+  //       friend_profile_image: "",
+  //       friend_username: "animecody",
+  //       friend_bio: "DBZ all day bby",
+  //       friends_id: 8,
+  //     },
+  //     {
+  //       friend_profile_image: "",
+  //       friend_username: "JDawg",
+  //       friend_bio: "Ask me about my pizza",
+  //       friends_id: 9,
+  //     },
+  //     {
+  //       friend_profile_image: "",
+  //       friend_username: "Buddy",
+  //       friend_bio: "Pizza without cheese, sauce, and toppings is just bread",
+  //       friends_id: 10,
+  //     },
+  //   ];
+
+  // const removeFriend = ();
+
+  //   it("adds 2 + 2", () => {
+  //     expect(2 + 2).toBe(5);
+  //   });
+
+  //   let newFriends = [];
+  //   const removeFriend = (id) => {
+  //     newFriends = friends.filter((keep) => {
+  //       keep.id != id;
+  //     });
+  //   };
+
+  //   const deleteFriendModal = `Are you sure you want to remove ${friends[1].friend_username} from your friends list?`;
+
+  //   it("test initial friends length", () => {
+  //     expect(friends.length).toBe(3);
+  //   });
+  // });
+
+  //   test("Friendslist", async () => {
+  //     const { getByTestId } = render(<FriendsList />);
+
+  //     const friendsLIST = getByTestId("friendsListTestId");
+  //     expect(friendsLIST.children.length).toEqual(3);
+  //   });
+});