decidim-comments 0.0.3 → 0.0.5

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

@@ -8,8 +8,10 @@ import generateUserGroupData from '../support/generate_user_group_data';
 
 describe("<AddCommentForm />", () => {
   let session = null;
-  const commentableId = "1";
-  const commentableType = "Decidim::ParticipatoryProcess";
+  const commentable = {
+    id: "1",
+    type: "Decidim::DummyResource"
+  };
   const addCommentStub = () => {
     return null;
   }
@@ -22,44 +24,50 @@ describe("<AddCommentForm />", () => {
   });
 
   it("should render a div with class add-comment", () => {
-    const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} />);
+    const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
     expect(wrapper.find('div.add-comment')).to.present();
   });
 
   it("should have a reference to body textarea", () => {
-    const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} />);
+    const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
     expect(wrapper.instance().bodyTextArea).to.be.ok;
   });
 
   it("should initialize with a state property disabled as true", () => {
-    const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} />);
+    const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
     expect(wrapper).to.have.state('disabled', true);
   });
 
   it("should have a default prop showTitle as true", () => {
-    const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} />);
+    const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
     expect(wrapper).to.have.prop('showTitle').equal(true);
   });
 
   it("should not render the title if prop showTitle is false", () => {
-    const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} showTitle={false} />);
+    const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} showTitle={false} />);
     expect(wrapper.find('h5.section-heading')).not.to.be.present();
   });
 
   it("should have a default prop submitButtonClassName as 'button button--sc'", () => {
-    const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} />);
+    const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
     expect(wrapper).to.have.prop('submitButtonClassName').equal('button button--sc');
   });
 
+  it("should have a default prop maxLength of 1000", () => {
+    const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
+    expect(wrapper).to.have.prop('maxLength').equal(1000);
+  });
+
+
   it("should use prop submitButtonClassName as a className prop for submit button", () => {
-    const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} submitButtonClassName="button small hollow" />);
+    const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} submitButtonClassName="button small hollow" />);
     expect(wrapper.find('input[type="submit"]')).to.have.className('button');
     expect(wrapper.find('input[type="submit"]')).to.have.className('small');
     expect(wrapper.find('input[type="submit"]')).to.have.className('hollow');
   });
 
   it("should enable the submit button if textarea is not blank", () => {
-    const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} />);
+    const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
     wrapper.find('textarea').simulate('change', {
       target: {
         value: 'This is a comment'
@@ -69,7 +77,7 @@ describe("<AddCommentForm />", () => {
   });
 
   it("should disable the submit button if textarea is blank", () => {
-    const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} />);
+    const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
     wrapper.find('textarea').simulate('change', {
       target: {
         value: 'This will be deleted'
@@ -84,7 +92,7 @@ describe("<AddCommentForm />", () => {
   });
 
   it("should not render a div with class 'opinion-toggle'", () => {
-    const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} />);
+    const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
     expect(wrapper.find('.opinion-toggle')).not.to.be.present();
   });
 
@@ -97,7 +105,7 @@ describe("<AddCommentForm />", () => {
     beforeEach(() => {
       addComment = sinon.spy();
       onCommentAdded = sinon.spy();
-      wrapper = mount(<AddCommentForm addComment={addComment} session={session} commentableId={commentableId} commentableType={commentableType} onCommentAdded={onCommentAdded} />);
+      wrapper = mount(<AddCommentForm addComment={addComment} session={session} commentable={commentable} onCommentAdded={onCommentAdded} />);
       message = 'This will be submitted';
       wrapper.instance().bodyTextArea.value = message;
     });
@@ -125,25 +133,25 @@ describe("<AddCommentForm />", () => {
   });
 
   it("should initialize state with a property alignment and value 0", () => {
-    const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} arguable />);
+    const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} arguable />);
     expect(wrapper).to.have.state('alignment').equal(0);
   });
 
   describe("when receiving an optional prop arguable with value true", () => {
     it("should render a div with class 'opinion-toggle'", () => {
-      const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} arguable />);
+      const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} arguable />);
       expect(wrapper.find('.opinion-toggle')).to.be.present();
     });
 
     it("should set state alignment to 1 if user clicks ok button and change its class", () => {
-      const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} arguable />);
+      const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} arguable />);
       wrapper.find('.opinion-toggle--ok').simulate('click');
       expect(wrapper.find('.opinion-toggle--ok')).to.have.className('is-active');
       expect(wrapper).to.have.state('alignment').equal(1);
     });
 
     it("should set state alignment to -11 if user clicks ko button and change its class", () => {
-      const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} arguable />);
+      const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} arguable />);
       wrapper.find('.opinion-toggle--ko').simulate('click');
       expect(wrapper.find('.opinion-toggle--ko')).to.have.className('is-active');
       expect(wrapper).to.have.state('alignment').equal(-1);
@@ -156,7 +164,7 @@ describe("<AddCommentForm />", () => {
 
       beforeEach(() => {
         addComment = sinon.spy();
-        wrapper = mount(<AddCommentForm addComment={addComment} session={session} commentableId={commentableId} commentableType={commentableType} arguable />);
+        wrapper = mount(<AddCommentForm addComment={addComment} session={session} commentable={commentable} arguable />);
         message = 'This will be submitted';
         wrapper.instance().bodyTextArea.value = message;
       });
@@ -184,12 +192,12 @@ describe("<AddCommentForm />", () => {
     });
 
     it("should have a reference to user_group_id select", () => {
-      const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} />);
+      const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
       expect(wrapper.instance().userGroupIdSelect).to.be.ok;
     });
 
     it("should render a select with option tags for each verified user group", () => {
-      const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} />);
+      const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
       expect(wrapper.find('select')).to.have.exactly(3).descendants('option');
     });
 
@@ -201,7 +209,7 @@ describe("<AddCommentForm />", () => {
 
       beforeEach(() => {
         addComment = sinon.spy();
-        wrapper = mount(<AddCommentForm addComment={addComment} session={session} commentableId={commentableId} commentableType={commentableType} />);
+        wrapper = mount(<AddCommentForm addComment={addComment} session={session} commentable={commentable} />);
         message = 'This will be submitted';
         userGroupId = session.verifiedUserGroups[1].id;
         wrapper.instance().bodyTextArea.value = message;
@@ -224,5 +232,16 @@ describe("<AddCommentForm />", () => {
         });
       });
     });
-  })
+  });
+
+  describe("when session is null", () => {
+    beforeEach(() => {
+      session = null;
+    });
+
+    it("display a message to sign in or sign up", () => {
+      const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
+      expect(wrapper.find('span')).to.include.text("sign up");
+    });
+  });
 });

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

@@ -1,5 +1,7 @@
 mutation addComment($commentableId: String!, $commentableType: String!, $body: String!, $alignment: Int, $userGroupId: ID)  {
-  addComment(commentableId: $commentableId, commentableType: $commentableType, body: $body, alignment: $alignment, userGroupId: $userGroupId) {
-    ...CommentThread
+  commentable(id: $commentableId, type: $commentableType) {
+    addComment(body: $body, alignment: $alignment, userGroupId: $userGroupId) {
+      ...CommentThread
+    }
   }
-}
+}

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

@@ -0,0 +1,4 @@
+fragment AddCommentFormCommentable on Commentable {
+  id
+  type
+}

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

@@ -0,0 +1,6 @@
+fragment AddCommentFormSession on Session {
+  verifiedUserGroups {
+    id
+    name
+  }
+}

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

@@ -68,10 +68,10 @@ class Comment extends Component {
    * @returns {Void|DOMElement} - Render the reply button or not if user can reply
    */
   _renderReplyButton() {
-    const { comment: { canHaveReplies }, session } = this.props;
+    const { comment: { acceptsNewComments }, session } = this.props;
     const { showReplyForm } = this.state;
 
-    if (session && canHaveReplies) {
+    if (session && acceptsNewComments) {
       return (
         <button
           className="comment__reply muted-link"
@@ -92,12 +92,11 @@ class Comment extends Component {
    * @returns {Void|DOMElement} - Render the reply button or not if user can reply
    */
   _renderAdditionalReplyButton() {
-    const { comment: { canHaveReplies, hasReplies }, session, isRootComment } = this.props;
+    const { comment: { acceptsNewComments, hasComments }, session, isRootComment } = this.props;
     const { showReplyForm } = this.state;
 
-    if (session && canHaveReplies) {
-      if (hasReplies && isRootComment) {
-
+    if (session && acceptsNewComments) {
+      if (hasComments && isRootComment) {
         return (
           <div className="comment__additionalreply">
             <button
@@ -135,23 +134,23 @@ class Comment extends Component {
   }
 
   /**
-   * Render comment replies alternating the css class
+   * Render comment's comments alternating the css class
    * @private
-   * @returns {Void|DomElement} - A wrapper element with comment replies inside
+   * @returns {Void|DomElement} - A wrapper element with comment's comments inside
    */
   _renderReplies() {
-    const { comment: { id, replies }, session, votable, articleClassName } = this.props;
+    const { comment: { id, hasComments, comments }, session, votable, articleClassName } = this.props;
     let replyArticleClassName = 'comment comment--nested';
 
     if (articleClassName === 'comment comment--nested') {
       replyArticleClassName = `${replyArticleClassName} comment--nested--alt`;
     }
 
-    if (replies) {
+    if (hasComments) {
       return (
         <div>
           {
-            replies.map((reply) => (
+            comments.map((reply) => (
               <Comment
                 key={`comment_${id}_reply_${reply.id}`}
                 comment={reply}
@@ -180,9 +179,8 @@ class Comment extends Component {
     if (showReplyForm) {
       return (
         <AddCommentForm
-          commentableId={comment.id}
-          commentableType="Decidim::Comments::Comment"
           session={session}
+          commentable={comment}
           showTitle={false}
           submitButtonClassName="button small hollow"
           onCommentAdded={() => this.setState({ showReplyForm: false })}
@@ -241,11 +239,6 @@ Comment.fragments = {
   `
 };
 
-Comment.defaultProps = {
-  articleClassName: 'comment',
-  isRootComment: false
-};
-
 Comment.propTypes = {
   comment: PropTypes.oneOfType([
     propType(Comment.fragments.comment).isRequired,
@@ -259,4 +252,11 @@ Comment.propTypes = {
   votable: PropTypes.bool
 };
 
+Comment.defaultProps = {
+  articleClassName: 'comment',
+  isRootComment: false,
+  session: null,
+  votable: false
+};
+
 export default Comment;

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

@@ -27,7 +27,7 @@ describe("<Comment />", () => {
 
   beforeEach(() => {
     let commentsData = generateCommentsData(1);
-    commentsData[0].replies = generateCommentsData(3);
+    commentsData[0].comments = generateCommentsData(3);
 
     const fragment = gql`
       ${commentFragment}
@@ -77,50 +77,40 @@ describe("<Comment />", () => {
     expect(wrapper.find(AddCommentForm)).not.to.be.present();
     wrapper.find('button.comment__reply').simulate('click');
     expect(wrapper.find(AddCommentForm)).to.have.prop('session').deep.equal(session);
-    expect(wrapper.find(AddCommentForm)).to.have.prop('commentableId').equal(comment.id);
-    expect(wrapper.find(AddCommentForm)).to.have.prop('commentableType').equal("Decidim::Comments::Comment");
+    expect(wrapper.find(AddCommentForm)).to.have.prop('commentable').deep.equal(comment);
     expect(wrapper.find(AddCommentForm)).to.have.prop('showTitle').equal(false);
     expect(wrapper.find(AddCommentForm)).to.have.prop('submitButtonClassName').equal('button small hollow');
   });
 
-  it("should not render the reply button if the comment cannot have replies", () => {
-    comment.canHaveReplies = false;
-    const wrapper = shallow(<Comment comment={comment} session={session} />);
-    expect(wrapper.find('button.comment__reply')).not.to.be.present();
-  });
-
-  it("should not render the additional reply button if the parent comment has no replies and isRootcomment", () => {
-    comment.canHaveReplies = true;
-    comment.hasReplies = false;
+  it("should not render the additional reply button if the parent comment has no comments and isRootcomment", () => {
+    comment.hasComments = false;
     const wrapper = shallow(<Comment comment={comment} session={session} isRootComment />);
     expect(wrapper.find('div.comment__additionalreply')).not.to.be.present();
   });
 
- it("should not render the additional reply button if the parent comment has replies and not isRootcomment", () => {
-    comment.canHaveReplies = true;
-    comment.hasReplies = true;
+ it("should not render the additional reply button if the parent comment has comments and not isRootcomment", () => {
+    comment.hasComments = true;
     const wrapper = shallow(<Comment comment={comment} session={session} />);
     expect(wrapper.find('div.comment__additionalreply')).not.to.be.present();
   });
 
-  it("should render the additional reply button if the parent comment has replies and isRootcomment", () => {
-    comment.canHaveReplies = true;
-    comment.hasReplies = true;
+  it("should render the additional reply button if the parent comment has comments and isRootcomment", () => {
+    comment.hasComments = true;
     const wrapper = shallow(<Comment comment={comment} session={session} isRootComment />);
     expect(wrapper.find('div.comment__additionalreply')).to.be.present();
   });
 
-  it("should render comment replies a separate Comment components", () => {
+  it("should render comment's comments as a separate Comment components", () => {
     const wrapper = shallow(<Comment comment={comment} session={session} votable />);
     wrapper.find(Comment).forEach((node, idx) => {
-      expect(node).to.have.prop("comment").deep.equal(comment.replies[idx]);
+      expect(node).to.have.prop("comment").deep.equal(comment.comments[idx]);
       expect(node).to.have.prop("session").deep.equal(session);
       expect(node).to.have.prop("articleClassName").equal("comment comment--nested")
       expect(node).to.have.prop("votable").equal(true);
     });
   });
 
-  it("should render comment replies with articleClassName as 'comment comment--nested comment--nested--alt' when articleClassName is 'comment comment--nested'", () => {
+  it("should render comment's comments with articleClassName as 'comment comment--nested comment--nested--alt' when articleClassName is 'comment comment--nested'", () => {
     const wrapper = shallow(<Comment comment={comment} session={session} articleClassName="comment comment--nested" />);
     wrapper.find(Comment).forEach((node) => {
       expect(node).to.have.prop("articleClassName").equal("comment comment--nested comment--nested--alt")
@@ -137,6 +127,17 @@ describe("<Comment />", () => {
     expect(wrapper).to.have.prop("isRootComment").equal(false);
   });
 
+  describe("when the comment cannot accept new comments", () => {
+    beforeEach(() => {
+      comment.acceptsNewComments = false;
+    });
+
+    it("should not render the reply button", () => {
+      const wrapper = shallow(<Comment comment={comment} session={session} />);
+      expect(wrapper.find('button.comment__reply')).not.to.be.present();
+    });
+  })
+
   describe("when user is not logged in", () => {
     beforeEach(() => {
       session = null;

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

@@ -1,12 +1,12 @@
 fragment Comment on Comment {
   ...CommentData
-  replies {
+  comments {
     ...CommentData
-    replies {
+    comments {
       ...CommentData
-      replies {
+      comments {
         ...CommentData
-      } 
+      }
     }
   }
 }

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

@@ -1,13 +1,14 @@
 fragment CommentData on Comment {
   id
+  type
   body
   createdAt
   author {
-    name,
+    name
     avatarUrl
   }
-  hasReplies
-  canHaveReplies
+  hasComments
+  acceptsNewComments
   alignment
   ...UpVote
   ...DownVote

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

@@ -26,7 +26,7 @@ class CommentOrderSelector extends Component {
     return (
       <div className="order-by__dropdown order-by__dropdown--right">
         <span className="order-by__text">{ I18n.t("components.comment_order_selector.title") }</span>
-        <ul className="dropdown menu" data-dropdown-menu>
+        <ul className="dropdown menu" data-dropdown-menu data-close-on-click-inside="false">
           <li>
             <a>{ I18n.t(`components.comment_order_selector.order.${orderBy}`) }</a>
             <ul className="menu">
@@ -44,7 +44,7 @@ class CommentOrderSelector extends Component {
                 <a href="" onClick={(event) => this._updateOrder(event, "older")} >
                   { I18n.t("components.comment_order_selector.order.older") }
                 </a>
-              </li>   
+              </li>
               <li>
                 <a href="" onClick={(event) => this._updateOrder(event, "most_discussed")} >
                   { I18n.t("components.comment_order_selector.order.most_discussed") }
@@ -57,7 +57,7 @@ class CommentOrderSelector extends Component {
     );
   }
 
-  _updateOrder(event, orderBy) {  
+  _updateOrder(event, orderBy) {
     event.preventDefault();
     this.setState({ orderBy });
     this.props.reorderComments(orderBy);

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

@@ -33,14 +33,14 @@ class CommentThread extends Component {
   }
 
   /**
-   * Render conversation title if comment has replies
+   * Render conversation title if comment has commments
    * @private
    * @returns {Void|DOMElement} - The conversation's title
    */
   _renderTitle() {
-    const { comment: { author, hasReplies } } = this.props;
+    const { comment: { author, hasComments } } = this.props;
 
-    if (hasReplies) {
+    if (hasComments) {
       return (
         <h6 className="comment-thread__title">
           { I18n.t("components.comment_thread.title", { authorName: author.name }) }
@@ -67,4 +67,9 @@ CommentThread.propTypes = {
   votable: PropTypes.bool
 };
 
+CommentThread.defaultProps = {
+  session: null,
+  votable: false
+};
+
 export default CommentThread;