decidim-comments 0.0.1 → 0.0.2

data/app/frontend/comments/comments.component.test.jsx

@@ -5,6 +5,7 @@ import gql                     from 'graphql-tag';
 import { Comments }            from './comments.component';
 import CommentThread           from './comment_thread.component';
 import AddCommentForm          from './add_comment_form.component';
+import CommentOrderSelector    from './comment_order_selector.component';
 
 import commentsQuery           from './comments.query.graphql'
 
@@ -18,6 +19,8 @@ describe('<Comments />', () => {
   let currentUser = null;
   const commentableId = "1";
   const commentableType = "Decidim::ParticipatoryProcess";
+  const orderBy = "older";
+  const reorderComments = () => {};
 
   const commentThreadFragment = gql`
     fragment CommentThread on Comment {
@@ -25,12 +28,14 @@ describe('<Comments />', () => {
     }
   `;
 
+  stubComponent(CommentOrderSelector)
+
   stubComponent(CommentThread, {
     fragments: {
       comment: commentThreadFragment
     }
   });
-  
+
   stubComponent(AddCommentForm);
 
   beforeEach(() => {
@@ -49,6 +54,7 @@ describe('<Comments />', () => {
         comments: commentsData
       },
       variables: {
+        orderBy,
         commentableId,
         commentableType
       }
@@ -58,14 +64,20 @@ describe('<Comments />', () => {
     comments = result.comments;
   });
 
+  it("should render loading-comments calss and the respective loading text", () => {
+    const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{}} reorderComments={reorderComments} orderBy={orderBy} loading />);
+    expect(wrapper.find('.loading-comments')).to.be.present();
+    expect(wrapper.find('h2')).to.have.text("Loading comments ...");
+  });
+
   it("should render a div of id comments", () => {
-    const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{}} />);
+    const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
     expect(wrapper.find('#comments')).to.be.present();
   });
 
   describe("should render a CommentThread component for each comment", () => {
     it("and pass filter comment data as a prop to it", () => {
-      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{}} />);
+      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
       expect(wrapper).to.have.exactly(comments.length).descendants(CommentThread);
       wrapper.find(CommentThread).forEach((node, idx) => {
         expect(node).to.have.prop("comment").deep.equal(filter(commentThreadFragment, comments[idx]));
@@ -73,22 +85,30 @@ describe('<Comments />', () => {
     });
 
     it("and pass the currentUser as a prop to it", () => {
-      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{}} />);
+      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
       expect(wrapper).to.have.exactly(comments.length).descendants(CommentThread);
       wrapper.find(CommentThread).forEach((node) => {
         expect(node).to.have.prop("currentUser").deep.equal(currentUser);
       });
     });
+
+    it("and pass the option votable as a prop to it", () => {
+      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{ votable: true }} reorderComments={reorderComments} orderBy={orderBy} />);
+      expect(wrapper).to.have.exactly(comments.length).descendants(CommentThread);
+      wrapper.find(CommentThread).forEach((node) => {
+        expect(node).to.have.prop("votable").equal(true);
+      });
+    });
   });
 
   it("should render comments count", () => {
-    const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{}} />);
+    const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
     const rex = new RegExp(`${comments.length} comments`);
     expect(wrapper.find('h2.section-heading')).to.have.text().match(rex);
   });
 
   it("should render a AddCommentForm component and pass 'options.arguable' as a prop", () => {
-    const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{ arguable: true }} />);
+    const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{ arguable: true }} reorderComments={reorderComments} orderBy={orderBy} />);
     expect(wrapper).to.have.exactly(1).descendants(AddCommentForm);
     expect(wrapper.find(AddCommentForm)).to.have.prop('arguable').equal(true);
   });
@@ -99,8 +119,25 @@ describe('<Comments />', () => {
     });
 
     it("should not render a AddCommentForm component", () => {
-      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{}} />);
+      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
       expect(wrapper.find(AddCommentForm)).not.to.be.present();
     });
   });
+
+  describe("should render a CommentOrderSelector component", () => {
+    it("should render a CommentOrderSelector component", () => {
+        const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
+        expect(wrapper.find(CommentOrderSelector)).to.be.present();
+      });
+
+    it("and pass the reorderComments as a prop to it", () => {
+      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
+      expect(wrapper.find(CommentOrderSelector)).to.have.prop('reorderComments').deep.equal(reorderComments);
+    });
+
+    it("and pass the orderBy as a prop to it", () => {
+      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
+      expect(wrapper.find(CommentOrderSelector)).to.have.prop('defaultOrderBy').equal('older');
+    });
+  });
 });

data/app/frontend/comments/comments.query.graphql

@@ -1,9 +1,9 @@
-query GetComments($commentableId: String!, $commentableType: String!) {
+query GetComments($commentableId: String!, $commentableType: String!, $orderBy: String) {
   currentUser {
     name
     avatarUrl
   }
-  comments(commentableId: $commentableId, commentableType: $commentableType) {
+  comments(commentableId: $commentableId, commentableType: $commentableType, orderBy: $orderBy) {
     id
     ...CommentThread
   }

data/app/frontend/comments/down_vote.fragment.graphql

@@ -0,0 +1,6 @@
+fragment DownVote on Comment {
+  id
+  downVotes
+  downVoted
+  upVoted
+}

data/app/frontend/comments/down_vote.mutation.graphql

@@ -0,0 +1,7 @@
+mutation DownVote($id: ID!) {
+  comment(id: $id) {
+    downVote {
+      ...Comment
+    }
+  }
+}

data/app/frontend/comments/down_vote_button.component.jsx

@@ -0,0 +1,84 @@
+import { PropTypes }       from 'react';
+import { propType }        from 'graphql-anywhere';
+import { graphql }         from 'react-apollo';
+import gql                 from 'graphql-tag';
+
+import VoteButton          from './vote_button.component';
+
+import downVoteMutation    from './down_vote.mutation.graphql';
+
+import commentFragment     from './comment.fragment.graphql';
+import commentDataFragment from './comment_data.fragment.graphql';
+import upVoteFragment      from './up_vote.fragment.graphql';
+import downVoteFragment    from './down_vote.fragment.graphql';
+
+export const DownVoteButton = ({ comment: { downVotes, upVoted, downVoted }, downVote }) => (
+  <VoteButton
+    buttonClassName="comment__votes--down"
+    iconName="icon-chevron-bottom"
+    votes={downVotes}
+    voteAction={downVote}
+    disabled={upVoted || downVoted}
+  />
+);
+
+DownVoteButton.fragments = {
+  comment: gql`
+    ${downVoteFragment}
+  `
+};
+
+DownVoteButton.propTypes = {
+  comment: propType(DownVoteButton.fragments.comment).isRequired,
+  downVote: PropTypes.func.isRequired
+};
+
+const DownVoteButtonWithMutation = graphql(gql`
+  ${downVoteMutation}
+  ${commentFragment}  
+  ${commentDataFragment}
+  ${upVoteFragment}
+  ${downVoteFragment}
+`, {
+  props: ({ ownProps, mutate }) => ({
+    downVote: () => mutate({
+      variables: {
+        id: ownProps.comment.id
+      },
+      optimisticResponse: {
+        __typename: 'Mutation',
+        comment: {
+          __typename: 'CommentMutation',
+          downVote: {
+            __typename: 'Comment',
+            ...ownProps.comment,
+            downVotes: ownProps.comment.downVotes + 1,
+            downVoted: true
+          }
+        }
+      },
+      updateQueries: {
+        GetComments: (prev, { mutationResult: { data } }) => {
+          const commentReducer = (comment) => {
+            const replies = comment.replies || [];
+
+            if (comment.id === ownProps.comment.id) {
+              return data.comment.downVote;
+            }
+            return {
+              ...comment,
+              replies: replies.map(commentReducer)
+            };
+          };
+
+          return {
+            ...prev,
+            comments: prev.comments.map(commentReducer)
+          }
+        }
+      }
+    })
+  })
+})(DownVoteButton);
+
+export default DownVoteButtonWithMutation;

data/app/frontend/comments/down_vote_button.component.test.jsx

@@ -0,0 +1,48 @@
+import { shallow }          from 'enzyme';
+import { filter }           from 'graphql-anywhere';
+import gql                  from 'graphql-tag';
+
+import { DownVoteButton }   from './down_vote_button.component';
+
+import VoteButton           from './vote_button.component';
+
+import downVoteFragment     from './down_vote.fragment.graphql';
+
+import stubComponent        from '../support/stub_component';
+import generateCommentsData from '../support/generate_comments_data';
+
+describe("<DownVoteButton />", () => {
+  let comment = {};
+  const downVote = () => {};
+
+  stubComponent(VoteButton);
+
+  beforeEach(() => {
+    let commentsData = generateCommentsData(1);
+    
+    const fragment = gql`
+      ${downVoteFragment}
+    `;
+
+    comment = filter(fragment, commentsData[0]);
+  });
+
+  it("should render a VoteButton component with the correct props", () => {
+    const wrapper = shallow(<DownVoteButton comment={comment} downVote={downVote} />);
+    expect(wrapper.find(VoteButton)).to.have.prop("buttonClassName").equal("comment__votes--down");
+    expect(wrapper.find(VoteButton)).to.have.prop("iconName").equal("icon-chevron-bottom");
+    expect(wrapper.find(VoteButton)).to.have.prop("votes").equal(comment.downVotes);    
+  });
+
+  it("should pass disabled prop as true if comment downVoted is true", () => {
+    comment.downVoted = true;
+    const wrapper = shallow(<DownVoteButton comment={comment} downVote={downVote} />);
+    expect(wrapper.find(VoteButton)).to.have.prop("disabled").equal(true);        
+  });
+
+  it("should pass disabled prop as true if comment downVoted is true", () => {
+    comment.downVoted = true;
+    const wrapper = shallow(<DownVoteButton comment={comment} downVote={downVote} />);
+    expect(wrapper.find(VoteButton)).to.have.prop("disabled").equal(true);        
+  });
+});

data/app/frontend/comments/up_vote.fragment.graphql

@@ -0,0 +1,6 @@
+fragment UpVote on Comment {
+  id
+  upVotes
+  upVoted
+  downVoted
+}

data/app/frontend/comments/up_vote.mutation.graphql

@@ -0,0 +1,7 @@
+mutation UpVote($id: ID!) {
+  comment(id: $id) {
+    upVote {
+      ...Comment
+    }
+  }
+}

data/app/frontend/comments/up_vote_button.component.jsx

@@ -0,0 +1,84 @@
+import { PropTypes }       from 'react';
+import { propType }        from 'graphql-anywhere';
+import { graphql }         from 'react-apollo';
+import gql                 from 'graphql-tag';
+
+import VoteButton          from './vote_button.component';
+
+import upVoteMutation      from './up_vote.mutation.graphql';
+
+import commentFragment     from './comment.fragment.graphql';
+import commentDataFragment from './comment_data.fragment.graphql';
+import upVoteFragment      from './up_vote.fragment.graphql';
+import downVoteFragment    from './down_vote.fragment.graphql';
+
+export const UpVoteButton = ({ comment: { upVotes, upVoted, downVoted }, upVote }) => (
+  <VoteButton
+    buttonClassName="comment__votes--up"
+    iconName="icon-chevron-top"
+    votes={upVotes} 
+    voteAction={upVote} 
+    disabled={upVoted || downVoted}
+  />
+);
+
+UpVoteButton.fragments = {
+  comment: gql`
+    ${upVoteFragment}
+  `
+};
+
+UpVoteButton.propTypes = {
+  comment: propType(UpVoteButton.fragments.comment).isRequired,
+  upVote: PropTypes.func.isRequired
+};
+
+const UpVoteButtonWithMutation = graphql(gql`
+  ${upVoteMutation}
+  ${commentFragment}  
+  ${commentDataFragment}
+  ${upVoteFragment}
+  ${downVoteFragment}
+`, {
+  props: ({ ownProps, mutate }) => ({
+    upVote: () => mutate({
+      variables: {
+        id: ownProps.comment.id
+      },
+      optimisticResponse: {
+        __typename: 'Mutation',
+        comment: {
+          __typename: 'CommentMutation',
+          upVote: {
+            __typename: 'Comment',
+            ...ownProps.comment,
+            upVotes: ownProps.comment.upVotes + 1,
+            upVoted: true
+          }
+        }
+      },
+      updateQueries: {
+        GetComments: (prev, { mutationResult: { data } }) => {          
+          const commentReducer = (comment) => {
+            const replies = comment.replies || [];
+            
+            if (comment.id === ownProps.comment.id) {
+              return data.comment.upVote;
+            }
+            return {
+              ...comment,
+              replies: replies.map(commentReducer)
+            };
+          };
+
+          return {
+            ...prev,
+            comments: prev.comments.map(commentReducer)
+          }
+        }
+      }
+    })
+  })  
+})(UpVoteButton);
+
+export default UpVoteButtonWithMutation;

data/app/frontend/comments/up_vote_button.component.test.jsx

@@ -0,0 +1,48 @@
+import { shallow }          from 'enzyme';
+import { filter }           from 'graphql-anywhere';
+import gql                  from 'graphql-tag';
+
+import { UpVoteButton }     from './up_vote_button.component';
+
+import VoteButton           from './vote_button.component';
+
+import upVoteFragment       from './up_vote.fragment.graphql';
+
+import stubComponent        from '../support/stub_component';
+import generateCommentsData from '../support/generate_comments_data';
+
+describe("<UpVoteButton />", () => {
+  let comment = {};
+  const upVote = () => {};
+
+  stubComponent(VoteButton);
+
+  beforeEach(() => {
+    let commentsData = generateCommentsData(1);
+    
+    const fragment = gql`
+      ${upVoteFragment}
+    `;
+
+    comment = filter(fragment, commentsData[0]);
+  });
+
+  it("should render a VoteButton component with the correct props", () => {
+    const wrapper = shallow(<UpVoteButton comment={comment} upVote={upVote} />);
+    expect(wrapper.find(VoteButton)).to.have.prop("buttonClassName").equal("comment__votes--up");
+    expect(wrapper.find(VoteButton)).to.have.prop("iconName").equal("icon-chevron-top");
+    expect(wrapper.find(VoteButton)).to.have.prop("votes").equal(comment.upVotes);    
+  });
+
+  it("should pass disabled prop as true if comment upVoted is true", () => {
+    comment.upVoted = true;
+    const wrapper = shallow(<UpVoteButton comment={comment} upVote={upVote} />);
+    expect(wrapper.find(VoteButton)).to.have.prop("disabled").equal(true);        
+  });
+
+  it("should pass disabled prop as true if comment downVoted is true", () => {
+    comment.downVoted = true;
+    const wrapper = shallow(<UpVoteButton comment={comment} upVote={upVote} />);
+    expect(wrapper.find(VoteButton)).to.have.prop("disabled").equal(true);        
+  });
+});

data/app/frontend/comments/vote_button.component.jsx

@@ -0,0 +1,19 @@
+import { PropTypes } from 'react';
+import Icon          from '../application/icon.component';
+
+const VoteButton = ({ buttonClassName, iconName, votes, voteAction, disabled }) => (
+  <button className={buttonClassName} onClick={() => voteAction()} disabled={disabled}>
+    <Icon name={iconName} iconExtraClassName="icon--small" />
+    { ` ${votes}` }
+  </button>
+);
+
+VoteButton.propTypes = {
+  buttonClassName: PropTypes.string.isRequired,
+  iconName: PropTypes.string.isRequired,
+  votes: PropTypes.number.isRequired,
+  voteAction: PropTypes.func.isRequired,
+  disabled: PropTypes.bool
+};
+
+export default VoteButton;