Remove haml duplicates from Snippet/Show

Also elements renamed to follow the convention

Snapshots updated

app/assets/javascripts/blob/components/blob_header_filepath.vue

@@ -32,7 +32,7 @@ export default {
       <file-icon :file-name="blob.path" :size="18" aria-hidden="true" css-classes="mr-2" />
       <strong
         class="file-title-name mr-1 js-blob-header-filepath"
-        data-qa-selector="file_title_name"
+        data-qa-selector="file_title_content"
         >{{ blob.path }}</strong
       >
     </template>

app/assets/javascripts/snippets/components/edit.vue

@@ -186,7 +186,7 @@ export default {
       <title-field
         :id="titleFieldId"
         v-model="snippet.title"
-        data-qa-selector="snippet_title"
+        data-qa-selector="snippet_title_field"
         required
         :autofocus="true"
       />

app/assets/javascripts/snippets/components/snippet_blob_edit.vue

@@ -35,7 +35,7 @@ export default {
     <div class="file-holder snippet">
       <blob-header-edit
         :value="fileName"
-        data-qa-selector="snippet_file_name"
+        data-qa-selector="file_name_field"
         @input="$emit('name-change', $event)"
       />
       <gl-loading-icon

app/assets/javascripts/snippets/components/snippet_description_view.vue

@@ -15,7 +15,7 @@ export default {
 };
 </script>
 <template>
-  <markdown-field-view class="snippet-description" data-qa-selector="snippet_description_field">
+  <markdown-field-view class="snippet-description" data-qa-selector="snippet_description_content">
     <div class="md js-snippet-description" v-html="description"></div>
   </markdown-field-view>
 </template>

app/assets/javascripts/snippets/components/snippet_header.vue

@@ -163,7 +163,8 @@ export default {
   <div class="detail-page-header">
     <div class="detail-page-header-body">
       <div
-        class="snippet-box qa-snippet-box has-tooltip d-flex align-items-center append-right-5 mb-1"
+        class="snippet-box has-tooltip d-flex align-items-center append-right-5 mb-1"
+        data-qa-selector="snippet_container"
         :title="snippetVisibilityLevelDescription"
         data-container="body"
       >

app/assets/javascripts/snippets/components/snippet_title.vue

@@ -20,7 +20,7 @@ export default {
 </script>
 <template>
   <div class="snippet-header limited-header-width">
-    <h2 class="snippet-title gl-mt-0 mb-3" data-qa-selector="snippet_title">
+    <h2 class="snippet-title gl-mt-0 mb-3" data-qa-selector="snippet_title_content">
       {{ snippet.title }}
     </h2>
 

app/views/projects/blob/_header_content.html.haml

 .file-header-content
   = blob_icon blob.mode, blob.name
 
-  %strong.file-title-name.qa-file-title-name
+  %strong.file-title-name
     = blob.name
 
   = copy_file_path_button(blob.path)

app/views/shared/_file_highlight.html.haml

-.file-content.code.js-syntax-highlight.qa-file-content
+.file-content.code.js-syntax-highlight
   .line-numbers
     - if blob.data.present?
       - link_icon = icon('link')

app/views/shared/snippets/_form.html.haml

@@ -9,7 +9,7 @@
 
       .form-group
         = f.label :title, class: 'label-bold'
-        = f.text_field :title, class: 'form-control qa-snippet-title', required: true, autofocus: true
+        = f.text_field :title, class: 'form-control', required: true, autofocus: true, data: { qa_selector: 'snippet_title_field' }
 
       .form-group.js-description-input
         - description_placeholder = s_('Snippets|Optionally add a description about what your snippet does or how to use it...')
@@ -27,7 +27,7 @@
         = f.label :file_name, s_('Snippets|File')
         .file-holder.snippet
           .js-file-title.file-title-flex-parent
-            = f.text_field :file_name, placeholder: s_("Snippets|Give your file a name to add code highlighting, e.g. example.rb for Ruby"), class: 'form-control js-snippet-file-name qa-snippet-file-name'
+            = f.text_field :file_name, placeholder: s_("Snippets|Give your file a name to add code highlighting, e.g. example.rb for Ruby"), class: 'form-control js-snippet-file-name', data: { qa_selector: 'file_name_field' }
           .file-content.code
             %pre#editor{ data: { 'editor-loading': true } }= @snippet.content
             = f.hidden_field :content, class: 'snippet-file-content'

app/views/shared/snippets/_header.html.haml

 .detail-page-header
   .detail-page-header-body
-    .snippet-box.qa-snippet-box.has-tooltip.inline.append-right-5{ title: snippet_visibility_level_description(@snippet.visibility_level, @snippet), data: { container: "body" } }
+    .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.gl-mt-0.mb-3{ data: { qa_selector: 'snippet_title' } }
+  %h2.snippet-title.gl-mt-0.mb-3
     = markdown_field(@snippet, :title)
 
   - if @snippet.description.present?
-    .description{ data: { qa_selector: 'snippet_description_field' } }
+    .description
       .md
         = markdown_field(@snippet, :description)
       %textarea.hidden.js-task-list-field

qa/qa/page/dashboard/snippet/new.rb

@@ -6,6 +6,7 @@ module QA
       module Snippet
         class New < Page::Base
           view 'app/assets/javascripts/snippets/components/edit.vue' do
+            element :snippet_title_field, required: true
             element :submit_button
           end
 
@@ -14,12 +15,8 @@ module QA
             element :description_placeholder, required: true
           end
 
-          view 'app/assets/javascripts/snippets/components/snippet_title.vue' do
-            element :snippet_title, required: true
-          end
-
           view 'app/assets/javascripts/snippets/components/snippet_blob_edit.vue' do
-            element :snippet_file_name
+            element :file_name_field
           end
 
           view 'app/views/shared/form_elements/_description.html.haml' do
@@ -29,8 +26,8 @@ module QA
           view 'app/views/shared/snippets/_form.html.haml' do
             element :snippet_description_field
             element :description_placeholder
-            element :snippet_title
-            element :snippet_file_name
+            element :snippet_title_field
+            element :file_name_field
             element :submit_button
           end
 
@@ -40,7 +37,7 @@ module QA
           end
 
           def fill_title(title)
-            fill_element :snippet_title, title
+            fill_element :snippet_title_field, title
           end
 
           def fill_description(description)
@@ -54,7 +51,7 @@ module QA
 
           def fill_file_name(name)
             finished_loading?
-            fill_element :snippet_file_name, name
+            fill_element :file_name_field, name
           end
 
           def fill_file_content(content)

qa/qa/page/dashboard/snippet/show.rb

@@ -6,29 +6,19 @@ module QA
       module Snippet
         class Show < Page::Base
           view 'app/assets/javascripts/snippets/components/snippet_description_view.vue' do
-            element :snippet_description_field
+            element :snippet_description_content
           end
 
           view 'app/assets/javascripts/snippets/components/snippet_title.vue' do
-            element :snippet_title, required: true
+            element :snippet_title_content, required: true
           end
 
-          view 'app/views/shared/snippets/_header.html.haml' do
-            element :snippet_title, required: true
-            element :snippet_description_field, required: true
-            element :snippet_box
-          end
-
-          view 'app/views/projects/blob/_header_content.html.haml' do
-            element :file_title_name
+          view 'app/assets/javascripts/snippets/components/snippet_header.vue' do
+            element :snippet_container
           end
 
           view 'app/assets/javascripts/blob/components/blob_header_filepath.vue' do
-            element :file_title_name
-          end
-
-          view 'app/views/shared/_file_highlight.html.haml' do
-            element :file_content
+            element :file_title_content
           end
 
           view 'app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue' do
@@ -54,11 +44,11 @@ module QA
           end
 
           def has_snippet_title?(snippet_title)
-            has_element? :snippet_title, text: snippet_title
+            has_element? :snippet_title_content, text: snippet_title
           end
 
           def has_snippet_description?(snippet_description)
-            has_element? :snippet_description_field, text: snippet_description
+            has_element? :snippet_description_content, text: snippet_description
           end
 
           def has_no_snippet_description?
@@ -66,13 +56,13 @@ module QA
           end
 
           def has_visibility_type?(visibility_type)
-            within_element(:snippet_box) do
+            within_element(:snippet_container) do
               has_text?(visibility_type)
             end
           end
 
           def has_file_name?(file_name)
-            within_element(:file_title_name) do
+            within_element(:file_title_content) do
               has_text?(file_name)
             end
           end

spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap

@@ -14,7 +14,7 @@ exports[`Blob Header Filepath rendering matches the snapshot 1`] = `
    
   <strong
     class="file-title-name mr-1 js-blob-header-filepath"
-    data-qa-selector="file_title_name"
+    data-qa-selector="file_title_content"
   >
     foo/bar/dummy.md
   </strong>

spec/frontend/snippets/components/__snapshots__/snippet_blob_edit_spec.js.snap

@@ -12,7 +12,7 @@ exports[`Snippet Blob Edit component rendering matches the snapshot 1`] = `
     class="file-holder snippet"
   >
     <blob-header-edit-stub
-      data-qa-selector="snippet_file_name"
+      data-qa-selector="file_name_field"
       value="lorem.txt"
     />
      

spec/frontend/snippets/components/__snapshots__/snippet_description_view_spec.js.snap

@@ -3,7 +3,7 @@
 exports[`Snippet Description component matches the snapshot 1`] = `
 <markdown-field-view-stub
   class="snippet-description"
-  data-qa-selector="snippet_description_field"
+  data-qa-selector="snippet_description_content"
 >
   <div
     class="md js-snippet-description"