Show errors on the "Simple React" page. (shakacode#321)

* Show details for errors on the "Simple React" page. * Only for "Horizontal Form" and "Stacked Form" * Fix. Clean error alert up after a successful submission. * Add validation styles for input elements * Fix error propagation for "React Demo" page * And resolve eslint warnings because of Eslint (shakacode#320) * Add Capybara specs

Author: AlexKVal

client/app/bundles/comments/actions/commentsActionCreators.js

@@ -48,7 +48,7 @@ export function fetchComments() {
  requestsManager
  .fetchEntities()
  .then(res => dispatch(fetchCommentsSuccess(res.data)))
- .catch(res => dispatch(fetchCommentsFailure(res.data)))
+ .catch(error => dispatch(fetchCommentsFailure(error)))
  );
  };
 }
@@ -60,7 +60,7 @@ export function submitComment(comment) {
  requestsManager
  .submitEntity({ comment })
  .then(res => dispatch(submitCommentSuccess(res.data)))
- .catch(res => dispatch(submitCommentFailure(res.data)))
+ .catch(error => dispatch(submitCommentFailure(error)))
  );
  };
 }

client/app/bundles/comments/components/CommentBox/CommentForm/CommentForm.jsx

@@ -13,6 +13,15 @@ import BaseComponent from 'libs/components/BaseComponent';
 const emptyComment = { author: '', text: '' };
 const textPlaceholder = 'Say something using markdown...';
 
+function bsStyleFor(propName, error) {
+ if (error) {
+ const errorData = (error && error.response && error.response.data) || {};
+ return (propName in errorData) ? 'error' : 'success';
+ }
+
+ return null;
+}
+
 export default class CommentForm extends BaseComponent {
  static propTypes = {
  isSaving: PropTypes.bool.isRequired,
@@ -119,6 +128,8 @@ export default class CommentForm extends BaseComponent {
  value={this.state.comment.author}
  onChange={this.handleChange}
  disabled={this.props.isSaving}
+ hasFeedback
+ bsStyle={bsStyleFor('author', this.props.error)}
  />
  <Input
  type="textarea"
@@ -130,6 +141,8 @@ export default class CommentForm extends BaseComponent {
  value={this.state.comment.text}
  onChange={this.handleChange}
  disabled={this.props.isSaving}
+ hasFeedback
+ bsStyle={bsStyleFor('text', this.props.error)}
  />
  <div className="form-group">
  <div className="col-sm-offset-2 col-sm-10">
@@ -159,6 +172,8 @@ export default class CommentForm extends BaseComponent {
  value={this.state.comment.author}
  onChange={this.handleChange}
  disabled={this.props.isSaving}
+ hasFeedback
+ bsStyle={bsStyleFor('author', this.props.error)}
  />
  <Input
  type="textarea"
@@ -168,6 +183,8 @@ export default class CommentForm extends BaseComponent {
  value={this.state.comment.text}
  onChange={this.handleChange}
  disabled={this.props.isSaving}
+ hasFeedback
+ bsStyle={bsStyleFor('text', this.props.error)}
  />
  <input
  type="submit"
@@ -225,12 +242,23 @@ export default class CommentForm extends BaseComponent {
  }
 
  errorWarning() {
+ const error = this.props.error;
+
  // If there is no error, there is nothing to add to the DOM
- if (!this.props.error) return null;
+ if (!error) return null;
+
+ const errorData = error.response && error.response.data;
+
+ const errorElements = _.transform(errorData, (result, errorText, errorFor) => {
+ result.push(<li key={errorFor}><b>{_.upperFirst(errorFor)}:</b> {errorText}</li>);
+ }, []);
+
  return (
  <Alert bsStyle="danger" key="commentSubmissionError">
- <strong>Your comment was not saved! </strong>
- A server error prevented your comment from being saved. Please try again.
+ <strong>Your comment was not saved!</strong>
+ <ul>
+ {errorElements}
+ </ul>
  </Alert>
  );
  }

client/app/bundles/comments/components/SimpleCommentScreen/SimpleCommentScreen.jsx

@@ -55,6 +55,7 @@ export default class SimpleCommentScreen extends BaseComponent {
 
  this.setState({
  $$comments: $$comments.unshift($$comment),
+ submitCommentError: null,
  isSaving: false,
  });
  })

spec/features/add_new_comment_spec.rb

@@ -6,36 +6,45 @@
  context "React Router", page: :main, js: true do
  context "via Horizontal Form", form: :horizontal do
  include_examples "New Comment Submission", true
+ include_examples "Validation errors displaying"
  end
  context "via Inline Form", form: :inline do
  include_examples "New Comment Submission", true
+ include_examples "Validation errors displaying"
  end
  context "via Stacked Form", form: :stacked do
  include_examples "New Comment Submission", true
+ include_examples "Validation errors displaying"
  end
  end
 
  context "React/Redux", page: :react_demo, js: true do
  context "via Horizontal Form", form: :horizontal do
  include_examples "New Comment Submission", true
+ include_examples "Validation errors displaying"
  end
  context "via Inline Form", form: :inline do
  include_examples "New Comment Submission", true
+ include_examples "Validation errors displaying"
  end
  context "via Stacked Form", form: :stacked do
  include_examples "New Comment Submission", true
+ include_examples "Validation errors displaying"
  end
  end
 
  context "simple page", page: :simple, js: true do
  context "via Horizontal Form", form: :horizontal do
  include_examples "New Comment Submission", false
+ include_examples "Validation errors displaying"
  end
  context "via Inline Form", form: :inline do
  include_examples "New Comment Submission", false
+ include_examples "Validation errors displaying"
  end
  context "via the Stacked Form", form: :stacked, driver: js_selenium_driver do
  include_examples "New Comment Submission", false
+ include_examples "Validation errors displaying"
  end
  end
 

spec/features/shared/examples.rb

@@ -10,14 +10,15 @@
  scenario "comment is added" do
  expect(page).to have_css(".js-comment-author", text: name)
  expect(page).to have_css(".js-comment-text", text: text)
+ expect(page).to have_no_content("Your comment was not saved!")
  if expect_comment_count
  expect(page).to have_css("#js-comment-count",
  text: "Comments: #{Comment.count}")
  end
  end
  end
 
- context "when the new comment is submmited with blank fields", blank_form_submitted: true do
+ context "when the new comment is submitted with blank fields", blank_form_submitted: true do
  let!(:comments_count) { all(".comment").size }
 
  scenario "comment is not added" do
@@ -38,3 +39,23 @@
  end
  end
 end
+
+shared_examples "Validation errors displaying" do
+ context "when the new comment is submitted with blank fields", blank_form_submitted: true do
+ scenario "validation errors displayed" do
+ expect(page).to have_content("Your comment was not saved!")
+ expect(page).to have_content("Author: can't be blank")
+ expect(page).to have_content("Text: can't be blank")
+
+ # with a successful consequent comment submitted
+ # the validation warnings should disappear
+ fill_in "Your Name", with: "Some name"
+ fill_in "Say something using markdown...", with: "Some text"
+ click_button "Post"
+
+ expect(page).to have_no_content("Your comment was not saved!")
+ expect(page).to have_no_content("Author: can't be blank")
+ expect(page).to have_no_content("Text: can't be blank")
+ end
+ end
+end