Update `createFlash` and `flash` test selectors

This update adds data-testid to find flash errors in feature tests.

app/assets/javascripts/flash.js

@@ -18,6 +18,13 @@ const VARIANT_DANGER = 'danger';
 const VARIANT_INFO = 'info';
 const VARIANT_TIP = 'tip';
 
+const TYPE_TO_VARIANT = {
+  [FLASH_TYPES.ALERT]: VARIANT_DANGER,
+  [FLASH_TYPES.NOTICE]: VARIANT_INFO,
+  [FLASH_TYPES.SUCCESS]: VARIANT_SUCCESS,
+  [FLASH_TYPES.WARNING]: VARIANT_WARNING,
+};
+
 const FLASH_CLOSED_EVENT = 'flashClosed';
 
 const getCloseEl = (flashEl) => {
@@ -61,7 +68,7 @@ const createAction = (config) => `
 `;
 
 const createFlashEl = (message, type) => `
-  <div class="flash-${type}">
+  <div class="flash-${type}" data-testid="alert-${TYPE_TO_VARIANT[type]}">
     <div class="flash-text">
       ${escape(message)}
       <div class="close-icon-wrapper js-close-icon">
@@ -189,6 +196,9 @@ const createAlert = function createAlert({
             secondaryButtonLink: secondaryButton?.link,
             secondaryButtonText: secondaryButton?.text,
           },
+          attrs: {
+            'data-testid': `alert-${variant}`,
+          },
           on,
         },
         message,

app/views/layouts/_flash.html.haml

 -# We currently only support `alert`, `notice`, `success`, 'toast', and 'raw'
 - icons = {'alert' => 'error', 'notice' => 'information-o', 'success' => 'check-circle'}
+- type_to_variant = {'alert' => 'danger', 'notice' => 'info', 'success' => 'success'}
 .flash-container.flash-container-page.sticky{ data: { qa_selector: 'flash_container' } }
   - flash.each do |key, value|
     - if key == 'toast' && value
@@ -9,7 +10,7 @@
     - elsif value == I18n.t('devise.failure.unconfirmed')
       = render 'shared/confirm_your_email_alert'
     - elsif value
-      %div{ class: "flash-#{key} mb-2" }
+      %div{ class: "flash-#{key} mb-2", data: { testid: "alert-#{type_to_variant[key]}" } }
         = sprite_icon(icons[key], css_class: 'align-middle mr-1') unless icons[key].nil?
         %span= value
         - if %w(alert notice success).include?(key)

ee/app/views/trials/_errors.html.haml

 - if show_trial_errors?(@namespace, @result)
   .flash-container.trial-errors
-    .flash-alert.text-center
+    .flash-alert.text-center{ data: { testid: "alert-danger" } }
       = _('We have found the following errors:')
       .flash-text
         = trial_errors(@namespace, @result)

ee/spec/features/groups/hooks/user_edits_hooks_spec.rb

@@ -28,6 +28,6 @@ RSpec.describe 'User edits hooks' do
 
     expect(hook.reload.url).to eq(url)
     expect(current_path).to eq(group_hooks_path(group))
-    expect(page).to have_selector('.flash-notice', text: 'Hook was successfully updated.')
+    expect(page).to have_selector('[data-testid="alert-info"]', text: 'Hook was successfully updated.')
   end
 end

ee/spec/features/groups/hooks/user_tests_hooks_spec.rb

@@ -27,7 +27,7 @@ RSpec.describe "User tests hooks", :js do
 
       it "triggers a hook" do
         expect(current_path).to eq(group_hooks_path(group))
-        expect(page).to have_selector(".flash-notice", text: "Hook executed successfully: HTTP 200")
+        expect(page).to have_selector('[data-testid="alert-info"]', text: "Hook executed successfully: HTTP 200")
       end
     end
 
@@ -39,7 +39,7 @@ RSpec.describe "User tests hooks", :js do
         click_link('Push events')
       end
 
-      it { expect(page).to have_selector(".flash-alert", text: "Hook execution failed: Failed to open") }
+      it { expect(page).to have_selector('[data-testid="alert-danger"]', text: "Hook execution failed: Failed to open") }
     end
   end
 
@@ -50,7 +50,7 @@ RSpec.describe "User tests hooks", :js do
       trigger_hook
     end
 
-    it { expect(page).to have_selector('.flash-alert', text: 'Hook execution failed. Ensure the group has a project with commits.') }
+    it { expect(page).to have_selector('[data-testid="alert-danger"]', text: 'Hook execution failed. Ensure the group has a project with commits.') }
   end
 
   private

ee/spec/features/groups/ldap_settings_spec.rb

@@ -28,7 +28,7 @@ RSpec.describe 'Edit group settings', :js do
 
       click_on('Save')
 
-      expect(page).to have_selector('.flash-notice', text: 'LDAP settings updated')
+      expect(page).to have_selector('[data-testid="alert-info"]', text: 'LDAP settings updated')
     end
   end
 

ee/spec/features/trials/select_namespace_spec.rb

@@ -151,7 +151,7 @@ RSpec.describe 'Trial Select Namespace', :js do
 
           click_button 'Start your free trial'
 
-          expect(find('.flash-text')).to have_text(error_message)
+          expect(find('[data-testid="alert-danger"]')).to have_text(error_message)
           expect(current_path).to eq(apply_trials_path)
           expect(find('#namespace_id', visible: false).value).to eq(group.id.to_s)
 

spec/features/admin/admin_mode/logout_spec.rb

@@ -32,7 +32,7 @@ RSpec.describe 'Admin Mode Logout', :js do
   it 'disable shows flash notice' do
     gitlab_disable_admin_mode
 
-    expect(page).to have_selector('.flash-notice')
+    expect(page).to have_selector('[data-testid="alert-info"]')
   end
 
   context 'on a read-only instance' do

spec/features/groups/members/leave_group_spec.rb

@@ -79,7 +79,7 @@ RSpec.describe 'Groups > Members > Leave group' do
 
     visit group_path(group, leave: 1)
 
-    expect(find('.flash-alert')).to have_content 'You do not have permission to leave this group'
+    expect(find('[data-testid="alert-danger"]')).to have_content 'You do not have permission to leave this group'
   end
 
   def left_group_message(group)

spec/features/issues/filtered_search/recent_searches_spec.rb

@@ -104,7 +104,7 @@ RSpec.describe 'Recent searches', :js do
     set_recent_searches(project_1_local_storage_key, 'fail')
     visit project_issues_path(project_1)
 
-    expect(find('.flash-alert')).to have_text('An error occurred while parsing recent searches')
+    expect(find('[data-testid="alert-danger"]')).to have_text('An error occurred while parsing recent searches')
   end
 
   context 'on tablet/mobile screen' do

spec/features/profiles/password_spec.rb

@@ -41,7 +41,7 @@ RSpec.describe 'Profile > Password' do
         it 'shows a success message' do
           fill_passwords(Gitlab::Password.test_default, Gitlab::Password.test_default)
 
-          page.within('.flash-notice') do
+          page.within('[data-testid="alert-info"]') do
             expect(page).to have_content('Password was successfully updated. Please sign in again.')
           end
         end

spec/features/projects/blobs/blob_show_spec.rb

@@ -984,7 +984,7 @@ RSpec.describe 'File blob', :js do
         visit_blob('README.md')
 
         expect(page).to have_selector('.file-content')
-        expect(page).not_to have_selector('.flash-alert')
+        expect(page).not_to have_selector('[data-testid="alert-danger"]')
       end
 
       it 'displays a GPG badge' do

spec/features/projects/members/group_member_cannot_leave_group_project_spec.rb

@@ -21,6 +21,6 @@ RSpec.describe 'Projects > Members > Group member cannot leave group project' do
   it 'renders a flash message if attempting to leave by url', :js do
     visit project_path(project, leave: 1)
 
-    expect(find('.flash-alert')).to have_content 'You do not have permission to leave this project'
+    expect(find('[data-testid="alert-danger"]')).to have_content 'You do not have permission to leave this project'
   end
 end

spec/features/projects/network_graph_spec.rb

@@ -96,7 +96,7 @@ RSpec.describe 'Project Network Graph', :js do
         find('button').click
       end
 
-      expect(page).to have_selector '.flash-alert', text: "Git revision ';' does not exist."
+      expect(page).to have_selector '[data-testid="alert-danger"]', text: "Git revision ';' does not exist."
     end
   end
 

spec/features/projects/pipelines/pipelines_spec.rb

@@ -857,7 +857,7 @@ RSpec.describe 'Pipelines', :js do
           it 'increments jobs_cache_index' do
             click_button 'Clear runner caches'
             wait_for_requests
-            expect(page.find('.flash-notice')).to have_content 'Project cache successfully reset.'
+            expect(page.find('[data-testid="alert-info"]')).to have_content 'Project cache successfully reset.'
           end
         end
 
@@ -865,7 +865,7 @@ RSpec.describe 'Pipelines', :js do
           it 'sets jobs_cache_index to 1' do
             click_button 'Clear runner caches'
             wait_for_requests
-            expect(page.find('.flash-notice')).to have_content 'Project cache successfully reset.'
+            expect(page.find('[data-testid="alert-info"]')).to have_content 'Project cache successfully reset.'
           end
         end
       end

spec/features/projects/tree/tree_show_spec.rb

@@ -25,7 +25,7 @@ RSpec.describe 'Projects tree', :js do
 
     expect(page).to have_selector('.tree-item')
     expect(page).to have_content('add tests for .gitattributes custom highlighting')
-    expect(page).not_to have_selector('.flash-alert')
+    expect(page).not_to have_selector('[data-testid="alert-danger"]')
     expect(page).not_to have_selector('[data-qa-selector="label-lfs"]', text: 'LFS') # rubocop:disable QA/SelectorUsage
   end
 
@@ -36,7 +36,7 @@ RSpec.describe 'Projects tree', :js do
     expect(page).to have_selector('.tree-item')
     expect(page).to have_content('add spaces in whitespace file')
     expect(page).not_to have_selector('[data-qa-selector="label-lfs"]', text: 'LFS') # rubocop:disable QA/SelectorUsage
-    expect(page).not_to have_selector('.flash-alert')
+    expect(page).not_to have_selector('[data-testid="alert-danger"]')
   end
 
   it 'renders tree table with non-ASCII filenames without errors' do
@@ -46,7 +46,7 @@ RSpec.describe 'Projects tree', :js do
     expect(page).to have_selector('.tree-item')
     expect(page).to have_content('Files, encoding and much more')
     expect(page).to have_content('テスト.txt')
-    expect(page).not_to have_selector('.flash-alert')
+    expect(page).not_to have_selector('[data-testid="alert-danger"]')
   end
 
   context "with a tree that contains pathspec characters" do
@@ -139,7 +139,7 @@ RSpec.describe 'Projects tree', :js do
       wait_for_requests
 
       expect(page).to have_selector('.tree-item')
-      expect(page).not_to have_selector('.flash-alert')
+      expect(page).not_to have_selector('[data-testid="alert-danger"]')
     end
 
     context 'for signed commit' do

spec/features/projects_spec.rb

@@ -236,7 +236,7 @@ RSpec.describe 'Project' do
     it 'does not show an error' do
       wait_for_requests
 
-      expect(page).not_to have_selector('.flash-alert')
+      expect(page).not_to have_selector('[data-testid="alert-danger"]')
     end
   end
 
@@ -316,7 +316,7 @@ RSpec.describe 'Project' do
         wait_for_requests
 
         expect(page).to have_selector('.tree-item')
-        expect(page).not_to have_selector('.flash-alert')
+        expect(page).not_to have_selector('[data-testid="alert-danger"]')
       end
 
       context 'for signed commit' do

spec/features/triggers_spec.rb

@@ -34,7 +34,7 @@ RSpec.describe 'Triggers', :js do
         click_button 'Add trigger'
 
         aggregate_failures 'display creation notice and trigger is created' do
-          expect(page.find('.flash-notice')).to have_content 'Trigger was created successfully.'
+          expect(page.find('[data-testid="alert-info"]')).to have_content 'Trigger was created successfully.'
           expect(page.find('.triggers-list')).to have_content 'trigger desc'
           expect(page.find('.triggers-list .trigger-owner')).to have_content user.name
         end
@@ -63,7 +63,7 @@ RSpec.describe 'Triggers', :js do
         click_button 'Save trigger'
 
         aggregate_failures 'display update notice and trigger is updated' do
-          expect(page.find('.flash-notice')).to have_content 'Trigger was successfully updated.'
+          expect(page.find('[data-testid="alert-info"]')).to have_content 'Trigger was successfully updated.'
           expect(page.find('.triggers-list')).to have_content new_trigger_title
           expect(page.find('.triggers-list .trigger-owner')).to have_content user.name
         end
@@ -89,7 +89,7 @@ RSpec.describe 'Triggers', :js do
         end
 
         aggregate_failures 'trigger is removed' do
-          expect(page.find('.flash-notice')).to have_content 'Trigger removed'
+          expect(page.find('[data-testid="alert-info"]')).to have_content 'Trigger removed'
           expect(page).to have_css('[data-testid="no_triggers_content"]')
         end
       end

spec/features/users/logout_spec.rb

@@ -19,7 +19,7 @@ RSpec.describe 'Logout/Sign out', :js do
   it 'sign out does not show signed out flash notice' do
     gitlab_sign_out
 
-    expect(page).not_to have_selector('.flash-notice')
+    expect(page).not_to have_selector('[data-testid="alert-info"]')
   end
 
   context 'on a read-only instance' do

spec/support/shared_examples/features/variable_list_shared_examples.rb

@@ -166,7 +166,7 @@ RSpec.shared_examples 'variable list' do
     wait_for_requests
 
     expect(find('.flash-container')).to be_present
-    expect(find('.flash-text').text).to have_content('Variables key (key) has already been taken')
+    expect(find('[data-testid="alert-danger"]').text).to have_content('Variables key (key) has already been taken')
   end
 
   it 'prevents a variable to be added if no values are provided when a variable is set to masked' do