Replace 'browse_files.feature' spinach test with an rspec analog

13 files changed, 821 insertions, 380 deletions

diff --git a/changelogs/unreleased/replace_spinach_spec_browse_files.yml b/changelogs/unreleased/replace_spinach_spec_browse_files.yml
new file mode 100644
index 00000000000..7380d39fa9f
--- /dev/null
+++ b/changelogs/unreleased/replace_spinach_spec_browse_files.yml
@@ -0,0 +1,4 @@
+---
+title: Replace 'browse_files.feature' spinach test with an rspec analog
+merge_request: 12251
+author: @blackst0ne
diff --git a/features/project/source/browse_files.feature b/features/project/source/browse_files.feature
deleted file mode 100644
index 59a625056d6..00000000000
--- a/features/project/source/browse_files.feature
+++ /dev/null
@@ -1,323 +0,0 @@
-Feature: Project Source Browse Files
-  Background:
-    Given I sign in as a user
-    And I own project "Shop"
-    Given I visit project source page
-
-  Scenario: I browse files from master branch
-    Then I should see files from repository
-
-  Scenario: I browse files for specific ref
-    Given I visit project source page for "6d39438"
-    Then I should see files from repository for "6d39438"
-    
-  @javascript
-  Scenario: I browse file content
-    Given I click on ".gitignore" file in repo
-    Then I should see its content
-
-  Scenario: I browse raw file
-    Given I visit blob file from repo
-    And I click link "Raw"
-    Then I should see raw file content
-
-  Scenario: I can create file
-    Given I click on "New file" link in repo
-    Then I can see new file page
-
-  Scenario: I can create file when I don't have write access
-    Given I don't have write access
-    And I click on "New file" link in repo
-    Then I should see a notice about a new fork having been created
-    Then I can see new file page
-
-  @javascript
-  Scenario: I can create and commit file
-    Given I click on "New file" link in repo
-    And I edit code
-    And I fill the new file name
-    And I fill the commit message
-    And I click on "Commit changes"
-    Then I am redirected to the new file
-    And I should see its new content
-
-  @javascript
-  Scenario: I can create and commit file when I don't have write access
-    Given I don't have write access
-    And I click on "New file" link in repo
-    And I edit code
-    And I fill the new file name
-    And I fill the commit message
-    And I click on "Commit changes"
-    Then I am redirected to the fork's new merge request page
-    And I can see the new commit message
-
-  @javascript
-  Scenario: I can create and commit file with new lines at the end of file
-    Given I click on "New file" link in repo
-    And I edit code with new lines at end of file
-    And I fill the new file name
-    And I fill the commit message
-    And I click on "Commit changes"
-    Then I am redirected to the new file
-    And I click button "Edit"
-    And I should see its content with new lines preserved at end of file
-
-  @javascript
-  Scenario: I can create and commit file and specify new branch
-    Given I click on "New file" link in repo
-    And I edit code
-    And I fill the new file name
-    And I fill the commit message
-    And I fill the new branch name
-    And I click on "Commit changes"
-    Then I am redirected to the new merge request page
-    When I click on "Changes" tab
-    And I should see its new content
-
-  @javascript
-  Scenario: I can upload file and commit
-    Given I click on "Upload file" link in repo
-    And I upload a new text file
-    And I fill the upload file commit message
-    And I fill the new branch name
-    And I click on "Upload file"
-    Then I can see the new commit message
-    And I am redirected to the new merge request page
-    When I click on "Changes" tab
-    Then I can see the new text file
-
-  @javascript
-  Scenario: I can upload file and commit when I don't have write access
-    Given I don't have write access
-    And I click on "Upload file" link in repo
-    Then I should see a notice about a new fork having been created
-    When I click on "Upload file" link in repo
-    And I upload a new text file
-    And I fill the upload file commit message
-    And I click on "Upload file"
-    Then I can see the new commit message
-    And I am redirected to the fork's new merge request page
-    When I click on "Changes" tab
-    Then I can see the new text file
-
-  @javascript
-  Scenario: I can replace file and commit
-    Given I click on ".gitignore" file in repo
-    And I see the ".gitignore"
-    And I click on "Replace"
-    And I replace it with a text file
-    And I fill the replace file commit message
-    And I click on "Replace file"
-    Then I can see the new text file
-    And I can see the replacement commit message
-
-  @javascript
-  Scenario: I can replace file and commit when I don't have write access
-    Given I don't have write access
-    And I click on ".gitignore" file in repo
-    And I see the ".gitignore"
-    And I click on "Replace"
-    Then I should see a Fork/Cancel combo
-    And I click button "Fork"
-    Then I should see a notice about a new fork having been created
-    When I click on "Replace"
-    And I replace it with a text file
-    And I fill the replace file commit message
-    And I click on "Replace file"
-    And I can see the replacement commit message
-    And I am redirected to the fork's new merge request page
-    When I click on "Changes" tab
-    Then I can see the new text file
-
-  @javascript
-  Scenario: I can create file with a directory name
-    Given I click on "New file" link in repo
-    And I fill the new file name with a new directory
-    And I edit code
-    And I fill the commit message
-    And I click on "Commit changes"
-    Then I am redirected to the new file with directory
-    And I should see its new content
-
-  @javascript
-  Scenario: I can edit file
-    Given I click on ".gitignore" file in repo
-    And I click button "Edit"
-    Then I can edit code
-
-  @javascript
-  Scenario: I can edit file when I don't have write access
-    Given I don't have write access
-    And I click on ".gitignore" file in repo
-    And I click button "Edit"
-    Then I should see a Fork/Cancel combo
-    And I click button "Fork"
-    Then I should see a notice about a new fork having been created
-    And I can edit code
-
-  Scenario: If the file is binary the edit link is hidden
-    Given I visit a binary file in the repo
-    Then I cannot see the edit button
-
-  @javascript
-  Scenario: I can edit and commit file
-    Given I click on ".gitignore" file in repo
-    And I click button "Edit"
-    And I edit code
-    And I fill the commit message
-    And I click on "Commit changes"
-    Then I am redirected to the ".gitignore"
-    And I should see its new content
-
-  @javascript
-  Scenario: I can edit and commit file when I don't have write access
-    Given I don't have write access
-    And I click on ".gitignore" file in repo
-    And I click button "Edit"
-    Then I should see a Fork/Cancel combo
-    And I click button "Fork"
-    And I edit code
-    And I fill the commit message
-    And I click on "Commit changes"
-    Then I am redirected to the fork's new merge request page
-    And I can see the new commit message
-
-  @javascript
-  Scenario: I can edit and commit file to new branch
-    Given I click on ".gitignore" file in repo
-    And I click button "Edit"
-    And I edit code
-    And I fill the commit message
-    And I fill the new branch name
-    And I click on "Commit changes"
-    Then I am redirected to the new merge request page
-    Then I click on "Changes" tab
-    And I should see its new content
-
-  @javascript  @wip
-  Scenario: If I don't change the content of the file I see an error message
-    Given I click on ".gitignore" file in repo
-    And I click button "edit"
-    And I fill the commit message
-    And I click on "Commit changes"
-    # Test fails because carriage returns are added to the file.
-    Then I am on the ".gitignore" edit file page
-    And I see a commit error message
-
-  @javascript
-  Scenario: I can create directory in repo
-    When I click on "New directory" link in repo
-    And I fill the new directory name
-    And I fill the commit message
-    And I fill the new branch name
-    And I click on "Create directory"
-    Then I am redirected to the new merge request page
-
-  @javascript
-  Scenario: I can create directory in repo when I don't have write access
-    Given I don't have write access
-    When I click on "New directory" link in repo
-    Then I should see a notice about a new fork having been created
-    When I click on "New directory" link in repo
-    And I fill the new directory name
-    And I fill the commit message
-    And I click on "Create directory"
-    Then I am redirected to the fork's new merge request page
-
-  @javascript
-  Scenario: I attempt to create an existing directory
-    When I click on "New directory" link in repo
-    And I fill an existing directory name
-    And I fill the commit message
-    And I click on "Create directory"
-    Then I see "Unable to create directory"
-    And I am redirected to the root directory
-
-  @javascript
-  Scenario: I can see editing preview
-    Given I click on ".gitignore" file in repo
-    And I click button "Edit"
-    And I edit code
-    And I click link "Diff"
-    Then I see diff
-
-  @javascript
-  Scenario: I can delete file and commit
-    Given I click on ".gitignore" file in repo
-    And I see the ".gitignore"
-    And I click on "Delete"
-    And I fill the commit message
-    And I click on "Delete file"
-    Then I am redirected to the files URL
-    And I don't see the ".gitignore"
-
-  @javascript
-  Scenario: I can delete file and commit when I don't have write access
-    Given I don't have write access
-    And I click on ".gitignore" file in repo
-    And I see the ".gitignore"
-    And I click on "Delete"
-    Then I should see a Fork/Cancel combo
-    And I click button "Fork"
-    Then I should see a notice about a new fork having been created
-    When I click on "Delete"
-    And I fill the commit message
-    And I click on "Delete file"
-    Then I am redirected to the fork's new merge request page
-    And I can see the new commit message
-
-  Scenario: I can browse directory with Browse Dir
-    Given I click on files directory
-    And I click on History link
-    Then I see Browse dir link
-
-  Scenario: I can browse file with Browse File
-    Given I click on readme file
-    And I click on History link
-    Then I see Browse file link
-
-  Scenario: I can browse code with Browse Code
-    Given I click on History link
-    Then I see Browse code link
-
-  # Permalink
-
-  Scenario: I click on the permalink link from a branch ref
-    Given I click on ".gitignore" file in repo
-    And I click on Permalink
-    Then I am redirected to the permalink URL
-
-  Scenario: I don't see the permalink link from a SHA ref
-    Given I visit project source page for "6d394385cf567f80a8fd85055db1ab4c5295806f"
-    And I click on ".gitignore" file in repo
-    Then I don't see the permalink link
-
-  @javascript
-  Scenario: I browse code with single quotes in the ref
-    Given I switch ref to 'test'
-    And I see the ref 'test' has been selected
-    And I visit the 'test' tree
-    Then I see the commit data
-
-  @javascript
-  Scenario: I browse code with a leading dot in the directory
-    Given I switch ref to fix
-    And I visit the fix tree
-    Then I see the commit data for a directory with a leading dot
-
-  Scenario: I browse LFS object
-    Given I click on "files/lfs/lfs_object.iso" file in repo
-    Then I should see download link and object size
-    And I should not see lfs pointer details
-    And I should see buttons for allowed commands
-
-  @javascript
-  Scenario: I preview an SVG file
-    Given I click on "Upload file" link in repo
-    And I upload a new SVG file
-    And I fill the upload file commit message
-    And I fill the new branch name
-    And I click on "Upload file"
-    Given I visit the SVG file
-    Then I can see the new rendered SVG image
diff --git a/spec/features/projects/user_browses_files_spec.rb b/spec/features/projects/user_browses_files_spec.rb
new file mode 100644
index 00000000000..263a3a29a66
--- /dev/null
+++ b/spec/features/projects/user_browses_files_spec.rb
@@ -0,0 +1,188 @@
+require 'spec_helper'
+
+describe 'User browses files' do
+  include DropzoneHelper
+
+  let(:fork_message) do
+    "You're not allowed to make changes to this project directly. "\
+    "A fork of this project has been created that you can make changes in, so you can submit a merge request."
+  end
+  let(:project) { create(:project, name: 'Shop') }
+  let(:project2) { create(:project, :repository, name: 'Another Project', path: 'another-project') }
+  let(:project2_tree_path_root_ref) { project_tree_path(project2, project2.repository.root_ref) }
+  let(:tree_path_ref_6d39438) { project_tree_path(project, '6d39438') }
+  let(:tree_path_root_ref) { project_tree_path(project, project.repository.root_ref) }
+  let(:user) { create(:user) }
+
+  before do
+    project.team << [user, :master]
+    sign_in(user)
+  end
+
+  context 'when browsing the master branch' do
+    before do
+      visit(tree_path_root_ref)
+    end
+
+    it 'shows files from a repository' do
+      expect(page).to have_content('VERSION')
+      expect(page).to have_content('.gitignore')
+      expect(page).to have_content('LICENSE')
+    end
+
+    it 'shows the "Browse Directory" link' do
+      click_link('files')
+      click_link('History')
+
+      expect(page).to have_link('Browse Directory')
+      expect(page).not_to have_link('Browse Code')
+    end
+
+    it 'shows the "Browse File" link' do
+      page.within('.tree-table') do
+        click_link('README.md')
+      end
+      click_link('History')
+
+      expect(page).to have_link('Browse File')
+      expect(page).not_to have_link('Browse Files')
+    end
+
+    it 'shows the "Browse Code" link' do
+      click_link('History')
+
+      expect(page).to have_link('Browse Files')
+      expect(page).not_to have_link('Browse Directory')
+    end
+
+    it 'redirects to the permalink URL' do
+      click_link('.gitignore')
+      click_link('Permalink')
+
+      permalink_path = project_blob_path(project, "#{project.repository.commit.sha}/.gitignore")
+
+      expect(current_path).to eq(permalink_path)
+    end
+  end
+
+  context 'when browsing a specific ref' do
+    before do
+      visit(tree_path_ref_6d39438)
+    end
+
+    it 'shows files from a repository for "6d39438"' do
+      expect(current_path).to eq(tree_path_ref_6d39438)
+      expect(page).to have_content('.gitignore')
+      expect(page).to have_content('LICENSE')
+    end
+
+    it 'shows files from a repository with apostroph in its name', js: true do
+      first('.js-project-refs-dropdown').click
+
+      page.within('.project-refs-form') do
+        click_link("'test'")
+      end
+
+      expect(page).to have_selector('.dropdown-toggle-text', text: "'test'")
+
+      visit(project_tree_path(project, "'test'"))
+
+      expect(page).to have_css('.tree-commit-link', visible: true)
+      expect(page).not_to have_content('Loading commit data...')
+    end
+
+    it 'shows the code with a leading dot in the directory', js: true do
+      first('.js-project-refs-dropdown').click
+
+      page.within('.project-refs-form') do
+        click_link('fix')
+      end
+
+      visit(project_tree_path(project, 'fix/.testdir'))
+
+      expect(page).to have_css('.tree-commit-link', visible: true)
+      expect(page).not_to have_content('Loading commit data...')
+    end
+
+    it 'does not show the permalink link' do
+      click_link('.gitignore')
+
+      expect(page).not_to have_link('permalink')
+    end
+  end
+
+  context 'when browsing a file content' do
+    before do
+      visit(tree_path_root_ref)
+      click_link('.gitignore')
+    end
+
+    it 'shows a file content', js: true do
+      wait_for_requests
+      expect(page).to have_content('*.rbc')
+    end
+  end
+
+  context 'when browsing a raw file' do
+    before do
+      visit(project_blob_path(project, File.join(RepoHelpers.sample_commit.id, RepoHelpers.sample_blob.path)))
+    end
+
+    it 'shows a raw file content' do
+      click_link('Open raw')
+      expect(source).to eq('') # Body is filled in by gitlab-workhorse
+    end
+  end
+
+  context 'when browsing an LFS object' do
+    before do
+      allow_any_instance_of(Project).to receive(:lfs_enabled?).and_return(true)
+      visit(project_tree_path(project, 'lfs'))
+    end
+
+    it 'shows an LFS object' do
+      click_link('files')
+      click_link('lfs')
+      click_link('lfs_object.iso')
+
+      expect(page).to have_content('Download (1.5 MB)')
+      expect(page).not_to have_content('version https://git-lfs.github.com/spec/v1')
+      expect(page).not_to have_content('oid sha256:91eff75a492a3ed0dfcb544d7f31326bc4014c8551849c192fd1e48d4dd2c897')
+      expect(page).not_to have_content('size 1575078')
+
+      page.within('.content') do
+        expect(page).to have_content('Delete')
+        expect(page).to have_content('History')
+        expect(page).to have_content('Permalink')
+        expect(page).to have_content('Replace')
+        expect(page).not_to have_content('Annotate')
+        expect(page).not_to have_content('Blame')
+        expect(page).not_to have_content('Edit')
+        expect(page).to have_link('Download')
+      end
+    end
+  end
+
+  context 'when previewing a file content' do
+    before do
+      visit(tree_path_root_ref)
+    end
+
+    it 'shows a preview of a file content', js: true do
+      find('.add-to-tree').click
+      click_link('Upload file')
+      drop_in_dropzone(File.join(Rails.root, 'spec', 'fixtures', 'logo_sample.svg'))
+
+      page.within('#modal-upload-blob') do
+        fill_in(:commit_message, with: 'New commit message')
+      end
+
+      fill_in(:branch_name, with: 'new_branch_name', visible: true)
+      click_button('Upload file')
+
+      visit(project_blob_path(project, 'new_branch_name/logo_sample.svg'))
+
+      expect(page).to have_css('.file-content img')
+    end
+  end
+end
diff --git a/spec/features/projects/user_create_dir_spec.rb b/spec/features/projects/user_create_dir_spec.rb
deleted file mode 100644
index 5e302da8a63..00000000000
--- a/spec/features/projects/user_create_dir_spec.rb
+++ /dev/null
@@ -1,57 +0,0 @@
-require 'spec_helper'
-
-feature 'New directory creation', feature: true, js: true do
-  given(:user) { create(:user) }
-  given(:role) { :developer }
-  given(:project) { create(:project) }
-
-  background do
-    sign_in(user)
-    project.team << [user, role]
-    visit project_tree_path(project, 'master')
-    open_new_directory_modal
-    fill_in 'dir_name', with: 'new_directory'
-  end
-
-  def open_new_directory_modal
-    first('.add-to-tree').click
-    click_link 'New directory'
-  end
-
-  def create_directory
-    click_button 'Create directory'
-  end
-
-  context 'with default target branch' do
-    background do
-      create_directory
-    end
-
-    scenario 'creates the directory in the default branch' do
-      expect(page).to have_content 'master'
-      expect(page).to have_content 'The directory has been successfully created'
-      expect(page).to have_content 'new_directory'
-    end
-  end
-
-  context 'with a new target branch' do
-    given(:new_branch_name) { 'new-feature' }
-
-    background do
-      fill_in :branch_name, with: new_branch_name
-      create_directory
-    end
-
-    scenario 'creates the directory in the new branch' do
-      expect(page).to have_content new_branch_name
-      expect(page).to have_content 'The directory has been successfully created'
-    end
-
-    scenario 'redirects to the merge request' do
-      expect(page).to have_content 'New Merge Request'
-      expect(page).to have_content "From #{new_branch_name} into master"
-      expect(page).to have_content 'Add new directory'
-      expect(current_path).to eq(project_new_merge_request_path(project))
-    end
-  end
-end
diff --git a/spec/features/projects/user_creates_directory_spec.rb b/spec/features/projects/user_creates_directory_spec.rb
new file mode 100644
index 00000000000..635bd4493dd
--- /dev/null
+++ b/spec/features/projects/user_creates_directory_spec.rb
@@ -0,0 +1,87 @@
+require 'spec_helper'
+
+feature 'User creates a directory', js: true do
+  let(:fork_message) do
+    "You're not allowed to make changes to this project directly. "\
+    "A fork of this project has been created that you can make changes in, so you can submit a merge request."
+  end
+  let(:project) { create(:project) }
+  let(:project2) { create(:project, :repository, name: 'Another Project', path: 'another-project') }
+  let(:project2_tree_path_root_ref) { project_tree_path(project2, project2.repository.root_ref) }
+  let(:user) { create(:user) }
+
+  before do
+    project.team << [user, :developer]
+    sign_in(user)
+    visit project_tree_path(project, 'master')
+  end
+
+  context 'with default target branch' do
+    before do
+      first('.add-to-tree').click
+      click_link('New directory')
+    end
+
+    it 'creates the directory in the default branch' do
+      fill_in(:dir_name, with: 'new_directory')
+      click_button('Create directory')
+
+      expect(page).to have_content('master')
+      expect(page).to have_content('The directory has been successfully created')
+      expect(page).to have_content('new_directory')
+    end
+
+    it 'does not create a directory with a name of already existed directory' do
+      fill_in(:dir_name, with: 'files')
+      fill_in(:commit_message, with: 'New commit message', visible: true)
+      click_button('Create directory')
+
+      expect(page).to have_content('A directory with this name already exists')
+      expect(current_path).to eq(project_tree_path(project, 'master'))
+    end
+  end
+
+  context 'with a new target branch' do
+    before do
+      first('.add-to-tree').click
+      click_link('New directory')
+      fill_in(:dir_name, with: 'new_directory')
+      fill_in(:branch_name, with: 'new-feature')
+      click_button('Create directory')
+    end
+
+    it 'creates the directory in the new branch and redirect to the merge request' do
+      expect(page).to have_content('new-feature')
+      expect(page).to have_content('The directory has been successfully created')
+      expect(page).to have_content('New Merge Request')
+      expect(page).to have_content('From new-feature into master')
+      expect(page).to have_content('Add new directory')
+
+      expect(current_path).to eq(project_new_merge_request_path(project))
+    end
+  end
+
+  context 'when an user does not have write access' do
+    before do
+      project2.team << [user, :reporter]
+      visit(project2_tree_path_root_ref)
+    end
+
+    it 'creates a directory in a forked project' do
+      find('.add-to-tree').click
+      click_link('New directory')
+
+      expect(page).to have_content(fork_message)
+
+      find('.add-to-tree').click
+      click_link('New directory')
+      fill_in(:dir_name, with: 'new_directory')
+      fill_in(:commit_message, with: 'New commit message', visible: true)
+      click_button('Create directory')
+
+      fork = user.fork_of(project2)
+
+      expect(current_path).to eq(project_new_merge_request_path(fork))
+    end
+  end
+end
diff --git a/spec/features/projects/user_creates_files_spec.rb b/spec/features/projects/user_creates_files_spec.rb
new file mode 100644
index 00000000000..0c7f1a775c1
--- /dev/null
+++ b/spec/features/projects/user_creates_files_spec.rb
@@ -0,0 +1,153 @@
+require 'spec_helper'
+
+describe 'User creates files' do
+  let(:fork_message) do
+    "You're not allowed to make changes to this project directly. "\
+    "A fork of this project has been created that you can make changes in, so you can submit a merge request."
+  end
+  let(:project) { create(:project, name: 'Shop') }
+  let(:project2) { create(:project, :repository, name: 'Another Project', path: 'another-project') }
+  let(:project_tree_path_root_ref) { project_tree_path(project, project.repository.root_ref) }
+  let(:project2_tree_path_root_ref) { project_tree_path(project2, project2.repository.root_ref) }
+  let(:user) { create(:user) }
+
+  before do
+    project.team << [user, :master]
+    sign_in(user)
+  end
+
+  context 'without commiting a new file' do
+    context 'when an user has write access' do
+      before do
+        visit(project_tree_path_root_ref)
+      end
+
+      it 'opens new file page' do
+        find('.add-to-tree').click
+        click_link('New file')
+
+        expect(page).to have_content('New file')
+        expect(page).to have_content('Commit message')
+      end
+    end
+
+    context 'when an user does not have write access' do
+      before do
+        project2.team << [user, :reporter]
+        visit(project2_tree_path_root_ref)
+      end
+
+      it 'opens new file page on a forked project' do
+        find('.add-to-tree').click
+        click_link('New file')
+
+        expect(page).to have_selector('.file-editor')
+        expect(page).to have_content(fork_message)
+        expect(page).to have_content('New file')
+        expect(page).to have_content('Commit message')
+      end
+    end
+  end
+
+  context 'with commiting a new file' do
+    context 'when an user has write access' do
+      before do
+        visit(project_tree_path_root_ref)
+
+        find('.add-to-tree').click
+        click_link('New file')
+      end
+
+      it 'creates and commit a new file', js: true do
+        expect(page).to have_selector('.file-editor')
+
+        execute_script("ace.edit('editor').setValue('*.rbca')")
+        fill_in(:file_name, with: 'not_a_file.md')
+        fill_in(:commit_message, with: 'New commit message', visible: true)
+        click_button('Commit changes')
+
+        new_file_path = project_blob_path(project, 'master/not_a_file.md')
+
+        expect(current_path).to eq(new_file_path)
+
+        wait_for_requests
+
+        expect(page).to have_content('*.rbca')
+      end
+
+      it 'creates and commit a new file with new lines at the end of file', js: true do
+        execute_script('ace.edit("editor").setValue("Sample\n\n\n")')
+        fill_in(:file_name, with: 'not_a_file.md')
+        fill_in(:commit_message, with: 'New commit message', visible: true)
+        click_button('Commit changes')
+
+        new_file_path = project_blob_path(project, 'master/not_a_file.md')
+
+        expect(current_path).to eq(new_file_path)
+
+        find('.js-edit-blob').click
+
+        expect(evaluate_script('ace.edit("editor").getValue()')).to eq("Sample\n\n\n")
+      end
+
+      it 'creates and commit a new file with a directory name', js: true do
+        fill_in(:file_name, with: 'foo/bar/baz.txt')
+
+        expect(page).to have_selector('.file-editor')
+
+        execute_script("ace.edit('editor').setValue('*.rbca')")
+        fill_in(:commit_message, with: 'New commit message', visible: true)
+        click_button('Commit changes')
+
+        expect(current_path).to eq(project_blob_path(project, 'master/foo/bar/baz.txt'))
+
+        wait_for_requests
+
+        expect(page).to have_content('*.rbca')
+      end
+
+      it 'creates and commit a new file specifying a new branch', js: true do
+        expect(page).to have_selector('.file-editor')
+
+        execute_script("ace.edit('editor').setValue('*.rbca')")
+        fill_in(:file_name, with: 'not_a_file.md')
+        fill_in(:commit_message, with: 'New commit message', visible: true)
+        fill_in(:branch_name, with: 'new_branch_name', visible: true)
+        click_button('Commit changes')
+
+        expect(current_path).to eq(project_new_merge_request_path(project))
+
+        click_link('Changes')
+
+        wait_for_requests
+
+        expect(page).to have_content('*.rbca')
+      end
+    end
+
+    context 'when an user does not have write access' do
+      before do
+        project2.team << [user, :reporter]
+        visit(project2_tree_path_root_ref)
+      end
+
+      it 'creates and commit new file in forked project', js: true do
+        find('.add-to-tree').click
+        click_link('New file')
+
+        expect(page).to have_selector('.file-editor')
+
+        execute_script("ace.edit('editor').setValue('*.rbca')")
+
+        fill_in(:file_name, with: 'not_a_file.md')
+        fill_in(:commit_message, with: 'New commit message', visible: true)
+        click_button('Commit changes')
+
+        fork = user.fork_of(project2)
+
+        expect(current_path).to eq(project_new_merge_request_path(fork))
+        expect(page).to have_content('New commit message')
+      end
+    end
+  end
+end
diff --git a/spec/features/projects/user_deletes_files_spec.rb b/spec/features/projects/user_deletes_files_spec.rb
new file mode 100644
index 00000000000..97e60862b4f
--- /dev/null
+++ b/spec/features/projects/user_deletes_files_spec.rb
@@ -0,0 +1,68 @@
+require 'spec_helper'
+
+describe 'User deletes files' do
+  let(:fork_message) do
+    "You're not allowed to make changes to this project directly. "\
+    "A fork of this project has been created that you can make changes in, so you can submit a merge request."
+  end
+  let(:project) { create(:project, name: 'Shop') }
+  let(:project2) { create(:project, :repository, name: 'Another Project', path: 'another-project') }
+  let(:project_tree_path_root_ref) { project_tree_path(project, project.repository.root_ref) }
+  let(:project2_tree_path_root_ref) { project_tree_path(project2, project2.repository.root_ref) }
+  let(:user) { create(:user) }
+
+  before do
+    sign_in(user)
+  end
+
+  context 'when an user has write access' do
+    before do
+      project.team << [user, :master]
+      visit(project_tree_path_root_ref)
+    end
+
+    it 'deletes the file', js: true do
+      click_link('.gitignore')
+
+      expect(page).to have_content('.gitignore')
+
+      click_on('Delete')
+      fill_in(:commit_message, with: 'New commit message', visible: true)
+      click_button('Delete file')
+
+      expect(current_path).to eq(project_tree_path(project, 'master'))
+      expect(page).not_to have_content('.gitignore')
+    end
+  end
+
+  context 'when an user does not have write access' do
+    before do
+      project2.team << [user, :reporter]
+      visit(project2_tree_path_root_ref)
+    end
+
+    it 'deletes the file in a forked project', js: true do
+      click_link('.gitignore')
+
+      expect(page).to have_content('.gitignore')
+
+      click_on('Delete')
+
+      expect(page).to have_link('Fork')
+      expect(page).to have_button('Cancel')
+
+      click_link('Fork')
+
+      expect(page).to have_content(fork_message)
+
+      click_on('Delete')
+      fill_in(:commit_message, with: 'New commit message', visible: true)
+      click_button('Delete file')
+
+      fork = user.fork_of(project2)
+
+      expect(current_path).to eq(project_new_merge_request_path(fork))
+      expect(page).to have_content('New commit message')
+    end
+  end
+end
diff --git a/spec/features/projects/user_edits_files_spec.rb b/spec/features/projects/user_edits_files_spec.rb
new file mode 100644
index 00000000000..eb26f1bc123
--- /dev/null
+++ b/spec/features/projects/user_edits_files_spec.rb
@@ -0,0 +1,122 @@
+require 'spec_helper'
+
+describe 'User edits files' do
+  let(:fork_message) do
+    "You're not allowed to make changes to this project directly. "\
+    "A fork of this project has been created that you can make changes in, so you can submit a merge request."
+  end
+  let(:project) { create(:project, name: 'Shop') }
+  let(:project2) { create(:project, :repository, name: 'Another Project', path: 'another-project') }
+  let(:project_tree_path_root_ref) { project_tree_path(project, project.repository.root_ref) }
+  let(:project2_tree_path_root_ref) { project_tree_path(project2, project2.repository.root_ref) }
+  let(:user) { create(:user) }
+
+  before do
+    sign_in(user)
+  end
+
+  context 'when an user has write access' do
+    before do
+      project.team << [user, :master]
+      visit(project_tree_path_root_ref)
+    end
+
+    it 'inserts a content of a file', js: true do
+      click_link('.gitignore')
+      find('.js-edit-blob').click
+      execute_script("ace.edit('editor').setValue('*.rbca')")
+
+      expect(evaluate_script('ace.edit("editor").getValue()')).to eq('*.rbca')
+    end
+
+    it 'does not show the edit link if a file is binary' do
+      binary_file = File.join(project.repository.root_ref, 'files/images/logo-black.png')
+      visit(project_blob_path(project, binary_file))
+
+      expect(page).not_to have_link('edit')
+    end
+
+    it 'commits an edited file', js: true do
+      click_link('.gitignore')
+      find('.js-edit-blob').click
+      execute_script("ace.edit('editor').setValue('*.rbca')")
+      fill_in(:commit_message, with: 'New commit message', visible: true)
+      click_button('Commit changes')
+
+      expect(current_path).to eq(project_blob_path(project, 'master/.gitignore'))
+
+      wait_for_requests
+
+      expect(page).to have_content('*.rbca')
+    end
+
+    it 'commits an edited file to a new branch', js: true do
+      click_link('.gitignore')
+      find('.js-edit-blob').click
+      execute_script("ace.edit('editor').setValue('*.rbca')")
+      fill_in(:commit_message, with: 'New commit message', visible: true)
+      fill_in(:branch_name, with: 'new_branch_name', visible: true)
+      click_button('Commit changes')
+
+      expect(current_path).to eq(project_new_merge_request_path(project))
+
+      click_link('Changes')
+
+      wait_for_requests
+      expect(page).to have_content('*.rbca')
+    end
+
+    it 'shows the diff of an edited file', js: true do
+      click_link('.gitignore')
+      find('.js-edit-blob').click
+      execute_script("ace.edit('editor').setValue('*.rbca')")
+      click_link('Preview changes')
+
+      expect(page).to have_css('.line_holder.new')
+    end
+  end
+
+  context 'when an user does not have write access' do
+    before do
+      project2.team << [user, :reporter]
+      visit(project2_tree_path_root_ref)
+    end
+
+    it 'inserts a content of a file in a forked project', js: true do
+      click_link('.gitignore')
+      find('.js-edit-blob').click
+
+      expect(page).to have_link('Fork')
+      expect(page).to have_button('Cancel')
+
+      click_link('Fork')
+
+      expect(page).to have_content(fork_message)
+
+      execute_script("ace.edit('editor').setValue('*.rbca')")
+
+      expect(evaluate_script('ace.edit("editor").getValue()')).to eq('*.rbca')
+    end
+
+    it 'commits an edited file in a forked project', js: true do
+      click_link('.gitignore')
+      find('.js-edit-blob').click
+
+      expect(page).to have_link('Fork')
+      expect(page).to have_button('Cancel')
+
+      click_link('Fork')
+      execute_script("ace.edit('editor').setValue('*.rbca')")
+      fill_in(:commit_message, with: 'New commit message', visible: true)
+      click_button('Commit changes')
+
+      fork = user.fork_of(project2)
+
+      expect(current_path).to eq(project_new_merge_request_path(fork))
+
+      wait_for_requests
+
+      expect(page).to have_content('New commit message')
+    end
+  end
+end
diff --git a/spec/features/projects/user_replaces_files_spec.rb b/spec/features/projects/user_replaces_files_spec.rb
new file mode 100644
index 00000000000..50f2ffc4bbf
--- /dev/null
+++ b/spec/features/projects/user_replaces_files_spec.rb
@@ -0,0 +1,87 @@
+require 'spec_helper'
+
+describe 'User replaces files' do
+  include DropzoneHelper
+
+  let(:fork_message) do
+    "You're not allowed to make changes to this project directly. "\
+    "A fork of this project has been created that you can make changes in, so you can submit a merge request."
+  end
+  let(:project) { create(:project, name: 'Shop') }
+  let(:project2) { create(:project, :repository, name: 'Another Project', path: 'another-project') }
+  let(:project_tree_path_root_ref) { project_tree_path(project, project.repository.root_ref) }
+  let(:project2_tree_path_root_ref) { project_tree_path(project2, project2.repository.root_ref) }
+  let(:user) { create(:user) }
+
+  before do
+    sign_in(user)
+  end
+
+  context 'when an user has write access' do
+    before do
+      project.team << [user, :master]
+      visit(project_tree_path_root_ref)
+    end
+
+    it 'replaces an existed file with a new one', js: true do
+      click_link('.gitignore')
+
+      expect(page).to have_content('.gitignore')
+
+      click_on('Replace')
+      drop_in_dropzone(File.join(Rails.root, 'spec', 'fixtures', 'doc_sample.txt'))
+
+      page.within('#modal-upload-blob') do
+        fill_in(:commit_message, with: 'Replacement file commit message')
+      end
+
+      click_button('Replace file')
+
+      expect(page).to have_content('Lorem ipsum dolor sit amet')
+      expect(page).to have_content('Sed ut perspiciatis unde omnis')
+      expect(page).to have_content('Replacement file commit message')
+    end
+  end
+
+  context 'when an user does not have write access' do
+    before do
+      project2.team << [user, :reporter]
+      visit(project2_tree_path_root_ref)
+    end
+
+    it 'replaces an existed file with a new one in a forked project', js: true do
+      click_link('.gitignore')
+
+      expect(page).to have_content('.gitignore')
+
+      click_on('Replace')
+
+      expect(page).to have_link('Fork')
+      expect(page).to have_button('Cancel')
+
+      click_link('Fork')
+
+      expect(page).to have_content(fork_message)
+
+      click_on('Replace')
+      drop_in_dropzone(File.join(Rails.root, 'spec', 'fixtures', 'doc_sample.txt'))
+
+      page.within('#modal-upload-blob') do
+        fill_in(:commit_message, with: 'Replacement file commit message')
+      end
+
+      click_button('Replace file')
+
+      expect(page).to have_content('Replacement file commit message')
+
+      fork = user.fork_of(project2)
+
+      expect(current_path).to eq(project_new_merge_request_path(fork))
+
+      click_link('Changes')
+
+      expect(page).to have_content('Lorem ipsum dolor sit amet')
+      expect(page).to have_content('Sed ut perspiciatis unde omnis')
+    end
+  end
+end
diff --git a/spec/features/projects/user_uploads_files_spec.rb b/spec/features/projects/user_uploads_files_spec.rb
new file mode 100644
index 00000000000..64a1439badd
--- /dev/null
+++ b/spec/features/projects/user_uploads_files_spec.rb
@@ -0,0 +1,82 @@
+require 'spec_helper'
+
+describe 'User uploads files' do
+  include DropzoneHelper
+
+  let(:fork_message) do
+    "You're not allowed to make changes to this project directly. "\
+    "A fork of this project has been created that you can make changes in, so you can submit a merge request."
+  end
+  let(:project) { create(:project, name: 'Shop') }
+  let(:project2) { create(:project, :repository, name: 'Another Project', path: 'another-project') }
+  let(:project_tree_path_root_ref) { project_tree_path(project, project.repository.root_ref) }
+  let(:project2_tree_path_root_ref) { project_tree_path(project2, project2.repository.root_ref) }
+  let(:user) { create(:user) }
+
+  before do
+    project.team << [user, :master]
+    sign_in(user)
+  end
+
+  context 'when an user has write access' do
+    before do
+      visit(project_tree_path_root_ref)
+    end
+
+    it 'uploads and commit a new file', js: true do
+      find('.add-to-tree').click
+      click_link('Upload file')
+      drop_in_dropzone(File.join(Rails.root, 'spec', 'fixtures', 'doc_sample.txt'))
+
+      page.within('#modal-upload-blob') do
+        fill_in(:commit_message, with: 'New commit message')
+      end
+
+      fill_in(:branch_name, with: 'new_branch_name', visible: true)
+      click_button('Upload file')
+
+      expect(page).to have_content('New commit message')
+      expect(current_path).to eq(project_new_merge_request_path(project))
+
+      click_link('Changes')
+
+      expect(page).to have_content('Lorem ipsum dolor sit amet')
+      expect(page).to have_content('Sed ut perspiciatis unde omnis')
+    end
+  end
+
+  context 'when an user does not have write access' do
+    before do
+      project2.team << [user, :reporter]
+      visit(project2_tree_path_root_ref)
+    end
+
+    it 'uploads and commit a new fileto a forked project', js: true do
+      find('.add-to-tree').click
+      click_link('Upload file')
+
+      expect(page).to have_content(fork_message)
+
+      find('.add-to-tree').click
+      click_link('Upload file')
+      drop_in_dropzone(File.join(Rails.root, 'spec', 'fixtures', 'doc_sample.txt'))
+
+      page.within('#modal-upload-blob') do
+        fill_in(:commit_message, with: 'New commit message')
+      end
+
+      click_button('Upload file')
+
+      expect(page).to have_content('New commit message')
+
+      fork = user.fork_of(project2)
+
+      expect(current_path).to eq(project_new_merge_request_path(fork))
+
+      click_link('Changes')
+
+      expect(page).to have_content('Lorem ipsum dolor sit amet')
+      expect(page).to have_content('Sed ut perspiciatis unde omnis')
+    end
+  end
+end
diff --git a/spec/lib/gitlab/git/hook_spec.rb b/spec/lib/gitlab/git/hook_spec.rb
index 73518656bde..19f45ea1cb2 100644
--- a/spec/lib/gitlab/git/hook_spec.rb
+++ b/spec/lib/gitlab/git/hook_spec.rb
@@ -2,6 +2,12 @@ require 'spec_helper'
 require 'fileutils'
 
 describe Gitlab::Git::Hook, lib: true do
+  before do
+    # We need this because in the spec/spec_helper.rb we define it like this:
+    # allow_any_instance_of(Gitlab::Git::Hook).to receive(:trigger).and_return([true, nil])
+    allow_any_instance_of(Gitlab::Git::Hook).to receive(:trigger).and_call_original
+  end
+
   describe "#trigger" do
     let(:project) { create(:project, :repository) }
     let(:repo_path) { project.repository.path }
diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb
index dc0bdd9f4c7..3c142764e28 100644
--- a/spec/spec_helper.rb
+++ b/spec/spec_helper.rb
@@ -76,6 +76,11 @@ RSpec.configure do |config|
     TestEnv.cleanup
   end
 
+  config.before(:example) do
+    # Skip pre-receive hook check so we can use the web editor and merge.
+    allow_any_instance_of(Gitlab::Git::Hook).to receive(:trigger).and_return([true, nil])
+  end
+
   config.before(:example, :request_store) do
     RequestStore.begin!
   end
diff --git a/spec/support/dropzone_helper.rb b/spec/support/dropzone_helper.rb
index 02fdeb08afe..fe72d320fcf 100644
--- a/spec/support/dropzone_helper.rb
+++ b/spec/support/dropzone_helper.rb
@@ -54,4 +54,23 @@ module DropzoneHelper
       loop until page.evaluate_script('window._dropzoneComplete === true')
     end
   end
+
+  def drop_in_dropzone(file_path)
+    # Generate a fake input selector
+    page.execute_script <<-JS
+      var fakeFileInput = window.$('<input/>').attr(
+        {id: 'fakeFileInput', type: 'file'}
+      ).appendTo('body');
+    JS
+
+    # Attach the file to the fake input selector with Capybara
+    attach_file('fakeFileInput', file_path)
+
+    # Add the file to a fileList array and trigger the fake drop event
+    page.execute_script <<-JS
+      var fileList = [$('#fakeFileInput')[0].files[0]];
+      var e = jQuery.Event('drop', { dataTransfer : { files : fileList } });
+      $('.dropzone')[0].dropzone.listeners[0].events.drop(e);
+    JS
+  end
 end