Update E2E tests using the blob text viewer

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

@@ -86,7 +86,7 @@ export default {
         :file-name="blob.name"
         :type="activeViewer.fileType"
         :hide-line-numbers="hideLineNumbers"
-        data-qa-selector="file_content"
+        data-qa-selector="blob_viewer_file_content"
       />
     </template>
   </div>

app/assets/javascripts/repository/components/blob_button_group.vue

@@ -98,6 +98,7 @@ export default {
         :is-locked="isLocked"
         :can-lock="canLock"
         data-testid="lock"
+        data-qa-selector="lock_button"
       />
       <gl-button v-gl-modal="replaceModalId" data-testid="replace">
         {{ $options.i18n.replace }}

app/assets/javascripts/repository/components/delete_blob_modal.vue

@@ -188,6 +188,7 @@ export default {
             v-model="form.fields['commit_message'].value"
             v-validation:[form.showValidation]
             name="commit_message"
+            data-qa-selector="commit_message_field"
             :state="form.fields['commit_message'].state"
             :disabled="loading"
             required

qa/qa/page/base.rb

@@ -443,6 +443,29 @@ module QA
         # Some checkboxes and radio buttons are hidden by their labels and cannot be clicked directly
         click_by_js ? page.execute_script("arguments[0].click();", box) : box.click
       end
+
+      def feature_flag_controlled_element(feature_flag, element_when_flag_enabled, element_when_flag_disabled)
+        # Feature flags can change the UI elements shown, but we need admin access to get feature flag values, which
+        # prevents us running the tests on production. Instead we detect the UI element that should be shown when the
+        # feature flag is enabled and otherwise use the element that should be displayed when the feature flag is
+        # disabled.
+
+        # Check both options once quickly so that the test doesn't wait unnecessarily if the UI has loaded
+        # We wait for requests first and wait one second for the element because it can take a moment for a Vue app to
+        # load and render the UI
+        wait_for_requests
+
+        return element_when_flag_enabled if has_element?(element_when_flag_enabled, wait: 1)
+        return element_when_flag_disabled if has_element?(element_when_flag_disabled, wait: 1)
+
+        # Check both options again, this time waiting for the default duration
+        return element_when_flag_enabled if has_element?(element_when_flag_enabled)
+        return element_when_flag_disabled if has_element?(element_when_flag_disabled)
+
+        raise ElementNotFound,
+          "Could not find the expected element as #{element_when_flag_enabled} or #{element_when_flag_disabled}." \
+          "The relevant feature flag is #{feature_flag}"
+      end
     end
   end
 end

qa/qa/page/component/blob_content.rb

+# frozen_string_literal: true
+
+module QA
+  module Page
+    module Component
+      module BlobContent
+        extend QA::Page::PageConcern
+
+        def self.included(base)
+          super
+
+          base.view 'app/assets/javascripts/blob/components/blob_header_filepath.vue' do
+            element :file_title_content
+          end
+
+          base.view 'app/assets/javascripts/blob/components/blob_content.vue' do
+            element :blob_viewer_file_content
+          end
+
+          base.view 'app/assets/javascripts/blob/components/blob_header_default_actions.vue' do
+            element :default_actions_container
+            element :copy_contents_button
+          end
+
+          base.view 'app/views/projects/blob/_header_content.html.haml' do
+            element :file_name_content
+          end
+
+          base.view 'app/views/shared/_file_highlight.html.haml' do
+            element :file_content
+          end
+        end
+
+        def has_file?(name)
+          has_file_name?(name)
+        end
+
+        def has_no_file?(name)
+          has_no_file_name?(name)
+        end
+
+        def has_file_name?(file_name, file_number = nil)
+          within_file_by_number(file_name_element, file_number) { has_text?(file_name) }
+        end
+
+        def has_no_file_name?(file_name)
+          within_element(file_name_element) do
+            has_no_text?(file_name)
+          end
+        end
+
+        def has_file_content?(file_content, file_number = nil)
+          within_file_by_number(file_content_element, file_number) { has_text?(file_content) }
+        end
+
+        def has_no_file_content?(file_content)
+          within_element(file_content_element) do
+            has_no_text?(file_content)
+          end
+        end
+
+        def click_copy_file_contents(file_number = nil)
+          within_file_by_number(:default_actions_container, file_number) { click_element(:copy_contents_button) }
+        end
+
+        private
+
+        def file_content_element
+          feature_flag_controlled_element(:refactor_blob_viewer, :blob_viewer_file_content, :file_content)
+        end
+
+        def file_name_element
+          feature_flag_controlled_element(:refactor_blob_viewer, :file_title_content, :file_name_content)
+        end
+
+        def within_file_by_number(element, file_number)
+          method = file_number ? 'within_element_by_index' : 'within_element'
+          send(method, element, file_number) { yield }
+        end
+      end
+    end
+  end
+end

qa/qa/page/component/snippet.rb

@@ -26,7 +26,7 @@ module QA
           end
 
           base.view 'app/assets/javascripts/blob/components/blob_content.vue' do
-            element :file_content
+            element :blob_viewer_file_content
           end
 
           base.view 'app/assets/javascripts/snippets/components/snippet_header.vue' do
@@ -130,11 +130,11 @@ module QA
 
         def has_file_content?(file_content, file_number = nil)
           if file_number
-            within_element_by_index(:file_content, file_number - 1) do
+            within_element_by_index(:blob_viewer_file_content, file_number - 1) do
               has_text?(file_content)
             end
           else
-            within_element(:file_content) do
+            within_element(:blob_viewer_file_content) do
               has_text?(file_content)
             end
           end
@@ -142,11 +142,11 @@ module QA
 
         def has_no_file_content?(file_content, file_number = nil)
           if file_number
-            within_element_by_index(:file_content, file_number - 1) do
+            within_element_by_index(:blob_viewer_file_content, file_number - 1) do
               has_no_text?(file_content)
             end
           else
-            within_element(:file_content) do
+            within_element(:blob_viewer_file_content) do
               has_no_text?(file_content)
             end
           end
@@ -207,7 +207,7 @@ module QA
         end
 
         def has_syntax_highlighting?(language)
-          within_element(:file_content) do
+          within_element(:blob_viewer_file_content) do
             find('.line')['lang'].to_s == language
           end
         end

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

@@ -6,6 +6,7 @@ module QA
       module Snippet
         class Show < Page::Base
           include Page::Component::Snippet
+          include Page::Component::BlobContent
 
           view 'app/assets/javascripts/snippets/components/snippet_title.vue' do
             element :snippet_title_content, required: true

qa/qa/page/file/shared/commit_message.rb

@@ -10,6 +10,10 @@ module QA
           def self.included(base)
             super
 
+            base.view 'app/assets/javascripts/repository/components/delete_blob_modal.vue' do
+              element :commit_message_field
+            end
+
             base.view 'app/views/shared/_commit_message_container.html.haml' do
               element :commit_message_field
             end

qa/qa/page/file/show.rb

@@ -8,24 +8,21 @@ module QA
         include Project::SubMenus::Settings
         include Project::SubMenus::Common
         include Layout::Flash
+        include Page::Component::BlobContent
+
+        view 'app/assets/javascripts/repository/components/blob_button_group.vue' do
+          element :lock_button
+        end
 
         view 'app/helpers/blob_helper.rb' do
           element :edit_button, "_('Edit')" # rubocop:disable QA/ElementWithPattern
           element :delete_button, '_("Delete")' # rubocop:disable QA/ElementWithPattern
         end
 
-        view 'app/views/projects/blob/_header_content.html.haml' do
-          element :file_name_content
-        end
-
         view 'app/views/projects/blob/_remove.html.haml' do
           element :delete_file_button, "button_tag 'Delete file'" # rubocop:disable QA/ElementWithPattern
         end
 
-        view 'app/views/shared/_file_highlight.html.haml' do
-          element :file_content
-        end
-
         def click_edit
           click_on 'Edit'
         end
@@ -37,26 +34,6 @@ module QA
         def click_delete_file
           click_on 'Delete file'
         end
-
-        def has_file?(name)
-          has_element?(:file_name_content, text: name)
-        end
-
-        def has_no_file?(name)
-          has_no_element?(:file_name_content, text: name)
-        end
-
-        def has_file_content?(file_content, file_number = nil)
-          if file_number
-            within_element_by_index(:file_content, file_number - 1) do
-              has_text?(file_content)
-            end
-          else
-            within_element(:file_content) do
-              has_text?(file_content)
-            end
-          end
-        end
       end
     end
   end

qa/qa/page/project/snippet/index.rb

@@ -6,6 +6,7 @@ module QA
       module Snippet
         class Index < Page::Base
           include Page::Component::Snippet
+          include Page::Component::BlobContent
 
           view 'app/views/shared/snippets/_snippet.html.haml' do
             element :snippet_link

qa/qa/page/project/snippet/show.rb

@@ -6,6 +6,7 @@ module QA
       module Snippet
         class Show < Page::Base
           include Page::Component::Snippet
+          include Page::Component::BlobContent
 
           view 'app/views/projects/notes/_actions.html.haml' do
             element :edit_comment_button