Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Test for React Edit Comment #9713

Merged
merged 2 commits into from
Jun 1, 2021
Merged

Add Test for React Edit Comment #9713

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
963d7b7
add edit/delete class for button #9365
noi5e Jun 1, 2021
ed41c83
add test for edit comment #9365
noi5e Jun 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 16 additions & 1 deletion app/javascript/components/CommentToolbarButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,26 @@ import React from "react";
import PropTypes from "prop-types";

const CommentToolbarButton = ({
buttonType,
icon,
onClick
}) => {
let additionalClass;

switch(buttonType) {
case "edit":
additionalClass = " edit-comment-btn";
break;
case "delete":
additionalClass = " delete-comment-btn";
break;
default:
additionalClass = "";
}

return (
<a
className="btn btn-outline-secondary btn-sm"
className={"btn btn-outline-secondary btn-sm" + additionalClass}
onClick={onClick}
>
{icon}
Expand All @@ -16,6 +30,7 @@ const CommentToolbarButton = ({
}

CommentToolbarButton.propTypes = {
buttonType: PropTypes.string,
icon: PropTypes.element,
onClick: PropTypes.func
};
Expand Down
2 changes: 2 additions & 0 deletions app/javascript/components/CommentsList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,14 @@ const CommentsList = ({

// each comment comes with a button to toggle edit form visible
const toggleEditButton = <CommentToolbarButton
buttonType="edit"
icon={<i className="fa fa-pencil"></i>}
onClick={() => handleFormVisibilityToggle("edit-" + comment.commentId)}
/>;

// and a delete button
const deleteButton = <CommentToolbarButton
buttonType="delete"
icon={<i className='icon fa fa-trash'></i>}
onClick={() => handleDeleteComment(comment.commentId)}
/>;
Expand Down
51 changes: 29 additions & 22 deletions test/system/comment_test.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,35 @@ def get_path(page_type, path)
page.find(".noty_body", text: "Comment Added!")
assert_selector('.comment .comment .comment-body p', text: comment_response_text)
end

test "#{page_type_string}: edit comment" do
nodes(:comment_note).add_comment({
uid: 2,
body: comment_text
})
visit nodes(:comment_note).path + test_path
# open up the edit comment form
page
.find('.edit-comment-btn')
.click
# find the edit form's textarea
textarea = page.find('[id^=text-input-edit-]', text: comment_text)
# extract the comment's ID from the textarea
textarea_id = textarea[:id]
comment_id_num = /text-input-edit-(\d+)/.match(textarea_id)[1]
# click on the textarea, and enter updated comment text
textarea
.click
.fill_in with: 'new comment text!'
# click the publish button
page
.find('#comment-form-edit-' + comment_id_num)
.find('button', text: 'Publish')
.click
# revisit the page. why? currently rails comments reload the page, react comments don't reload, but update the DOM.
visit nodes(:comment_note).path + test_path
assert_selector('#comments-list .comment-body p', text: 'new comment text!')
end
end

# PART 2: TESTS FOR RESEARCH NOTES ONLY
Expand Down Expand Up @@ -247,28 +276,6 @@ def get_path(page_type, path)
assert_selector('.btn[data-original-title="Help"]', count: 1)
end

test "#{page_type_string}: edit comment" do
nodes(node_name).add_comment({
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deleting this system test, as it's replaced by the new one.

uid: 2,
body: comment_text
})
visit get_path(page_type, nodes(node_name).path)
# Edit the comment
page.execute_script <<-JS
var comment = $(".comment")[1];
var commentID = comment.id;
var editCommentBtn = $(comment).find('.navbar-text .edit-comment-btn')
// Toggle edit mode
$(editCommentBtn).click()
var commentTextarea = $('#text-input-edit-' + commentID);
$(commentTextarea).val('Updated comment.')
var submitCommentBtn = $('#' + commentID + ' .control-group .btn-primary')[1];
$(submitCommentBtn).click()
JS
message = find('.alert-success', match: :first).text
assert_equal( "×\nComment updated.", message)
end

test "#{page_type_string}: react and unreact to comment" do
visit get_path(page_type, nodes(node_name).path)
first(".comment #dropdownMenuButton").click()
Expand Down