Merge d17eec5 into f4499d8

package.json

@@ -43,20 +43,23 @@
     "react-dom": "^16.8.6",
     "react-redux": "^6.0.1",
     "react-router-dom": "^5.0.0",
+    "react-rte": "^0.16.1",
     "redux": "^4.0.1",
     "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.4.0",
     "@babel/plugin-proposal-class-properties": "^7.4.0",
+    "@babel/polyfill": "^7.4.3",
     "@babel/preset-env": "^7.4.2",
     "@babel/preset-react": "^7.0.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.6.0",
     "babel-loader": "^8.0.5",
     "coveralls": "^3.0.3",
     "css-loader": "^2.1.1",
+    "dotenv-webpack": "^1.7.0",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.12.1",
     "enzyme-to-json": "^3.3.5",

src/__tests__/__actions__/article.test.js

@@ -0,0 +1,201 @@
+import moxios from "moxios";
+import configureMockStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import axios from "../../utils/axios";
+import { article } from "../__mocks__/testData";
+import {
+  INPUT_CHANGE,
+  NEW_ARTICLE,
+  ARTICLE_ERROR,
+  SUBMITTING_ARTICLE,
+  FETCH_ARTICLE_TO_EDIT,
+  ARTICLE_UPDATED,
+  REMOVE_TAG,
+  NEW_TAG
+} from "../../redux/actionTypes";
+
+import {
+  handleInputField,
+  newArticle,
+  removeTag,
+  handleCreateTag,
+  editArticle,
+  articleUpdated,
+  fetchOneArticle
+} from "../../redux/actions/newArticle";
+
+const middlewares = [thunk];
+const mockStore = configureMockStore(middlewares);
+
+const BASE_URL = "http://localhost:3000/api/v1";
+describe("article action creators", () => {
+  test("should return the on input change action", () => {
+    const data = {
+      name: "body",
+      value: "Hello world"
+    };
+    expect(handleInputField(data)).toEqual({
+      type: INPUT_CHANGE,
+      payload: { field: "body", value: "Hello world" }
+    });
+  });
+  test("should return the remove tag action", () => {
+    const tag = "Hello world";
+
+    expect(removeTag(tag)).toEqual({
+      type: REMOVE_TAG,
+      payload: tag
+    });
+  });
+  test("should return the add tag tag action", () => {
+    const data = {
+      tag: "Hello world"
+    };
+    expect(handleCreateTag(data)).toEqual({
+      type: NEW_TAG,
+      payload: "Hello world"
+    });
+  });
+});
+
+describe("async action creator ", () => {
+  beforeEach(() => {
+    moxios.install(axios);
+  });
+  afterEach(() => {
+    moxios.uninstall(axios);
+  });
+  test("should dispatch the create article action", async () => {
+    const store = mockStore({});
+    const actions = [
+      { type: SUBMITTING_ARTICLE },
+      {
+        type: NEW_ARTICLE,
+        payload: {
+          message: "Article Created"
+        }
+      }
+    ];
+    await moxios.stubRequest(`${BASE_URL}/articles`, {
+      status: 201,
+      response: {
+        message: "Article Created"
+      }
+    });
+    store.dispatch(newArticle(article)).then(() => {
+      expect(store.getActions()).toEqual(actions);
+    });
+  });
+  test("should dispatch the auth_error action", async () => {
+    const store = mockStore({});
+    const actions = [
+      { type: SUBMITTING_ARTICLE },
+      {
+        type: ARTICLE_ERROR,
+        payload: "Sorry, we are unable to authenticate you"
+      }
+    ];
+    await moxios.stubRequest(`${BASE_URL}/articles`, {
+      status: 401,
+      response: {
+        message: "Sorry, we are unable to authenticate you"
+      }
+    });
+    store.dispatch(newArticle(article)).then(() => {
+      expect(store.getActions()).toEqual(actions);
+    });
+  });
+});
+
+describe("Edit article", () => {
+  beforeEach(() => {
+    moxios.install(axios);
+  });
+  afterEach(() => {
+    moxios.uninstall(axios);
+  });
+  test("should return article updated action", () => {
+    expect(articleUpdated({ data: "article updated" })).toEqual({
+      type: ARTICLE_UPDATED,
+      payload: "article updated"
+    });
+  });
+  test("should dispatch the edit article action", async () => {
+    const store = mockStore({});
+    const actions = [
+      { type: SUBMITTING_ARTICLE },
+      {
+        type: ARTICLE_UPDATED,
+        payload: {
+          message: "Article updated"
+        }
+      }
+    ];
+    await moxios.stubRequest(`${BASE_URL}/articles/hello-world`, {
+      status: 201,
+      response: {
+        message: "Article updated"
+      }
+    });
+    store.dispatch(editArticle(article, "hello-world")).then(() => {
+      expect(store.getActions()).toEqual(actions);
+    });
+  });
+  test("should dispatch article, in edit article", async () => {
+    const store = mockStore({});
+    const actions = [
+      { type: SUBMITTING_ARTICLE },
+      {
+        type: ARTICLE_ERROR,
+        payload: "Sorry, we are unable to authenticate you"
+      }
+    ];
+    await moxios.stubRequest(`${BASE_URL}/articles/hello-world`, {
+      status: 401,
+      response: {
+        message: "Sorry, we are unable to authenticate you"
+      }
+    });
+    store.dispatch(editArticle(article, "hello-world")).then(() => {
+      expect(store.getActions()).toEqual(actions);
+    });
+  });
+  test("should dispatch fetch article to edit action", async () => {
+    const store = mockStore({});
+    const actions = [
+      {
+        type: FETCH_ARTICLE_TO_EDIT,
+        payload: {
+          message: "Article retrieved"
+        }
+      }
+    ];
+    await moxios.stubRequest(`${BASE_URL}/articles/hell-world`, {
+      status: 200,
+      response: {
+        message: "Article retrieved"
+      }
+    });
+    store.dispatch(fetchOneArticle("hell-world")).then(() => {
+      expect(store.getActions()).toEqual(actions);
+    });
+  });
+  test("should dispatch fetch article to edit error", async () => {
+    const store = mockStore({});
+    const actions = [
+      {
+        type: ARTICLE_ERROR,
+        payload: "No article with that slug"
+      }
+    ];
+    await moxios.stubRequest(`${BASE_URL}/articles/hello-world`, {
+      status: 404,
+      response: {
+        message: "No article with that slug"
+      }
+    });
+    store.dispatch(fetchOneArticle("hello-world")).then(() => {
+      expect(store.getActions()).toEqual(actions);
+    });
+  });
+});

src/__tests__/__components__/tags.test.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { shallow } from "enzyme";
+import Tag from "../../components/common/Tags/NewTag";
+
+const shallowSetup = () => {
+  const props = {
+    title: "Reactjs",
+    onClick: jest.fn()
+  };
+
+  const wrapper = shallow(<Tag {...props} />);
+  return { wrapper, props };
+};
+
+describe("render tag component", () => {
+  test("should contain span element ", () => {
+    const { wrapper } = shallowSetup();
+    expect(wrapper.find("span")).toHaveLength(1);
+    expect(wrapper.find("span").text()).toEqual("Reactjs ");
+    expect(wrapper.find("i")).toHaveLength(1);
+  });
+  test("should contain span element ", () => {
+    const { wrapper, props } = shallowSetup();
+    wrapper.find("i").simulate("click");
+    expect(props.onClick).toHaveBeenCalled();
+  });
+});

src/__tests__/__mocks__/testData.js

@@ -0,0 +1,30 @@
+export const article = {
+  title: "Hello world",
+  tagsList: ["react js"],
+  body:
+    " ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+  description: "Hello world"
+};
+
+export const article1 = {
+  title: "",
+  tagsList: ["react js"],
+  body:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+  description: "Hello world"
+};
+
+export const article2 = {
+  title: "Hello world",
+  description: "",
+  tagsList: ["react js"],
+  body:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+};
+
+export const article3 = {
+  title: "Hello world",
+  tagsList: ["react js"],
+  body: " id est laborum.",
+  description: "Hello world"
+};

src/__tests__/__reducers__/article.test.js

@@ -0,0 +1,111 @@
+import reducer from "../../redux/reducers/articleReducer";
+import {
+  NEW_ARTICLE,
+  INPUT_CHANGE,
+  SUBMITTING_ARTICLE,
+  FETCH_ARTICLE_TO_EDIT,
+  ARTICLE_UPDATED,
+  ARTICLE_ERROR,
+  REMOVE_TAG,
+  NEW_TAG
+} from "../../redux/actionTypes";
+
+describe("article reducer", () => {
+  test("should return the initial state on no action", () => {
+    expect(reducer(undefined, {})).toEqual({
+      title: "",
+      description: "",
+      tagsList: [],
+      body: ""
+    });
+  });
+  test("should return the initial state on wrong action", () => {
+    expect(
+      reducer(undefined, { type: "ADD TITLE", payload: "hello world" })
+    ).toEqual({
+      title: "",
+      description: "",
+      body: "",
+      tagsList: []
+    });
+  });
+  test("should handle on input change", () => {
+    expect(
+      reducer(
+        {},
+        {
+          type: INPUT_CHANGE,
+          payload: {
+            field: "title",
+            value: "Hello world"
+          }
+        }
+      )
+    ).toEqual({ title: "Hello world" });
+  });
+  test("should handle new article action", () => {
+    expect(reducer({}, { type: NEW_ARTICLE, payload: "hello world" })).toEqual({
+      response: "hello world"
+    });
+  });
+  test("should handle article error ", () => {
+    expect(
+      reducer({}, { type: ARTICLE_ERROR, payload: "hello world" })
+    ).toEqual({
+      isSubmitting: false,
+      article_error: "hello world"
+    });
+  });
+  test("should handle submitting action ", () => {
+    expect(reducer({}, { type: SUBMITTING_ARTICLE })).toEqual({
+      isSubmitting: true
+    });
+  });
+  test("should handle adding tag ", () => {
+    expect(
+      reducer({ tagsList: [] }, { type: NEW_TAG, payload: "hello world" })
+    ).toEqual({
+      tagsList: ["hello world"]
+    });
+  });
+  test("should handle removing a tag ", () => {
+    expect(
+      reducer(
+        { tagsList: ["hello world"] },
+        { type: REMOVE_TAG, payload: "hello world" }
+      )
+    ).toEqual({
+      tagsList: []
+    });
+  });
+  test("should handle fetching article to edit ", () => {
+    expect(
+      reducer(
+        {},
+        {
+          type: FETCH_ARTICLE_TO_EDIT,
+          payload: {
+            article: {
+              title: "hello world"
+            }
+          }
+        }
+      )
+    ).toEqual({
+      title: "hello world"
+    });
+  });
+  test("should handle article updated successfully ", () => {
+    expect(
+      reducer(
+        {},
+        {
+          type: ARTICLE_UPDATED,
+          payload: "Article updated successfully"
+        }
+      )
+    ).toEqual({
+      response: "Article updated successfully"
+    });
+  });
+});