E2E to upload files in Web IDE

See https://gitlab.com/gitlab-org/gitlab/-/issues/270083

app/assets/javascripts/ide/components/new_dropdown/upload.vue

@@ -81,6 +81,7 @@ export default {
       type="file"
       class="hidden"
       multiple
+      data-qa-selector="file_upload_field"
       @change="openFile"
     />
   </div>

app/assets/javascripts/vue_shared/components/changed_file_icon.vue

@@ -79,6 +79,8 @@ export default {
     :title="tooltipTitle"
     :class="{ 'ml-auto': isCentered }"
     class="file-changed-icon d-inline-block"
+    data-qa-selector="changed_file_icon_content"
+    :data-qa-title="tooltipTitle"
   >
     <gl-icon v-if="showIcon" :name="changedIcon" :size="size" :class="changedIconClass" />
   </span>

app/assets/javascripts/vue_shared/components/content_viewer/content_viewer.vue

@@ -54,7 +54,7 @@ export default {
 </script>
 
 <template>
-  <div class="preview-container">
+  <div class="preview-container" data-qa-selector="preview_container">
     <image-viewer v-if="type === 'image'" :path="path" :file-size="fileSize" />
     <markdown-viewer
       v-if="type === 'markdown'"

app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue

@@ -41,7 +41,14 @@ export default {
         {{ fileName }}
         <template v-if="fileSize > 0"> ({{ fileSizeReadable }}) </template>
       </p>
-      <a :href="path" class="btn btn-default" rel="nofollow" :download="fileName" target="_blank">
+      <a
+        :href="path"
+        class="btn btn-default"
+        rel="nofollow"
+        :download="fileName"
+        target="_blank"
+        data-qa-selector="download_button"
+      >
         <gl-icon :size="16" name="download" class="float-left gl-mr-3" />
         {{ __('Download') }}
       </a>

app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue

@@ -82,7 +82,7 @@ export default {
 </script>
 
 <template>
-  <div data-testid="image-viewer">
+  <div data-testid="image-viewer" data-qa-selector="image_viewer_container">
     <div :class="innerCssClasses" class="position-relative">
       <img ref="contentImg" :src="path" @load="onImgLoad" />
       <slot

app/assets/javascripts/vue_shared/components/file_row.vue

@@ -137,7 +137,11 @@ export default {
     @click="clickFile"
     @mouseleave="$emit('mouseleave', $event)"
   >
-    <div class="file-row-name-container">
+    <div
+      class="file-row-name-container"
+      data-qa-selector="file_row_container"
+      :data-qa-file-name="file.name"
+    >
       <span
         ref="textOutput"
         :style="levelIndentation"

qa/qa/fixtures/web_ide/logo_sample.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="210px" height="210px" viewBox="0 0 210 210" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.3.2 (12043) - http://www.bohemiancoding.com/sketch -->
+    <title>Slice 1</title>
+    <desc>Created with Sketch.</desc>
+    <script>alert('FAIL')</script>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="logo" sketch:type="MSLayerGroup" transform="translate(0.000000, 10.000000)">
+            <g id="Page-1" sketch:type="MSShapeGroup">
+                <g id="Fill-1-+-Group-24">
+                    <g id="Group-24">
+                        <g id="Group">
+                            <path d="M105.0614,193.655 L105.0614,193.655 L143.7014,74.734 L66.4214,74.734 L105.0614,193.655 L105.0614,193.655 Z" id="Fill-4" fill="#E24329" class="tanuki-shape"></path>
+                            <path d="M105.0614,193.6548 L66.4214,74.7338 L12.2684,74.7338 L105.0614,193.6548 L105.0614,193.6548 Z" id="Fill-8" fill="#FC6D26" class="tanuki-shape"></path>
+                            <path d="M12.2685,74.7341 L12.2685,74.7341 L0.5265,110.8731 C-0.5445,114.1691 0.6285,117.7801 3.4325,119.8171 L105.0615,193.6551 L12.2685,74.7341 L12.2685,74.7341 Z" id="Fill-12" fill="#FCA326" class="tanuki-shape"></path>
+                            <path d="M12.2685,74.7342 L66.4215,74.7342 L43.1485,3.1092 C41.9515,-0.5768 36.7375,-0.5758 35.5405,3.1092 L12.2685,74.7342 L12.2685,74.7342 Z" id="Fill-16" fill="#E24329" class="tanuki-shape"></path>
+                            <path d="M105.0614,193.6548 L143.7014,74.7338 L197.8544,74.7338 L105.0614,193.6548 L105.0614,193.6548 Z" id="Fill-18" fill="#FC6D26" class="tanuki-shape"></path>
+                            <path d="M197.8544,74.7341 L197.8544,74.7341 L209.5964,110.8731 C210.6674,114.1691 209.4944,117.7801 206.6904,119.8171 L105.0614,193.6551 L197.8544,74.7341 L197.8544,74.7341 Z" id="Fill-20" fill="#FCA326" class="tanuki-shape"></path>
+                            <path d="M197.8544,74.7342 L143.7014,74.7342 L166.9744,3.1092 C168.1714,-0.5768 173.3854,-0.5758 174.5824,3.1092 L197.8544,74.7342 L197.8544,74.7342 Z" id="Fill-22" fill="#E24329" class="tanuki-shape"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

qa/qa/fixtures/web_ide/text_file.txt

+Simple text

qa/qa/page/base.rb

@@ -289,8 +289,11 @@ module QA
         sleep 1
       end
 
-      def within_element(name, text: nil)
-        page.within(element_selector_css(name), text: text) do
+      def within_element(name, **kwargs)
+        wait_for_requests
+        text = kwargs.delete(:text)
+
+        page.within(element_selector_css(name, kwargs), text: text) do
           yield
         end
       end

qa/qa/page/project/web_ide/edit.rb

@@ -57,6 +57,7 @@ module QA
 
           view 'app/assets/javascripts/vue_shared/components/file_row.vue' do
             element :file_name_content
+            element :file_row_container
           end
 
           view 'app/assets/javascripts/ide/components/new_dropdown/index.vue' do
@@ -77,9 +78,29 @@ module QA
             element :ide_commit_message_field
           end
 
+          view 'app/assets/javascripts/vue_shared/components/changed_file_icon.vue' do
+            element :changed_file_icon_content
+          end
+
+          view 'app/assets/javascripts/vue_shared/components/content_viewer/content_viewer.vue' do
+            element :preview_container
+          end
+
+          view 'app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue' do
+            element :download_button
+          end
+
+          view 'app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue' do
+            element :image_viewer_container
+          end
+
+          view 'app/assets/javascripts/ide/components/new_dropdown/upload.vue' do
+            element :file_upload_field
+          end
+
           def has_file?(file_name)
             within_element(:file_list) do
-              page.has_content? file_name
+              has_text?(file_name)
             end
           end
 
@@ -87,6 +108,26 @@ module QA
             has_element?(:project_path_content, project_path: project_path)
           end
 
+          def has_file_addition_icon?(file_name)
+            within_element(:file_row_container, file_name: file_name) do
+              has_element?(:changed_file_icon_content, title: 'Added')
+            end
+          end
+
+          def has_download_button?(file_name)
+            click_element(:file_row_container, file_name: file_name)
+            within_element(:preview_container) do
+              has_element?(:download_button)
+            end
+          end
+
+          def has_image_viewer?(file_name)
+            click_element(:file_row_container, file_name: file_name)
+            within_element(:preview_container) do
+              has_element?(:image_viewer_container)
+            end
+          end
+
           def go_to_project
             click_element(:project_path_content, Page::Project::Show)
           end
@@ -212,6 +253,12 @@ module QA
               has_element?(:file_list)
             end
           end
+
+          def upload_file(file_path)
+            within_element(:file_list) do
+              find_element(:file_upload_field, visible: false).send_keys(file_path)
+            end
+          end
         end
       end
     end

qa/qa/specs/features/browser_ui/3_create/web_ide/upload_new_file_in_web_ide_spec.rb

+# frozen_string_literal: true
+
+module QA
+  RSpec.describe 'Create' do
+    describe 'Upload a file in Web IDE' do
+      let(:file_path) { File.absolute_path(File.join('qa', 'fixtures', 'web_ide', file_name)) }
+
+      let(:project) do
+        Resource::Project.fabricate_via_api! do |project|
+          project.name = 'upload-file-project'
+          project.initialize_with_readme = true
+        end
+      end
+
+      before do
+        Flow::Login.sign_in
+
+        project.visit!
+        Page::Project::Show.perform(&:open_web_ide!)
+      end
+
+      context 'when a file with the same name already exists' do
+        let(:file_name) { 'README.md' }
+
+        it 'throws an error' do
+          Page::Project::WebIDE::Edit.perform do |ide|
+            ide.upload_file(file_path)
+          end
+
+          expect(page).to have_content('The name "README.md" is already taken in this directory.')
+        end
+      end
+
+      context 'when the file is a text file' do
+        let(:file_name) { 'text_file.txt' }
+
+        it 'shows the Edit tab with the text' do
+          Page::Project::WebIDE::Edit.perform do |ide|
+            ide.upload_file(file_path)
+
+            expect(ide).to have_file(file_name)
+            expect(ide).to have_file_addition_icon(file_name)
+            expect(ide).to have_text('Simple text')
+
+            ide.commit_changes
+
+            expect(ide).to have_file(file_name)
+          end
+        end
+      end
+
+      context 'when the file is binary' do
+        let(:file_name) { 'logo_sample.svg' }
+
+        it 'shows a Download button' do
+          Page::Project::WebIDE::Edit.perform do |ide|
+            ide.upload_file(file_path)
+
+            expect(ide).to have_file(file_name)
+            expect(ide).to have_file_addition_icon(file_name)
+            expect(ide).to have_download_button(file_name)
+
+            ide.commit_changes
+
+            expect(ide).to have_file(file_name)
+          end
+        end
+      end
+
+      context 'when the file is an image' do
+        let(:file_name) { 'dk.png' }
+
+        it 'shows an image viewer' do
+          Page::Project::WebIDE::Edit.perform do |ide|
+            ide.upload_file(file_path)
+
+            expect(ide).to have_file(file_name)
+            expect(ide).to have_file_addition_icon(file_name)
+            expect(ide).to have_image_viewer(file_name)
+
+            ide.commit_changes
+
+            expect(ide).to have_file(file_name)
+          end
+        end
+      end
+    end
+  end
+end

qa/qa/support/page/logging.rb

@@ -143,12 +143,12 @@ module QA
           super
         end
 
-        def within_element(name, text: nil)
-          log("within element :#{name}")
+        def within_element(name, **kwargs)
+          log("within element :#{name} with args #{kwargs}")
 
           element = super
 
-          log("end within element :#{name}")
+          log("end within element :#{name} with args #{kwargs}")
 
           element
         end