Add a new test to create a snippet

Add "smoke" tag to the test

Fix links to views in Page Object files

Review fixes

Remove useless view block

Implement Snippets::Show page object class

Fix review suggestions

Fix review suggestions 2

Fix test with empty snippets state

Remove useless css class

Fix issues

14 files changed, 221 insertions, 13 deletions

diff --git a/app/views/layouts/header/_new_dropdown.haml b/app/views/layouts/header/_new_dropdown.haml
index 5a66b02c048..438340464bd 100644
--- a/app/views/layouts/header/_new_dropdown.haml
+++ b/app/views/layouts/header/_new_dropdown.haml
@@ -38,4 +38,4 @@
         %li= link_to _('New project'), new_project_path, class: 'qa-global-new-project-link'
       - if current_user.can_create_group?
         %li= link_to _('New group'), new_group_path
-      %li= link_to _('New snippet'), new_snippet_path
+      %li= link_to _('New snippet'), new_snippet_path, class: 'qa-global-new-snippet-link'
diff --git a/app/views/layouts/nav/_dashboard.html.haml b/app/views/layouts/nav/_dashboard.html.haml
index f659c89dd30..1ec368f8910 100644
--- a/app/views/layouts/nav/_dashboard.html.haml
+++ b/app/views/layouts/nav/_dashboard.html.haml
@@ -29,7 +29,7 @@
 
   - if dashboard_nav_link?(:snippets)
     = nav_link(controller: 'dashboard/snippets', html_options: { class: ["d-none d-xl-block", ("d-lg-block" unless has_extra_nav_icons?)] }) do
-      = link_to dashboard_snippets_path, class: 'dashboard-shortcuts-snippets', title: _('Snippets') do
+      = link_to dashboard_snippets_path, class: 'dashboard-shortcuts-snippets qa-snippets-link', title: _('Snippets') do
         = _('Snippets')
 
   - if any_dashboard_nav_link?([:groups, :milestones, :activity, :snippets])
diff --git a/app/views/projects/blob/_header_content.html.haml b/app/views/projects/blob/_header_content.html.haml
index 4bef45932d0..88fa31a73b0 100644
--- a/app/views/projects/blob/_header_content.html.haml
+++ b/app/views/projects/blob/_header_content.html.haml
@@ -1,7 +1,7 @@
 .file-header-content
   = blob_icon blob.mode, blob.name
 
-  %strong.file-title-name
+  %strong.file-title-name.qa-file-title-name
     = blob.name
 
   = copy_file_path_button(blob.path)
diff --git a/app/views/shared/_file_highlight.html.haml b/app/views/shared/_file_highlight.html.haml
index 5073e6ad48f..d7e57fc0d01 100644
--- a/app/views/shared/_file_highlight.html.haml
+++ b/app/views/shared/_file_highlight.html.haml
@@ -1,4 +1,4 @@
-.file-content.code.js-syntax-highlight
+.file-content.code.js-syntax-highlight.qa-file-content
   .line-numbers
     - if blob.data.present?
       - link_icon = icon('link')
diff --git a/app/views/shared/snippets/_form.html.haml b/app/views/shared/snippets/_form.html.haml
index 3007da0c189..6f2ddc5bdba 100644
--- a/app/views/shared/snippets/_form.html.haml
+++ b/app/views/shared/snippets/_form.html.haml
@@ -9,7 +9,7 @@
     .form-group.row
       = f.label :title, class: 'col-form-label col-sm-2'
       .col-sm-10
-        = f.text_field :title, class: 'form-control', required: true, autofocus: true
+        = f.text_field :title, class: 'form-control qa-snippet-title', required: true, autofocus: true
 
     = render 'shared/form_elements/description', model: @snippet, project: @project, form: f
 
@@ -21,7 +21,7 @@
         .col-sm-10
           .file-holder.snippet
             .js-file-title.file-title
-              = f.text_field :file_name, placeholder: "Optionally name this file to add code highlighting, e.g. example.rb for Ruby.", class: 'form-control snippet-file-name'
+              = f.text_field :file_name, placeholder: "Optionally name this file to add code highlighting, e.g. example.rb for Ruby.", class: 'form-control snippet-file-name qa-snippet-file-name'
             .file-content.code
               %pre#editor= @snippet.content
               = f.hidden_field :content, class: 'snippet-file-content'
@@ -31,7 +31,7 @@
 
     .form-actions
       - if @snippet.new_record?
-        = f.submit 'Create snippet', class: "btn-success btn"
+        = f.submit 'Create snippet', class: "btn-success btn qa-create-snippet-button"
       - else
         = f.submit 'Save changes', class: "btn-success btn"
 
diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml
index a43296aa806..0c07eae8643 100644
--- a/app/views/shared/snippets/_header.html.haml
+++ b/app/views/shared/snippets/_header.html.haml
@@ -1,6 +1,6 @@
 .detail-page-header
   .detail-page-header-body
-    .snippet-box.has-tooltip.inline.append-right-5{ title: snippet_visibility_level_description(@snippet.visibility_level, @snippet), data: { container: "body" } }
+    .snippet-box.qa-snippet-box.has-tooltip.inline.append-right-5{ title: snippet_visibility_level_description(@snippet.visibility_level, @snippet), data: { container: "body" } }
       %span.sr-only
         = visibility_level_label(@snippet.visibility_level)
       = visibility_level_icon(@snippet.visibility_level, fw: false)
@@ -17,11 +17,11 @@
       = render "snippets/actions"
 
 .snippet-header.limited-header-width
-  %h2.snippet-title.prepend-top-0.append-bottom-0
+  %h2.snippet-title.prepend-top-0.append-bottom-0.qa-snippet-title
     = markdown_field(@snippet, :title)
 
   - if @snippet.description.present?
-    .description
+    .description.qa-snippet-description
       .wiki
         = markdown_field(@snippet, :description)
       %textarea.hidden.js-task-list-field
@@ -34,7 +34,7 @@
     .embed-snippet
       .input-group
         .input-group-prepend
-          %button.btn.btn-svg.embed-toggle.input-group-text{ 'data-toggle': 'dropdown', type: 'button' }
+          %button.btn.btn-svg.embed-toggle.input-group-text.qa-embed-type{ 'data-toggle': 'dropdown', type: 'button' }
             %span.js-embed-action= _("Embed")
             = sprite_icon('angle-down', size: 12, css_class: 'caret-down')
           %ul.dropdown-menu.dropdown-menu-selectable.embed-toggle-list
diff --git a/qa/qa.rb b/qa/qa.rb
index a79fecaab71..ec8aef31e48 100644
--- a/qa/qa.rb
+++ b/qa/qa.rb
@@ -61,6 +61,7 @@ module QA
     autoload :File, 'qa/resource/file'
     autoload :Fork, 'qa/resource/fork'
     autoload :SSHKey, 'qa/resource/ssh_key'
+    autoload :Snippet, 'qa/resource/snippet'
 
     module Events
       autoload :Base, 'qa/resource/events/base'
@@ -142,6 +143,12 @@ module QA
     module Dashboard
       autoload :Projects, 'qa/page/dashboard/projects'
       autoload :Groups, 'qa/page/dashboard/groups'
+
+      module Snippet
+        autoload :New, 'qa/page/dashboard/snippet/new'
+        autoload :Index, 'qa/page/dashboard/snippet/index'
+        autoload :Show, 'qa/page/dashboard/snippet/show'
+      end
     end
 
     module Group
diff --git a/qa/qa/page/dashboard/projects.rb b/qa/qa/page/dashboard/projects.rb
index 0f434577b3b..271c5456efe 100644
--- a/qa/qa/page/dashboard/projects.rb
+++ b/qa/qa/page/dashboard/projects.rb
@@ -2,8 +2,6 @@ module QA
   module Page
     module Dashboard
       class Projects < Page::Base
-        view 'app/views/dashboard/projects/index.html.haml'
-
         view 'app/views/shared/projects/_search_form.html.haml' do
           element :form_filter_by_name, /form_tag.+id: 'project-filter-form'/ # rubocop:disable QA/ElementWithPattern
         end
diff --git a/qa/qa/page/dashboard/snippet/index.rb b/qa/qa/page/dashboard/snippet/index.rb
new file mode 100644
index 00000000000..1f467fda9e1
--- /dev/null
+++ b/qa/qa/page/dashboard/snippet/index.rb
@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module QA
+  module Page
+    module Dashboard
+      module Snippet
+        class Index < Page::Base
+          view 'app/views/layouts/header/_new_dropdown.haml' do
+            element :new_menu_toggle
+            element :global_new_snippet_link
+          end
+
+          def go_to_new_snippet_page
+            click_element :new_menu_toggle
+            click_element :global_new_snippet_link
+          end
+        end
+      end
+    end
+  end
+end
diff --git a/qa/qa/page/dashboard/snippet/new.rb b/qa/qa/page/dashboard/snippet/new.rb
new file mode 100644
index 00000000000..a637b869d2f
--- /dev/null
+++ b/qa/qa/page/dashboard/snippet/new.rb
@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module QA
+  module Page
+    module Dashboard
+      module Snippet
+        class New < Page::Base
+          view 'app/views/shared/form_elements/_description.html.haml' do
+            element :issuable_form_description
+          end
+
+          view 'app/views/shared/snippets/_form.html.haml' do
+            element :snippet_title
+            element :snippet_file_name
+            element :create_snippet_button
+          end
+
+          def fill_title(title)
+            fill_element :snippet_title, title
+          end
+
+          def fill_description(description)
+            fill_element :issuable_form_description, description
+          end
+
+          def set_visibility(visibility)
+            choose visibility
+          end
+
+          def fill_file_name(name)
+            finished_loading?
+            fill_element :snippet_file_name, name
+          end
+
+          def fill_file_content(content)
+            finished_loading?
+            text_area.set content
+          end
+
+          def create_snippet
+            click_element :create_snippet_button
+          end
+
+          private
+
+          def text_area
+            find('#editor>textarea', visible: false)
+          end
+        end
+      end
+    end
+  end
+end
diff --git a/qa/qa/page/dashboard/snippet/show.rb b/qa/qa/page/dashboard/snippet/show.rb
new file mode 100644
index 00000000000..a75ea63eca7
--- /dev/null
+++ b/qa/qa/page/dashboard/snippet/show.rb
@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module QA
+  module Page
+    module Dashboard
+      module Snippet
+        class Show < Page::Base
+          view 'app/views/shared/snippets/_header.html.haml' do
+            element :snippet_title
+            element :snippet_description
+            element :embed_type
+            element :snippet_box
+          end
+
+          view 'app/views/projects/blob/_header_content.html.haml' do
+            element :file_title_name
+          end
+
+          view 'app/views/shared/_file_highlight.html.haml' do
+            element :file_content
+          end
+
+          def has_snippet_title?(snippet_title)
+            within_element(:snippet_title) do
+              has_text?(snippet_title)
+            end
+          end
+
+          def has_snippet_description?(snippet_description)
+            within_element(:snippet_description) do
+              has_text?(snippet_description)
+            end
+          end
+
+          def has_embed_type?(embed_type)
+            within_element(:embed_type) do
+              has_text?(embed_type)
+            end
+          end
+
+          def has_visibility_type?(visibility_type)
+            within_element(:snippet_box) do
+              has_text?(visibility_type)
+            end
+          end
+
+          def has_file_name?(file_name)
+            within_element(:file_title_name) do
+              has_text?(file_name)
+            end
+          end
+
+          def has_file_content?(file_content)
+            finished_loading?
+            within_element(:file_content) do
+              has_text?(file_content)
+            end
+          end
+        end
+      end
+    end
+  end
+end
diff --git a/qa/qa/page/main/menu.rb b/qa/qa/page/main/menu.rb
index 55500e831c6..1b3445b0064 100644
--- a/qa/qa/page/main/menu.rb
+++ b/qa/qa/page/main/menu.rb
@@ -19,6 +19,7 @@ module QA
           element :admin_area_link
           element :projects_dropdown
           element :groups_dropdown
+          element :snippets_link
         end
 
         view 'app/views/layouts/nav/projects_dropdown/_show.html.haml' do
@@ -66,6 +67,10 @@ module QA
           end
         end
 
+        def go_to_snippets
+          click_element :snippets_link
+        end
+
         def has_personal_area?(wait: Capybara.default_max_wait_time)
           has_element?(:user_avatar, wait: wait)
         end
diff --git a/qa/qa/resource/snippet.rb b/qa/qa/resource/snippet.rb
new file mode 100644
index 00000000000..1478f197570
--- /dev/null
+++ b/qa/qa/resource/snippet.rb
@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module QA
+  module Resource
+    class Snippet < Base
+      attr_accessor :title, :description, :file_content, :visibility, :file_name
+
+      def initialize
+        @title = 'New snippet title'
+        @description = 'The snippet description'
+        @visibility = 'Public'
+        @file_content = 'The snippet content'
+        @file_name = 'New snippet file name'
+      end
+
+      def fabricate!
+        Page::Dashboard::Snippet::Index.perform(&:go_to_new_snippet_page)
+
+        Page::Dashboard::Snippet::New.perform do |page|
+          page.fill_title(@title)
+          page.fill_description(@description)
+          page.set_visibility(@visibility)
+          page.fill_file_name(@file_name)
+          page.fill_file_content(@file_content)
+          page.create_snippet
+        end
+      end
+    end
+  end
+end
diff --git a/qa/qa/specs/features/browser_ui/3_create/snippet/create_snippet_spec.rb b/qa/qa/specs/features/browser_ui/3_create/snippet/create_snippet_spec.rb
new file mode 100644
index 00000000000..ab53dff464e
--- /dev/null
+++ b/qa/qa/specs/features/browser_ui/3_create/snippet/create_snippet_spec.rb
@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module QA
+  context 'Create', :smoke do
+    describe 'Snippet creation' do
+      it 'User creates a snippet' do
+        Runtime::Browser.visit(:gitlab, Page::Main::Login)
+        Page::Main::Login.perform(&:sign_in_using_credentials)
+
+        Page::Main::Menu.perform(&:go_to_snippets)
+
+        Resource::Snippet.fabricate_via_browser_ui! do |snippet|
+          snippet.title = 'Snippet title'
+          snippet.description = 'Snippet description'
+          snippet.visibility = 'Public'
+          snippet.file_name = 'New snippet file name'
+          snippet.file_content = 'Snippet file text'
+        end
+
+        Page::Dashboard::Snippet::Show.perform do |snippet|
+          expect(snippet).to have_snippet_title('Snippet title')
+          expect(snippet).to have_snippet_description('Snippet description')
+          expect(snippet).to have_embed_type('Embed')
+          expect(snippet).to have_visibility_type('Public')
+          expect(snippet).to have_file_name('New snippet file name')
+          expect(snippet).to have_file_content('Snippet file text')
+        end
+      end
+    end
+  end
+end