Fix Web IDE add template test

Wait for the new file modal to stop animating before clicking it

We now need to click the commit button 3 times:
1. To enter commit mode
2. To being staging changes
3. To submit the commit

12 files changed, 76 insertions, 32 deletions

diff --git a/app/assets/javascripts/ide/components/activity_bar.vue b/app/assets/javascripts/ide/components/activity_bar.vue
index 7c769ab7fa0..7b4e03be8eb 100644
--- a/app/assets/javascripts/ide/components/activity_bar.vue
+++ b/app/assets/javascripts/ide/components/activity_bar.vue
@@ -78,7 +78,7 @@ export default {
           data-container="body"
           data-placement="right"
           type="button"
-          class="ide-sidebar-link js-ide-commit-mode"
+          class="ide-sidebar-link js-ide-commit-mode qa-commit-mode-tab"
           @click.prevent="changedActivityView($event, $options.activityBarViews.commit)"
         >
           <icon name="commit" />
diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
index 412b07553dc..f67666f1fbf 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
@@ -134,6 +134,7 @@ export default {
 <template>
   <gl-modal
     id="ide-new-entry"
+    class="qa-new-file-modal"
     :header-title-text="modalTitle"
     :footer-primary-button-text="buttonLabel"
     footer-primary-button-variant="success"
diff --git a/app/views/projects/_new_project_fields.html.haml b/app/views/projects/_new_project_fields.html.haml
index 1c1c7d832bd..9ae84a909a5 100644
--- a/app/views/projects/_new_project_fields.html.haml
+++ b/app/views/projects/_new_project_fields.html.haml
@@ -54,7 +54,7 @@
   .form-group.row.initialize-with-readme-setting
     %div{ :class => "col-sm-12" }
       .form-check
-        = check_box_tag 'project[initialize_with_readme]', '1', false, class: 'form-check-input', data: { track_label: "#{track_label}", track_event: "activate_form_input", track_property: "init_with_readme" }
+        = check_box_tag 'project[initialize_with_readme]', '1', false, class: 'form-check-input qa-initialize-with-readme-checkbox', data: { track_label: "#{track_label}", track_event: "activate_form_input", track_property: "init_with_readme" }
         = label_tag 'project[initialize_with_readme]', class: 'form-check-label' do
           .option-title
             %strong Initialize repository with a README
diff --git a/qa/qa/page/base.rb b/qa/qa/page/base.rb
index 389f4e0032e..d247a273637 100644
--- a/qa/qa/page/base.rb
+++ b/qa/qa/page/base.rb
@@ -78,8 +78,12 @@ module QA
         page.evaluate_script('xhr.status') == 200
       end
 
-      def find_element(name, text: nil, wait: Capybara.default_max_wait_time)
-        find(element_selector_css(name), wait: wait, text: text)
+      def find_element(name, **kwargs)
+        find(element_selector_css(name), kwargs)
+      end
+
+      def active_element?(name)
+        find_element(name, class: 'active')
       end
 
       def all_elements(name)
@@ -132,6 +136,15 @@ module QA
         has_no_css?('.fa-spinner', wait: Capybara.default_max_wait_time)
       end
 
+      def wait_for_animated_element(name)
+        # It would be ideal if we could detect when the animation is complete
+        # but in some cases there's nothing we can easily access via capybara
+        # so instead we wait for the element, and then we wait a little longer
+        raise ElementNotFound, %Q(Couldn't find element named "#{name}") unless has_element?(name)
+
+        sleep 1
+      end
+
       def within_element(name, text: nil)
         page.within(element_selector_css(name), text: text) do
           yield
diff --git a/qa/qa/page/file/form.rb b/qa/qa/page/file/form.rb
index dd9a9e054e1..e42de7d65c5 100644
--- a/qa/qa/page/file/form.rb
+++ b/qa/qa/page/file/form.rb
@@ -38,6 +38,8 @@ module QA
 
         def commit_changes
           click_on 'Commit changes'
+
+          finished_loading?
         end
 
         def select_template(template_type, template)
diff --git a/qa/qa/page/project/new.rb b/qa/qa/page/project/new.rb
index 4f26ca5037c..defd85a5740 100644
--- a/qa/qa/page/project/new.rb
+++ b/qa/qa/page/project/new.rb
@@ -12,6 +12,7 @@ module QA
         end
 
         view 'app/views/projects/_new_project_fields.html.haml' do
+          element :initialize_with_readme_checkbox
           element :project_namespace_select
           element :project_namespace_field, 'namespaces_options' # rubocop:disable QA/ElementWithPattern
           element :project_name, 'text_field :name' # rubocop:disable QA/ElementWithPattern
@@ -64,6 +65,10 @@ module QA
         def click_github_link
           click_link 'GitHub'
         end
+
+        def enable_initialize_with_readme
+          check_element :initialize_with_readme_checkbox
+        end
       end
     end
   end
diff --git a/qa/qa/page/project/web_ide/edit.rb b/qa/qa/page/project/web_ide/edit.rb
index ff7cc04e352..b5a36862389 100644
--- a/qa/qa/page/project/web_ide/edit.rb
+++ b/qa/qa/page/project/web_ide/edit.rb
@@ -7,6 +7,10 @@ module QA
         class Edit < Page::Base
           include Page::Component::DropdownFilter
 
+          view 'app/assets/javascripts/ide/components/activity_bar.vue' do
+            element :commit_mode_tab
+          end
+
           view 'app/assets/javascripts/ide/components/ide_tree.vue' do
             element :new_file
           end
@@ -17,6 +21,7 @@ module QA
 
           view 'app/assets/javascripts/ide/components/new_dropdown/modal.vue' do
             element :full_file_path
+            element :new_file_modal
             element :template_list
           end
 
@@ -42,12 +47,19 @@ module QA
 
           def create_new_file_from_template(file_name, template)
             click_element :new_file
+
+            # Wait for the modal animation to complete before clicking on the file name
+            wait_for_animated_element(:new_file_modal)
+
             within_element(:template_list) do
               click_on file_name
             rescue Capybara::ElementNotFound
               raise ElementNotFound, %Q(Couldn't find file template named "#{file_name}". Please confirm that it is a valid option.)
             end
 
+            # Wait for the modal to fade out too
+            has_no_element?(:new_file_modal)
+
             wait(reload: false) do
               within_element(:file_templates_bar) do
                 click_element :file_template_dropdown
@@ -63,10 +75,16 @@ module QA
           end
 
           def commit_changes
+            # Clicking :begin_commit_button the first time switches from the
+            # edit to the commit view
+            click_element :begin_commit_button
+            active_element? :commit_mode_tab
+
+            # We need to click :begin_commit_button again
             click_element :begin_commit_button
 
-            # After clicking :begin_commit_button there is an animation that
-            # hides :begin_commit_button and shows :commit_button
+            # After clicking :begin_commit_button the 2nd time 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.
@@ -75,7 +93,10 @@ module QA
                 has_element?(:commit_button)
             end
 
-            # Retry the attempt to click :commit_button just in case part of the
+            # At this point we're ready to commit and the button should be
+            # labelled "Stage & Commit"
+            #
+            # Click :commit_button and keep retrying just in case part of the
             # animation is still in process even when the buttons have the
             # expected visibility.
             commit_success_msg_shown = retry_until do
diff --git a/qa/qa/resource/project.rb b/qa/qa/resource/project.rb
index c1a0cff86d8..d706439a891 100644
--- a/qa/qa/resource/project.rb
+++ b/qa/qa/resource/project.rb
@@ -7,6 +7,8 @@ module QA
     class Project < Base
       include Events::Project
 
+      attr_writer :initialize_with_readme
+
       attribute :id
       attribute :name
       attribute :description
@@ -33,6 +35,7 @@ module QA
 
       def initialize
         @description = 'My awesome project'
+        @initialize_with_readme = false
       end
 
       def name=(raw_name)
@@ -49,6 +52,7 @@ module QA
           page.choose_name(@name)
           page.add_description(@description)
           page.set_visibility('Public')
+          page.enable_initialize_with_readme if @initialize_with_readme
           page.create_new_project
         end
       end
@@ -73,7 +77,8 @@ module QA
           path: name,
           name: name,
           description: description,
-          visibility: 'public'
+          visibility: 'public',
+          initialize_with_readme: @initialize_with_readme
         }
       end
 
diff --git a/qa/qa/specs/features/browser_ui/3_create/repository/add_file_template_spec.rb b/qa/qa/specs/features/browser_ui/3_create/repository/add_file_template_spec.rb
index 10bba98f704..2750b171a85 100644
--- a/qa/qa/specs/features/browser_ui/3_create/repository/add_file_template_spec.rb
+++ b/qa/qa/specs/features/browser_ui/3_create/repository/add_file_template_spec.rb
@@ -17,14 +17,7 @@ module QA
         @project = Resource::Project.fabricate! do |project|
           project.name = 'file-template-project'
           project.description = 'Add file templates via the Files view'
-        end
-
-        # There's no 'New File' dropdown when the project is blank, so we first
-        # add a dummy file so that the dropdown will appear
-        Resource::File.fabricate! do |file|
-          file.project = @project
-          file.name = 'README.md'
-          file.content = '# Readme'
+          project.initialize_with_readme = true
         end
 
         Page::Main::Menu.perform(&:sign_out)
diff --git a/qa/qa/specs/features/browser_ui/3_create/web_ide/add_file_template_spec.rb b/qa/qa/specs/features/browser_ui/3_create/web_ide/add_file_template_spec.rb
index 66cd712afb0..078d3b2b5b1 100644
--- a/qa/qa/specs/features/browser_ui/3_create/web_ide/add_file_template_spec.rb
+++ b/qa/qa/specs/features/browser_ui/3_create/web_ide/add_file_template_spec.rb
@@ -17,16 +17,7 @@ module QA
         @project = Resource::Project.fabricate! do |project|
           project.name = 'file-template-project'
           project.description = 'Add file templates via the Web IDE'
-        end
-        @project.visit!
-
-        # Add a file via the regular Files view because the Web IDE isn't
-        # available unless there is a file present
-        Page::Project::Show.perform(&:create_first_new_file!)
-        Page::File::Form.perform do |page|
-          page.add_name('dummy')
-          page.add_content('Enable the Web IDE')
-          page.commit_changes
+          project.initialize_with_readme = true
         end
 
         Page::Main::Menu.perform(&:sign_out)
diff --git a/qa/qa/support/page/logging.rb b/qa/qa/support/page/logging.rb
index 3fe567d7757..02ebd96ad49 100644
--- a/qa/qa/support/page/logging.rb
+++ b/qa/qa/support/page/logging.rb
@@ -33,11 +33,8 @@ module QA
           exists
         end
 
-        def find_element(name, text: nil, wait: Capybara.default_max_wait_time)
-          msg = ["finding :#{name}"]
-          msg << %Q(with text "#{text}") if text
-          msg << "(wait: #{wait})"
-          log(msg.compact.join(' '))
+        def find_element(name, **kwargs)
+          log("finding :#{name} with args #{kwargs}")
 
           element = super
 
@@ -122,6 +119,12 @@ module QA
           loaded
         end
 
+        def wait_for_animated_element(name)
+          log("waiting for animated element: #{name}")
+
+          super
+        end
+
         def within_element(name)
           log("within element :#{name}")
 
diff --git a/qa/spec/page/logging_spec.rb b/qa/spec/page/logging_spec.rb
index 99e96b81a51..092c6a17c9c 100644
--- a/qa/spec/page/logging_spec.rb
+++ b/qa/spec/page/logging_spec.rb
@@ -64,11 +64,21 @@ describe QA::Support::Page::Logging do
 
   it 'logs find_element with text' do
     expect { subject.find_element(:element, text: 'foo') }
-      .to output(/finding :element with text "foo"/).to_stdout_from_any_process
+      .to output(/finding :element with args {:text=>"foo"}/).to_stdout_from_any_process
     expect { subject.find_element(:element, text: 'foo') }
       .to output(/found :element/).to_stdout_from_any_process
   end
 
+  it 'logs find_element with wait' do
+    expect { subject.find_element(:element, wait: 0) }
+      .to output(/finding :element with args {:wait=>0}/).to_stdout_from_any_process
+  end
+
+  it 'logs find_element with class' do
+    expect { subject.find_element(:element, class: 'active') }
+      .to output(/finding :element with args {:class=>\"active\"}/).to_stdout_from_any_process
+  end
+
   it 'logs click_element' do
     expect { subject.click_element(:element) }
       .to output(/clicking :element/).to_stdout_from_any_process