Add test of adding file templates via the Web IDE

Adds a test that adds new files via file templates via the Web IDE
Includes new pages objects, and changes to page objects  and
associated code

15 files changed, 203 insertions, 14 deletions

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/form.vue b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
index ee8eb206980..802827fce76 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/form.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
@@ -117,7 +117,7 @@ export default {
         <button
           :disabled="!hasChanges"
           type="button"
-          class="btn btn-primary btn-sm btn-block"
+          class="btn btn-primary btn-sm btn-block qa-begin-commit-button"
           @click="toggleIsSmall"
         >
           {{ __('Commit…') }}
@@ -147,7 +147,7 @@ export default {
           <loading-button
             :loading="submitCommitLoading"
             :label="commitButtonText"
-            container-class="btn btn-success btn-sm float-left"
+            container-class="btn btn-success btn-sm float-left qa-commit-button"
             @click="commitChanges"
           />
           <button
diff --git a/app/assets/javascripts/ide/components/file_templates/bar.vue b/app/assets/javascripts/ide/components/file_templates/bar.vue
index 23be5f45f16..3587626c580 100644
--- a/app/assets/javascripts/ide/components/file_templates/bar.vue
+++ b/app/assets/javascripts/ide/components/file_templates/bar.vue
@@ -47,7 +47,7 @@ export default {
 </script>
 
 <template>
-  <div class="d-flex align-items-center ide-file-templates">
+  <div class="d-flex align-items-center ide-file-templates qa-file-templates-bar">
     <strong class="append-right-default">
       {{ __('File templates') }}
     </strong>
@@ -63,7 +63,7 @@ export default {
       :is-async-data="true"
       :searchable="true"
       :title="__('File templates')"
-      class="mr-2"
+      class="mr-2 qa-file-template-dropdown"
       @click="selectTemplate"
     />
     <transition name="fade">
diff --git a/app/assets/javascripts/ide/components/file_templates/dropdown.vue b/app/assets/javascripts/ide/components/file_templates/dropdown.vue
index ef1f6de3a86..94222c08e91 100644
--- a/app/assets/javascripts/ide/components/file_templates/dropdown.vue
+++ b/app/assets/javascripts/ide/components/file_templates/dropdown.vue
@@ -92,7 +92,7 @@ export default {
           v-model="search"
           :placeholder="__('Filter...')"
           type="search"
-          class="dropdown-input-field"
+          class="dropdown-input-field qa-dropdown-filter-input"
         />
         <i
           aria-hidden="true"
diff --git a/app/assets/javascripts/ide/components/ide_tree.vue b/app/assets/javascripts/ide/components/ide_tree.vue
index 39d46a91731..9f9e638f1aa 100644
--- a/app/assets/javascripts/ide/components/ide_tree.vue
+++ b/app/assets/javascripts/ide/components/ide_tree.vue
@@ -45,7 +45,7 @@ export default {
         <new-entry-button
           :label="__('New file')"
           :show-label="false"
-          class="d-flex border-0 p-0 mr-3"
+          class="d-flex border-0 p-0 mr-3 qa-new-file"
           icon="doc-new"
           @click="openNewEntryModal({ type: 'blob' })"
         />
diff --git a/app/assets/javascripts/ide/components/ide_tree_list.vue b/app/assets/javascripts/ide/components/ide_tree_list.vue
index ff53314d275..cba5eb52bdd 100644
--- a/app/assets/javascripts/ide/components/ide_tree_list.vue
+++ b/app/assets/javascripts/ide/components/ide_tree_list.vue
@@ -43,7 +43,7 @@ export default {
 
 <template>
   <div
-    class="ide-file-list"
+    class="ide-file-list qa-file-list"
   >
     <template v-if="showLoading">
       <div
diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
index bcd53ac1ba2..f0a04011a3e 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
@@ -110,12 +110,12 @@ export default {
           ref="fieldName"
           v-model="entryName"
           type="text"
-          class="form-control"
+          class="form-control qa-full-file-path"
           placeholder="/dir/file_name"
         />
         <ul
           v-if="isCreatingNew"
-          class="prepend-top-default list-inline"
+          class="prepend-top-default list-inline qa-template-list"
         >
           <li
             v-for="(template, index) in templateTypes"
diff --git a/app/assets/javascripts/vue_shared/components/gl_modal.vue b/app/assets/javascripts/vue_shared/components/gl_modal.vue
index b023c5cfeb1..ce01da208c5 100644
--- a/app/assets/javascripts/vue_shared/components/gl_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/gl_modal.vue
@@ -103,7 +103,7 @@ export default {
           <slot name="footer">
             <button
               type="button"
-              class="btn js-modal-cancel-action"
+              class="btn js-modal-cancel-action qa-modal-cancel-button"
               data-dismiss="modal"
               @click="emitCancel($event)"
             >
@@ -112,7 +112,7 @@ export default {
             <button
               :class="`btn-${footerPrimaryButtonVariant}`"
               type="button"
-              class="btn js-modal-primary-action"
+              class="btn js-modal-primary-action qa-modal-primary-button"
               data-dismiss="modal"
               @click="emitSubmit($event)"
             >
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index 9d196075bf1..601e3f25852 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -82,7 +82,7 @@
 
   - if can_collaborate
     = succeed " " do
-      = link_to ide_edit_path(@project, @ref, @path), class: 'btn btn-default' do
+      = link_to ide_edit_path(@project, @ref, @path), class: 'btn btn-default qa-web-ide-button' do
         = _('Web IDE')
 
   = render 'projects/buttons/download', project: @project, ref: @ref
diff --git a/qa/qa.rb b/qa/qa.rb
index 4a3a5b82dfa..ea77112ffac 100644
--- a/qa/qa.rb
+++ b/qa/qa.rb
@@ -214,6 +214,10 @@ module QA
         autoload :New, 'qa/page/project/wiki/new'
         autoload :Show, 'qa/page/project/wiki/show'
       end
+
+      module WebIDE
+        autoload :Edit, 'qa/page/project/web_ide/edit'
+      end
     end
 
     module Profile
@@ -255,6 +259,7 @@ module QA
       autoload :GroupsFilter, 'qa/page/component/groups_filter'
       autoload :Select2, 'qa/page/component/select2'
       autoload :DropdownFilter, 'qa/page/component/dropdown_filter'
+      autoload :ModalDialog, 'qa/page/component/modal_dialog'
     end
   end
 
diff --git a/qa/qa/page/base.rb b/qa/qa/page/base.rb
index a87536671c6..85278faaf0b 100644
--- a/qa/qa/page/base.rb
+++ b/qa/qa/page/base.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require 'capybara/dsl'
 
 module QA
@@ -7,6 +9,8 @@ module QA
       include Scenario::Actable
       extend SingleForwardable
 
+      ElementNotFound = Class.new(RuntimeError)
+
       def_delegators :evaluator, :view, :views
 
       def refresh
diff --git a/qa/qa/page/component/modal_dialog.rb b/qa/qa/page/component/modal_dialog.rb
new file mode 100644
index 00000000000..05615a548c2
--- /dev/null
+++ b/qa/qa/page/component/modal_dialog.rb
@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module QA
+  module Page
+    module Component
+      module ModalDialog
+        def self.included(base)
+          base.view 'app/assets/javascripts/vue_shared/components/gl_modal.vue' do
+            element :modal_cancel_button
+            element :modal_primary_button
+          end
+        end
+
+        def confirm_modal_action
+          click_element :modal_primary_button
+        end
+
+        def cancel_modal_action
+          click_element :modal_cancel_button
+        end
+      end
+    end
+  end
+end
diff --git a/qa/qa/page/project/show.rb b/qa/qa/page/project/show.rb
index 4990a30d0fa..4ffc17cde92 100644
--- a/qa/qa/page/project/show.rb
+++ b/qa/qa/page/project/show.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module QA
   module Page
     module Project
@@ -40,6 +42,10 @@ module QA
           element :new_file_option
         end
 
+        view 'app/views/projects/tree/_tree_header.html.haml' do
+          element :web_ide_button
+        end
+
         def project_name
           find('.qa-project-name').text
         end
@@ -84,6 +90,10 @@ module QA
         def fork_project
           click_on 'Fork'
         end
+
+        def open_web_ide!
+          click_element :web_ide_button
+        end
       end
     end
   end
diff --git a/qa/qa/page/project/web_ide/edit.rb b/qa/qa/page/project/web_ide/edit.rb
new file mode 100644
index 00000000000..fdfdd2fb3ea
--- /dev/null
+++ b/qa/qa/page/project/web_ide/edit.rb
@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+module QA
+  module Page
+    module Project
+      module WebIDE
+        class Edit < Page::Base
+          include Page::Component::DropdownFilter
+
+          view 'app/assets/javascripts/ide/components/ide_tree.vue' do
+            element :new_file
+          end
+
+          view 'app/assets/javascripts/ide/components/ide_tree_list.vue' do
+            element :file_list
+          end
+
+          view 'app/assets/javascripts/ide/components/new_dropdown/modal.vue' do
+            element :full_file_path
+            element :template_list
+          end
+
+          view 'app/assets/javascripts/ide/components/file_templates/bar.vue' do
+            element :file_templates_bar
+            element :file_template_dropdown
+          end
+
+          view 'app/assets/javascripts/ide/components/file_templates/dropdown.vue' do
+            element :dropdown_filter_input
+          end
+
+          view 'app/assets/javascripts/ide/components/commit_sidebar/form.vue' do
+            element :begin_commit_button
+            element :commit_button
+          end
+
+          def has_file?(file_name)
+            within_element(:file_list) do
+              page.has_content? file_name
+            end
+          end
+
+          def create_new_file(full_file_path)
+            click_element :new_file
+            fill_element :full_file_path, full_file_path
+            confirm_modal_action
+          end
+
+          def create_new_file_from_template(file_name, template)
+            click_element :new_file
+            within_element(:template_list) do
+              begin
+                click_on file_name
+              rescue Capybara::ElementNotFound
+                raise ElementNotFound, %Q(Couldn't find file template named "#{file_name}". Please confirm that it is a valid option.)
+              end
+            end
+
+            wait(reload: false) do
+              within_element(:file_templates_bar) do
+                click_element :file_template_dropdown
+                fill_element :dropdown_filter_input, template
+
+                begin
+                  click_on template
+                rescue Capybara::ElementNotFound
+                  raise ElementNotFound, %Q(Couldn't find template "#{template}" for #{file_name}. Please confirm that it exists in the list of templates.)
+                end
+              end
+            end
+          end
+
+          def commit_changes
+            click_element :begin_commit_button
+            click_element :commit_button
+
+            wait(reload: false) do
+              page.has_content?('Your changes have been committed')
+            end
+          end
+        end
+      end
+    end
+  end
+end
diff --git a/qa/qa/specs/features/browser_ui/3_create/repository/add_file_template_spec.rb b/qa/qa/specs/features/browser_ui/3_create/repository/add_file_template_spec.rb
index 71152f16024..7832a1f8e23 100644
--- a/qa/qa/specs/features/browser_ui/3_create/repository/add_file_template_spec.rb
+++ b/qa/qa/specs/features/browser_ui/3_create/repository/add_file_template_spec.rb
@@ -29,11 +29,9 @@ module QA
       templates.each do |(file_name, template, contents)|
         it "user adds #{file_name} via a file template" do
           login
-
           @project.visit!
 
           Page::Project::Show.act { create_new_file! }
-
           Page::File::Form.perform do |page|
             page.template_type = file_name
             page.template = template
diff --git a/qa/qa/specs/features/browser_ui/3_create/web_ide/add_file_template_spec.rb b/qa/qa/specs/features/browser_ui/3_create/web_ide/add_file_template_spec.rb
new file mode 100644
index 00000000000..30f665230c4
--- /dev/null
+++ b/qa/qa/specs/features/browser_ui/3_create/web_ide/add_file_template_spec.rb
@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module QA
+  context :create do
+    describe 'Web IDE file templates' do
+      def login
+        Runtime::Browser.visit(:gitlab, Page::Main::Login)
+        Page::Main::Login.act { sign_in_using_credentials }
+      end
+
+      before(:all) do
+        login
+
+        @project = Factory::Resource::Project.fabricate! do |project|
+          project.name = 'file-template-project'
+          project.description = 'Add file templates via the Web IDE'
+        end
+
+        # Add a file via the regular Files view because the Web IDE isn't
+        # available unless there is a file present
+        Page::Project::Show.act { create_new_file! }
+        Page::File::Form.perform do |page|
+          page.add_name('dummy')
+          page.add_content('Enable the Web IDE')
+          page.commit_changes
+        end
+
+        Page::Menu::Main.act { sign_out }
+      end
+
+      templates = [
+        ['.gitignore', 'Android', ['# Android Studio captures folder']],
+        ['.gitlab-ci.yml', 'Julia', ['# This file is a template', 'http://julialang.org/']],
+        ['Dockerfile', 'Python', ['FROM python:3.6']],
+        ['LICENSE', 'Mozilla Public License 2.0', ['Mozilla Public License Version 2.0']]
+      ]
+
+      templates.each do |(file_name, template, contents)|
+        it "user adds #{file_name} via a file template" do
+          login
+          @project.visit!
+
+          Page::Project::Show.act { open_web_ide! }
+          Page::Project::WebIDE::Edit.perform do |page|
+            page.create_new_file_from_template file_name, template
+
+            expect(page.has_file?(file_name)).to be_truthy
+          end
+
+          expect(page).to have_button('Undo')
+          contents.each { |content| expect(page).to have_content(content) }
+
+          Page::Project::WebIDE::Edit.perform do |page|
+            page.commit_changes
+          end
+
+          expect(page).to have_content(file_name)
+          contents.each { |content| expect(page).to have_content(content) }
+        end
+      end
+    end
+  end
+end