external-link

Report inappropriate content

Is this content inappropriate?

Reason

Contains clickbait, advertising, scams or script bots.

Contains racism, sexism, slurs, personal attacks, death threats, suicide requests or any form of hate speech.

Contains illegal activity, suicide threats, personal information, or something else you think does not belong on Reichel, Bernhard and Glover.

Additional comments

`; } const generateSingleComment = (commentId, content, replies = "") => { return `

Buster Hammes 4 days ago

${generateFlagModalForm(commentId)}

${content}

${replies}

`; } const generateCommentThread = (commentId, content, replies = "") => { return `

${generateSingleComment(commentId, content, replies)}

` } beforeEach(() => { let orderSelector = `

Best rated

Recent

Older

Most discussed

`; let reply = generateSingleComment(451, "This is a reply."); let firstThread = generateCommentThread(450, "This is the first comment thread.", reply); let secondThread = generateCommentThread(452, "This is another comment thread."); let comments = `

3 comments

${orderSelector}

${firstThread} ${secondThread}

${generateCommentForm("Dummy", 123)}

`; $("body").append(comments); $container = $(document).find(selector); subject = new CommentsComponent($container, { commentableGid: "commentable-gid", commentsUrl: "/comments", rootDepth: 0, order: "older", lastCommentId: 456, pollingInterval: 1000 }); $("textarea[maxlength]", $container).each((_i, elem) => { createCharacterCounter($(elem)); }); $doc = $(document); addComment = $(".add-comment", subject.$element); orderLinks = $(".comment-order-by a.comment-order-by__item", subject.$element); allToggles = $(".add-comment .opinion-toggle .button", subject.$element); allTextareas = $(".add-comment textarea", subject.$element); allForms = $(".add-comment form", subject.$element); }); it("exists", () => { expect(CommentsComponent).toBeDefined(); }); it("initializes unmounted", () => { expect(subject.mounted).toBeFalsy(); }); it("initializes the comments element with the given selector", () => { expect(subject.$element[0]).toEqual($(selector)[0]); }); it("loads the comments through AJAX", () => { subject.mountComponent(); expect(Rails.ajax).toHaveBeenCalledWith({ url: "/comments", type: "GET", data: new URLSearchParams({ "commentable_gid": "commentable-gid", "root_depth": 0, order: "older", after: 456 }), success: expect.any(Function) }); }); it("disables the comment textarea", () => { subject.mountComponent(); expect($(`${selector} .add-comment textarea`).prop("disabled")).toBeTruthy(); }); it("re-enables the comment textarea after a successful fetch", () => { Rails.ajax.mockImplementationOnce((options) => options.success()); subject.mountComponent(); expect($(`${selector} .add-comment textarea`).prop("disabled")).toBeFalsy(); }); it("starts polling for new comments", () => { jest.spyOn(window, "setTimeout"); Rails.ajax.mockImplementationOnce((options) => options.success()); subject.mountComponent(); expect(window.setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 1000); }); it("does not disable the textarea when polling comments normally", () => { Rails.ajax.mockImplementationOnce((options) => options.success()); subject.mountComponent(); // Delay the success call 2s after the polling has happened to test that // the textarea is still enabled when the polling is happening. Rails.ajax.mockImplementationOnce((options) => { setTimeout(() => options.success(), 2000); }); jest.advanceTimersByTime(1500); expect($(`${selector} .add-comment textarea`).prop("disabled")).toBeFalsy(); }); describe("when mounted", () => { beforeEach(() => { spyOnAddComment("on"); jest.spyOn(orderLinks, "on"); jest.spyOn($doc, "trigger"); subject.mountComponent(); }); afterEach(() => { subject.unmountComponent(); }); it("mounts the component", () => { expect(subject.mounted).toBeTruthy(); }); it("binds the add comment element events", () => { addComment.each((i) => { expect(addComment[i].opinionToggles.on).toHaveBeenCalledWith( "click.decidim-comments", subject._onToggleOpinion ); expect(addComment[i].commentTextarea.on).toHaveBeenCalledWith( "input.decidim-comments", subject._onTextInput ); expect(addComment[i].commentForm.on).toHaveBeenCalledWith( "submit.decidim-comments", expect.any(Function) ); }); }); it("attaches the mentions elements to the text fields", () => { addComment.each((i) => { expect($doc.trigger).toHaveBeenCalledWith( "attach-mentions-element", [addComment[i].commentTextarea[0]] ); }); }); }); describe("when interacting", () => { beforeEach(() => { spyOnAddComment(); Rails.ajax.mockImplementationOnce((options) => options.success()); subject.mountComponent(); }); afterEach(() => { subject.unmountComponent(); }); describe("form and input events", () => { let commentSection = null; let commentForm = null; let commentText = null; beforeEach(() => { commentSection = addComment[addComment.length - 1]; commentForm = commentSection.commentForm; commentText = commentSection.commentTextarea; // Avoid not implemented error commentForm[0].submit = jest.fn(); }); it("enables the submit button when comment is entered", () => { commentText.html("This is a test comment") commentText.trigger("input"); expect( $("button[type='submit']", commentSection.commentForm).is(":enabled") ).toBeTruthy(); }); it("disables the submit button on submit and stops polling", () => { jest.spyOn(window, "clearTimeout"); commentText.html("This is a test comment") commentText.trigger("input"); commentForm.trigger("submit"); expect( $("button[type='submit']", commentSection.commentForm).is(":disabled") ).toBeTruthy(); expect(window.clearTimeout).toHaveBeenCalledWith(subject.pollTimeout); }); }); describe("opinion toggles", () => { let commentSection = null; let toggles = null; let toggleContainer = null; beforeEach(() => { commentSection = addComment[addComment.length - 1]; toggles = commentSection.opinionToggles; toggleContainer = $(toggles[0]).parent(); }); it("adds the correct alignment on positive toggle", () => { $(toggles[0]).trigger("click"); expect($(toggles[0]).attr("aria-pressed")).toEqual("true"); expect($(toggles[1]).attr("aria-pressed")).toEqual("false"); expect($(toggles[2]).attr("aria-pressed")).toEqual("false"); expect($(".alignment-input", commentSection).val()).toEqual("1"); expect($(".selected-state", toggleContainer).text()).toEqual("Your opinion about this topic is positive"); }); it("adds the correct alignment on neutral toggle", () => { $(toggles[0]).trigger("click"); $(toggles[1]).trigger("click"); expect($(toggles[0]).attr("aria-pressed")).toEqual("false"); expect($(toggles[1]).attr("aria-pressed")).toEqual("true"); expect($(toggles[2]).attr("aria-pressed")).toEqual("false"); expect($(".alignment-input", commentSection).val()).toEqual("0"); expect($(".selected-state", toggleContainer).text()).toEqual("Your opinion about this topic is neutral"); }); it("adds the correct alignment on negative toggle", () => { $(toggles[2]).trigger("click"); expect($(toggles[0]).attr("aria-pressed")).toEqual("false"); expect($(toggles[1]).attr("aria-pressed")).toEqual("false"); expect($(toggles[2]).attr("aria-pressed")).toEqual("true"); expect($(".alignment-input", commentSection).val()).toEqual("-1"); expect($(".selected-state", toggleContainer).text()).toEqual("Your opinion about this topic is negative"); }); }); }); describe("when adding comments", () => { beforeEach(() => { subject.mountComponent(); }); afterEach(() => { subject.unmountComponent(); }); describe("addThread", () => { it("adds a new comment thread", () => { const newThread = generateCommentThread(999, "This is a dynamically added comment"); subject.addThread(newThread); expect(subject.$element.html()).toEqual(expect.stringContaining( "This is a dynamically added comment" )); }); it("does not clear the comment form text area", () => { const commentSection = addComment[addComment.length - 1]; const textArea = $("textarea", commentSection); textArea.val("I am writing a new comment..."); const newThread = generateCommentThread(999, "This is a dynamically added comment"); subject.addThread(newThread); expect(textArea.val()).toEqual("I am writing a new comment..."); }); describe("as the current user", () => { it("clears the comment form text area", () => { const commentSection = addComment[addComment.length - 1]; const textArea = $("textarea", commentSection); textArea.val("I am writing a new comment..."); const newThread = generateCommentThread(999, "This is a dynamically added comment"); subject.addThread(newThread, true); expect(textArea.val()).toEqual(""); }); }); }); describe("addReply", () => { const newReply = generateSingleComment(999, "This is a dynamically added reply"); it("adds a new reply to an existing thread", () => { subject.addReply(450, newReply); expect(subject.$element.html()).toEqual(expect.stringContaining( "This is a dynamically added reply" )); }); it("does not clear the reply comment form text area", () => { const commentSection = $("#comment-450-replies", subject.$element); const textArea = $("textarea", commentSection); textArea.val("I am writing a new comment..."); subject.addReply(450, newReply); expect(textArea.val()).toEqual("I am writing a new comment..."); }); describe("as the current user", () => { it("clears the comment form text area", () => { const commentSection = $(".add-comment", subject.$element); const textArea = $("textarea", commentSection); textArea.val("I am writing a new comment..."); subject.addReply(450, newReply, true); expect(textArea.val()).toEqual(""); }); }); }); }); describe("when unmounted", () => { beforeEach(() => { jest.spyOn(orderLinks, "off"); jest.spyOn(allToggles, "off"); jest.spyOn(allTextareas, "off"); jest.spyOn(allForms, "off"); subject.mountComponent(); subject.unmountComponent(); }); it("mounts the component", () => { expect(subject.mounted).toBeFalsy(); }); it("unbinds the add comment element events", () => { expect(allToggles.off).toHaveBeenCalledWith("click.decidim-comments"); expect(allTextareas.off).toHaveBeenCalledWith("input.decidim-comments"); expect(allForms.off).toHaveBeenCalledWith("submit.decidim-comments"); }); }); afterEach(() => { $(selector).remove(); }) });