Commit 38c014b6 authored by Sanad Liaquat's avatar Sanad Liaquat

Merge branch 'qa-e2e-upload-new-file-in-web-ide' into 'master'

E2E to upload files in Web IDE

See merge request gitlab-org/gitlab!51540
parents 1cc9b5f7 5e147c9a
...@@ -81,6 +81,7 @@ export default { ...@@ -81,6 +81,7 @@ export default {
type="file" type="file"
class="hidden" class="hidden"
multiple multiple
data-qa-selector="file_upload_field"
@change="openFile" @change="openFile"
/> />
</div> </div>
......
...@@ -79,6 +79,8 @@ export default { ...@@ -79,6 +79,8 @@ export default {
:title="tooltipTitle" :title="tooltipTitle"
:class="{ 'ml-auto': isCentered }" :class="{ 'ml-auto': isCentered }"
class="file-changed-icon d-inline-block" 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" /> <gl-icon v-if="showIcon" :name="changedIcon" :size="size" :class="changedIconClass" />
</span> </span>
......
...@@ -54,7 +54,7 @@ export default { ...@@ -54,7 +54,7 @@ export default {
</script> </script>
<template> <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" /> <image-viewer v-if="type === 'image'" :path="path" :file-size="fileSize" />
<markdown-viewer <markdown-viewer
v-if="type === 'markdown'" v-if="type === 'markdown'"
......
...@@ -41,7 +41,14 @@ export default { ...@@ -41,7 +41,14 @@ export default {
{{ fileName }} {{ fileName }}
<template v-if="fileSize > 0"> ({{ fileSizeReadable }}) </template> <template v-if="fileSize > 0"> ({{ fileSizeReadable }}) </template>
</p> </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" /> <gl-icon :size="16" name="download" class="float-left gl-mr-3" />
{{ __('Download') }} {{ __('Download') }}
</a> </a>
......
...@@ -82,7 +82,7 @@ export default { ...@@ -82,7 +82,7 @@ export default {
</script> </script>
<template> <template>
<div data-testid="image-viewer"> <div data-testid="image-viewer" data-qa-selector="image_viewer_container">
<div :class="innerCssClasses" class="position-relative"> <div :class="innerCssClasses" class="position-relative">
<img ref="contentImg" :src="path" @load="onImgLoad" /> <img ref="contentImg" :src="path" @load="onImgLoad" />
<slot <slot
......
...@@ -137,7 +137,11 @@ export default { ...@@ -137,7 +137,11 @@ export default {
@click="clickFile" @click="clickFile"
@mouseleave="$emit('mouseleave', $event)" @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 <span
ref="textOutput" ref="textOutput"
:style="levelIndentation" :style="levelIndentation"
......
<?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>
...@@ -289,8 +289,11 @@ module QA ...@@ -289,8 +289,11 @@ module QA
sleep 1 sleep 1
end end
def within_element(name, text: nil) def within_element(name, **kwargs)
page.within(element_selector_css(name), text: text) do wait_for_requests
text = kwargs.delete(:text)
page.within(element_selector_css(name, kwargs), text: text) do
yield yield
end end
end end
......
...@@ -57,6 +57,7 @@ module QA ...@@ -57,6 +57,7 @@ module QA
view 'app/assets/javascripts/vue_shared/components/file_row.vue' do view 'app/assets/javascripts/vue_shared/components/file_row.vue' do
element :file_name_content element :file_name_content
element :file_row_container
end end
view 'app/assets/javascripts/ide/components/new_dropdown/index.vue' do view 'app/assets/javascripts/ide/components/new_dropdown/index.vue' do
...@@ -77,9 +78,29 @@ module QA ...@@ -77,9 +78,29 @@ module QA
element :ide_commit_message_field element :ide_commit_message_field
end 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) def has_file?(file_name)
within_element(:file_list) do within_element(:file_list) do
page.has_content? file_name has_text?(file_name)
end end
end end
...@@ -87,6 +108,26 @@ module QA ...@@ -87,6 +108,26 @@ module QA
has_element?(:project_path_content, project_path: project_path) has_element?(:project_path_content, project_path: project_path)
end 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 def go_to_project
click_element(:project_path_content, Page::Project::Show) click_element(:project_path_content, Page::Project::Show)
end end
...@@ -212,6 +253,12 @@ module QA ...@@ -212,6 +253,12 @@ module QA
has_element?(:file_list) has_element?(:file_list)
end end
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 end
end end
......
# 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
...@@ -143,12 +143,12 @@ module QA ...@@ -143,12 +143,12 @@ module QA
super super
end end
def within_element(name, text: nil) def within_element(name, **kwargs)
log("within element :#{name}") log("within element :#{name} with args #{kwargs}")
element = super element = super
log("end within element :#{name}") log("end within element :#{name} with args #{kwargs}")
element element
end end
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment