Fix comments JS errors and delays (#6193)

* Fix comments UI functionality broken by #5662

* Ensure there are no JS errors during the comments UI tests

* Lint the frontend spec helpers

* Add CHANGELOG entry

* Fix the meetings comments spec (static map requests HTTP 500)

* Fix CHANGELOG

CHANGELOG.md

@@ -8,6 +8,7 @@
 
 ### Fixed
 
+- **decidim-comments**: Fix comments JS errors and delays [\#6193](https://github.com/decidim/decidim/pull/6193)
 - **decidim-elections**: Improve navigation consistency in the admin zone for elections questions and answers [\#6139](https://github.com/decidim/decidim/pull/6139)
 - **decidim-participatory_processes**: Fix rubocop errors arising from capybara upgrade [\#6197](https://github.com/decidim/decidim/pull/6197)
 - **decidim-assemblies**: Fix rubocop errors arising from capybara upgrade [\#6197](https://github.com/decidim/decidim/pull/6197)

decidim-comments/app/frontend/comments/add_comment_form.component.tsx

@@ -404,12 +404,13 @@ const AddCommentFormWithMutation = graphql<addCommentMutation, AddCommentFormPro
             const variables = {
               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 = [];

decidim-comments/app/frontend/comments/down_vote_button.component.tsx

@@ -76,7 +76,8 @@ const DownVoteButtonWithMutation = graphql<DownVoteMutation, DownVoteButtonProps
         const variables = {
           commentableId: ownProps.rootCommentable.id,
           commentableType: ownProps.rootCommentable.type,
-          orderBy: ownProps.orderBy
+          orderBy: ownProps.orderBy,
+          singleCommentId: null
         };
 
         const commentReducer = (comment: CommentFragment): CommentFragment => {

decidim-comments/app/frontend/comments/up_vote_button.component.tsx

@@ -76,7 +76,8 @@ const UpVoteButtonWithMutation = graphql<UpVoteMutation, UpVoteButtonProps>(upVo
         const variables = {
           commentableId: ownProps.rootCommentable.id,
           commentableType: ownProps.rootCommentable.type,
-          orderBy: ownProps.orderBy
+          orderBy: ownProps.orderBy,
+          singleCommentId: null
         };
 
         const commentReducer = (comment: CommentFragment): CommentFragment => {

decidim-core/lib/decidim/core/test/shared_examples/comments_examples.rb

@@ -9,6 +9,10 @@
     switch_to_host(organization.host)
   end
 
+  after do
+    expect_no_js_errors
+  end
+
   it "shows the list of comments for the resource" do
     visit resource_path
 

decidim-dev/lib/decidim/dev/test/rspec_support/frontend.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module FrontendHelpers
+  # Thanks to:
+  # https://medium.com/@coorasse/catch-javascript-errors-in-your-system-tests-89c2fe6773b1
+  def expect_no_js_errors
+    errors = page.driver.browser.manage.logs.get(:browser)
+    return if errors.blank?
+
+    aggregate_failures "javascript errors" do
+      errors.each do |error|
+        expect(error.level).not_to eq("SEVERE"), error.message
+      end
+    end
+  end
+end
+
+RSpec.configure do |config|
+  config.include FrontendHelpers, type: :system
+end

decidim-meetings/spec/system/comments_spec.rb

@@ -19,5 +19,10 @@
 
   let(:resource_path) { resource_locator(commentable).path }
 
+  before do
+    # Make static map requests not to fail with HTTP 500 (causes JS error)
+    stub_request(:get, Regexp.new(Decidim.geocoder.fetch(:static_map_url))).to_return(body: "")
+  end
+
   include_examples "comments"
 end