Merge pull request #52 from andela/ch-fix-reactions-buttons-on-scoll-…

…165716231

#165716231 Fix Reactions Buttons on Scroll

src/__tests__/__actions__/createArticle.test.js

@@ -29,7 +29,7 @@ dotenv.config();
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
-const BASE_URL = process.env.API_BASE_URL;
+const { API_URL } = process.env;
 describe("article action creators", () => {
   test("should return the on input change action", () => {
     const data = {
@@ -78,7 +78,7 @@ describe("async action creator ", () => {
         }
       }
     ];
-    await moxios.stubRequest(`${BASE_URL}/articles`, {
+    await moxios.stubRequest(`${API_URL}/articles`, {
       status: 201,
       response: {
         message: "Article Created"
@@ -97,7 +97,7 @@ describe("async action creator ", () => {
         payload: "Sorry, we are unable to authenticate you"
       }
     ];
-    await moxios.stubRequest(`${BASE_URL}/articles`, {
+    await moxios.stubRequest(`${API_URL}/articles`, {
       status: 401,
       response: {
         message: "Sorry, we are unable to authenticate you"
@@ -133,7 +133,7 @@ describe("Edit article", () => {
         }
       }
     ];
-    await moxios.stubRequest(`${BASE_URL}/articles/hello-world`, {
+    await moxios.stubRequest(`${API_URL}/articles/hello-world`, {
       status: 201,
       response: {
         message: "Article updated"
@@ -152,7 +152,7 @@ describe("Edit article", () => {
         payload: "Sorry, we are unable to authenticate you"
       }
     ];
-    await moxios.stubRequest(`${BASE_URL}/articles/hello-world`, {
+    await moxios.stubRequest(`${API_URL}/articles/hello-world`, {
       status: 401,
       response: {
         message: "Sorry, we are unable to authenticate you"
@@ -172,7 +172,7 @@ describe("Edit article", () => {
         }
       }
     ];
-    await moxios.stubRequest(`${BASE_URL}/articles/hell-world`, {
+    await moxios.stubRequest(`${API_URL}/articles/hell-world`, {
       status: 200,
       response: {
         message: "Article retrieved"
@@ -190,7 +190,7 @@ describe("Edit article", () => {
         payload: "No article with that slug"
       }
     ];
-    await moxios.stubRequest(`${BASE_URL}/articles/hello-world`, {
+    await moxios.stubRequest(`${API_URL}/articles/hello-world`, {
       status: 404,
       response: {
         message: "No article with that slug"

src/__tests__/__actions__/readArticleAction.test.js

@@ -18,7 +18,7 @@ import {
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
-const BASE_URL = process.env.API_BASE_URL;
+const { API_URL } = process.env;
 describe("fetching article", () => {
   test("should return fetching article action", () => {
     expect(fetchingArticle()).toEqual({ type: FETCHING_ARTICLE });
@@ -49,13 +49,13 @@ describe("Fetching and deleting an article ", () => {
         }
       }
     ];
-    await moxios.stubRequest(`${BASE_URL}/articles/helloWorld`, {
+    await moxios.stubRequest(`${API_URL}/articles/helloWorld`, {
       status: 200,
       response: {
         message: "Article fetched"
       }
     });
-    await moxios.stubRequest(`${BASE_URL}/articles?limit=7`, {
+    await moxios.stubRequest(`${API_URL}/articles?limit=7`, {
       status: 200,
       response: {
         articles: [""]
@@ -76,7 +76,7 @@ describe("Fetching and deleting an article ", () => {
         }
       }
     ];
-    await moxios.stubRequest(`${BASE_URL}/articles/helloWorld`, {
+    await moxios.stubRequest(`${API_URL}/articles/helloWorld`, {
       status: 404,
       response: {
         message: "Error is thrown"
@@ -97,7 +97,7 @@ describe("Fetching and deleting an article ", () => {
         }
       }
     ];
-    await moxios.stubRequest(`${BASE_URL}/articles/helloWorld`, {
+    await moxios.stubRequest(`${API_URL}/articles/helloWorld`, {
       status: 200,
       response: {
         message: "Article deleted successfully"
@@ -118,7 +118,7 @@ describe("Fetching and deleting an article ", () => {
         }
       }
     ];
-    await moxios.stubRequest(`${BASE_URL}/articles/helloWorld`, {
+    await moxios.stubRequest(`${API_URL}/articles/helloWorld`, {
       status: 404,
       response: {
         message: "Error is thrown"

src/__tests__/__components__/reportingForm/ReportingForm.test.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { shallow } from "enzyme";
+import { ReportingForm } from "../../../components/reportingForm/ReportingForm";
+import { MoreReactions } from "../../../components/reportingForm/MoreReactionsModal";
+
+describe("reporting article components", () => {
+  test("should display more reactions component", () => {
+    const props = {
+      displayReportArticleForm: jest.fn()
+    };
+    const wrapper = shallow(<MoreReactions {...props} />);
+    expect(wrapper.find(".popup__report")).toHaveLength(1);
+  });
+
+  test("should display the reporting form ", () => {
+    const props = {
+      onInputChange: jest.fn(),
+      submitReport: jest.fn(),
+      cancelReport: jest.fn(),
+      displayReportArticleForm: jest.fn()
+    };
+    const wrapper = shallow(<ReportingForm {...props} />);
+    expect(wrapper.find(".reporting__form__container")).toHaveLength(1);
+  });
+});

src/__tests__/__mocks__/testData.js

@@ -29,6 +29,13 @@ export const article3 = {
   description: "Hello world"
 };
 export const props1 = {
+  deleteOneArticle: jest.fn(() => "Hello world"),
+  currentUser: {
+    firstName: "Yves",
+    lastName: "John",
+    image: "",
+    username: "Yves2019"
+  },
   history: {
     push: jest.fn()
   },
@@ -69,10 +76,16 @@ export const props1 = {
       tagsList: ["manchester", "united"]
     }
   },
-  fetchOneArticle: jest.fn(),
-  deleteOneArticle: jest.fn()
+  fetchOneArticle: jest.fn()
 };
 export const props2 = {
+  deleteOneArticle: jest.fn(() => "Hello world"),
+  currentUser: {
+    firstName: "Yves",
+    lastName: "John",
+    image: "",
+    username: "Yves2019"
+  },
   history: {
     push: jest.fn()
   },
@@ -112,10 +125,15 @@ export const props2 = {
       tagsList: []
     }
   },
-  fetchOneArticle: jest.fn(),
-  deleteOneArticle: jest.fn()
+  fetchOneArticle: jest.fn()
 };
 export const props3 = {
+  currentUser: {
+    firstName: "Yves",
+    lastName: "John",
+    image: "",
+    username: "John203"
+  },
   history: {
     push: jest.fn()
   },
@@ -133,6 +151,12 @@ export const props3 = {
   deleteOneArticle: jest.fn(() => "hello world")
 };
 export const props4 = {
+  currentUser: {
+    firstName: "Yves",
+    lastName: "John",
+    image: "",
+    username: "John203"
+  },
   history: {
     push: jest.fn()
   },
@@ -150,6 +174,12 @@ export const props4 = {
   deleteOneArticle: jest.fn()
 };
 export const props5 = {
+  currentUser: {
+    firstName: "Yves",
+    lastName: "John",
+    image: "",
+    username: "John203"
+  },
   history: {
     push: jest.fn()
   },
@@ -206,7 +236,7 @@ export const mainCardProps1 = {
         },
         like: 1,
         body: "Hello world",
-        id: 1,
+        id: "1",
         createdAt: "2019-04-20T09:37:50.006Z"
       }
     ],
@@ -238,7 +268,7 @@ export const mainCardProps2 = {
         },
         like: 1,
         body: "Hello world",
-        id: 1,
+        id: "1",
         createdAt: "2019-04-20T09:37:50.006Z"
       }
     ],

src/__tests__/__views__/Home.test.js

@@ -3,7 +3,7 @@ import { mount } from "enzyme";
 import App from "../../App";
 
 describe("Home component", () => {
-  test("matches the snapshot", () => {
+  test("should return the home component with appropriate header", () => {
     const warper = mount(<App />);
     expect(warper.find("h2").text()).toEqual("Hello world, from Titan-Devs");
     expect(true).toBe(true);

src/__tests__/__views__/ReadArticle.test.js

@@ -7,6 +7,7 @@ import {
 } from "../../views/ReadArticle";
 import { props1, props2, props3, props4, props5 } from "../__mocks__/testData";
 
+jest.useFakeTimers();
 describe(" Read article", () => {
   test("render the full component with aside articles", () => {
     const wrapper = shallow(<Article {...props1} />);
@@ -85,4 +86,49 @@ describe(" Read article", () => {
     });
     expect(secondCall).toEqual(false);
   });
+
+  test("should display more reactions model", () => {
+    const wrapper = shallow(<Article {...props1} />);
+    wrapper.instance().toggleReportingModal();
+    expect(wrapper.state().reportingForm).toEqual(true);
+    wrapper.instance().toggleReportingModal();
+    expect(wrapper.state().reportingForm).toEqual(false);
+  });
+
+  test("should display reporting form ", () => {
+    const wrapper = shallow(<Article {...props1} />);
+    wrapper.instance().toggleReactionsModal();
+    expect(wrapper.state().displayModal).toEqual(true);
+    wrapper.instance().toggleReactionsModal();
+    expect(wrapper.state().displayModal).toEqual(false);
+  });
+
+  test("should redirect to edit article ", () => {
+    const wrapper = shallow(<Article {...props1} />);
+    wrapper.instance().redirectToEdit();
+    expect(props1.history.push).toHaveBeenCalled();
+  });
+
+  test("should test the presence of edit and deleting buttons", () => {
+    const wrapper = shallow(<Article {...props1} />);
+    expect(wrapper.find(".delete_article")).toHaveLength(1);
+  });
+
+  test("should test deleting an article", async () => {
+    const wrapper = shallow(<Article {...props1} />);
+    await props1.deleteOneArticle.mockResolvedValue({ status: 200 });
+    wrapper
+      .find(".delete_article")
+      .at(0)
+      .simulate("click");
+    expect(props1.history.push).toHaveBeenCalled();
+  });
+
+  test("should test deleting an article", async () => {
+    const wrapper = shallow(<Article {...props2} />);
+    props2.deleteOneArticle.mockClear();
+    await props2.deleteOneArticle.mockResolvedValue({ status: 400 });
+    wrapper.find(".delete_article").simulate("click");
+    expect(props2.history.push).not.toHaveBeenCalled();
+  });
 });