Wait for Web IDE commit animation

Wait for the "Commit..." button to disappear and the "Stage & Commit"
button to appear before clicking the latter button. The animation that
is shown while changing the buttons must complete before clicking
"Stage & Commit" will have any effect _even if_ the button is visible
before the animation is complete.

4 files changed, 58 insertions, 2 deletions

diff --git a/qa/qa/page/base.rb b/qa/qa/page/base.rb
index 0a48f4c0e7f..c3c90f254b7 100644
--- a/qa/qa/page/base.rb
+++ b/qa/qa/page/base.rb
@@ -116,6 +116,14 @@ module QA
         has_css?(element_selector_css(name), wait: wait)
       end
 
+      def has_no_element?(name, wait: Capybara.default_max_wait_time)
+        has_no_css?(element_selector_css(name), wait: wait)
+      end
+
+      def has_text?(text)
+        page.has_text? text
+      end
+
       def has_no_text?(text)
         page.has_no_text? text
       end
diff --git a/qa/qa/page/project/web_ide/edit.rb b/qa/qa/page/project/web_ide/edit.rb
index 23e580b81b6..a3e126b51da 100644
--- a/qa/qa/page/project/web_ide/edit.rb
+++ b/qa/qa/page/project/web_ide/edit.rb
@@ -66,11 +66,29 @@ module QA
 
           def commit_changes
             click_element :begin_commit_button
-            click_element :commit_button
 
+            # After clicking :begin_commit_button there is an animation that
+            # hides :begin_commit_button and shows :commit_button
+            #
+            # Wait for the animation to complete before clicking :commit_button
+            # otherwise the click will quietly do nothing.
             wait(reload: false) do
-              page.has_content?('Your changes have been committed')
+              has_no_element?(:begin_commit_button) &&
+                has_element?(:commit_button)
             end
+
+            # Retry the attempt to click :commit_button just in case part of the
+            # animation is still in process even when the buttons have the
+            # expected visibility.
+            commit_success_msg_shown = with_retry do
+              click_element :commit_button
+
+              wait(reload: false) do
+                has_text?('Your changes have been committed')
+              end
+            end
+
+            raise "The changes do not appear to have been committed successfully." unless commit_success_msg_shown
           end
         end
       end
diff --git a/qa/qa/support/page/logging.rb b/qa/qa/support/page/logging.rb
index cfccbb910b7..e96756642c8 100644
--- a/qa/qa/support/page/logging.rb
+++ b/qa/qa/support/page/logging.rb
@@ -88,6 +88,22 @@ module QA
           found
         end
 
+        def has_no_element?(name, wait: Capybara.default_max_wait_time)
+          found = super
+
+          log("has_no_element? :#{name} returned #{found}")
+
+          found
+        end
+
+        def has_text?(text)
+          found = super
+
+          log(%Q{has_text?('#{text}') returned #{found}})
+
+          found
+        end
+
         def has_no_text?(text)
           found = super
 
diff --git a/qa/spec/page/logging_spec.rb b/qa/spec/page/logging_spec.rb
index f108a5ca318..2eb826becea 100644
--- a/qa/spec/page/logging_spec.rb
+++ b/qa/spec/page/logging_spec.rb
@@ -74,6 +74,20 @@ describe QA::Support::Page::Logging do
       .to output(/has_element\? :element returned true/).to_stdout_from_any_process
   end
 
+  it 'logs has_no_element?' do
+    allow(page).to receive(:has_no_css?).and_return(true)
+
+    expect { subject.has_no_element?(:element) }
+      .to output(/has_no_element\? :element returned true/).to_stdout_from_any_process
+  end
+
+  it 'logs has_text?' do
+    allow(page).to receive(:has_text?).and_return(true)
+
+    expect { subject.has_text? 'foo' }
+      .to output(/has_text\?\('foo'\) returned true/).to_stdout_from_any_process
+  end
+
   it 'logs has_no_text?' do
     allow(page).to receive(:has_no_text?).with('foo').and_return(true)