Add E2E for personal snippet with multiple files

See https://gitlab.com/gitlab-org/quality/testcases/-/issues/842

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

@@ -149,6 +149,7 @@ export default {
       data-testid="add_button"
       class="gl-my-3"
       variant="dashed"
+      data-qa-selector="add_file_button"
       @click="addBlob"
       >{{ addLabel }}</gl-button
     >

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

@@ -69,7 +69,7 @@ export default {
 };
 </script>
 <template>
-  <div class="file-holder snippet">
+  <div class="file-holder snippet" data-qa-selector="file_holder_container">
     <blob-header-edit
       :id="inputId"
       :value="blob.path"

qa/qa/page/component/new_snippet.rb

@@ -21,6 +21,7 @@ module QA
 
           base.view 'app/assets/javascripts/snippets/components/snippet_blob_edit.vue' do
             element :file_name_field
+            element :file_holder_container
           end
 
           base.view 'app/views/shared/form_elements/_description.html.haml' do
@@ -35,6 +36,10 @@ module QA
             element :submit_button
           end
 
+          base.view 'app/assets/javascripts/snippets/components/snippet_blob_actions_edit.vue' do
+            element :add_file_button
+          end
+
           base.view 'app/views/shared/_zen.html.haml' do
             # This 'element' is here only to ensure the changes in the view source aren't mistakenly changed
             element :_, "qa_selector = local_assigns.fetch(:qa_selector, '')" # rubocop:disable QA/ElementWithPattern
@@ -54,13 +59,29 @@ module QA
           choose visibility
         end
 
-        def fill_file_name(name)
-          fill_element :file_name_field, name
+        def fill_file_name(name, file_number = nil)
+          if file_number
+            within_element_by_index(:file_holder_container, file_number - 1) do
+              fill_element(:file_name_field, name)
+            end
+          else
+            fill_element(:file_name_field, name)
+          end
         end
 
-        def fill_file_content(content)
+        def fill_file_content(content, file_number = nil)
+          if file_number
+            within_element_by_index(:file_holder_container, file_number - 1) do
+              text_area.set(content)
+            end
+          else
             text_area.set content
           end
+        end
+
+        def click_add_file
+          click_element(:add_file_button)
+        end
 
         def click_create_snippet_button
           wait_until(reload: false) { !find_element(:submit_button).disabled? }

qa/qa/page/component/snippet.rb

@@ -98,17 +98,29 @@ module QA
           end
         end
 
-        def has_file_name?(file_name)
+        def has_file_name?(file_name, file_number = nil)
+          if file_number
+            within_element_by_index(:file_title_content, file_number - 1) do
+              has_text?(file_name)
+            end
+          else
             within_element(:file_title_content) do
               has_text?(file_name)
             end
           end
+        end
 
-        def has_file_content?(file_content)
+        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
 
         def has_embed_dropdown?
           has_element?(:snippet_embed_dropdown)

qa/qa/resource/snippet.rb

@@ -11,6 +11,11 @@ module QA
         @visibility = 'Public'
         @file_content = 'The snippet content'
         @file_name = 'New snippet file name'
+        @files = []
+      end
+
+      def add_files
+        yield @files
       end
 
       def fabricate!
@@ -22,6 +27,12 @@ module QA
           new_page.set_visibility(@visibility)
           new_page.fill_file_name(@file_name)
           new_page.fill_file_content(@file_content)
+
+          @files.each.with_index(2) do |file, i|
+            new_page.click_add_file
+            new_page.fill_file_name(file[:name], i)
+            new_page.fill_file_content(file[:content], i)
+          end
           new_page.click_create_snippet_button
         end
       end

qa/qa/specs/features/browser_ui/3_create/snippet/create_personal_snippet_with_multiple_files_spec.rb

+# frozen_string_literal: true
+
+module QA
+  RSpec.describe 'Create', :requires_admin do
+    describe 'Multiple file snippet' do
+      before do
+        Runtime::Feature.enable_and_verify('snippet_multiple_files')
+      end
+
+      after do
+        Runtime::Feature.disable_and_verify('snippet_multiple_files')
+      end
+
+      it 'creates a personal snippet with multiple files', testcase: 'https://gitlab.com/gitlab-org/quality/testcases/-/issues/842' do
+        Flow::Login.sign_in
+
+        Page::Main::Menu.perform do |menu|
+          menu.go_to_more_dropdown_option(:snippets_link)
+        end
+
+        Resource::Snippet.fabricate_via_browser_ui! do |snippet|
+          snippet.title = 'Personal snippet with multiple files'
+          snippet.description = 'Snippet description'
+          snippet.visibility = 'Public'
+          snippet.file_name = 'First file name'
+          snippet.file_content = 'First file content'
+
+          snippet.add_files do |files|
+            files.append(name: 'Second file name', content: 'Second file content')
+            files.append(name: 'Third file name', content: 'Third file content')
+          end
+        end
+
+        Page::Dashboard::Snippet::Show.perform do |snippet|
+          expect(snippet).to have_snippet_title('Personal snippet with multiple files')
+          expect(snippet).to have_snippet_description('Snippet description')
+          expect(snippet).to have_visibility_type(/public/i)
+          expect(snippet).to have_file_name('First file name', 1)
+          expect(snippet).to have_file_content('First file content', 1)
+          expect(snippet).to have_file_name('Second file name', 2)
+          expect(snippet).to have_file_content('Second file content', 2)
+          expect(snippet).to have_file_name('Third file name', 3)
+          expect(snippet).to have_file_content('Third file content', 3)
+        end
+      end
+    end
+  end
+end

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

@@ -3,6 +3,7 @@
 exports[`Snippet Blob Edit component with loaded blob matches snapshot 1`] = `
 <div
   class="file-holder snippet"
+  data-qa-selector="file_holder_container"
 >
   <blob-header-edit-stub
     candelete="true"