Merge 590bf70 into 54727ed

src/actions/__tests__/__snapshots__/authActions.spec.js.snap

@@ -124,3 +124,11 @@ Array [
   },
 ]
 `;
+
+exports[`Auth action tests user should be able to logout adds new articles to the store 1`] = `
+Array [
+  Object {
+    "type": "LOADING",
+  },
+]
+`;

src/actions/__tests__/authActions.spec.js

@@ -4,7 +4,7 @@ import nock from 'nock';
 import {
   createUser,
   logIn, requestPasswordLink, setNewPassword,
-  loginViaSocial,
+  loginViaSocial, logout,
 } from '@Actions/authActions';
 
 const middlewares = [thunk];
@@ -272,4 +272,25 @@ describe('Auth action tests', () => {
         });
     });
   });
+
+  describe('user should be able to logout', () => {
+    let store;
+    beforeEach(() => {
+      store = mockStore({ });
+    });
+
+    afterEach(() => {
+      nock.cleanAll();
+    });
+
+    it('adds new articles to the store', () => {
+      nock(url)
+        .post('/users/logout')
+        .reply(204, {});
+      return store.dispatch(logout())
+        .then(() => {
+          expect(store.getActions()).toMatchSnapshot();
+        });
+    });
+  });
 });

src/actions/authActions.js

@@ -151,6 +151,15 @@ export const setNewPassword = (data, history) => async (dispatch) => {
     });
   }
 };
+
+export const logout = () => async (dispatch) => {
+  dispatch({ type: LOADING });
+  const response = await axiosInstance.post('users/logout', {});
+  if (response.status === 204) {
+    localStorage.removeItem('haven');
+  }
+};
+
 export const loginViaSocial = (brand) => async dispatch => {
   dispatch({ type: null });
   window.location = `https://a-haven-staging.herokuapp.com/api/v1/users/${brand}`;

src/components/DropDown/DropDown.js

@@ -8,6 +8,7 @@ import './DropDown.style.scss';
 import {
   markAsRead, getNotifications, markAllRead, updateSubscription,
 } from '@Actions/notifications';
+import { logout } from '@Actions/authActions';
 import { getProfile } from '@Actions/profileAction';
 import back from '../../../public/Rectangle.png';
 import checkMark from '../../../public/check-mark.png';
@@ -102,7 +103,9 @@ export class DropDown extends Component {
               <div className="toggle-control" />
             </label>
           </div>
-          <Link to="/" className="dropLinks">Logout</Link>
+          <div onClick={() => { this.handleSignout(); }}>
+            <Link data-test="drop-down" to="/logout" className="dropLinks">Logout</Link>
+          </div>
         </ul>
       </div>
     );
@@ -137,6 +140,11 @@ export class DropDown extends Component {
     }
   }
 
+  handleSignout() {
+    const { logout } = this.props;
+    logout();
+  }
+
   render() {
     const {
       type, notifications: { notifications }, show, profile: { user },
@@ -197,6 +205,7 @@ DropDown.propTypes = {
   notifications: PropTypes.shape({
     notifications: PropTypes.array,
   }).isRequired,
+  logout: PropTypes.func.isRequired,
 };
 
 DropDown.defaultProps = {
@@ -205,5 +214,5 @@ DropDown.defaultProps = {
 
 export default connectComponent(withRouter(DropDown),
   {
-    markAsRead, getNotifications, markAllRead, updateSubscription, getProfile,
+    markAsRead, getNotifications, markAllRead, updateSubscription, getProfile, logout,
   });

src/e2e/logout.js

@@ -0,0 +1,28 @@
+module.exports = {
+  '@tag': ['Logout'],
+  'User should be able to logout': (browser) => {
+    browser
+      .url('http://localhost:9090')
+      .pause(2000)
+      .waitForElementVisible('[datatest="signin-button"]')
+      .assert.visible('[datatest="signin-button"]')
+      .click('[datatest="signin-button"]')
+      .pause(2000)
+      .assert.visible('[data-test="signin-form"]')
+      .pause(1000)
+      .setValue('#email', 'ngwobiachukwudi@gmail.com')
+      .pause(1000)
+      .setValue('#password', 'P@ssword123')
+      .pause(1000)
+      .click('[datatest="loginButton"]')
+      .pause(4000)
+      .assert.visible('[data-test="userImage"]')
+      .pause(1000)
+      .click('[data-test="userImage"]')
+      .assert.visible('[data-test="drop-down"]')
+      .pause(1000)
+      .click('[data-test="drop-down"]')
+      .pause(3000)
+      .end();
+  },
+};

src/views/App.js

@@ -1,5 +1,7 @@
 import React from 'react';
-import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import {
+  BrowserRouter, Route, Switch, Redirect,
+} from 'react-router-dom';
 import Login from '@Views/LoginPage';
 import Search from '@Views/SearchPage/SearchPage';
 import Home from '@Views/HomePage';
@@ -35,6 +37,7 @@ const App = () => (
         <Route exact path="/articles/:slug/edit" component={EditArticle} />
         <Route exact path="/articles" component={CategoryPage} />
         <Route exact path="/tags" component={ArticleTags} />
+        <Redirect from="/logout" to="/" />
         <Route component={NotFound} />
       </Switch>
     </div>

src/views/ProfilePage/Profile.js

@@ -1,4 +1,6 @@
 /* eslint-disable no-nested-ternary */
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+/* eslint-disable react/require-default-props */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import React, { Component } from 'react';
@@ -16,6 +18,7 @@ import { getProfile, editProfile, getArticles } from '@Actions/profileAction';
 import { followUser } from '@Actions/followActions';
 import { unFollowUser } from '@Actions/unfollowActions';
 import { postImage } from '@Actions/imageAction';
+import { logout } from '@Actions/authActions';
 import Icon from '@Components/Icon';
 import RenderButton from '@Components/RenderButton';
 
@@ -53,6 +56,7 @@ export class Profile extends Component {
       isFollowing: false,
     };
     this.dialog = React.createRef();
+    this.handleSignout = this.handleSignout.bind(this);
   }
 
   async componentDidMount() {
@@ -227,6 +231,11 @@ export class Profile extends Component {
     }));
   };
 
+  handleSignout() {
+    const { logout } = this.props;
+    logout();
+  }
+
   render() {
     const {
       errors,
@@ -331,7 +340,7 @@ export class Profile extends Component {
               <li><Link to="/">Stats</Link></li>
               <li><Link to="/">Notification</Link></li>
               <li><Link to="/">Help</Link></li>
-              <li><Link to="/">Log Out</Link></li>
+              <li onClick={() => { this.handleSignout(); }}><Link to="/logout">Log Out</Link></li>
             </ul>
           </div>
           <div className="main">
@@ -413,6 +422,7 @@ Profile.propTypes = {
     }),
   }).isRequired,
   history: PropTypes.shape().isRequired,
+  logout: PropTypes.func.isRequired,
 };
 
 export default connectComponent(
@@ -423,5 +433,6 @@ export default connectComponent(
     uploadImage: postImage,
     follow: (username) => followUser(username),
     unfollow: (username) => unFollowUser(username),
+    logout,
   },
 );

src/views/ProfilePage/__snapshots__/Profile.spec.js.snap

@@ -164,9 +164,11 @@ exports[`Profile component test have props shallow render with snapshot 1`] = `
             Help
           </Link>
         </li>
-        <li>
+        <li
+          onClick={[Function]}
+        >
           <Link
-            to="/"
+            to="/logout"
           >
             Log Out
           </Link>