Merge branch 'qa-update-deploy-key-token-selectors' into 'master'

Update e2e deploy key and token selectors

See merge request gitlab-org/gitlab!60517

app/assets/javascripts/deploy_keys/components/app.vue

@@ -145,7 +145,7 @@ export default {
         :keys="keys[currentTab]"
         :store="store"
         :endpoint="endpoint"
-        data-qa-selector="project_deploy_keys"
+        data-qa-selector="project_deploy_keys_container"
       />
     </template>
   </div>

app/assets/javascripts/deploy_keys/components/key.vue

@@ -113,9 +113,9 @@ export default {
   <div class="gl-responsive-table-row deploy-key">
     <div class="table-section section-40">
       <div role="rowheader" class="table-mobile-header">{{ s__('DeployKeys|Deploy key') }}</div>
-      <div class="table-mobile-content qa-key">
-        <strong class="title qa-key-title"> {{ deployKey.title }} </strong>
-        <div class="fingerprint" data-qa-selector="key_md5_fingerprint">
+      <div class="table-mobile-content" data-qa-selector="key_container">
+        <strong class="title" data-qa-selector="key_title_content"> {{ deployKey.title }} </strong>
+        <div class="fingerprint" data-qa-selector="key_md5_fingerprint_content">
           {{ __('MD5') }}:{{ deployKey.fingerprint }}
         </div>
         <div class="fingerprint">{{ __('SHA256') }}:{{ deployKey.fingerprint_sha256 }}</div>

app/views/admin/deploy_keys/new.html.haml

@@ -6,5 +6,5 @@
   = form_for [:admin, @deploy_key], html: { class: 'deploy-key-form' } do |f|
     = render partial: 'shared/deploy_keys/form', locals: { form: f, deploy_key: @deploy_key }
     .form-actions
-      = f.submit 'Create', class: 'btn gl-button btn-confirm'
+      = f.submit 'Create', class: 'btn gl-button btn-confirm', data: { qa_selector: "add_deploy_key_button" }
       = link_to 'Cancel', admin_deploy_keys_path, class: 'btn gl-button btn-default btn-cancel'

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

@@ -6,7 +6,7 @@
 
 .form-group
   = form.label :title, class: 'col-form-label col-sm-2'
-  .col-sm-10= form.text_field :title, class: 'form-control gl-form-input', readonly: ('readonly' unless can?(current_user, :update_deploy_key, deploy_key))
+  .col-sm-10= form.text_field :title, class: 'form-control gl-form-input', data: { qa_selector: 'deploy_key_title_field' }, readonly: ('readonly' unless can?(current_user, :update_deploy_key, deploy_key))
 
 .form-group
   - if deploy_key.new_record?
@@ -16,7 +16,7 @@
         - link_start = "<a href='#{help_page_path('ssh/README')}' target='_blank' rel='noreferrer noopener'>".html_safe
         - link_end = '</a>'
         = _('Paste a public key here. %{link_start}How do I generate it?%{link_end}').html_safe % { link_start: link_start, link_end: link_end.html_safe }
-      = form.text_area :key, class: 'form-control gl-form-input thin_area', rows: 5
+      = form.text_area :key, class: 'form-control gl-form-input thin_area', rows: 5, data: { qa_selector: 'deploy_key_field' }
   - else
     = form.label :fingerprint, class: 'col-form-label col-sm-2'
     .col-sm-10

app/views/shared/deploy_keys/_index.html.haml

 - expanded = expanded_by_default?
-%section.qa-deploy-keys-settings.settings.no-animate#js-deploy-keys-settings{ class: ('expanded' if expanded), data: { qa_selector: 'deploy_keys_settings_content' } }
+%section.rspec-deploy-keys-settings.settings.no-animate#js-deploy-keys-settings{ class: ('expanded' if expanded), data: { qa_selector: 'deploy_keys_settings_content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Deploy keys')
     %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }

app/views/shared/deploy_keys/_project_group_form.html.haml

@@ -2,10 +2,10 @@
   = form_errors(@deploy_keys.new_key)
   .form-group.row
     = f.label :title, class: "label-bold"
-    = f.text_field :title, class: 'form-control gl-form-input', required: true
+    = f.text_field :title, class: 'form-control gl-form-input', required: true, data: { qa_selector: 'deploy_key_title_field' }
   .form-group.row
     = f.label :key, class: "label-bold"
-    = f.text_area :key, class: 'form-control gl-form-input', rows: 5, required: true
+    = f.text_area :key, class: 'form-control gl-form-input', rows: 5, required: true, data: { qa_selector: 'deploy_key_field' }
   .form-group.row
     %p.light.gl-mb-0
       = _('Paste a public key here.')
@@ -21,4 +21,4 @@
         = _('Allow this key to push to this repository')
 
   .form-group.row
-    = f.submit _("Add key"), class: "btn gl-button btn-confirm"
+    = f.submit _("Add key"), class: "btn gl-button btn-confirm", data: { qa_selector: "add_deploy_key_button"}

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

@@ -6,28 +6,28 @@
 
   .form-group
     = f.label :name, class: 'label-bold'
-    = f.text_field :name, class: 'form-control gl-form-input qa-deploy-token-name', required: true
+    = f.text_field :name, class: 'form-control gl-form-input', data: { qa_selector: 'deploy_token_name_field' }, required: true
 
   .form-group
     = f.label :expires_at, _('Expires at (optional)'), class: 'label-bold'
-    = f.text_field :expires_at, class: 'datepicker form-control qa-deploy-token-expires-at', value: f.object.expires_at
+    = f.text_field :expires_at, class: 'datepicker form-control', data: { qa_selector: 'deploy_token_expires_at_field' }, value: f.object.expires_at
     .text-secondary= s_('DeployTokens|Unless you enter a date, the token does not expire.')
 
   .form-group
     = f.label :username, _('Username (optional)'), class: 'label-bold'
-    = f.text_field :username, class: 'form-control qa-deploy-token-username'
+    = f.text_field :username, class: 'form-control'
     .text-secondary= s_('DeployTokens|Unless you specify a username, it is set to "gitlab+deploy-token-{n}".')
 
   .form-group
     = f.label :scopes, _('Scopes [Select 1 or more]'), class: 'label-bold'
     %fieldset.form-group.form-check
-      = f.check_box :read_repository, class: 'form-check-input qa-deploy-token-read-repository'
+      = f.check_box :read_repository, class: 'form-check-input', data: { qa_selector: 'deploy_token_read_repository_checkbox' }
       = f.label :read_repository, 'read_repository', class: 'label-bold form-check-label'
       .text-secondary= s_('DeployTokens|Allows read-only access to the repository.')
 
     - if container_registry_enabled?(group_or_project)
       %fieldset.form-group.form-check
-        = f.check_box :read_registry, class: 'form-check-input qa-deploy-token-read-registry'
+        = f.check_box :read_registry, class: 'form-check-input', data: { qa_selector: 'deploy_token_read_registry_checkbox' }
         = f.label :read_registry, 'read_registry', class: 'label-bold form-check-label'
         .text-secondary= s_('DeployTokens|Allows read-only access to registry images.')
 
@@ -48,4 +48,4 @@
         .text-secondary= s_('DeployTokens|Allows write access to the package registry.')
 
   .gl-mt-3
-    = f.submit s_('DeployTokens|Create deploy token'), class: 'btn gl-button btn-confirm qa-create-deploy-token'
+    = f.submit s_('DeployTokens|Create deploy token'), class: 'btn gl-button btn-confirm', data: { qa_selector: 'create_deploy_token_button' }

app/views/shared/deploy_tokens/_index.html.haml

 - expanded = expand_deploy_tokens_section?(@new_deploy_token)
 
-%section.qa-deploy-tokens-settings.settings.no-animate#js-deploy-tokens{ class: ('expanded' if expanded), data: { qa_selector: 'deploy_tokens_settings_content' } }
+%section.settings.no-animate#js-deploy-tokens{ class: ('expanded' if expanded), data: { qa_selector: 'deploy_tokens_settings_content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= s_('DeployTokens|Deploy tokens')
-    %button.btn.gl-button.btn-default.js-settings-toggle.qa-expand-deploy-keys{ type: 'button' }
+    %button.btn.gl-button.btn-default.js-settings-toggle
       = expanded ? 'Collapse' : 'Expand'
     %p
       = description

app/views/shared/deploy_tokens/_new_deploy_token.html.haml

-.qa-created-deploy-token-section.created-deploy-token-container.info-well
+.created-deploy-token-container.info-well{ data: { qa_selector: 'created_deploy_token_container' } }
   .well-segment
     %h5.gl-mt-0
       = s_('DeployTokens|Your new Deploy Token username')
 
     .form-group
       .input-group
-        = text_field_tag 'deploy-token-user', deploy_token.username, readonly: true, class: 'deploy-token-field form-control js-select-on-focus qa-deploy-token-user'
+        = text_field_tag 'deploy-token-user', deploy_token.username, readonly: true, class: 'deploy-token-field form-control js-select-on-focus', data: { qa_selector: 'deploy_token_user_field' }
         .input-group-append
           = clipboard_button(text: deploy_token.username, title: s_('DeployTokens|Copy username'), placement: 'left')
       %span.deploy-token-help-block.gl-mt-2.text-success
@@ -15,7 +15,7 @@
 
     .form-group
       .input-group
-        = text_field_tag 'deploy-token', deploy_token.token, readonly: true, class: 'deploy-token-field form-control js-select-on-focus qa-deploy-token'
+        = text_field_tag 'deploy-token', deploy_token.token, readonly: true, class: 'deploy-token-field form-control js-select-on-focus', data: { qa_selector: 'deploy_token_field' }
         .input-group-append
           = clipboard_button(text: deploy_token.token, title: s_('DeployTokens|Copy deploy token'), placement: 'left')
       %span.deploy-token-help-block.gl-mt-2.text-danger

qa/qa/page/project/settings/deploy_keys.rb

@@ -6,59 +6,64 @@ module QA
       module Settings
         class DeployKeys < Page::Base
           view 'app/views/shared/deploy_keys/_form.html.haml' do
-            element :deploy_key_title, 'text_field :title' # rubocop:disable QA/ElementWithPattern
-            element :deploy_key_key, 'text_area :key' # rubocop:disable QA/ElementWithPattern
+            element :deploy_key_title_field
+            element :deploy_key_field
+          end
+
+          view 'app/views/shared/deploy_keys/_project_group_form.html.haml' do
+            element :deploy_key_title_field
+            element :deploy_key_field
+            element :add_deploy_key_button
           end
 
           view 'app/assets/javascripts/deploy_keys/components/app.vue' do
-            element :deploy_keys_section, /class=".*deploy\-keys.*"/ # rubocop:disable QA/ElementWithPattern
-            element :project_deploy_keys
+            element :project_deploy_keys_container
           end
 
           view 'app/assets/javascripts/deploy_keys/components/key.vue' do
-            element :key
-            element :key_title
-            element :key_md5_fingerprint
+            element :key_container
+            element :key_title_content
+            element :key_md5_fingerprint_content
           end
 
           def add_key
-            click_on 'Add key'
+            click_element(:add_deploy_key_button)
           end
 
           def fill_key_title(title)
-            fill_in 'deploy_key_title', with: title
+            fill_element(:deploy_key_title_field, title)
           end
 
           def fill_key_value(key)
-            fill_in 'deploy_key_key', with: key
+            fill_element(:deploy_key_field, key)
           end
 
           def find_md5_fingerprint(title)
             within_project_deploy_keys do
-              find_element(:key, text: title)
-                .find(element_selector_css(:key_md5_fingerprint)).text.delete_prefix('MD5:')
+              find_element(:key_container, text: title)
+                .find(element_selector_css(:key_md5_fingerprint_content)).text.delete_prefix('MD5:')
             end
           end
 
           def has_key?(title, md5_fingerprint)
             within_project_deploy_keys do
-              find_element(:key, text: title)
-                .has_css?(element_selector_css(:key_md5_fingerprint), text: "MD5:#{md5_fingerprint}")
+              find_element(:key_container, text: title)
+                .has_css?(element_selector_css(:key_md5_fingerprint_content), text: "MD5:#{md5_fingerprint}")
             end
           end
 
           def key_title
             within_project_deploy_keys do
-              find_element(:key_title).text
+              find_element(:key_title_content).text
             end
           end
 
           private
 
           def within_project_deploy_keys
-            has_element?(:project_deploy_keys, wait: QA::Support::Repeater::DEFAULT_MAX_WAIT_TIME)
+            has_element?(:project_deploy_keys_container, wait: QA::Support::Repeater::DEFAULT_MAX_WAIT_TIME)
 
-            within_element(:project_deploy_keys) do
+            within_element(:project_deploy_keys_container) do
               yield
             end
           end

qa/qa/page/project/settings/deploy_tokens.rb

@@ -6,54 +6,54 @@ module QA
       module Settings
         class DeployTokens < Page::Base
           view 'app/views/shared/deploy_tokens/_form.html.haml' do
-            element :deploy_token_name
-            element :deploy_token_expires_at
-            element :deploy_token_read_repository
-            element :deploy_token_read_registry
-            element :create_deploy_token
+            element :deploy_token_name_field
+            element :deploy_token_expires_at_field
+            element :deploy_token_read_repository_checkbox
+            element :deploy_token_read_registry_checkbox
+            element :create_deploy_token_button
           end
 
           view 'app/views/shared/deploy_tokens/_new_deploy_token.html.haml' do
-            element :created_deploy_token_section
-            element :deploy_token_user
-            element :deploy_token
+            element :created_deploy_token_container
+            element :deploy_token_user_field
+            element :deploy_token_field
           end
 
           def fill_token_name(name)
-            fill_element :deploy_token_name, name
+            fill_element(:deploy_token_name_field, name)
           end
 
           def fill_token_expires_at(expires_at)
-            fill_element :deploy_token_expires_at, expires_at.to_s + "\n"
+            fill_element(:deploy_token_expires_at_field, expires_at.to_s + "\n")
           end
 
           def fill_scopes(read_repository:, read_registry:)
-            check_element :deploy_token_read_repository if read_repository
-            check_element :deploy_token_read_registry if read_registry
+            check_element(:deploy_token_read_repository_checkbox) if read_repository
+            check_element(:deploy_token_read_registry_checkbox) if read_registry
           end
 
           def add_token
-            click_element :create_deploy_token
+            click_element(:create_deploy_token_button)
           end
 
           def token_username
             within_new_project_deploy_token do
-              find_element(:deploy_token_user).value
+              find_element(:deploy_token_user_field).value
             end
           end
 
           def token_password
             within_new_project_deploy_token do
-              find_element(:deploy_token).value
+              find_element(:deploy_token_field).value
             end
           end
 
           private
 
           def within_new_project_deploy_token
-            has_element?(:created_deploy_token_section, wait: QA::Support::Repeater::DEFAULT_MAX_WAIT_TIME)
+            has_element?(:created_deploy_token_container, wait: QA::Support::Repeater::DEFAULT_MAX_WAIT_TIME)
 
-            within_element(:created_deploy_token_section) do
+            within_element(:created_deploy_token_container) do
               yield
             end
           end

spec/features/projects/deploy_keys_spec.rb

@@ -19,7 +19,7 @@ RSpec.describe 'Project deploy keys', :js do
     it 'removes association between project and deploy key' do
       visit project_settings_repository_path(project)
 
-      page.within(find('.qa-deploy-keys-settings')) do
+      page.within(find('.rspec-deploy-keys-settings')) do
         expect(page).to have_selector('.deploy-key', count: 1)
 
         click_button 'Remove'