decidim-comments 0.0.1

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

@@ -0,0 +1,173 @@
+/* eslint-disable no-unused-expressions */
+import { shallow, mount }      from 'enzyme';
+
+import { AddCommentForm }      from './add_comment_form.component';
+
+import generateCurrentUserData from '../support/generate_current_user_data';
+
+describe("<AddCommentForm />", () => {
+  let currentUser = null;
+  const commentableId = "1";
+  const commentableType = "Decidim::ParticipatoryProcess";
+  const addCommentStub = () => {
+    return null;
+  }
+
+  beforeEach(() => {
+    currentUser = generateCurrentUserData();
+  });
+
+  it("should render a div with class add-comment", () => {
+    const wrapper = shallow(<AddCommentForm addComment={addCommentStub} currentUser={currentUser} commentableId={commentableId} commentableType={commentableType} />);
+    expect(wrapper.find('div.add-comment')).to.present();
+  });
+
+  it("should have a reference to body textarea", () => {
+    const wrapper = mount(<AddCommentForm addComment={addCommentStub} currentUser={currentUser} commentableId={commentableId} commentableType={commentableType} />);
+    expect(wrapper.instance().bodyTextArea).to.be.ok;
+  });
+
+  it("should initialize with a state property disabled as true", () => {
+    const wrapper = mount(<AddCommentForm addComment={addCommentStub} currentUser={currentUser} commentableId={commentableId} commentableType={commentableType} />);
+    expect(wrapper).to.have.state('disabled', true);
+  });
+
+  it("should have a default prop showTitle as true", () => {
+    const wrapper = mount(<AddCommentForm addComment={addCommentStub} currentUser={currentUser} commentableId={commentableId} commentableType={commentableType} />);
+    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} currentUser={currentUser} commentableId={commentableId} commentableType={commentableType} 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} currentUser={currentUser} commentableId={commentableId} commentableType={commentableType} />);
+    expect(wrapper).to.have.prop('submitButtonClassName').equal('button button--sc');
+  });
+
+  it("should use prop submitButtonClassName as a className prop for submit button", () => {
+    const wrapper = shallow(<AddCommentForm addComment={addCommentStub} currentUser={currentUser} commentableId={commentableId} commentableType={commentableType} 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} currentUser={currentUser} commentableId={commentableId} commentableType={commentableType} />);
+    wrapper.find('textarea').simulate('change', {
+      target: {
+        value: 'This is a comment'
+      }
+    });
+    expect(wrapper.find('input[type="submit"]')).not.to.be.disabled();
+  });
+
+  it("should disable the submit button if textarea is blank", () => {
+    const wrapper = mount(<AddCommentForm addComment={addCommentStub} currentUser={currentUser} commentableId={commentableId} commentableType={commentableType} />);
+    wrapper.find('textarea').simulate('change', {
+      target: {
+        value: 'This will be deleted'
+      }
+    });
+    wrapper.find('textarea').simulate('change', {
+      target: {
+        value: ''
+      }
+    });
+    expect(wrapper.find('input[type="submit"]')).to.be.disabled();
+  });
+
+  it("should not render a div with class 'opinion-toggle'", () => {
+    const wrapper = shallow(<AddCommentForm addComment={addCommentStub} currentUser={currentUser} commentableId={commentableId} commentableType={commentableType} />);
+    expect(wrapper.find('.opinion-toggle')).not.to.be.present();
+  });
+
+  describe("submitting the form", () => {
+    let addComment = null;
+    let onCommentAdded = null;
+    let wrapper = null;
+    let message = null;
+
+    beforeEach(() => {
+      addComment = sinon.spy();
+      onCommentAdded = sinon.spy();
+      wrapper = mount(<AddCommentForm addComment={addComment} currentUser={currentUser} commentableId={commentableId} commentableType={commentableType} onCommentAdded={onCommentAdded} />);
+      message = 'This will be submitted';
+      wrapper.instance().bodyTextArea.value = message;
+    });
+
+    it("should call addComment prop with the textarea value and state property alignment", () => {
+      wrapper.find('form').simulate('submit');
+      expect(addComment).to.calledWith({ body: message, alignment: 0 });
+    });
+
+    it("should reset textarea", () => {
+      wrapper.find('form').simulate('submit');
+      expect(wrapper.find('textarea')).to.have.value('');
+    });
+
+    it("should prevent default form submission", () => {
+      const preventDefault = sinon.spy();
+      wrapper.find('form').simulate('submit', { preventDefault });
+      expect(preventDefault).to.have.been.called;
+    });
+
+    it("should call the prop onCommentAdded function", () => {
+      wrapper.find('form').simulate('submit');
+      expect(onCommentAdded).to.have.been.called;
+    });
+  });
+
+  it("should initialize state with a property alignment and value 0", () => {
+    const wrapper = shallow(<AddCommentForm addComment={addCommentStub} currentUser={currentUser} commentableId={commentableId} commentableType={commentableType} 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} currentUser={currentUser} commentableId={commentableId} commentableType={commentableType} 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} currentUser={currentUser} commentableId={commentableId} commentableType={commentableType} 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} currentUser={currentUser} commentableId={commentableId} commentableType={commentableType} 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);
+    });
+
+    describe("submitting the form", () => {
+      let addComment = null;
+      let wrapper = null;
+      let message = null;
+
+      beforeEach(() => {
+        addComment = sinon.spy();
+        wrapper = mount(<AddCommentForm addComment={addComment} currentUser={currentUser} commentableId={commentableId} commentableType={commentableType} arguable />);
+        message = 'This will be submitted';
+        wrapper.instance().bodyTextArea.value = message;
+      });
+
+      it("should call addComment prop with the state's property alignment", () => {
+        wrapper.find('button.opinion-toggle--ko').simulate('click');
+        wrapper.find('form').simulate('submit');
+        expect(addComment).to.calledWith({ body: message, alignment: -1 });
+      });
+
+      it("should reset the state to its initial state", () => {
+        wrapper.find('button.opinion-toggle--ok').simulate('click');
+        wrapper.find('form').simulate('submit');
+        expect(wrapper).to.have.state('alignment').eq(0);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,8 @@
+mutation addComment($commentableId: String!, $commentableType: String!, $body: String!, $alignment: Int)  {
+  addComment(commentableId: $commentableId, commentableType: $commentableType, body: $body, alignment: $alignment) {
+    ...CommentData
+    replies {
+      id
+    }
+  }
+}

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

@@ -0,0 +1,202 @@
+import { Component, PropTypes } from 'react';
+import { propType }             from 'graphql-anywhere';
+import gql                      from 'graphql-tag';
+import moment                   from 'moment';
+import { I18n }                 from 'react-i18nify';
+import classnames               from 'classnames';
+
+import AddCommentForm           from './add_comment_form.component';
+
+import commentFragment          from './comment.fragment.graphql';
+import commentDataFragment      from './comment_data.fragment.graphql';
+
+/**
+ * A single comment component with the author info and the comment's body
+ * @class
+ * @augments Component
+ */
+class Comment extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showReplyForm: false
+    };
+  }
+
+  render() {
+    const { comment: { id, author, body, createdAt }, articleClassName } = this.props;
+
+    const formattedCreatedAt = ` ${moment(createdAt, "YYYY-MM-DD HH:mm:ss z").format("LLL")}`;
+
+    return (
+      <article id={`comment_${id}`} className={articleClassName}>
+        <div className="comment__header">
+          <div className="author-data">
+            <div className="author-data__main">
+              <div className="author author--inline">
+                <a className="author__avatar">
+                  <img src={author.avatarUrl} alt="author-avatar" />
+                </a>
+                <a className="author__name">{author.name}</a>
+                <time dateTime={createdAt}>{formattedCreatedAt}</time>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="comment__content">
+          <p>
+            { this._renderAlignmentBadge() }
+            { body }
+          </p>
+        </div>
+        {this._renderReplies()}
+        <div className="comment__footer">
+          {this._renderReplyButton()}
+        </div>
+        {this._renderReplyForm()}
+      </article>
+    );
+  }
+
+  /**
+   * Render reply button if user can reply the comment
+   * @private
+   * @returns {Void|DOMElement} - Render the reply button or not if user can reply
+   */
+  _renderReplyButton() {
+    const { comment: { canHaveReplies }, currentUser } = this.props;
+    const { showReplyForm } = this.state;
+
+    if (currentUser && canHaveReplies) {
+      return (
+        <button 
+          className="comment__reply muted-link"
+          aria-controls="comment1-reply"
+          onClick={() => this.setState({ showReplyForm: !showReplyForm })}
+        >
+          { I18n.t("components.comment.reply") }
+        </button>
+      );
+    }
+
+    return <div>&nbsp;</div>;
+  }
+
+  /**
+   * Render comment replies alternating the css class
+   * @private
+   * @returns {Void|DomElement} - A wrapper element with comment replies inside
+   */
+  _renderReplies() {
+    const { comment: { id, replies }, currentUser, articleClassName } = this.props;
+    let replyArticleClassName = 'comment comment--nested';
+   
+    if (articleClassName === 'comment comment--nested') {
+      replyArticleClassName = `${replyArticleClassName} comment--nested--alt`;
+    }
+
+    if (replies) {
+      return (
+        <div>
+          {
+            replies.map((reply) => (
+              <Comment
+                key={`comment_${id}_reply_${reply.id}`}
+                comment={reply}
+                currentUser={currentUser}
+                articleClassName={replyArticleClassName}
+              />
+            ))
+          }
+        </div>
+      );
+    }
+    
+    return null;
+  }
+
+  /**
+   * Render reply form based on the current component state
+   * @private
+   * @returns {Void|ReactElement} - Render the AddCommentForm component or not
+   */
+  _renderReplyForm() {
+    const { currentUser, comment } = this.props;
+    const { showReplyForm } = this.state;
+
+    if (showReplyForm) {
+      return (
+        <AddCommentForm
+          commentableId={comment.id}
+          commentableType="Decidim::Comments::Comment"
+          currentUser={currentUser}
+          showTitle={false}
+          submitButtonClassName="button small hollow"
+          onCommentAdded={() => this.setState({ showReplyForm: false })}
+        />
+      );
+    }
+
+    return null;
+  }
+
+  /**
+   * Render alignment badge if comment's alignment is 0 or -1
+   * @private
+   * @returns {Void|DOMElement} - The alignment's badge or not
+   */
+  _renderAlignmentBadge() {
+    const { comment: { alignment } } = this.props;
+    const spanClassName = classnames('label', {
+      success: alignment === 1,
+      alert: alignment === -1
+    });
+
+    let label = '';
+    
+    if (alignment === 1) {
+      label = I18n.t('components.comment.alignment.in_favor');
+    } else {
+      label = I18n.t('components.comment.alignment.against');
+    }
+
+    if (alignment === 1 || alignment === -1) {
+      return (
+        <span>
+          <span className={spanClassName}>{ label }</span>
+          &nbsp;
+        </span>
+      );
+    }
+
+    return null;
+  }
+}
+
+Comment.fragments = {
+  comment: gql`
+    ${commentFragment}
+    ${commentDataFragment}
+  `,
+  commentData: gql`
+    ${commentDataFragment}
+  `
+};
+
+Comment.defaultProps = {
+  articleClassName: 'comment'
+};
+
+Comment.propTypes = {
+  comment: PropTypes.oneOfType([
+    propType(Comment.fragments.comment).isRequired,
+    propType(Comment.fragments.commentData).isRequired
+  ]).isRequired,
+  currentUser: PropTypes.shape({
+    name: PropTypes.string.isRequired
+  }),
+  articleClassName: PropTypes.string.isRequired
+};
+
+export default Comment;

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

@@ -0,0 +1,125 @@
+import { shallow, mount }      from 'enzyme';
+import { filter }              from 'graphql-anywhere';
+import gql                     from 'graphql-tag';
+
+import Comment                 from './comment.component';
+import AddCommentForm          from './add_comment_form.component';
+
+import commentFragment         from './comment.fragment.graphql';
+import commentDataFragment     from './comment_data.fragment.graphql';
+
+import stubComponent           from '../support/stub_component';
+import generateCommentsData    from '../support/generate_comments_data';
+import generateCurrentUserData from '../support/generate_current_user_data';
+
+describe("<Comment />", () => {
+  let comment = {};
+  let currentUser = null;
+
+  stubComponent(AddCommentForm);
+
+  beforeEach(() => {
+    let commentsData = generateCommentsData(1);
+    commentsData[0].replies = generateCommentsData(3);
+    const currentUserData = generateCurrentUserData();
+    
+    const fragment = gql`
+      ${commentFragment}
+      ${commentDataFragment}
+    `;
+
+    comment = filter(fragment, commentsData[0]);
+    currentUser = currentUserData;
+  });
+
+  it("should render an article with class comment", () => {
+    const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} />);
+    expect(wrapper.find('article.comment')).to.present();
+  });
+
+  it("should render a time tag with comment's created at", () => {
+    const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} />);
+    expect(wrapper.find('time')).to.have.text(comment.created_at);
+  });
+
+  it("should render author's name in a link with class author__name", () => {
+    const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} />);
+    expect(wrapper.find('a.author__name')).to.have.text(comment.author.name);
+  });
+
+  it("should render author's avatar as a image tag", () => {
+    const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} />);
+    expect(wrapper.find('a.author__avatar img')).to.have.attr('src').equal(comment.author.avatarUrl);
+  });
+
+  it("should render comment's body on a div with class comment__content", () => {
+    const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} />);
+    expect(wrapper.find('div.comment__content')).to.have.text(comment.body);
+  });
+
+  it("should initialize with a state property showReplyForm as false", () => {
+    const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} />);
+    expect(wrapper).to.have.state('showReplyForm', false);
+  });
+
+  it("should render a AddCommentForm component with the correct props when clicking the reply button", () => {
+    const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} />);
+    expect(wrapper.find(AddCommentForm)).not.to.be.present();
+    wrapper.find('button.comment__reply').simulate('click');
+    expect(wrapper.find(AddCommentForm)).to.have.prop('currentUser').deep.equal(currentUser);
+    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('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} currentUser={currentUser} />);
+    expect(wrapper.find('button.comment__reply')).not.to.be.present();
+  });
+
+  it("should render comment replies a separate Comment components", () => {
+    const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} />);
+    wrapper.find(Comment).forEach((node, idx) => {
+      expect(node).to.have.prop("comment").deep.equal(comment.replies[idx]);
+      expect(node).to.have.prop("currentUser").deep.equal(currentUser);
+      expect(node).to.have.prop("articleClassName").equal("comment comment--nested")
+    });
+  });
+
+  it("should render comment replies with articleClassName as 'comment comment--nested comment--nested--alt' when articleClassName is 'comment comment--nested'", () => {
+    const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} articleClassName="comment comment--nested" />);
+    wrapper.find(Comment).forEach((node) => {
+      expect(node).to.have.prop("articleClassName").equal("comment comment--nested comment--nested--alt")
+    });
+  });
+
+  it("should have a default prop articleClassName with value 'comment'", () => {
+    const wrapper = mount(<Comment comment={comment} currentUser={currentUser} />);
+    expect(wrapper).to.have.prop("articleClassName").equal("comment");
+  });
+
+  describe("when user is not logged in", () => {
+    beforeEach(() => {
+      currentUser = null;
+    });
+
+    it("should not render reply button", () => {
+      const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} />);
+      expect(wrapper.find('button.comment__reply')).not.to.be.present();
+    });
+  });
+
+  it("should render a 'in favor' badge if comment's alignment is 1", () => {
+    comment.alignment = 1;
+    const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} />);
+    expect(wrapper.find('span.success.label')).to.have.text('In favor');
+  });
+
+  it("should render a 'against' badge if comment's alignment is -1", () => {
+    comment.alignment = -1;
+    const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} />);
+    expect(wrapper.find('span.alert.label')).to.have.text('Against');
+  });
+});