From d713409aa13af07eff4c9002f86aec2012513707 Mon Sep 17 00:00:00 2001 From: Timo Stollenwerk Date: Fri, 27 Aug 2010 17:11:25 +0000 Subject: [PATCH] Use a discussion JS namespace for comments.js; JS tests for clearForm and createReplyForm functions added. svn path=/plone.app.discussion/trunk/; revision=39104 --- .../browser/javascripts/comments.js | 94 ++++++++-------- .../discussion/tests/javascripts/comments.js | 60 ---------- .../tests/javascripts/test_comments.html | 95 +--------------- .../tests/javascripts/test_comments.js | 105 ++++++++++++++++++ 4 files changed, 161 insertions(+), 193 deletions(-) delete mode 100644 plone/app/discussion/tests/javascripts/comments.js create mode 100644 plone/app/discussion/tests/javascripts/test_comments.js diff --git a/plone/app/discussion/browser/javascripts/comments.js b/plone/app/discussion/browser/javascripts/comments.js index 7eaf12f..5db59e3 100644 --- a/plone/app/discussion/browser/javascripts/comments.js +++ b/plone/app/discussion/browser/javascripts/comments.js @@ -1,14 +1,17 @@ -jq(document).ready(function () { +(function ($) { + // Create a namespace for plone.app.discussion + $.discussion = {}; + /************************************************************************** * By default, hide the reply and the cancel button for the regular add * comment form. **************************************************************************/ - jq(".reply").find("input[name='form.buttons.reply']") + $(".reply").find("input[name='form.buttons.reply']") .css("display", "none"); - jq(".reply").find("input[name='form.buttons.cancel']") + $(".reply").find("input[name='form.buttons.cancel']") .css("display", "none"); @@ -16,93 +19,94 @@ jq(document).ready(function () { * By default, show the reply button only when Javascript is enabled. * Otherwise hide it, since the reply functions only work with JS enabled. **************************************************************************/ - jq(".reply-to-comment-button").css("display" , "inline"); - - - /************************************************************************** + $(".reply-to-comment-button").css("display" , "inline"); + + + /************************************************************************** * Remove all error messages and field values from the form that is passed * to the function. **************************************************************************/ - function clearForm(form_div) { - form_div.find(".error").removeClass("error"); - form_div.find(".fieldErrorBox").remove(); - form_div.find("input[type='text']").attr("value", ""); - form_div.find("textarea").attr("value", ""); + $.discussion.clearForm = function (comment_div) { + comment_div.find(".error").removeClass("error"); + comment_div.find(".fieldErrorBox").remove(); + comment_div.find("input[type='text']").val(""); + comment_div.find("textarea").empty(); + //comment_div.find("textarea").val(""); /* XXX: Clean all additional form extender fields. */ } - - + + /************************************************************************** * Create a reply-to-comment form right beneath the form that is passed to * the function. We do this by copying the regular comment form and * adding a hidden in_reply_to field to the form. **************************************************************************/ - function createReplyForm(comment_div) { - + $.discussion.createReplyForm = function (comment_div) { + var comment_id = comment_div.attr("id"); - + var reply_button = comment_div.find(".reply-to-comment-button"); - + /* Clone the reply div at the end of the page template that contains * the regular comment form. */ - var reply_div = jq("#commenting").clone(true); - + var reply_div = $("#commenting").clone(true); + /* Remove the ReCaptcha JS code before appending the form. If not * removed, this causes problems */ reply_div.find("#formfield-form-widgets-captcha") - .find("script") - .remove(); - + .find("script") + .remove(); + /* Insert the cloned comment form right after the reply button of the * current comment. */ reply_div.appendTo(comment_div).css("display", "none"); - + /* Remove id="reply" attribute, since we use it to uniquely the main reply form. */ reply_div.removeAttr("id"); - + /* Hide the reply button (only hide, because we may want to show it * again if the user hits the cancel button). */ - jq(reply_button).css("display", "none"); - + $(reply_button).css("display", "none"); + /* Fetch the reply form inside the reply div */ var reply_form = reply_div.find("form"); - + /* Populate the hidden 'in_reply_to' field with the correct comment id */ reply_form.find("input[name='form.widgets.in_reply_to']") - .val(comment_id); - + .val(comment_id); + /* Add a remove-reply-to-comment Javascript function to remove the form */ var cancel_reply_button = reply_div.find(".cancelreplytocomment"); cancel_reply_button.attr("id", comment_id); - + /* Show the cancel buttons. */ reply_form.find("input[name='form.buttons.cancel']") - .css("display", "inline"); - + .css("display", "inline"); + /* Show the reply layer with a slide down effect */ reply_div.slideDown("slow"); - + /* Show the cancel button in the reply-to-comment form */ cancel_reply_button.css("display", "inline"); } - + /************************************************************************** * If the user has hit the reply button of a reply-to-comment form (form was * submitted with a value for the "in_reply_to" field in the request), * create a reply-to-comment form right under this comment. **************************************************************************/ - var post_comment_div = jq("#commenting"); + var post_comment_div = $("#commenting"); var in_reply_to_field = post_comment_div.find("input[name='form.widgets.in_reply_to']"); if (in_reply_to_field.val() !== "") { var current_reply_id = "#" + in_reply_to_field.val(); - var current_reply_to_div = jq(".discussion").find(current_reply_id); + var current_reply_to_div = $(".discussion").find(current_reply_id); createReplyForm(current_reply_to_div); clearForm(post_comment_div); } @@ -112,8 +116,8 @@ jq(document).ready(function () { * If the user hits the "reply" button of an existing comment, create a * reply form right beneath this comment. **************************************************************************/ - jq(".reply-to-comment-button").bind("click", function (e) { - var comment_div = jq(this).parents().filter(".comment"); + $(".reply-to-comment-button").bind("click", function (e) { + var comment_div = $(this).parents().filter(".comment"); createReplyForm(comment_div); clearForm(comment_div); }); @@ -123,17 +127,17 @@ jq(document).ready(function () { * If the user hits the "clear" button of an open reply-to-comment form, * remove the form and show the "reply" button again. **************************************************************************/ - jq("#form-buttons-cancel").bind("click", function (e) { + $("#form-buttons-cancel").bind("click", function (e) { e.preventDefault(); - var reply_to_comment_button = jq(this). + var reply_to_comment_button = $(this). parents(). filter(".comment"). find(".reply-to-comment-button"); /* Find the reply-to-comment form and hide and remove it again. */ - reply_to_comment_form = jq(this).parents().filter(".reply"); + reply_to_comment_form = $(this).parents().filter(".reply"); reply_to_comment_form.slideUp("slow", function () { - jq(this).remove(); + $(this).remove(); }); /* Show the reply-to-comment button again. */ @@ -141,5 +145,7 @@ jq(document).ready(function () { }); -}); +//#JSCOVERAGE_ENDIF + +}(jQuery)); \ No newline at end of file diff --git a/plone/app/discussion/tests/javascripts/comments.js b/plone/app/discussion/tests/javascripts/comments.js deleted file mode 100644 index 3e26980..0000000 --- a/plone/app/discussion/tests/javascripts/comments.js +++ /dev/null @@ -1,60 +0,0 @@ - -module("comments", { - setup: function () { - // Create a comments section with one comment inside - var comments = $(document.createElement("div")) - .addClass("discussion") - .append($(document.createElement("div")) - .addClass("comment replyTreeLevel0 state-published") - .attr("id", "1282720906349675") - .append($(document.createElement("div")) - .addClass("commentActions")) - .append($(document.createElement("button")) - .addClass("reply-to-comment-button") - ) - ); - $(document.body).append(comments); - - // Create a basic commenting form - var commentform = $(document.createElement("div")) - .append($(document.createElement("form")) - .addClass("form") - .append($(document.createElement("div")) - .addClass("formfield-form-widgets-author_name") - .append($(document.createElement("input")) - .addClass("text-widget textline-field") - .append($(document.createElement("a")) - .addClass("selected") - .attr("href", "#fieldsetlegend-default") - ) - ) - ) - .append($(document.createElement("div")) - .addClass("formControls") - .append($(document.createElement("input")) - .attr("name", "form.buttons.comment")) - .append($(document.createElement("input")) - .attr("name", "form.buttons.cancel")) - ) - ) - .addClass("reply") - .attr("id", "commenting"); - $(document.body).append(commentform); - }, - teardown: function () { - $("#commenting").remove(); - } -}); - -test("Hide the reply and the cancel button for the comment form", function () { - expect(1); - $(".reply").find("input[name='form.buttons.cancel']") - .css("display", "none"); - equals($("input[name='form.buttons.cancel']").css("display"), "none", "The cancel button should be hidden"); -}); - -test("Show the reply button only when Javascript is enabled", function () { - expect(1); - $(".reply-to-comment-button").css("display" , "inline"); - equals($("button[class='reply-to-comment-button']").attr("style"), "display: inline;", "The reply button should show up when Javascript is enabled"); -}); diff --git a/plone/app/discussion/tests/javascripts/test_comments.html b/plone/app/discussion/tests/javascripts/test_comments.html index 4ef9407..99c85c8 100644 --- a/plone/app/discussion/tests/javascripts/test_comments.html +++ b/plone/app/discussion/tests/javascripts/test_comments.html @@ -2,9 +2,9 @@ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - - + + @@ -13,8 +13,8 @@ dir="ltr" id="html"> - + @@ -22,7 +22,7 @@ dir="ltr" id="html"> "../../browser/javascripts/comments.js"> - @@ -39,89 +39,6 @@ dir="ltr" id="html">
- - diff --git a/plone/app/discussion/tests/javascripts/test_comments.js b/plone/app/discussion/tests/javascripts/test_comments.js new file mode 100644 index 0000000..6d2e609 --- /dev/null +++ b/plone/app/discussion/tests/javascripts/test_comments.js @@ -0,0 +1,105 @@ + + +module("comments", { + setup: function () { + // Create a comments section with one comment inside + var comments = $(document.createElement("div")) + .addClass("discussion") + .append($(document.createElement("div")) + .addClass("comment") + .attr("id", "1282720906349675") + .append($(document.createElement("div")) + .addClass("commentActions")) + .append($(document.createElement("button")) + .addClass("reply-to-comment-button") + ) + ); + $(document.body).append(comments); + + // Create a basic commenting form + var commentform = $(document.createElement("div")) + .append($(document.createElement("form")) + .addClass("form") + .append($(document.createElement("div")) + .addClass("formfield-form-widgets-in_reply_to") + .append($(document.createElement("input")) + .attr("name", "form.widgets.in_reply_to") + .val("") + ) + ) + .append($(document.createElement("div")) + .addClass("formfield-form-widgets-author_name") + .append($(document.createElement("input")) + .attr("name", "form.widgets.author") + .attr("type", "text") + ) + ) + .append($(document.createElement("div")) + .addClass("formfield-form-widgets-text") + .append($(document.createElement("textarea")) + .attr("name", "form.widgets.text") + ) + ) + .append($(document.createElement("div")) + .addClass("formControls") + .append($(document.createElement("input")) + .attr("name", "form.buttons.comment")) + .append($(document.createElement("input")) + .attr("name", "form.buttons.cancel")) + ) + ) + .addClass("reply") + .attr("id", "commenting"); + $(document.body).append(commentform); + }, + teardown: function () { + $("#commenting").remove(); + $(".discussion").remove(); + } +}); + + +test("Initialisation", function() { + expect(1); + ok($.discussion, "$.discussion"); +}); + +test("Hide the reply and the cancel button for the comment form", function(){ + expect(1); + $(".reply").find("input[name='form.buttons.cancel']").css("display", "none"); + equals($("input[name='form.buttons.cancel']").css("display"), "none", "The cancel button should be hidden"); +}); + +test("Show the reply button only when Javascript is enabled", function(){ + expect(1); + $(".reply-to-comment-button").css("display", "inline"); + equals($("button[class='reply-to-comment-button']").attr("style"), "display: inline;", "The reply button should show up when Javascript is enabled"); +}); + +test("Create a comment reply form.", function() { + expect(2); + var comment_div = $("#1282720906349675"); + $.discussion.createReplyForm(comment_div); + var reply_form = comment_div.find(".reply"); + ok(reply_form, "Reply form has been copied"); + same(reply_form.find("input[name='form.widgets.in_reply_to']").val(), "1282720906349675", "The reply for should have the id of the comment in the in_reply_to field"); +}); + +test("Clear all form values from a form.", function() { + // Create a reply form with some values + var comment_div = $("#1282720906349675"); + $.discussion.createReplyForm(comment_div); + var reply_form = comment_div.find(".reply"); + var author = reply_form.find("input[name='form.widgets.author']"); + var text = comment_div.find("input[name='form.widgets.text']"); + author.val("my author"); + text.val("my text"); + // Call the clearForm function to clear the form + $.discussion.clearForm(comment_div); + // Check if all form fields have been cleared + var author = comment_div.find("input[name='form.widgets.author']"); + var text = comment_div.find("input[name='form.widgets.text']"); + equals(author.val(), "", "The author form value should be empty"); + equals(text.text(), "", "The text form value should be empty"); +}); +