Fix flaky wiki create test

There's an svg on the page that allows you to create a wiki page.
The svg takes a fraction of a second to load after which the
"Create your first page" button shifts up a bit. This can cause
 webdriver to miss the hit so we wait for the svg to load before
clicking the button.

Also update the elements used in the test to conform to our best
practice.

And replace `act` with `perform`

Finally, remove the `before` block and `login` method, making the
code slightly simpler.

app/views/projects/wikis/_form.html.haml

@@ -16,7 +16,7 @@
   .form-group.row
     .col-sm-12= f.label :title, class: 'control-label-full-width'
     .col-sm-12
-      = f.text_field :title, class: 'form-control', value: @page.title
+      = f.text_field :title, class: 'form-control qa-wiki-title-textbox', value: @page.title
       - if @page.persisted?
         %span.edit-wiki-page-slug-tip
           = icon('lightbulb-o')
@@ -31,7 +31,7 @@
     .col-sm-12= f.label :content, class: 'control-label-full-width'
     .col-sm-12
       = render layout: 'projects/md_preview', locals: { url: project_wiki_preview_markdown_path(@project, @page.slug) } do
-        = render 'projects/zen', f: f, attr: :content, classes: 'note-textarea', placeholder: s_("WikiPage|Write your content or drag files here…")
+        = render 'projects/zen', f: f, attr: :content, classes: 'note-textarea qa-wiki-content-textarea', placeholder: s_("WikiPage|Write your content or drag files here…")
         = render 'shared/notes/hints'
 
       .clearfix
@@ -47,14 +47,14 @@
 
   .form-group.row
     .col-sm-12= f.label :commit_message, class: 'control-label-full-width'
-    .col-sm-12= f.text_field :message, class: 'form-control', rows: 18, value: commit_message
+    .col-sm-12= f.text_field :message, class: 'form-control qa-wiki-message-textbox', rows: 18, value: commit_message
 
   .form-actions
     - if @page && @page.persisted?
-      = f.submit _("Save changes"), class: 'btn-success btn'
+      = f.submit _("Save changes"), class: 'btn-success btn qa-save-changes-button'
       .float-right
         = link_to _("Cancel"), project_wiki_path(@project, @page), class: 'btn btn-cancel btn-grouped'
     - else
-      = f.submit s_("Wiki|Create page"), class: 'btn-success btn'
+      = f.submit s_("Wiki|Create page"), class: 'btn-success btn qa-create-page-button'
       .float-right
         = link_to _("Cancel"), project_wiki_path(@project, :home), class: 'btn btn-cancel'

app/views/shared/empty_states/_wikis.html.haml

@@ -2,7 +2,7 @@
 
 - if can?(current_user, :create_wiki, @project)
   - create_path = project_wiki_path(@project, params[:id], { view: 'create' })
-  - create_link = link_to s_('WikiEmpty|Create your first page'), create_path, class: 'btn btn-success', title: s_('WikiEmpty|Create your first page')
+  - create_link = link_to s_('WikiEmpty|Create your first page'), create_path, class: 'btn btn-success qa-create-first-page-link', title: s_('WikiEmpty|Create your first page')
 
   = render layout: layout_path, locals: { image_path: 'illustrations/wiki_login_empty.svg' } do
     %h4.text-left

app/views/shared/empty_states/_wikis_layout.html.haml

 .row.empty-state
   .col-12
-    .svg-content
+    .svg-content.qa-svg-content
       = image_tag image_path
   .col-12
     .text-content.text-center

qa/qa.rb

@@ -290,6 +290,7 @@ module QA
     #
     module Component
       autoload :ClonePanel, 'qa/page/component/clone_panel'
+      autoload :LazyLoader, 'qa/page/component/lazy_loader'
       autoload :LegacyClonePanel, 'qa/page/component/legacy_clone_panel'
       autoload :Dropzone, 'qa/page/component/dropzone'
       autoload :GroupsFilter, 'qa/page/component/groups_filter'

qa/qa/page/component/lazy_loader.rb

+# frozen_string_literal: true
+
+module QA
+  module Page
+    module Component
+      module LazyLoader
+        def self.included(base)
+          base.view 'app/assets/javascripts/lazy_loader.js' do
+            element :js_lazy_loaded
+          end
+        end
+      end
+    end
+  end
+end

qa/qa/page/label/index.rb

+# frozen_string_literal: true
+
 module QA
   module Page
     module Label
       class Index < Page::Base
+        include Component::LazyLoader
+
         view 'app/views/shared/labels/_nav.html.haml' do
           element :label_create_new
         end
@@ -10,10 +14,6 @@ module QA
           element :label_svg
         end
 
-        view 'app/assets/javascripts/lazy_loader.js' do
-          element :js_lazy_loaded
-        end
-
         def go_to_new_label
           # The 'labels.svg' takes a fraction of a second to load after which the "New label" button shifts up a bit
           # This can cause webdriver to miss the hit so we wait for the svg to load (implicitly with has_element?)

qa/qa/page/project/wiki/new.rb

+# frozen_string_literal: true
+
 module QA
   module Page
     module Project
       module Wiki
         class New < Page::Base
+          include Component::LazyLoader
+
           view 'app/views/projects/wikis/_form.html.haml' do
-            element :wiki_title_textbox, 'text_field :title' # rubocop:disable QA/ElementWithPattern
-            element :wiki_content_textarea, "render 'projects/zen', f: f, attr: :content" # rubocop:disable QA/ElementWithPattern
-            element :wiki_message_textbox, 'text_field :message' # rubocop:disable QA/ElementWithPattern
-            element :save_changes_button, 'submit _("Save changes")' # rubocop:disable QA/ElementWithPattern
-            element :create_page_button, 'submit s_("Wiki|Create page")' # rubocop:disable QA/ElementWithPattern
+            element :wiki_title_textbox
+            element :wiki_content_textarea
+            element :wiki_message_textbox
+            element :save_changes_button
+            element :create_page_button
           end
 
           view 'app/views/shared/empty_states/_wikis.html.haml' do
-            element :create_link, 'Create your first page' # rubocop:disable QA/ElementWithPattern
+            element :create_first_page_link
+          end
+
+          view 'app/views/shared/empty_states/_wikis_layout.html.haml' do
+            element :svg_content
           end
 
           def go_to_create_first_page
-            click_link 'Create your first page'
+            # The svg takes a fraction of a second to load after which the
+            # "Create your first page" button shifts up a bit. This can cause
+            # webdriver to miss the hit so we wait for the svg to load before
+            # clicking the button.
+            within_element(:svg_content) do
+              has_element? :js_lazy_loaded
+            end
+
+            click_element :create_first_page_link
           end
 
           def set_title(title)
-            fill_in 'wiki_title', with: title
+            fill_element :wiki_title_textbox, title
           end
 
           def set_content(content)
-            fill_in 'wiki_content', with: content
+            fill_element :wiki_content_textarea, content
           end
 
           def set_message(message)
-            fill_in 'wiki_message', with: message
+            fill_element :wiki_message_textbox, message
           end
 
           def save_changes
-            click_on 'Save changes'
+            click_element :save_changes_button
           end
 
           def create_new_page
-            click_on 'Create page'
+            click_element :create_page_button
           end
         end
       end

qa/qa/specs/features/browser_ui/3_create/wiki/create_edit_clone_push_wiki_spec.rb

@@ -3,22 +3,15 @@
 module QA
   context 'Create' do
     describe 'Wiki management' do
-      def login
-        Runtime::Browser.visit(:gitlab, Page::Main::Login)
-        Page::Main::Login.act { sign_in_using_credentials }
-      end
-
       def validate_content(content)
         expect(page).to have_content('Wiki was successfully updated')
         expect(page).to have_content(/#{content}/)
       end
 
-      before do
-        login
-      end
+      it 'user creates, edits, clones, and pushes to the wiki' do
+        Runtime::Browser.visit(:gitlab, Page::Main::Login)
+        Page::Main::Login.perform(&:sign_in_using_credentials)
 
-      # Failure reported: https://gitlab.com/gitlab-org/quality/nightly/issues/24
-      it 'user creates, edits, clones, and pushes to the wiki', :quarantine do
         wiki = Resource::Wiki.fabricate! do |resource|
           resource.title = 'Home'
           resource.content = '# My First Wiki Content'
@@ -27,7 +20,7 @@ module QA
 
         validate_content('My First Wiki Content')
 
-        Page::Project::Wiki::Edit.act { go_to_edit_page }
+        Page::Project::Wiki::Edit.perform(&:go_to_edit_page)
         Page::Project::Wiki::New.perform do |page|
           page.set_content("My Second Wiki Content")
           page.save_changes
@@ -41,7 +34,7 @@ module QA
           push.file_content = '# My Third Wiki Content'
           push.commit_message = 'Update Home.md'
         end
-        Page::Project::Menu.act { click_wiki }
+        Page::Project::Menu.perform(&:click_wiki)
 
         expect(page).to have_content('My Third Wiki Content')
       end