decidim-comments 0.23.6 → 0.24.0.rc1

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

@@ -1,106 +0,0 @@
-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-autoclose="false"
-          data-disable-hover="true"
-          data-click-open="true"
-          data-close-on-click="true"
-          tabIndex={-1}
-          ref={this.setDropdown}
-        >
-          <li className="is-dropdown-submenu-parent" tabIndex={-1}>
-            <a
-              href="#"
-              id="comments-order-menu-control"
-              aria-label={I18n.t("components.comment_order_selector.title")}
-              aria-controls="comments-order-menu"
-              aria-haspopup="true"
-            >
-              {I18n.t(`components.comment_order_selector.order.${orderBy}`)}
-            </a>
-            <ul
-              className="menu is-dropdown-submenu"
-              id="language-chooser-menu"
-              role="menu"
-              aria-labelledby="comments-order-menu-control"
-              tabIndex={-1}
-            >
-              <li>
-                <a href="#" className="test" onClick={this.updateOrder("best_rated")} tabIndex={-1}>
-                  {I18n.t("components.comment_order_selector.order.best_rated")}
-                </a>
-              </li>
-              <li>
-                <a href="#" onClick={this.updateOrder("recent")} tabIndex={-1}>
-                  {I18n.t("components.comment_order_selector.order.recent")}
-                </a>
-              </li>
-              <li>
-                <a href="#" onClick={this.updateOrder("older")} tabIndex={-1}>
-                  {I18n.t("components.comment_order_selector.order.older")}
-                </a>
-              </li>
-              <li>
-                <a href="" onClick={this.updateOrder("most_discussed")} tabIndex={-1}>
-                  {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

@@ -1,82 +0,0 @@
-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 commentsMaxLength={commentsMaxLength}  />", () => {
-  const commentsMaxLength: number = 1000;
-  const orderBy = "older";
-  const rootCommentable = {
-    id: "1",
-    type: "Decidim::DummyResources::DummyResource"
-  };
-  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 commentsMaxLength={commentsMaxLength}  comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
-      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 commentsMaxLength={commentsMaxLength}  comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
-      expect(wrapper.find("h6.comment-thread__title").text()).toContain(`Conversation with ${comment.author.name}`);
-    });
-
-    describe("when the author's account has been deleted", () => {
-      beforeEach(() => {
-        comment.author.deleted = true;
-      });
-
-      it("should render a h6 comment-thread__title with 'Deleted participant'", () => {
-        const wrapper = shallow(<CommentThread commentsMaxLength={commentsMaxLength}  comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
-        expect(wrapper.find("h6.comment-thread__title").text()).toContain("Conversation with Deleted participant");
-      });
-    });
-  });
-
-  describe("should render a Comment", () => {
-    it("and pass the session as a prop to it", () => {
-      const wrapper = shallow(<CommentThread commentsMaxLength={commentsMaxLength}  comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
-      expect(wrapper.find(Comment).first().props()).toHaveProperty("session", session);
-    });
-
-    it("and pass comment data as a prop to it", () => {
-      const wrapper = shallow(<CommentThread commentsMaxLength={commentsMaxLength}  comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
-      expect(wrapper.find(Comment).first().props()).toHaveProperty("comment", comment);
-    });
-
-    it("and pass the votable as a prop to it", () => {
-      const wrapper = shallow(<CommentThread commentsMaxLength={commentsMaxLength}  comment={comment} session={session} votable={true} rootCommentable={rootCommentable} orderBy={orderBy} />);
-      expect(wrapper.find(Comment).first().props()).toHaveProperty("votable", true);
-    });
-
-    it("and pass the isRootComment equal true", () => {
-      const wrapper = shallow(<CommentThread commentsMaxLength={commentsMaxLength}  comment={comment} session={session} votable={true} rootCommentable={rootCommentable} orderBy={orderBy} />);
-      expect(wrapper.find(Comment).first().props()).toHaveProperty("isRootComment", true);
-    });
-  });
-});

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

@@ -1,81 +0,0 @@
-import * as React from "react";
-
-import Comment from "./comment.component";
-
-import {
-  AddCommentFormCommentableFragment,
-  AddCommentFormSessionFragment,
-  CommentFragment
-} from "../support/schema";
-
-const { I18n } = require("react-i18nify");
-
-interface CommentThreadProps {
-  comment: CommentFragment;
-  session: AddCommentFormSessionFragment & {
-    user: any;
-  } | null;
-  votable?: boolean;
-  rootCommentable: AddCommentFormCommentableFragment;
-  orderBy: string;
-  commentsMaxLength: number;
-}
-
-/**
- * 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> {
-  public static defaultProps: any = {
-    session: null,
-    votable: false
-  };
-
-  public render() {
-    const { comment, session, votable, rootCommentable, orderBy, commentsMaxLength } = this.props;
-
-    return (
-      <div>
-        {this._renderTitle()}
-        <div className="comment-thread">
-          <Comment
-            comment={comment}
-            session={session}
-            votable={votable}
-            isRootComment={true}
-            rootCommentable={rootCommentable}
-            orderBy={orderBy}
-            commentsMaxLength={commentsMaxLength}
-          />
-        </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">
-          {
-            author.deleted ?
-              I18n.t("components.comment_thread.title", { authorName: I18n.t("components.comment.deleted_user") }) :
-              I18n.t("components.comment_thread.title", { authorName: author.name })
-          }
-        </h6>
-      );
-    }
-
-    return null;
-  }
-}
-
-export default CommentThread;

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

@@ -1,150 +0,0 @@
-import { shallow } from "enzyme";
-import * as React from "react";
-
-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 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 commentsMaxLength={commentsMaxLength} />", () => {
-  let commentable: any = {};
-  let session: any = null;
-  const commentsMaxLength: number = 1000;
-  const commentableId = "1";
-  const commentableType = "Decidim::DummyResources::DummyResource";
-  const orderBy = "older";
-  const locale = "en";
-  const toggleTranslations = false;
-  const reorderComments = jasmine.createSpy("reorderComments");
-
-  beforeEach(() => {
-    loadLocaleTranslations("en");
-    const userData = generateUserData();
-    const commentsData = generateCommentsData(15);
-
-    const result = resolveGraphQLQuery(commentsQuery, {
-      filterResult: false,
-      rootValue: {
-        session: {
-          user: userData
-        },
-        commentable: {
-          acceptsNewComments: true,
-          userAllowedToComment: true,
-          commentsHaveAlignment: true,
-          commentsHaveVotes: true,
-          totalCommentsCount: 15,
-          comments: commentsData
-        }
-      },
-      variables: {
-        orderBy,
-        commentableId,
-        commentableType
-      }
-    });
-
-    session = result.session;
-    commentable = result.commentable;
-  });
-
-  it("renders loading-comments class and the respective loading text", () => {
-    const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} 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 locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
-    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 locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
-      expect(wrapper.find(CommentThread).length).toEqual(commentable.comments.length);
-      wrapper.find(CommentThread).forEach((node, idx) => {
-        expect(node.prop("comment")).toEqual(commentable.comments[idx]);
-      });
-    });
-
-    it("and pass the session as a prop to it", () => {
-      const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
-      expect(wrapper.find(CommentThread).length).toEqual(commentable.comments.length);
-      wrapper.find(CommentThread).forEach((node) => {
-        expect(node.prop("session")).toEqual(session);
-      });
-    });
-
-    it("and pass the commentable 'commentsHaveVotes' property as a prop to it", () => {
-      const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
-      expect(wrapper.find(CommentThread).length).toEqual(commentable.comments.length);
-      wrapper.find(CommentThread).forEach((node) => {
-        expect(node.prop("votable")).toBeTruthy();
-      });
-    });
-  });
-
-  it("renders comments count", () => {
-    const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
-    const rex = new RegExp(`${commentable.comments.length} comments`);
-    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 locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
-    expect(wrapper.find(AddCommentForm).length).toEqual(1);
-    expect(wrapper.find(AddCommentForm).prop("arguable")).toBeTruthy();
-  });
-
-  describe("when the commentable cannot accept new comments", () => {
-    beforeEach(() => {
-      commentable.acceptsNewComments = false;
-      commentable.userAllowedToComment = false;
-    });
-
-    it("doesn't render an AddCommentForm component", () => {
-      const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
-      expect(wrapper.find(AddCommentForm).exists()).toBeFalsy();
-    });
-
-    it("renders a callout message to inform the user that comments are blocked", () => {
-      const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
-      expect(wrapper.find(".callout.warning").text()).toContain("disabled");
-    });
-  });
-
-  describe("when the commentable can accept new comments but user is not allowed to comment", () => {
-    beforeEach(() => {
-      commentable.userAllowedToComment = false;
-    });
-
-    it("doesn't render an AddCommentForm component", () => {
-      const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
-      expect(wrapper.find(AddCommentForm).exists()).toBeFalsy();
-    });
-
-    it("renders a callout message to inform the user that comments are blocked", () => {
-      const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
-      expect(wrapper.find(".callout.warning").text()).toContain("not able");
-    });
-  });
-
-  describe("renders a CommentOrderSelector component", () => {
-    it("and pass the reorderComments as a prop to it", () => {
-      const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
-      expect(wrapper.find(CommentOrderSelector).prop("reorderComments")).toEqual(reorderComments);
-    });
-
-    it("and pass the orderBy as a prop to it", () => {
-      const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
-      expect(wrapper.find(CommentOrderSelector).prop("defaultOrderBy")).toEqual("older");
-    });
-  });
-});