adds e2e tests

andela · Sep 15, 2019 · 2951e5f · 2951e5f
1 parent 156f97d
commit 2951e5f
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 67 deletions.
diff --git a/src/components/ArticleCard/index.js b/src/components/ArticleCard/index.js
@@ -16,12 +16,17 @@ export class ArticleCard extends Component {
     lc: 0,
     dlc: 0,
     hasLiked: false,
+    action: null,
   }
 
+
   async componentDidMount() {
-    await this.handleLikesandDislikesManualCountUpdate();
+    const { data } = this.props;
+    const { dislikesCount, likesCount, id } = data;
+    await this.handleLikesandDislikesManualCountUpdate(dislikesCount, likesCount, id);
   }
 
+
   handleLoad = () => {
     this.setState({
       loading: 1,
@@ -35,82 +40,83 @@ export class ArticleCard extends Component {
     });
   }
 
-  async handleUserLikesForStyleUpdate(id) {
-    const { getLikedAResource } = this.props;
-    const likes = await getLikedAResource(id, 'article');
-    if (typeof likes === 'string'
-      || likes === 'not_liked'
-      || likes === 'not_logged_in') {
+  likeOrDislike = async (e, id) => {
+    e.stopPropagation();
+    const { likeDislikeAResource } = this.props;
+    const action = e.currentTarget.attributes[1].value;
+    const type = 'article';
+    const data = await likeDislikeAResource(action, id, type);
+    if (!data) {
       this.setState(prevState => ({
         ...prevState,
-        hasLiked: false,
-        likeAction: null,
       }));
       return false;
     }
-    if (likes) {
-      this.setState(prevState => ({
-        ...prevState,
-        likeAction: 'like',
-        hasLiked: true,
-      }));
+    this.checkLikeAction(action);
+    const setState = this.setState.bind(this);
+    if (action === 'dislike') {
+      activateDislikeAction(setState, this.state, data);
     }
-    if (!likes) {
-      this.setState(prevState => ({
-        ...prevState,
-        likeAction: 'dislike',
-        hasLiked: true,
-      }));
+    if (action === 'like') {
+      activateLikeAction(setState, this.state, data);
     }
   }
 
-  async handleLikesandDislikesManualCountUpdate() {
-    const { data } = this.props;
-    const { likesCount, dislikesCount, id } = data;
-    this.setState({
-      lc: likesCount,
-      dlc: dislikesCount,
-    });
-    await this.handleUserLikesForStyleUpdate(id);
-  }
 
   checkLikeAction(action) {
+    const { likeAction } = this.state;
     if (action === 'like') {
-      const { likeAction } = this.state;
       this.setState({
         likeAction: likeAction === 'like' ? null : 'like',
       });
     }
     if (action === 'dislike') {
-      const { likeAction } = this.state;
       this.setState({
         likeAction: likeAction === 'dislike' ? null : 'dislike',
       });
     }
   }
 
-  async likeOrDislike(e, id) {
-    e.stopPropagation();
-    const { likeDislikeAResource } = this.props;
-    const action = e.currentTarget.attributes[1].value;
-    const type = 'article';
-    const data = await likeDislikeAResource(action, id, type);
-    if (!data) {
+
+  async handleLikesandDislikesManualCountUpdate(dislikesCount, likesCount, id) {
+    this.setState({
+      dlc: dislikesCount,
+      lc: likesCount,
+    });
+    await this.handleUserLikesForStyleUpdate(id);
+  }
+
+
+  async handleUserLikesForStyleUpdate(id) {
+    const { getLikedAResource } = this.props;
+    const likes = await getLikedAResource(id, 'article');
+    if (typeof likes === 'string'
+      || likes === 'not_liked'
+      || likes === 'not_logged_in') {
       this.setState(prevState => ({
         ...prevState,
+        hasLiked: false,
+        likeAction: null,
       }));
       return false;
     }
-    this.checkLikeAction(action);
-    const setState = this.setState.bind(this);
-    if (action === 'dislike') {
-      activateDislikeAction(setState, this.state, data);
+    if (likes) {
+      this.setState(prevState => ({
+        ...prevState,
+        likeAction: 'like',
+        hasLiked: true,
+      }));
     }
-    if (action === 'like') {
-      activateLikeAction(setState, this.state, data);
+    if (!likes) {
+      this.setState(prevState => ({
+        ...prevState,
+        likeAction: 'dislike',
+        hasLiked: true,
+      }));
     }
   }
 
+
   generateNameByLikeAction() {
     const { likeAction } = this.state;
     if (!likeAction) return 'likes';

diff --git a/src/components/Button/index.js b/src/components/Button/index.js
@@ -35,7 +35,7 @@ const Button = (props) => {
 
 Button.propTypes = {
   label: PropTypes.string,
-  handleClick: PropTypes.func.isRequired,
+  handleClick: PropTypes.func,
   children: PropTypes.node,
   id: PropTypes.string,
   style: PropTypes.shape({
@@ -59,6 +59,7 @@ Button.defaultProps = {
   disabled: false,
   id: '',
   className: '',
+  handleClick: () => {},
 };
 
 export default Button;
diff --git a/src/e2e/likeDislikesTest.js b/src/e2e/likeDislikesTest.js
@@ -0,0 +1,27 @@
+module.exports = {
+  '@tag': ['Like or Dislike a Resource'],
+  'Step 1: show like buttons on homepage': (browser) => {
+    browser
+      .url('http://localhost:9090')
+      .waitForElementVisible('body')
+      .waitForElementVisible('div[class="like"]', 1000)
+      .pause(2000);
+  },
+  'Step 2: log in a user': (browser) => {
+    browser
+      .click('button[datatest=signin-button]')
+      .pause(1500)
+      .waitForElementVisible('div[class=form]')
+      .pause(2000)
+      .setValue('input[name=email]', 'dominicisioma000@gmail.com')
+      .setValue('input[name=password]', 'P@ssword123')
+      .click('button[id=signin]')
+      .pause(1200);
+  },
+  'Step 3: click like button': (browser) => {
+    browser
+      .click('div[class="like"]')
+      .pause(1500)
+      .end();
+  },
+};
diff --git a/src/views/HomePage/HomeCardArticle/HomeCardArticle.js b/src/views/HomePage/HomeCardArticle/HomeCardArticle.js
@@ -18,12 +18,21 @@ export class HomePageArticles extends Component {
     lc: 0,
     dlc: 0,
     hasLiked: false,
+    id: 0,
   }
 
-  componentDidMount() {
+  async componentDidMount() {
     this.handleLikesandDislikesManualCountUpdate();
   }
 
+  componentDidUpdate(prevProps, prevState) {
+    const { homePageArticles: { featuredArticle } } = prevProps;
+    const { dislikesCount, likesCount } = featuredArticle;
+    if (dislikesCount !== prevState.dlc || likesCount !== prevState.lc) {
+      this.handleLikesandDislikesManualCountUpdate();
+    }
+  }
+
   handleLoad = () => {
     this.setState({
       loading: 1,
@@ -68,13 +77,13 @@ export class HomePageArticles extends Component {
 
   async handleLikesandDislikesManualCountUpdate() {
     const { homePageArticles: { featuredArticle } } = this.props;
-    const { likesCount, dislikesCount, id } = featuredArticle;
+    const { dislikesCount, likesCount, id } = featuredArticle;
     this.setState(prevState => ({
       ...prevState,
       lc: likesCount,
       dlc: dislikesCount,
+      id,
     }));
-    if (!id) return false;
     await this.handleUserLikesForStyleUpdate(id);
   }
 
@@ -98,7 +107,6 @@ export class HomePageArticles extends Component {
     e.stopPropagation();
     const { likeDislikeAResource } = this.props;
     const action = e.currentTarget.attributes[1].value;
-    this.checkLikeAction(action);
     const type = 'article';
     const data = await likeDislikeAResource(action, id, type);
     if (!data) {
@@ -107,6 +115,7 @@ export class HomePageArticles extends Component {
       }));
       return false;
     }
+    this.checkLikeAction(action);
     const setState = this.setState.bind(this);
     if (action === 'like') {
       activateLikeAction(setState, this.state, data);

diff --git a/utils/axios.js b/utils/axios.js
@@ -1,7 +1,7 @@
 import axios from 'axios';
 
 const APP_URL = 'https://a-haven-staging.herokuapp.com/api/v1/';
-// const APP_URL = 'http://localhost:5001/api/v1/';
+// const APP_URL = 'http://localhost:5000/api/v1/';
 
 const instance = axios.create({
   baseURL: APP_URL,

diff --git a/utils/likesFunc.js b/utils/likesFunc.js
@@ -1,21 +1,22 @@
 export const activateLike = (setState, state, data) => {
-  const { likes, dislikes } = data;
-  const { hasLiked, likeAction } = state;
+  const { likes } = data;
+  const {
+    hasLiked, likeAction, lc,
+  } = state;
   if (likeAction && !hasLiked && likes > 0) {
-    setState(prevState => ({
-      ...prevState,
-      lc: prevState.lc + 1,
+    setState({
+      lc: lc + 1,
       hasLiked: true,
-    }));
+    });
   }
   if (!likeAction && likes < 1 && hasLiked) {
     setState(prevState => ({
       ...prevState,
-      lc: prevState.lc - 1,
+      lc: (prevState.lc < 1 ? 0 : lc - 1),
       hasLiked: false,
     }));
   }
-  if (likeAction && (likes > dislikes) && hasLiked) {
+  if (likeAction && hasLiked) {
     setState(prevState => ({
       ...prevState,
       dlc: prevState.dlc - 1,
@@ -26,23 +27,24 @@ export const activateLike = (setState, state, data) => {
 };
 
 export const activateDislikes = (setState, state, data) => {
-  const { likes, dislikes } = data;
-  const { hasLiked, likeAction } = state;
+  const { dislikes } = data;
+  const {
+    hasLiked, likeAction, dlc,
+  } = state;
   if (likeAction && !hasLiked && dislikes > 0) {
-    setState(prevState => ({
-      ...prevState,
-      dlc: prevState.dlc + 1,
+    setState({
+      dlc: dlc + 1,
       hasLiked: true,
-    }));
+    });
   }
   if (!likeAction && dislikes < 1 && hasLiked) {
     setState(prevState => ({
       ...prevState,
-      dlc: prevState.dlc - 1,
+      dlc: (prevState.dlc < 1 ? 0 : dlc - 1),
       hasLiked: false,
     }));
   }
-  if (likeAction && (dislikes > likes) && hasLiked) {
+  if (likeAction && hasLiked) {
     setState(prevState => ({
       ...prevState,
       dlc: prevState.dlc + 1,