Update release creation feature spec

This commit updates the feature spec that covers release creation
through the UI.

app/assets/javascripts/releases/components/asset_links_form.vue

@@ -141,6 +141,7 @@ export default {
           :value="link.url"
           type="text"
           class="form-control"
+          name="asset-url"
           :state="isUrlValid(link)"
           @change="updateUrl(link, $event)"
           @keydown.ctrl.enter="updateUrl(link, $event.target.value)"
@@ -180,6 +181,7 @@ export default {
           :value="link.name"
           type="text"
           class="form-control"
+          name="asset-link-name"
           :state="isNameValid(link)"
           @change="updateName(link, $event)"
           @keydown.ctrl.enter="updateName(link, $event.target.value)"
@@ -202,6 +204,7 @@ export default {
           ref="typeSelect"
           :value="link.linkType || $options.defaultTypeOptionValue"
           class="form-control pr-4"
+          name="asset-type"
           :options="$options.typeOptions"
           @change="updateAssetLinkType({ linkIdToUpdate: link.id, newType: $event })"
         />

spec/features/projects/releases/user_creates_release_spec.rb

@@ -36,8 +36,8 @@ RSpec.describe 'User creates release', :js do
     expect(page.find('[data-testid="create-from-field"] .ref-selector button')).to have_content(project.default_branch)
   end
 
-  context 'when the "Save release" button is clicked', quarantine: 'https://gitlab.com/gitlab-org/gitlab/-/issues/297507' do
-    let(:tag_name) { 'v1.0' }
+  context 'when the "Save release" button is clicked' do
+    let(:tag_name) { 'v2.0.31' }
     let(:release_title) { 'A most magnificent release' }
     let(:release_notes) { 'Best. Release. **Ever.** :rocket:' }
     let(:link_1) { { url: 'https://gitlab.example.com/runbook', title: 'An example runbook', type: 'runbook' } }
@@ -47,7 +47,7 @@ RSpec.describe 'User creates release', :js do
       fill_out_form_and_submit
     end
 
-    it 'creates a new release when "Create release" is clicked', :aggregate_failures do
+    it 'creates a new release when "Create release" is clicked and redirects to the release\'s dedicated page', :aggregate_failures do
       release = project.releases.last
 
       expect(release.tag).to eq(tag_name)
@@ -65,10 +65,6 @@ RSpec.describe 'User creates release', :js do
       link = release.links.find { |l| l.link_type == link_2[:type] }
       expect(link.url).to eq(link_2[:url])
       expect(link.name).to eq(link_2[:title])
-    end
-
-    it 'redirects to the dedicated page for the newly created release' do
-      release = project.releases.last
 
       expect(page).to have_current_path(project_release_path(project, release))
     end
@@ -116,30 +112,27 @@ RSpec.describe 'User creates release', :js do
   end
 
   def fill_out_form_and_submit
-    fill_tag_name(tag_name)
+    select_new_tag_name(tag_name)
 
     select_create_from(branch.name)
 
     fill_release_title(release_title)
 
-    select_milestone(milestone_1.title, and_tab: false)
+    select_milestone(milestone_1.title)
     select_milestone(milestone_2.title)
 
-    # Focus the "Release notes" field by clicking instead of tabbing
-    # because tabbing to the field requires too many tabs
-    # (see https://gitlab.com/gitlab-org/gitlab/-/issues/238619)
-    find_field('Release notes').click
     fill_release_notes(release_notes)
 
-    # Tab past the "assets" documentation link
-    focused_element.send_keys(:tab)
-
     fill_asset_link(link_1)
     add_another_asset_link
     fill_asset_link(link_2)
 
-    # Submit using the Control+Enter shortcut
-    focused_element.send_keys([:control, :enter])
+    # Click on the body in order to trigger a `blur` event on the current field.
+    # This triggers the form's validation to run so that the
+    # "Create release" button is enabled and clickable.
+    page.find('body').click
+
+    click_button('Create release')
 
     wait_for_all_requests
   end

spec/support/helpers/features/releases_helpers.rb

 # frozen_string_literal: true
 
-# These helpers fill fields on the "New Release" and
-# "Edit Release" pages. They use the keyboard to navigate
-# from one field to the next and assume that when
-# they are called, the field to be filled out is already focused.
+# These helpers fill fields on the "New Release" and "Edit Release" pages.
 #
 # Usage:
 #   describe "..." do
@@ -18,97 +15,65 @@ module Spec
     module Helpers
       module Features
         module ReleasesHelpers
-          # Returns the element that currently has keyboard focus.
-          # Reminder that this returns a Selenium::WebDriver::Element
-          # _not_ a Capybara::Node::Element
-          def focused_element
-            page.driver.browser.switch_to.active_element
-          end
-
-          def fill_tag_name(tag_name, and_tab: true)
-            expect(focused_element).to eq(find_field('Tag name').native)
+          def select_new_tag_name(tag_name)
+            page.within '[data-testid="tag-name-field"]' do
+              find('button').click
 
-            focused_element.send_keys(tag_name)
+              wait_for_all_requests
 
-            focused_element.send_keys(:tab) if and_tab
-          end
+              find('input[aria-label="Search or create tag"]').set(tag_name)
 
-          def select_create_from(branch_name, and_tab: true)
-            expect(focused_element).to eq(find('[data-testid="create-from-field"] button').native)
+              wait_for_all_requests
 
-            focused_element.send_keys(:enter)
+              click_button("Create tag #{tag_name}")
+            end
+          end
 
-            # Wait for the dropdown to be rendered
-            page.find('.ref-selector .dropdown-menu')
+          def select_create_from(branch_name)
+            page.within '[data-testid="create-from-field"]' do
+              find('button').click
 
-            # Pressing Enter in the search box shouldn't submit the form
-            focused_element.send_keys(branch_name, :enter)
+              wait_for_all_requests
 
-            # Wait for the search to return
-            page.find('.ref-selector .dropdown-item', text: branch_name, match: :first)
+              find('input[aria-label="Search branches, tags, and commits"]').set(branch_name)
 
-            focused_element.send_keys(:arrow_down, :enter)
+              wait_for_all_requests
 
-            focused_element.send_keys(:tab) if and_tab
+              click_button("#{branch_name}")
+            end
           end
 
-          def fill_release_title(release_title, and_tab: true)
-            expect(focused_element).to eq(find_field('Release title').native)
-
-            focused_element.send_keys(release_title)
-
-            focused_element.send_keys(:tab) if and_tab
+          def fill_release_title(release_title)
+            fill_in('Release title', with: release_title)
           end
 
-          def select_milestone(milestone_title, and_tab: true)
-            expect(focused_element).to eq(find('[data-testid="milestones-field"] button').native)
-
-            focused_element.send_keys(:enter)
+          def select_milestone(milestone_title)
+            page.within '[data-testid="milestones-field"]' do
+              find('button').click
 
-            # Wait for the dropdown to be rendered
-            page.find('.milestone-combobox .dropdown-menu')
+              wait_for_all_requests
 
-            # Clear any existing input
-            focused_element.attribute('value').length.times { focused_element.send_keys(:backspace) }
+              find('input[aria-label="Search Milestones"]').set(milestone_title)
 
-            # Pressing Enter in the search box shouldn't submit the form
-            focused_element.send_keys(milestone_title, :enter)
+              wait_for_all_requests
 
-            # Wait for the search to return
-            page.find('.milestone-combobox .dropdown-item', text: milestone_title, match: :first)
-
-            focused_element.send_keys(:arrow_down, :arrow_down, :enter)
-
-            focused_element.send_keys(:tab) if and_tab
+              find('button', text: milestone_title, match: :first).click
+            end
           end
 
-          def fill_release_notes(release_notes, and_tab: true)
-            expect(focused_element).to eq(find_field('Release notes').native)
-
-            focused_element.send_keys(release_notes)
-
-            # Tab past the links at the bottom of the editor
-            focused_element.send_keys(:tab, :tab, :tab) if and_tab
+          def fill_release_notes(release_notes)
+            fill_in('Release notes', with: release_notes)
           end
 
-          def fill_asset_link(link, and_tab: true)
-            expect(focused_element['id']).to start_with('asset-url-')
-
-            focused_element.send_keys(link[:url], :tab, link[:title], :tab, link[:type])
-
-            # Tab past the "Remove asset link" button
-            focused_element.send_keys(:tab, :tab) if and_tab
+          def fill_asset_link(link)
+            all('input[name="asset-url"]').last.set(link[:url])
+            all('input[name="asset-link-name"]').last.set(link[:title])
+            all('select[name="asset-type"]').last.find("option[value=\"#{link[:type]}\"").select_option
           end
 
           # Click "Add another link" and tab back to the beginning of the new row
           def add_another_asset_link
-            expect(focused_element).to eq(find_button('Add another link').native)
-
-            focused_element.send_keys(:enter,
-                                      [:shift, :tab],
-                                      [:shift, :tab],
-                                      [:shift, :tab],
-                                      [:shift, :tab])
+            click_button('Add another link')
           end
         end
       end