decidim-comments 0.22.0 → 0.23.3

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

@@ -2,14 +2,15 @@ import { mount, ReactWrapper, shallow } from "enzyme";
 import * as $ from "jquery";
 import * as React from "react";
 
-import { AddCommentForm, MAX_LENGTH } from "./add_comment_form.component";
+import { AddCommentForm } from "./add_comment_form.component";
 
 import generateUserData from "../support/generate_user_data";
 import generateUserGroupData from "../support/generate_user_group_data";
 import { loadLocaleTranslations } from "../support/load_translations";
 
-describe("<AddCommentForm />", () => {
+describe("<AddCommentForm commentsMaxLength={commentsMaxLength} />", () => {
   let session: any = null;
+  const commentsMaxLength: number = 1000;
   const commentable = {
     id: "1",
     type: "Decidim::DummyResources::DummyResource"
@@ -18,6 +19,7 @@ describe("<AddCommentForm />", () => {
   const addCommentStub = (): any => {
     return null;
   };
+  const context = {locale: undefined, toggleTranslations: undefined};
 
   beforeEach(() => {
     loadLocaleTranslations("en");
@@ -35,44 +37,44 @@ describe("<AddCommentForm />", () => {
   });
 
   it("should render a div with class add-comment", () => {
-    const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
+    const wrapper = shallow(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
     expect(wrapper.find("div.add-comment")).toBeDefined();
   });
 
   it("should have a reference to body textarea", () => {
-    const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
+    const wrapper = mount(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
     expect((wrapper.instance() as AddCommentForm).bodyTextArea).toBeDefined();
   });
 
   it("should initialize with a state property disabled as true", () => {
-    const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
+    const wrapper = mount(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
     expect(wrapper.state()).toHaveProperty("disabled", true);
   });
 
   it("should have a default prop showTitle as true", () => {
-    const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
+    const wrapper = mount(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
     expect(wrapper.props()).toHaveProperty("showTitle", true);
   });
 
   it("should not render the title if prop showTitle is false", () => {
-    const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} showTitle={false} rootCommentable={commentable} orderBy={orderBy} />);
+    const wrapper = shallow(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} showTitle={false} rootCommentable={commentable} orderBy={orderBy} />);
     expect(wrapper.find("h4.section-heading").exists()).toBeFalsy();
   });
 
   it("should have a default prop submitButtonClassName as 'button button--sc'", () => {
-    const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
+    const wrapper = mount(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
     expect(wrapper.props()).toHaveProperty("submitButtonClassName", "button button--sc");
   });
 
   it("should use prop submitButtonClassName as a className prop for submit button", () => {
-    const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} submitButtonClassName="button small hollow" rootCommentable={commentable} orderBy={orderBy} />);
+    const wrapper = shallow(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} submitButtonClassName="button small hollow" rootCommentable={commentable} orderBy={orderBy} />);
     expect(wrapper.find('button[type="submit"]').hasClass("button")).toBeTruthy();
     expect(wrapper.find('button[type="submit"]').hasClass("small")).toBeTruthy();
     expect(wrapper.find('button[type="submit"]').hasClass("hollow")).toBeTruthy();
   });
 
   it("should enable the submit button if textarea is not blank", () => {
-    const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
+    const wrapper = mount(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
     wrapper.find("textarea").simulate("change", {
       target: {
         value: "This is a comment"
@@ -82,7 +84,7 @@ describe("<AddCommentForm />", () => {
   });
 
   it("should disable the submit button if textarea is blank", () => {
-    const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
+    const wrapper = mount(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
     wrapper.find("textarea").simulate("change", {
       target: {
         value: "This will be deleted"
@@ -97,19 +99,19 @@ describe("<AddCommentForm />", () => {
   });
 
   it("should not render a div with class 'opinion-toggle'", () => {
-    const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
+    const wrapper = shallow(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
     expect(wrapper.find(".opinion-toggle").exists()).toBeFalsy();
   });
 
   it("should render the remaining character count", () => {
-    const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
+    const wrapper = shallow(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
     const commentBody = "This is a new comment!";
     wrapper.find("textarea").simulate("change", {
       target: {
         value: commentBody
       }
     });
-    expect(wrapper.find(".remaining-character-count").text()).toContain(MAX_LENGTH - commentBody.length);
+    expect(wrapper.find(".remaining-character-count").text()).toContain(commentsMaxLength - commentBody.length);
   });
 
   describe("submitting the form", () => {
@@ -121,14 +123,14 @@ describe("<AddCommentForm />", () => {
     beforeEach(() => {
       addComment = jasmine.createSpy("addComment");
       onCommentAdded = jasmine.createSpy("onCommentAdded");
-      wrapper = mount(<AddCommentForm addComment={addComment} session={session} commentable={commentable} onCommentAdded={onCommentAdded} rootCommentable={commentable} orderBy={orderBy} />);
+      wrapper = mount(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addComment} session={session} commentable={commentable} onCommentAdded={onCommentAdded} rootCommentable={commentable} orderBy={orderBy} />);
       message = "This will be submitted";
       (wrapper.instance() as AddCommentForm).bodyTextArea.value = message;
     });
 
     it("should call addComment prop with the textarea value and state property alignment", () => {
       wrapper.find("form").simulate("submit");
-      expect(addComment).toHaveBeenCalledWith({ body: message, alignment: 0 });
+      expect(addComment).toHaveBeenCalledWith({ body: message, alignment: 0 }, context);
     });
 
     it("should reset textarea", () => {
@@ -149,25 +151,25 @@ describe("<AddCommentForm />", () => {
   });
 
   it("should initialize state with a property alignment and value 0", () => {
-    const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} arguable={true} rootCommentable={commentable} orderBy={orderBy} />);
+    const wrapper = shallow(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} arguable={true} rootCommentable={commentable} orderBy={orderBy} />);
     expect(wrapper.state()).toHaveProperty("alignment", 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} commentable={commentable} arguable={true} rootCommentable={commentable} orderBy={orderBy} />);
+      const wrapper = shallow(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} arguable={true} rootCommentable={commentable} orderBy={orderBy} />);
       expect(wrapper.find(".opinion-toggle")).toBeDefined();
     });
 
     it("should set state alignment to 1 if user clicks ok button and change its class", () => {
-      const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} arguable={true} rootCommentable={commentable} orderBy={orderBy} />);
+      const wrapper = shallow(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} arguable={true} rootCommentable={commentable} orderBy={orderBy} />);
       wrapper.find(".opinion-toggle--ok").simulate("click");
       expect(wrapper.find(".opinion-toggle--ok").hasClass("is-active")).toBeTruthy();
       expect(wrapper.state()).toHaveProperty("alignment", 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} commentable={commentable} arguable={true} rootCommentable={commentable} orderBy={orderBy} />);
+      const wrapper = shallow(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} arguable={true} rootCommentable={commentable} orderBy={orderBy} />);
       wrapper.find(".opinion-toggle--ko").simulate("click");
       expect(wrapper.find(".opinion-toggle--ko").hasClass("is-active")).toBeTruthy();
       expect(wrapper.state()).toHaveProperty("alignment", -1);
@@ -180,7 +182,7 @@ describe("<AddCommentForm />", () => {
 
       beforeEach(() => {
         addComment = jasmine.createSpy("addComment");
-        wrapper = mount(<AddCommentForm addComment={addComment} session={session} commentable={commentable} arguable={true} rootCommentable={commentable} orderBy={orderBy} />);
+        wrapper = mount(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addComment} session={session} commentable={commentable} arguable={true} rootCommentable={commentable} orderBy={orderBy} />);
         message = "This will be submitted";
         (wrapper.instance() as AddCommentForm).bodyTextArea.value = message;
       });
@@ -188,7 +190,7 @@ describe("<AddCommentForm />", () => {
       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).toHaveBeenCalledWith({ body: message, alignment: -1 });
+        expect(addComment).toHaveBeenCalledWith({ body: message, alignment: -1 }, context);
       });
 
       it("should reset the state to its initial state", () => {
@@ -208,12 +210,12 @@ describe("<AddCommentForm />", () => {
     });
 
     it("should have a reference to user_group_id select", () => {
-      const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
+      const wrapper = mount(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
       expect((wrapper.instance() as AddCommentForm).userGroupIdSelect).toBeDefined();
     });
 
     it("should render a select with option tags for each verified user group", () => {
-      const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
+      const wrapper = mount(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
       expect(wrapper.find("select").children("option").length).toBe(3);
     });
 
@@ -225,7 +227,7 @@ describe("<AddCommentForm />", () => {
 
       beforeEach(() => {
         addComment = jasmine.createSpy("addComment");
-        wrapper = mount(<AddCommentForm addComment={addComment} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
+        wrapper = mount(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addComment} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
         message = "This will be submitted";
         userGroupId = session.verifiedUserGroups[1].id;
         (wrapper.instance() as AddCommentForm).bodyTextArea.value = message;
@@ -234,7 +236,7 @@ describe("<AddCommentForm />", () => {
 
       it("should call addComment prop with the body textarea, alignment and user_group_id select values", () => {
         wrapper.find("form").simulate("submit");
-        expect(addComment).toHaveBeenCalledWith({ body: message, alignment: 0, userGroupId });
+        expect(addComment).toHaveBeenCalledWith({ body: message, alignment: 0, userGroupId }, context);
       });
 
       describe("when user_group_id is blank", () => {
@@ -244,7 +246,7 @@ describe("<AddCommentForm />", () => {
 
         it("should call addComment prop with the body textarea and alignment", () => {
           wrapper.find("form").simulate("submit");
-          expect(addComment).toHaveBeenCalledWith({ body: message, alignment: 0 });
+          expect(addComment).toHaveBeenCalledWith({ body: message, alignment: 0 }, context);
         });
       });
     });
@@ -256,7 +258,7 @@ describe("<AddCommentForm />", () => {
     });
 
     it("display a message to sign in or sign up", () => {
-      const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
+      const wrapper = mount(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
       expect(wrapper.find("span").text()).toContain("sign up");
     });
   });

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

@@ -4,6 +4,8 @@ import * as React from "react";
 import { graphql } from "react-apollo";
 import * as uuid from "uuid";
 
+const PropTypes = require("prop-types");
+
 import Icon from "../application/icon.component";
 
 const { I18n, Translate } = require("react-i18nify");
@@ -27,9 +29,10 @@ interface AddCommentFormProps {
   autoFocus?: boolean;
   arguable?: boolean;
   userAllowedToComment?: boolean;
-  addComment?: (data: { body: string, alignment: number, userGroupId?: string }) => void;
+  addComment?: (data: { body: string, alignment: number, userGroupId?: string }, context: any) => void;
   onCommentAdded?: () => void;
   orderBy: string;
+  commentsMaxLength: number;
 }
 
 interface AddCommentFormState {
@@ -39,8 +42,6 @@ interface AddCommentFormState {
   remainingCharacterCount: number;
 }
 
-export const MAX_LENGTH = 1000;
-
 /**
  * Renders a form to create new comments.
  * @class
@@ -54,6 +55,11 @@ export class AddCommentForm extends React.Component<AddCommentFormProps, AddComm
     autoFocus: false
   };
 
+  public static contextTypes: any = {
+    locale: PropTypes.string,
+    toggleTranslations: PropTypes.bool
+  };
+
   public bodyTextArea: HTMLTextAreaElement;
   public userGroupIdSelect: HTMLSelectElement;
 
@@ -64,7 +70,7 @@ export class AddCommentForm extends React.Component<AddCommentFormProps, AddComm
       disabled: true,
       error: false,
       alignment: 0,
-      remainingCharacterCount: MAX_LENGTH
+      remainingCharacterCount: props.commentsMaxLength
     };
   }
 
@@ -176,7 +182,7 @@ export class AddCommentForm extends React.Component<AddCommentFormProps, AddComm
    * @returns {Void|DOMElement} - The heading or an empty element
    */
   private _renderTextArea() {
-    const { commentable: { id, type }, autoFocus } = this.props;
+    const { commentable: { id, type }, autoFocus, commentsMaxLength } = this.props;
     const { error } = this.state;
     const className = classnames({ "is-invalid-input": error });
 
@@ -185,11 +191,11 @@ export class AddCommentForm extends React.Component<AddCommentFormProps, AddComm
       id: `add-comment-${type}-${id}`,
       className,
       rows: "4",
-      maxLength: MAX_LENGTH,
+      maxLength: commentsMaxLength,
       required: "required",
-      pattern: `^(.){0,${MAX_LENGTH}}$`,
+      pattern: `^(.){0,${commentsMaxLength}}$`,
       placeholder: I18n.t("components.add_comment_form.form.body.placeholder"),
-      onChange: (evt: React.ChangeEvent<HTMLTextAreaElement>) => this._checkCommentBody(evt.target.value)
+      onChange: (evt: React.ChangeEvent<HTMLTextAreaElement>) => this._checkCommentBody(evt.target.value, commentsMaxLength as number)
     };
 
     if (autoFocus) {
@@ -207,12 +213,13 @@ export class AddCommentForm extends React.Component<AddCommentFormProps, AddComm
    * @returns {Void|DOMElement} - The error or an empty element
    */
   private _renderTextAreaError() {
+    const { commentsMaxLength } = this.props;
     const { error } = this.state;
 
     if (error) {
       return (
         <span className="form-error is-visible">
-          {I18n.t("components.add_comment_form.form.form_error", { length: MAX_LENGTH })}
+          {I18n.t("components.add_comment_form.form.form_error", { length: commentsMaxLength })}
         </span>
       );
     }
@@ -317,10 +324,10 @@ export class AddCommentForm extends React.Component<AddCommentFormProps, AddComm
    * @param {string} body - The comment's body
    * @returns {Void} - Returns nothing
    */
-  private _checkCommentBody(body: string) {
+  private _checkCommentBody(body: string, commentsMaxLength: number) {
     this.setState({
-      disabled: body === "", error: body === "" || body.length > MAX_LENGTH,
-      remainingCharacterCount: MAX_LENGTH - body.length
+      disabled: body === "", error: body === "" || body.length > commentsMaxLength,
+      remainingCharacterCount: commentsMaxLength - body.length
     });
   }
 
@@ -343,7 +350,7 @@ export class AddCommentForm extends React.Component<AddCommentFormProps, AddComm
     }
 
     if (addComment) {
-      addComment(addCommentParams);
+      addComment(addCommentParams, this.context);
     }
 
     this.bodyTextArea.value = "";
@@ -360,10 +367,12 @@ const getCommentsQuery = require("../queries/comments.query.graphql");
 
 const AddCommentFormWithMutation = graphql<addCommentMutation, AddCommentFormProps>(addCommentMutation, {
   props: ({ ownProps, mutate }) => ({
-    addComment: ({ body, alignment, userGroupId }: { body: string, alignment: number, userGroupId: string }) => {
+    addComment: ({ body, alignment, userGroupId }: { body: string, alignment: number, userGroupId: string }, { locale, toggleTranslations }: any) => {
       if (mutate) {
         mutate({
           variables: {
+            locale,
+            toggleTranslations,
             commentableId: ownProps.commentable.id,
             commentableType: ownProps.commentable.type,
             body,
@@ -381,10 +390,14 @@ const AddCommentFormWithMutation = graphql<addCommentMutation, AddCommentFormPro
                 createdAt: new Date().toISOString(),
                 body,
                 formattedBody: body,
+                formattedCreatedAt: new Date().toISOString(),
                 alignment,
                 author: {
                   __typename: "User",
                   name: ownProps.session && ownProps.session.user.name,
+                  nickname: ownProps.session && ownProps.session.user.name,
+                  profilePath: null,
+                  badge: null,
                   avatarUrl: ownProps.session && ownProps.session.user.avatarUrl,
                   deleted: false
                 },
@@ -402,14 +415,17 @@ const AddCommentFormWithMutation = graphql<addCommentMutation, AddCommentFormPro
           },
           update: (store, { data }: { data: addCommentMutation }) => {
             const variables = {
+              locale,
+              toggleTranslations,
               commentableId: ownProps.rootCommentable.id,
               commentableType: ownProps.rootCommentable.type,
-              orderBy: ownProps.orderBy
+              orderBy: ownProps.orderBy,
+              singleCommentId: null
             };
             const prev = store.readQuery<GetCommentsQuery>({
               query: getCommentsQuery,
               variables
-             });
+            });
             const { id, type } = ownProps.commentable;
             const newComment = data.commentable && data.commentable.addComment;
             let comments = [];

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

@@ -1,8 +1,8 @@
-import { mount, shallow } from "enzyme";
+import {mount, shallow} from "enzyme";
 import * as $ from "jquery";
 import * as React from "react";
 
-import { CommentFragment } from "../support/schema";
+import {CommentFragment} from "../support/schema";
 import AddCommentForm from "./add_comment_form.component";
 import Comment from "./comment.component";
 import DownVoteButton from "./down_vote_button.component";
@@ -11,13 +11,15 @@ import UpVoteButton from "./up_vote_button.component";
 import generateCommentsData from "../support/generate_comments_data";
 import generateUserData from "../support/generate_user_data";
 
-import { loadLocaleTranslations } from "../support/load_translations";
+import {loadLocaleTranslations} from "../support/load_translations";
 
 describe("<Comment />", () => {
+  const commentsMaxLength: number = 1000;
   const orderBy = "older";
   const rootCommentable = {
     id: "1",
-    type: "Decidim::DummyResources::DummyResource"
+    type: "Decidim::DummyResources::DummyResource",
+    commentsMaxLength: 1000
   };
   let comment: CommentFragment;
   let session: any = null;
@@ -48,6 +50,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find(".comment").exists()).toBeTruthy();
@@ -60,6 +63,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find("time").prop("dateTime")).toEqual(comment.createdAt);
@@ -72,6 +76,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find("span.author__name").text()).toEqual(
@@ -86,6 +91,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find("span.author__nickname").text()).toEqual(
@@ -105,6 +111,7 @@ describe("<Comment />", () => {
           session={session}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(
@@ -120,6 +127,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find(".author__avatar img").prop("src")).toEqual(
@@ -134,6 +142,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find("div.comment__content").html()).toContain(
@@ -148,6 +157,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.state()).toHaveProperty("showReplyForm", false);
@@ -160,6 +170,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find(AddCommentForm).exists()).toBeFalsy();
@@ -181,6 +192,7 @@ describe("<Comment />", () => {
         isRootComment={true}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find("div.comment__additionalreply").exists()).toBeFalsy();
@@ -194,6 +206,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find("div.comment__additionalreply").exists()).toBeFalsy();
@@ -208,6 +221,7 @@ describe("<Comment />", () => {
         isRootComment={true}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find("div.comment__additionalreply").exists()).toBeTruthy();
@@ -221,6 +235,7 @@ describe("<Comment />", () => {
         votable={true}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     wrapper.find(Comment).forEach((node, idx) => {
@@ -239,6 +254,7 @@ describe("<Comment />", () => {
         articleClassName="comment comment--nested"
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     wrapper.find(Comment).forEach(node => {
@@ -255,6 +271,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.prop("articleClassName")).toEqual("comment");
@@ -267,6 +284,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.prop("isRootComment")).toBeFalsy();
@@ -284,6 +302,7 @@ describe("<Comment />", () => {
           session={session}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find("button.comment__reply").exists()).toBeFalsy();
@@ -302,6 +321,7 @@ describe("<Comment />", () => {
           session={session}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find("button.comment__reply").exists()).toBeFalsy();
@@ -314,6 +334,7 @@ describe("<Comment />", () => {
           session={session}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find(".flag-modal").exists()).toBeFalsy();
@@ -328,6 +349,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find("span.alignment.label").text()).toEqual("In favor");
@@ -341,6 +363,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find("span.alert.label").text()).toEqual("Against");
@@ -353,6 +376,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find(".flag-modal").exists()).toBeTruthy();
@@ -367,6 +391,7 @@ describe("<Comment />", () => {
           session={session}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find(".flag-modal form").exists()).toBeFalsy();
@@ -382,6 +407,7 @@ describe("<Comment />", () => {
           votable={true}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find(UpVoteButton).prop("comment")).toEqual(comment);
@@ -395,6 +421,7 @@ describe("<Comment />", () => {
           votable={true}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find(DownVoteButton).prop("comment")).toEqual(comment);
@@ -413,6 +440,7 @@ describe("<Comment />", () => {
           session={session}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find("button.comment__reply").exists()).toBeFalsy();
@@ -425,6 +453,7 @@ describe("<Comment />", () => {
           session={session}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find(".flag-modal").exists()).toBeFalsy();
@@ -438,6 +467,7 @@ describe("<Comment />", () => {
           votable={true}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find(".comment__votes--up").exists()).toBeFalsy();
@@ -451,6 +481,7 @@ describe("<Comment />", () => {
           votable={true}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find(".comment__votes--down").exists()).toBeFalsy();