Added QA selectors to Snippet edit form fields

After refactoring the Snippet edit form to Vue, the QA tests can not
find elements. Now, they should I hope.

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

@@ -5,6 +5,7 @@ export default {
   components: {
     GlFormInput,
   },
+  inheritAttrs: false,
   props: {
     value: {
       type: String,
@@ -27,8 +28,9 @@ export default {
         s__('Snippets|Give your file a name to add code highlighting, e.g. example.rb for Ruby')
       "
       name="snippet_file_name"
-      class="form-control js-snippet-file-name qa-snippet-file-name"
+      class="form-control js-snippet-file-name"
       type="text"
+      v-bind="$attrs"
       @change="$emit('input', name)"
     />
   </div>

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

@@ -173,7 +173,13 @@ export default {
       class="loading-animation prepend-top-20 append-bottom-20"
     />
     <template v-else>
-      <title-field :id="titleFieldId" v-model="snippet.title" required :autofocus="true" />
+      <title-field
+        :id="titleFieldId"
+        v-model="snippet.title"
+        data-qa-selector="snippet_title"
+        required
+        :autofocus="true"
+      />
       <snippet-description-edit
         :id="descriptionFieldId"
         v-model="snippet.description"
@@ -198,6 +204,7 @@ export default {
             category="primary"
             variant="success"
             :disabled="updatePrevented"
+            data-qa-selector="create_snippet_button"
             @click="handleFormSubmit"
             >{{ saveButtonLabel }}</gl-button
           >

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

@@ -33,7 +33,11 @@ export default {
   <div class="form-group file-editor">
     <label>{{ s__('Snippets|File') }}</label>
     <div class="file-holder snippet">
-      <blob-header-edit :value="fileName" @input="$emit('name-change', $event)" />
+      <blob-header-edit
+        :value="fileName"
+        data-qa-selector="snippet_file_name"
+        @input="$emit('name-change', $event)"
+      />
       <gl-loading-icon
         v-if="isLoading"
         :label="__('Loading snippet')"

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

@@ -51,9 +51,9 @@ export default {
       >
         <textarea
           slot="textarea"
-          class="note-textarea js-gfm-input js-autosize markdown-area
-            qa-description-textarea"
+          class="note-textarea js-gfm-input js-autosize markdown-area"
           dir="auto"
+          data-qa-selector="snippet_description_field"
           data-supports-quick-actions="false"
           :value="value"
           :aria-label="__('Description')"

app/assets/javascripts/vue_shared/components/form/title.vue

@@ -6,6 +6,7 @@ export default {
     GlFormInput,
     GlFormGroup,
   },
+  inheritAttrs: false,
 };
 </script>
 <template>

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

@@ -24,7 +24,7 @@
             = text_field_tag nil, nil, class: 'form-control', placeholder: description_placeholder, data: { qa_selector: 'description_placeholder' }
           .js-expanded{ class: ('d-none' if !is_expanded) }
             = render layout: 'projects/md_preview', locals: { url: preview_markdown_path(@project), referenced_users: true } do
-              = render 'projects/zen', f: f, attr: :description, classes: 'note-textarea', placeholder: description_placeholder, qa_selector: 'description_field'
+              = render 'projects/zen', f: f, attr: :description, classes: 'note-textarea', placeholder: description_placeholder, qa_selector: 'snippet_description_field'
               = render 'shared/notes/hints'
 
       .form-group.file-editor

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

@@ -21,7 +21,7 @@
     = markdown_field(@snippet, :title)
 
   - if @snippet.description.present?
-    .description{ data: { qa_selector: 'snippet_description' } }
+    .description{ data: { qa_selector: 'snippet_description_field' } }
       .md
         = markdown_field(@snippet, :description)
       %textarea.hidden.js-task-list-field

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

@@ -5,12 +5,20 @@ module QA
     module Dashboard
       module Snippet
         class New < Page::Base
+          view 'app/assets/javascripts/snippets/components/edit.vue' do
+            element :create_snippet_button
+          end
+
+          view 'app/assets/javascripts/snippets/components/snippet_description_edit.vue' do
+            element :snippet_description_field, required: true
+          end
+
           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 :description_field
+            element :snippet_description_field
             element :description_placeholder
             element :snippet_title
             element :snippet_file_name
@@ -28,7 +36,7 @@ module QA
 
           def fill_description(description)
             click_element :description_placeholder
-            fill_element :description_field, description
+            fill_element :snippet_description_field, description
           end
 
           def set_visibility(visibility)
@@ -46,6 +54,7 @@ module QA
           end
 
           def click_create_snippet_button
+            wait_until(reload: false) { !find_element(:create_snippet_button).disabled? }
             click_element :create_snippet_button
           end
 

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

@@ -5,9 +5,13 @@ module QA
     module Dashboard
       module Snippet
         class Show < Page::Base
+          view 'app/assets/javascripts/snippets/components/snippet_description_edit.vue' do
+            element :snippet_description_field, required: true
+          end
+
           view 'app/views/shared/snippets/_header.html.haml' do
             element :snippet_title, required: true
-            element :snippet_description, required: true
+            element :snippet_description_field, required: true
             element :embed_type
             element :snippet_box
           end
@@ -25,7 +29,7 @@ module QA
           end
 
           def has_snippet_description?(snippet_description)
-            has_element? :snippet_description, text: snippet_description
+            has_element? :snippet_description_field, text: snippet_description
           end
 
           def has_embed_type?(embed_type)

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

@@ -5,7 +5,7 @@ exports[`Blob Header Editing rendering matches the snapshot 1`] = `
   class="js-file-title file-title-flex-parent"
 >
   <gl-form-input-stub
-    class="form-control js-snippet-file-name qa-snippet-file-name"
+    class="form-control js-snippet-file-name"
     id="snippet_file_name"
     name="snippet_file_name"
     placeholder="Give your file a name to add code highlighting, e.g. example.rb for Ruby"

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

@@ -12,6 +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"
       value="lorem.txt"
     />
      

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

@@ -35,8 +35,8 @@ exports[`Snippet Description Edit component rendering matches the snapshot 1`] =
     >
       <textarea
         aria-label="Description"
-        class="note-textarea js-gfm-input js-autosize markdown-area
-          qa-description-textarea"
+        class="note-textarea js-gfm-input js-autosize markdown-area"
+        data-qa-selector="snippet_description_field"
         data-supports-quick-actions="false"
         dir="auto"
         placeholder="Write a comment or drag your files here…"