comment.component.test.jsx in decidim-0.0.2

- old
+ new

@@ -1,33 +1,42 @@
+/* eslint-disable no-unused-expressions */
 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 UpVoteButton            from './up_vote_button.component';
+import DownVoteButton          from './down_vote_button.component';
 
 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';
 
 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);
+  stubComponent(UpVoteButton);
+  stubComponent(DownVoteButton);
 
   beforeEach(() => {
     let commentsData = generateCommentsData(1);
     commentsData[0].replies = generateCommentsData(3);
     const currentUserData = generateCurrentUserData();
     
     const fragment = gql`
       ${commentFragment}
       ${commentDataFragment}
+      ${upVoteFragment}
+      ${downVoteFragment}
     `;
 
     comment = filter(fragment, commentsData[0]);
     currentUser = currentUserData;
   });
@@ -77,16 +86,38 @@
     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", () => {
+  it("should not render the additional reply button if the parent comment has no replies and isRootcomment", () => {
+    comment.canHaveReplies = true;
+    comment.hasReplies = false;
+    const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} 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;
     const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} />);
+    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;
+    const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} isRootComment />);
+    expect(wrapper.find('div.comment__additionalreply')).to.be.present();
+  });
+
+  it("should render comment replies a separate Comment components", () => {
+    const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} votable />);
     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")
+      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'", () => {
     const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} articleClassName="comment comment--nested" />);
@@ -98,10 +129,15 @@
   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");
   });
 
+  it("should have a default prop isRootComment with value false", () => {
+    const wrapper = mount(<Comment comment={comment} currentUser={currentUser} />);
+    expect(wrapper).to.have.prop("isRootComment").equal(false);
+  });
+
   describe("when user is not logged in", () => {
     beforeEach(() => {
       currentUser = null;
     });
 
@@ -119,7 +155,19 @@
 
   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');
+  });
+
+  describe("when the comment is votable", () => {
+    it("should render an UpVoteButton component", () => {
+      const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} votable />);
+      expect(wrapper.find(UpVoteButton)).to.have.prop("comment").deep.equal(comment);
+    })
+
+    it("should render an DownVoteButton component", () => {
+      const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} votable />);
+      expect(wrapper.find(DownVoteButton)).to.have.prop("comment").deep.equal(comment);
+    })
   });
 });