Add wait_for_javascript to flaky system tests (#5405)

spec/support/initializers/capybara.rb

@@ -28,3 +28,19 @@ RSpec.configure do |config|
     driven_by :headless_chrome
   end
 end
+
+# adapted from <https://medium.com/doctolib-engineering/hunting-flaky-tests-2-waiting-for-ajax-bd76d79d9ee9>
+def wait_for_javascript
+  max_time = Capybara::Helpers.monotonic_time + Capybara.default_max_wait_time
+  finished = false
+
+  while Capybara::Helpers.monotonic_time < max_time
+    finished = page.evaluate_script("typeof initializeBaseApp") != "undefined"
+
+    break if finished
+
+    sleep 0.1
+  end
+
+  raise "wait_for_javascript timeout" unless finished
+end

spec/system/articles/user_edits_an_article_spec.rb

@@ -12,6 +12,9 @@ RSpec.describe "Editing with an editor", type: :system, js: true do
   it "user clicks the edit button" do
     link = "/#{user.username}/#{article.slug}"
     visit link
+
+    wait_for_javascript
+
     click_on("EDIT")
     expect(page).to have_current_path(link + "/edit")
   end

spec/system/articles/user_visits_articles_by_tag_spec.rb

@@ -70,6 +70,8 @@ RSpec.describe "User visits articles by tag", type: :system do
     end
 
     it "shows the following button", js: true do
+      wait_for_javascript
+
       within("h1") { expect(page).to have_button("✓ FOLLOWING") }
     end
   end

spec/system/comments/user_delete_a_comment_spec.rb

@@ -15,6 +15,9 @@ RSpec.describe "Deleting Comment", type: :system, js: true do
   it "works" do
     visit "/"
     visit comment.path + "/delete_confirm"
+
+    wait_for_javascript
+
     click_button("DELETE")
     expect(page).to have_current_path(article.path)
   end

spec/system/comments/user_edits_a_comment_spec.rb

@@ -26,6 +26,9 @@ RSpec.describe "Editing A Comment", type: :system, js: true do
   context "when user edits comment on the bottom of the article" do
     it "updates" do
       visit article.path.to_s
+
+      wait_for_javascript
+
       click_link("EDIT")
       assert_updated
     end
@@ -34,7 +37,11 @@ RSpec.describe "Editing A Comment", type: :system, js: true do
   context "when user edits via permalinks" do
     it "updates" do
       user.reload
+
       visit user.comments.last.path.to_s
+
+      wait_for_javascript
+
       click_link("EDIT")
       assert_updated
     end

spec/system/comments/user_fills_out_comment_spec.rb

@@ -12,6 +12,9 @@ RSpec.describe "Creating Comment", type: :system, js: true do
 
   it "User fills out comment box normally" do
     visit article.path.to_s
+
+    wait_for_javascript
+
     fill_in "text-area", with: raw_comment
     click_button("SUBMIT")
     expect(page).to have_text(raw_comment)
@@ -19,6 +22,9 @@ RSpec.describe "Creating Comment", type: :system, js: true do
 
   it "User fill out comment box then click previews and submit" do
     visit article.path.to_s
+
+    wait_for_javascript
+
     fill_in "text-area", with: raw_comment
     click_button("PREVIEW")
     expect(page).to have_text(raw_comment)
@@ -32,6 +38,9 @@ RSpec.describe "Creating Comment", type: :system, js: true do
   it "User replies to a comment" do
     create(:comment, commentable_id: article.id, user_id: user.id)
     visit article.path.to_s
+
+    wait_for_javascript
+
     find(".toggle-reply-form").click
     find(:xpath, "//div[@class='actions']/form[@class='new_comment']/textarea").set(raw_comment)
     find(:xpath, "//div[contains(@class, 'reply-actions')]/input[@name='commit']").click