QA Selectors added for new Vue components

Pages snippet/new.rb and snippet/show.rb updated
Snapshots updated

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

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

app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue

@@ -44,7 +44,8 @@ export default {
 </script>
 <template>
   <div
-    class="file-content code js-syntax-highlight qa-file-content"
+    class="file-content code js-syntax-highlight"
+    data-qa-selector="file_content"
     :class="$options.userColorScheme"
   >
     <div class="line-numbers">

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

@@ -34,7 +34,7 @@
     .embed-snippet
       .input-group
         .input-group-prepend
-          %button.btn.btn-svg.embed-toggle.input-group-text.qa-embed-type{ 'data-toggle': 'dropdown', type: 'button' }
+          %button.btn.btn-svg.embed-toggle.input-group-text{ '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

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

@@ -10,7 +10,16 @@ module QA
           end
 
           view 'app/assets/javascripts/snippets/components/snippet_description_edit.vue' do
-            element :snippet_description_field, required: true
+            element :snippet_description_field
+            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
           end
 
           view 'app/views/shared/form_elements/_description.html.haml' do

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

@@ -9,10 +9,13 @@ module QA
             element :snippet_description_field, required: true
           end
 
+          view 'app/assets/javascripts/snippets/components/snippet_title.vue' do
+            element :snippet_title, required: true
+          end
+
           view 'app/views/shared/snippets/_header.html.haml' do
             element :snippet_title, required: true
             element :snippet_description_field, required: true
-            element :embed_type
             element :snippet_box
           end
 
@@ -20,10 +23,18 @@ module QA
             element :file_title_name
           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
           end
 
+          view 'app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue' do
+            element :file_content
+          end
+
           def has_snippet_title?(snippet_title)
             has_element? :snippet_title, text: snippet_title
           end
@@ -32,12 +43,6 @@ module QA
             has_element? :snippet_description_field, text: snippet_description
           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)

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

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

spec/frontend/vue_shared/components/blob_viewers/__snapshots__/simple_viewer_spec.js.snap

@@ -2,7 +2,8 @@
 
 exports[`Blob Simple Viewer component rendering matches the snapshot 1`] = `
 <div
-  class="file-content code js-syntax-highlight qa-file-content"
+  class="file-content code js-syntax-highlight"
+  data-qa-selector="file_content"
 >
   <div
     class="line-numbers"