decidim-comments 0.0.6 → 0.0.7

data/app/frontend/comments/comment_order_selector.component.test.tsx

@@ -0,0 +1,21 @@
+import { shallow } from "enzyme";
+import * as React from "react";
+
+import CommentOrderSelector from "./comment_order_selector.component";
+
+describe("<CommentOrderSelector />", () => {
+  const orderBy = "older";
+  const reorderComments = jasmine.createSpy("reorderComments");
+
+  it("renders a div with classes order-by__dropdown order-by__dropdown--right", () => {
+    const wrapper = shallow(<CommentOrderSelector reorderComments={reorderComments} defaultOrderBy={orderBy} />);
+    expect(wrapper.find("div.order-by__dropdown.order-by__dropdown--right")).toBeDefined();
+  });
+
+  it("should set state order to best_rated if user clicks on the first element", () => {
+      const preventDefault = jasmine.createSpy("preventDefault");
+      const wrapper = shallow(<CommentOrderSelector reorderComments={reorderComments} defaultOrderBy={orderBy} />);
+      wrapper.find("a.test").simulate("click", {preventDefault});
+      expect(reorderComments).toBeCalledWith("best_rated");
+    });
+});

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

@@ -0,0 +1,88 @@
+import * as React from "react";
+
+const { I18n } = require("react-i18nify");
+
+interface CommentOrderSelectorProps {
+  defaultOrderBy: string;
+  reorderComments: (orderBy: string) => void;
+}
+
+interface CommentOrderSelectorState {
+  orderBy: string;
+}
+
+/**
+ * A simple static component with the comment's order selector markup
+ * @class
+ * @augments Component
+ * @todo Needs a proper implementation
+ */
+class CommentOrderSelector extends React.Component<CommentOrderSelectorProps, CommentOrderSelectorState> {
+  private dropdown: HTMLUListElement;
+
+  constructor(props: CommentOrderSelectorProps) {
+    super(props);
+
+    this.state = {
+      orderBy: this.props.defaultOrderBy,
+    };
+  }
+
+  public setDropdown = (dropdown: HTMLUListElement) => this.dropdown = dropdown;
+
+  public componentDidMount() {
+    window.$(this.dropdown).foundation();
+  }
+
+  public render() {
+    const { orderBy } =  this.state;
+
+    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="data-dropdown-menu"
+          data-close-on-click-inside="false"
+          ref={this.setDropdown}
+        >
+          <li>
+            <a>{I18n.t(`components.comment_order_selector.order.${orderBy}`)}</a>
+            <ul className="menu">
+              <li>
+                <a href="" className="test" onClick={this.updateOrder("best_rated")} >
+                  {I18n.t("components.comment_order_selector.order.best_rated")}
+                </a>
+              </li>
+              <li>
+                <a href="" onClick={this.updateOrder("recent")} >
+                  {I18n.t("components.comment_order_selector.order.recent")}
+                </a>
+              </li>
+              <li>
+                <a href="" onClick={this.updateOrder("older")} >
+                  {I18n.t("components.comment_order_selector.order.older")}
+                </a>
+              </li>
+              <li>
+                <a href="" onClick={this.updateOrder("most_discussed")} >
+                  {I18n.t("components.comment_order_selector.order.most_discussed")}
+                </a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    );
+  }
+
+  private updateOrder = (orderBy: string) => {
+    return (event: React.MouseEvent<HTMLAnchorElement>) => {
+      event.preventDefault();
+      this.setState({ orderBy });
+      this.props.reorderComments(orderBy);
+    };
+  }
+}
+
+export default CommentOrderSelector;

data/app/frontend/comments/comment_thread.component.test.tsx

@@ -0,0 +1,65 @@
+import { shallow } from "enzyme";
+import * as React from "react";
+
+import { CommentFragment } from "../support/schema";
+import Comment from "./comment.component";
+import CommentThread from "./comment_thread.component";
+
+import generateCommentsData from "../support/generate_comments_data";
+import generateCUserData from "../support/generate_user_data";
+import { loadLocaleTranslations } from "../support/load_translations";
+
+describe("<CommentThread />", () => {
+  let comment: CommentFragment;
+  let session: any = null;
+
+  beforeEach(() => {
+    loadLocaleTranslations("en");
+    const commentsData = generateCommentsData(1);
+
+    session = {
+      user: generateCUserData(),
+    };
+    comment = commentsData[0];
+  });
+
+  describe("when comment doesn't have comments", () => {
+    it("should not render a title with author name", () => {
+      const wrapper = shallow(<CommentThread comment={comment} session={session} />);
+      expect(wrapper.find("h6.comment-thread__title").exists()).toBeFalsy();
+    });
+  });
+
+  describe("when comment does has comments", () => {
+    beforeEach(() => {
+      comment.hasComments = true;
+    });
+
+    it("should render a h6 comment-thread__title with author name", () => {
+      const wrapper = shallow(<CommentThread comment={comment} session={session} />);
+      expect(wrapper.find("h6.comment-thread__title").text()).toContain(`Conversation with ${comment.author.name}`);
+    });
+  });
+
+  describe("should render a Comment", () => {
+    it("and pass the session as a prop to it", () => {
+      const wrapper = shallow(<CommentThread comment={comment} session={session} />);
+      expect(wrapper.find(Comment).first().props()).toHaveProperty("session", session);
+    });
+
+    it("and pass comment data as a prop to it", () => {
+      const wrapper = shallow(<CommentThread comment={comment} session={session} />);
+      expect(wrapper.find(Comment).first().props()).toHaveProperty("comment", comment);
+    });
+
+    it("and pass the votable as a prop to it", () => {
+      const wrapper = shallow(<CommentThread comment={comment} session={session} votable={true} />);
+      expect(wrapper.find(Comment).first().props()).toHaveProperty("votable", true);
+    });
+
+    it("and pass the isRootComment equal true", () => {
+      const wrapper = shallow(<CommentThread comment={comment} session={session} votable={true} />);
+      expect(wrapper.find(Comment).first().props()).toHaveProperty("isRootComment", true);
+    });
+  });
+});

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

@@ -0,0 +1,70 @@
+import * as React            from "react";
+
+import Comment               from "./comment.component";
+
+import {
+  AddCommentFormSessionFragment,
+  CommentFragment,
+} from "../support/schema";
+
+const { I18n } = require("react-i18nify");
+
+interface CommentThreadProps {
+  comment: CommentFragment;
+  session: AddCommentFormSessionFragment & {
+    user: any;
+  } | null;
+  votable?: boolean;
+}
+
+/**
+ * Define a collection of comments. It represents a conversation with multiple users.
+ * @class
+ * @augments Component
+ * @todo It doesn't handle multiple comments yet
+ */
+class CommentThread extends React.Component<CommentThreadProps, undefined> {
+  public static defaultProps: any = {
+    session: null,
+    votable: false,
+  };
+
+  public render() {
+    const { comment, session, votable } = this.props;
+
+    return (
+      <div>
+        {this._renderTitle()}
+        <div className="comment-thread">
+          <Comment
+            comment={comment}
+            session={session}
+            votable={votable}
+            isRootComment={true}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  /**
+   * Render conversation title if comment has commments
+   * @private
+   * @returns {Void|DOMElement} - The conversation's title
+   */
+  private _renderTitle() {
+    const { comment: { author, hasComments } } = this.props;
+
+    if (hasComments) {
+      return (
+        <h6 className="comment-thread__title">
+          {I18n.t("components.comment_thread.title", { authorName: author.name })}
+        </h6>
+      );
+    }
+
+    return null;
+  }
+}
+
+export default CommentThread;

data/app/frontend/comments/{comments.component.test.jsx → comments.component.test.tsx}

@@ -1,91 +1,48 @@
-import { shallow }          from 'enzyme';
-import { filter }           from 'graphql-anywhere';
-import gql                  from 'graphql-tag';
+import { shallow }          from "enzyme";
+import * as React from "react";
 
-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 AddCommentForm       from "./add_comment_form.component";
+import CommentOrderSelector from "./comment_order_selector.component";
+import CommentThread        from "./comment_thread.component";
+import { Comments, commentsQuery } from "./comments.component";
 
-import commentsQuery        from './comments.query.graphql'
+import generateCommentsData from "../support/generate_comments_data";
+import generateUserData     from "../support/generate_user_data";
+import resolveGraphQLQuery  from "../support/resolve_graphql_query";
 
-import stubComponent        from '../support/stub_component';
-import generateCommentsData from '../support/generate_comments_data';
-import generateUserData     from '../support/generate_user_data';
-import resolveGraphQLQuery  from '../support/resolve_graphql_query';
+import { loadLocaleTranslations } from "../support/load_translations";
 
-describe('<Comments />', () => {
-  let commentable = {};
-  let session = null;
+describe("<Comments />", () => {
+  let commentable: any = {};
+  let session: any = null;
   const commentableId = "1";
   const commentableType = "Decidim::DummyResource";
   const orderBy = "older";
-  const reorderComments = () => {};
-
-  const commentThreadFragment = gql`
-    fragment CommentThread on Comment {
-      author
-    }
-  `;
-
-  const addCommentFormSessionFragment = gql`
-    fragment AddCommentFormSession on Session {
-      verifiedUserGroups {
-        id
-      }
-    }
-  `;
-
-  const addCommentFormCommentableFragment = gql`
-    fragment AddCommentFormCommentable on Commentable {
-      id
-    }
-  `;
-
-  stubComponent(CommentOrderSelector)
-
-  stubComponent(CommentThread, {
-    fragments: {
-      comment: commentThreadFragment
-    }
-  });
-
-  stubComponent(AddCommentForm, {
-    fragments: {
-      session: addCommentFormSessionFragment,
-      commentable: addCommentFormCommentableFragment
-    }
-  });
+  const reorderComments = jasmine.createSpy("reorderComments");
 
   beforeEach(() => {
+    loadLocaleTranslations("en");
     const userData = generateUserData();
     const commentsData = generateCommentsData(15);
 
-    const query = gql`
-      ${commentsQuery}
-      ${commentThreadFragment}
-      ${addCommentFormSessionFragment}
-      ${addCommentFormCommentableFragment}
-    `;
-
-    const result = resolveGraphQLQuery(query, {
+    const result = resolveGraphQLQuery(commentsQuery, {
       filterResult: false,
       rootValue: {
         session: {
-          user: userData
+          user: userData,
         },
         commentable: {
           acceptsNewComments: true,
           commentsHaveAlignment: true,
           commentsHaveVotes: true,
-          comments: commentsData
-        }
+          comments: commentsData,
+        },
       },
       variables: {
         orderBy,
         commentableId,
-        commentableType
-      }
+        commentableType,
+      },
     });
 
     session = result.session;
@@ -93,38 +50,38 @@ describe('<Comments />', () => {
   });
 
   it("renders loading-comments class and the respective loading text", () => {
-    const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} loading />);
-    expect(wrapper.find('.loading-comments')).to.be.present();
-    expect(wrapper.find('h2')).to.have.text("Loading comments ...");
+    const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} loading={true} />);
+    expect(wrapper.find(".loading-comments").exists()).toBeTruthy();
+    expect(wrapper.find("h2").text()).toEqual("Loading comments ...");
   });
 
   it("renders a div of id comments", () => {
     const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
-    expect(wrapper.find('#comments')).to.be.present();
+    expect(wrapper.find("#comments").exists()).toBeTruthy();
   });
 
   describe("renders a CommentThread component for each comment", () => {
     it("and pass filter comment data as a prop to it", () => {
       const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
-      expect(wrapper).to.have.exactly(commentable.comments.length).descendants(CommentThread);
+      expect(wrapper.find(CommentThread).length).toEqual(commentable.comments.length);
       wrapper.find(CommentThread).forEach((node, idx) => {
-        expect(node).to.have.prop("comment").deep.equal(filter(commentThreadFragment, commentable.comments[idx]));
+        expect(node.prop("comment")).toEqual(commentable.comments[idx]);
       });
     });
 
     it("and pass the session as a prop to it", () => {
       const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
-      expect(wrapper).to.have.exactly(commentable.comments.length).descendants(CommentThread);
+      expect(wrapper.find(CommentThread).length).toEqual(commentable.comments.length);
       wrapper.find(CommentThread).forEach((node) => {
-        expect(node).to.have.prop("session").deep.equal(session);
+        expect(node.prop("session")).toEqual(session);
       });
     });
 
     it("and pass the commentable 'commentsHaveVotes' property as a prop to it", () => {
       const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
-      expect(wrapper).to.have.exactly(commentable.comments.length).descendants(CommentThread);
+      expect(wrapper.find(CommentThread).length).toEqual(commentable.comments.length);
       wrapper.find(CommentThread).forEach((node) => {
-        expect(node).to.have.prop("votable").equal(true);
+        expect(node.prop("votable")).toBeTruthy();
       });
     });
   });
@@ -132,13 +89,13 @@ describe('<Comments />', () => {
   it("renders comments count", () => {
     const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
     const rex = new RegExp(`${commentable.comments.length} comments`);
-    expect(wrapper.find('h2.section-heading')).to.have.text().match(rex);
+    expect(wrapper.find("h2.section-heading").text()).toMatch(rex);
   });
 
   it("renders a AddCommentForm component and pass the commentable 'commentsHaveAlignment' as a prop", () => {
     const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
-    expect(wrapper).to.have.exactly(1).descendants(AddCommentForm);
-    expect(wrapper.find(AddCommentForm)).to.have.prop('arguable').equal(true);
+    expect(wrapper.find(AddCommentForm).length).toEqual(1);
+    expect(wrapper.find(AddCommentForm).prop("arguable")).toBeTruthy();
   });
 
   describe("when the commentable cannot accept new comments", () => {
@@ -148,24 +105,24 @@ describe('<Comments />', () => {
 
     it("doesn't render an AddCommentForm component", () => {
       const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
-      expect(wrapper.find(AddCommentForm)).not.to.be.present();
+      expect(wrapper.find(AddCommentForm).exists()).toBeFalsy();
     });
 
     it("renders a callout message to inform the user that comments are blocked", () => {
       const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
-      expect(wrapper.find('.callout.warning')).to.include.text("disabled");
+      expect(wrapper.find(".callout.warning").text()).toContain("disabled");
     });
   });
 
   describe("renders a CommentOrderSelector component", () => {
     it("and pass the reorderComments as a prop to it", () => {
       const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
-      expect(wrapper.find(CommentOrderSelector)).to.have.prop('reorderComments').deep.equal(reorderComments);
+      expect(wrapper.find(CommentOrderSelector).prop("reorderComments")).toEqual(reorderComments);
     });
 
     it("and pass the orderBy as a prop to it", () => {
       const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
-      expect(wrapper.find(CommentOrderSelector)).to.have.prop('defaultOrderBy').equal('older');
+      expect(wrapper.find(CommentOrderSelector).prop("defaultOrderBy")).toEqual("older");
     });
   });
 });