feat(article): implement article deletion by author

- Create delete button
- Create delete action
- Write unit tests

[Delivers #167756400]

_test_/App.spec.js

@@ -26,6 +26,6 @@ describe('App', () => {
     expect(app.find('Switch').length).toBe(1);
   });
   it('renders a Route component', () => {
-    expect(app.find('Route').length).toBe(19);
+    expect(app.find('Route').length).toBe(15);
   });
 });

_test_/ArticleActions.spec.js

@@ -19,30 +19,32 @@ const store = makeMockStore({
 });
 
 describe('Article Actions', () => {
-  beforeEach(() => {
-    moxios.install();
-  });
-  afterEach(() => {
-    moxios.uninstall();
-  });
-
-  it('fetches articles', () => {
-    moxios.wait(() => {
-      const request = moxios.requests.mostRecent();
-      request.respondWith({ status: 200, response: fetchResponseData });
+  describe('fetchArticles', () => {
+    beforeEach(() => {
+      moxios.install();
+    });
+    afterEach(() => {
+      moxios.uninstall();
     });
 
-    const expectedActions = [
-      { type: SET_LOADING },
-      { type: FETCH_ARTICLES, payload: mockData },
-      { type: SET_CURRENT_ARTICLES, payload: mockData.articles },
-    ];
-
-    return store.dispatch(fetchArticles())
-      .then(() => {
-        const actionsCalled = store.getActions();
-        expect(actionsCalled).toEqual(expectedActions);
-        expect(actionsCalled[1].type).toEqual(FETCH_ARTICLES);
+    it('fetches articles', () => {
+      moxios.wait(() => {
+        const request = moxios.requests.mostRecent();
+        request.respondWith({ status: 200, response: fetchResponseData });
       });
+
+      const expectedActions = [
+        { type: SET_LOADING },
+        { type: FETCH_ARTICLES, payload: mockData },
+        { type: SET_CURRENT_ARTICLES, payload: mockData.articles },
+      ];
+
+      return store.dispatch(fetchArticles())
+        .then(() => {
+          const actionsCalled = store.getActions();
+          expect(actionsCalled).toEqual(expectedActions);
+          expect(actionsCalled[1].type).toEqual(FETCH_ARTICLES);
+        });
+    });
   });
 });

_test_/MainArticle.spec.js

@@ -1,27 +1,100 @@
 import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
 import expect from 'expect';
 import { shallow } from 'enzyme';
-import MainArticle from '../src/components/SingleArticle/MainArticle';
+import ConnectMain, { MainArticle } from '../src/components/SingleArticle/MainArticle';
 import image from '../src/assets/articleImage.png';
+import makeMockStore from './Utils/makeMockStore';
+
+const store = makeMockStore({
+  article: {
+    response: 'Article successfully deleted',
+  },
+  err: {
+    error: 'error',
+  },
+});
 
 describe('Main Article', () => {
   let component;
+  let app;
+  let mainApp;
+  let mainInstance;
 
   const props = {
     views: 1,
     imageUrl: '',
+    reponse: 'Article successfully deleted',
+    deleteArticle: jest.fn(),
   };
 
   beforeEach(() => {
-    component = shallow(<MainArticle {...props} />);
+    document.querySelectorAll = () => ['node'];
+    app = shallow(
+      <BrowserRouter>
+        <ConnectMain {...props} store={store} />
+      </BrowserRouter>,
+    );
+    mainApp = shallow(<MainArticle {...props} />);
+    mainInstance = mainApp.instance();
+  });
+
+  it('has a toggleModal method', () => {
+    expect(mainInstance).toBeDefined();
+    mainInstance.state = {
+      isSubmitted: true,
+    };
+    mainInstance.toggleModal();
+    mainInstance.handleSubmit();
+    mainInstance.componentDidUpdate();
+  });
+
+  it('sends an error response', () => {
+    const propsTwo = {
+      views: 1,
+      imageUrl: '',
+      deleteArticle: jest.fn(),
+      error: 'Request failed with status code 404',
+      response: '',
+    };
+    const appTwo = shallow(<MainArticle {...propsTwo} />);
+    const mainInst = appTwo.instance();
+    mainInst.state = {
+      isSubmitted: true,
+    };
+    expect(mainInstance).toBeDefined();
+    mainInst.toggleModal();
+    mainInst.handleSubmit();
+    mainInst.componentDidUpdate();
+  });
+
+  it('sends an success response', () => {
+    const propsTwo = {
+      views: 1,
+      imageUrl: '',
+      deleteArticle: jest.fn(),
+      error: '',
+      response: 'Article successfully deleted',
+    };
+    const appTwo = shallow(<MainArticle {...propsTwo} />);
+    const mainInst = appTwo.instance();
+    mainInst.state = {
+      isSubmitted: true,
+    };
+    expect(mainInstance).toBeDefined();
+    mainInst.toggleModal();
+    mainInst.handleSubmit();
+    mainInst.componentDidUpdate();
   });
 
   it('renders successfully', () => {
-    expect(component).toBeDefined();
+    const appComp = app.dive().dive().dive().dive();
+    component = appComp.dive().dive().dive();
+    expect(app).toBeDefined();
   });
 
   it('renders three div tags', () => {
-    expect(component.find('div').length).toBe(3);
+    expect(component.find('div').length).toBe(5);
     component.setProps({ views: 2 });
     component.setProps({ imageUrl: image });
   });
@@ -35,7 +108,7 @@ describe('Main Article', () => {
   });
 
   it('renders a p tag', () => {
-    expect(component.find('p').length).toBe(3);
+    expect(component.find('p').length).toBe(4);
   });
 
   it('renders a span tag', () => {

_test_/deleteArticleAction.spec.js

@@ -0,0 +1,81 @@
+import moxios from 'moxios';
+import axios from '../src/config/axiosInstance';
+import makeMockStore from './Utils/makeMockStore';
+import ArticleActions from '../src/actions/ArticleActions';
+import {
+  DELETE_ARTICLE_SUCCESS, GET_ERRORS,
+} from '../src/actions/types';
+
+const { deleteArticle } = ArticleActions;
+const deleteReponse = {
+  status: 200,
+  message: 'Article successfully deleted',
+};
+const baseUrl = 'https://ah-nyati-backend-staging.herokuapp.com/api/v1/articles/';
+
+const store = makeMockStore({
+  article: {
+    allArticles: [],
+    loading: false,
+    response: null,
+  },
+  errors: {},
+});
+
+
+describe('Article Actions', () => {
+  describe('deleteArticle', () => {
+    beforeEach(() => {
+      moxios.install();
+    });
+    afterEach(() => {
+      moxios.uninstall();
+    });
+
+    it('deletes an articles', () => {
+      moxios.wait(() => {
+        const request = moxios.requests.mostRecent();
+        request.respondWith({ status: 200, response: deleteReponse });
+      });
+
+      const expectedActions = [
+        { type: DELETE_ARTICLE_SUCCESS, payload: deleteReponse.message },
+      ];
+
+      return store.dispatch(deleteArticle())
+        .then(() => {
+          const actionsCalled = store.getActions();
+          expect(actionsCalled).toEqual(expectedActions);
+          expect(actionsCalled[0].type).toEqual(DELETE_ARTICLE_SUCCESS);
+        });
+    });
+  });
+
+  describe('deleteArticle error', () => {
+    beforeEach(() => {
+      moxios.install(axios);
+    });
+    afterEach(() => {
+      moxios.uninstall(axios);
+    });
+
+    it('deletes an articles', () => {
+      moxios.stubRequest(`${baseUrl}article`,
+        {
+          status: 200, response: deleteReponse,
+        });
+
+      const expectedActions = [
+        { type: DELETE_ARTICLE_SUCCESS, payload: deleteReponse.message },
+        { type: GET_ERRORS, payload: 'Request failed with status code 401' },
+      ];
+
+      return store.dispatch(deleteArticle())
+        .then(() => {
+          const actionsCalled = store.getActions();
+          expect(actionsCalled[0].type).toEqual(expectedActions[0].type);
+          expect(actionsCalled[1].type).toEqual(expectedActions[1].type);
+        });
+    });
+  });
+});

_test_/fetchAllArticleReducer.spec.js

@@ -3,6 +3,7 @@ import {
   FETCH_ARTICLES,
   SET_LOADING,
   SET_CURRENT_ARTICLES,
+  DELETE_ARTICLE_SUCCESS,
 } from '../src/actions/types';
 
 describe('fetch all article reducer', () => {
@@ -13,18 +14,27 @@ describe('fetch all article reducer', () => {
         currentArticles: [],
         allArticles: [],
         loading: false,
+        response: null,
       },
     );
   });
   it('should fetch all articles loading state', () => {
-    expect(reducer(undefined, { type: FETCH_ARTICLES, payload: { articles: [], totalCount: 0 } })).toEqual(
-      {
-        totalArticles: 0,
-        currentArticles: [],
-        allArticles: [],
-        loading: false,
+    expect(reducer(undefined, {
+      type: FETCH_ARTICLES,
+      payload: {
+        articles: [],
+        totalCount: 0,
       },
-    );
+    }))
+      .toEqual(
+        {
+          totalArticles: 0,
+          currentArticles: [],
+          allArticles: [],
+          loading: false,
+          response: null,
+        },
+      );
   });
   it('should set article  loading state', () => {
     expect(reducer(undefined, { type: SET_LOADING, payload: { totalArticles: 0 } })).toEqual(
@@ -33,16 +43,33 @@ describe('fetch all article reducer', () => {
         loading: true,
         currentArticles: [],
         allArticles: [],
+        response: null,
       },
     );
   });
+  it('should delete an article', () => {
+    expect(reducer(undefined, {
+      type: DELETE_ARTICLE_SUCCESS,
+      payload: 'Article successfully deleted',
+    }))
+      .toEqual(
+        {
+          totalArticles: 0,
+          currentArticles: [],
+          allArticles: [],
+          loading: false,
+          response: 'Article successfully deleted',
+        },
+      );
+  });
   it('should set current article loading state', () => {
     expect(reducer(undefined, { type: SET_CURRENT_ARTICLES, payload: [] })).toEqual(
       {
         totalArticles: 0,
         currentArticles: [],
         loading: false,
         allArticles: [],
+        response: null,
       },
     );
   });