Replace the `project/source/markdown_render.feature` spinach test with an rspec analog

6 files changed, 337 insertions, 661 deletions

diff --git a/changelogs/unreleased/blackst0ne-replace-spinach-project-source-markdown-render-feature.yml b/changelogs/unreleased/blackst0ne-replace-spinach-project-source-markdown-render-feature.yml
new file mode 100644
index 00000000000..657ed782880
--- /dev/null
+++ b/changelogs/unreleased/blackst0ne-replace-spinach-project-source-markdown-render-feature.yml
@@ -0,0 +1,5 @@
+---
+title: Replace the `project/source/markdown_render.feature` spinach test with an rspec analog
+merge_request: 18525
+author: "@blackst0ne"
+type: other
diff --git a/features/project/source/markdown_render.feature b/features/project/source/markdown_render.feature
deleted file mode 100644
index fe4466ad241..00000000000
--- a/features/project/source/markdown_render.feature
+++ /dev/null
@@ -1,147 +0,0 @@
-Feature: Project Source Markdown Render
-  Background:
-    Given I sign in as a user
-    And I own project "Delta"
-    And I visit markdown branch
-
-  # Tree README
-
-  @javascript
-  Scenario: Tree view should have correct links in README
-    Given I go directory which contains README file
-    And I click on a relative link in README
-    Then I should see the correct markdown
-
-  @javascript
-  Scenario: I browse files from markdown branch
-    Then I should see files from repository in markdown
-    And I should see rendered README which contains correct links
-    And I click on Gitlab API in README
-    Then I should see correct document rendered
-
-  @javascript
-  Scenario: I view README in markdown branch
-    Then I should see files from repository in markdown
-    And I should see rendered README which contains correct links
-    And I click on Rake tasks in README
-    Then I should see correct directory rendered
-
-  @javascript
-  Scenario: I view README in markdown branch to see reference links to directory
-    Then I should see files from repository in markdown
-    And I should see rendered README which contains correct links
-    And I click on GitLab API doc directory in README
-    Then I should see correct doc/api directory rendered
-
-  @javascript
-  Scenario: I view README in markdown branch to see reference links to file
-    Then I should see files from repository in markdown
-    And I should see rendered README which contains correct links
-    And I click on Maintenance in README
-    Then I should see correct maintenance file rendered
-
-  @javascript
-  Scenario: README headers should have header links
-    Then I should see rendered README which contains correct links
-    And Header "Application details" should have correct id and link
-
-  # Blob
-
-  @javascript
-  Scenario: I navigate to doc directory to view documentation in markdown
-    And I navigate to the doc/api/README
-    And I see correct file rendered
-    And I click on users in doc/api/README
-    Then I should see the correct document file
-
-  @javascript
-  Scenario: I navigate to doc directory to view user doc in markdown
-    And I navigate to the doc/api/README
-    And I see correct file rendered
-    And I click on raketasks in doc/api/README
-    Then I should see correct directory rendered
-
-  @javascript
-  Scenario: I navigate to doc directory to view user doc in markdown
-    And I navigate to the doc/api/README
-    And Header "GitLab API" should have correct id and link
-
-  # Markdown branch
-
-  @javascript
-  Scenario: I browse files from markdown branch
-    When I visit markdown branch
-    Then I should see files from repository in markdown branch
-    And I should see rendered README which contains correct links
-    And I click on Gitlab API in README
-    Then I should see correct document rendered for markdown branch
-
-  @javascript
-  Scenario: I browse directory from markdown branch
-    When I visit markdown branch
-    Then I should see files from repository in markdown branch
-    And I should see rendered README which contains correct links
-    And I click on Rake tasks in README
-    Then I should see correct directory rendered for markdown branch
-
-  @javascript
-  Scenario: I navigate to doc directory to view documentation in markdown branch
-    When I visit markdown branch
-    And I navigate to the doc/api/README
-    And I see correct file rendered in markdown branch
-    And I click on users in doc/api/README
-    Then I should see the users document file in markdown branch
-
-  @javascript
-  Scenario: I navigate to doc directory to view user doc in markdown branch
-    When I visit markdown branch
-    And I navigate to the doc/api/README
-    And I see correct file rendered in markdown branch
-    And I click on raketasks in doc/api/README
-    Then I should see correct directory rendered for markdown branch
-
-  @javascript
-  Scenario: Tree markdown links view empty urls should have correct urls
-    When I visit markdown branch
-    Then The link with text "empty" should have url "tree/markdown"
-    When I visit markdown branch "README.md" blob
-    Then The link with text "empty" should have url "blob/markdown/README.md"
-    When I visit markdown branch "d" tree
-    Then The link with text "empty" should have url "tree/markdown/d"
-    When I visit markdown branch "d/README.md" blob
-    Then The link with text "empty" should have url "blob/markdown/d/README.md"
-
-  # "ID" means "#id" on the tests below, because we are unable to escape the hash sign.
-  # which Spinach interprets as the start of a comment.
-  @javascript
-  Scenario: All markdown links with ids should have correct urls
-    When I visit markdown branch
-    Then The link with text "ID" should have url "tree/markdownID"
-    Then The link with text "/ID" should have url "tree/markdownID"
-    Then The link with text "README.mdID" should have url "blob/markdown/README.mdID"
-    Then The link with text "d/README.mdID" should have url "blob/markdown/d/README.mdID"
-    When I visit markdown branch "README.md" blob
-    Then The link with text "ID" should have url "blob/markdown/README.mdID"
-    Then The link with text "/ID" should have url "blob/markdown/README.mdID"
-    Then The link with text "README.mdID" should have url "blob/markdown/README.mdID"
-    Then The link with text "d/README.mdID" should have url "blob/markdown/d/README.mdID"
-
-  # Wiki
-
-  Scenario: I create a wiki page with different links
-    Given I go to wiki page
-    And I add various links to the wiki page
-    Then Wiki page should have added links
-    And I click on test link
-    Then I see new wiki page named test
-    When I go back to wiki page home
-    And I click on GitLab API doc link
-    Then I see Gitlab API document
-    When I go back to wiki page home
-    And I click on Rake tasks link
-    Then I see Rake tasks directory
-
-  Scenario: Wiki headers should have should have ids generated for them.
-    Given I go to wiki page
-    And I add a header to the wiki page
-    Then Wiki header should have correct id and link
diff --git a/features/steps/project/source/markdown_render.rb b/features/steps/project/source/markdown_render.rb
deleted file mode 100644
index db99c179439..00000000000
--- a/features/steps/project/source/markdown_render.rb
+++ /dev/null
@@ -1,317 +0,0 @@
-# If you need to modify the existing seed repository for your tests,
-# it is recommended that you make the changes on the `markdown` branch of the seed project repository,
-# which should only be used by tests in this file. See `/spec/factories.rb#project` for more info.
-class Spinach::Features::ProjectSourceMarkdownRender < Spinach::FeatureSteps
-  include SharedAuthentication
-  include SharedPaths
-  include SharedMarkdown
-  include WaitForRequests
-
-  step 'I own project "Delta"' do
-    @project = ::Project.find_by(name: "Delta")
-    @project ||= create(:project, :repository, name: "Delta", namespace: @user.namespace)
-    @project.add_master(@user)
-  end
-
-  step 'I should see files from repository in markdown' do
-    expect(current_path).to eq project_tree_path(@project, "markdown")
-    expect(page).to have_content "README.md"
-    expect(page).to have_content "CHANGELOG"
-  end
-
-  step 'I should see rendered README which contains correct links' do
-    expect(page).to have_content "Welcome to GitLab GitLab is a free project and repository management application"
-    expect(page).to have_link "GitLab API doc"
-    expect(page).to have_link "GitLab API website"
-    expect(page).to have_link "Rake tasks"
-    expect(page).to have_link "backup and restore procedure"
-    expect(page).to have_link "GitLab API doc directory"
-    expect(page).to have_link "Maintenance"
-  end
-
-  step 'I click on Gitlab API in README' do
-    click_link "GitLab API doc"
-  end
-
-  step 'I should see correct document rendered' do
-    expect(current_path).to eq project_blob_path(@project, "markdown/doc/api/README.md")
-    wait_for_requests
-    expect(page).to have_content "All API requests require authentication"
-  end
-
-  step 'I click on Rake tasks in README' do
-    click_link "Rake tasks"
-  end
-
-  step 'I should see correct directory rendered' do
-    expect(current_path).to eq project_tree_path(@project, "markdown/doc/raketasks")
-    expect(page).to have_content "backup_restore.md"
-    expect(page).to have_content "maintenance.md"
-  end
-
-  step 'I click on GitLab API doc directory in README' do
-    click_link "GitLab API doc directory"
-  end
-
-  step 'I should see correct doc/api directory rendered' do
-    expect(current_path).to eq project_tree_path(@project, "markdown/doc/api")
-    expect(page).to have_content "README.md"
-    expect(page).to have_content "users.md"
-  end
-
-  step 'I click on Maintenance in README' do
-    click_link "Maintenance"
-  end
-
-  step 'I should see correct maintenance file rendered' do
-    expect(current_path).to eq project_blob_path(@project, "markdown/doc/raketasks/maintenance.md")
-    wait_for_requests
-    expect(page).to have_content "bundle exec rake gitlab:env:info RAILS_ENV=production"
-  end
-
-  step 'I click on link "empty" in the README' do
-    page.within('.readme-holder') do
-      click_link "empty"
-    end
-  end
-
-  step 'I click on link "id" in the README' do
-    page.within('.readme-holder') do
-      click_link "#id"
-    end
-  end
-
-  step 'I navigate to the doc/api/README' do
-    page.within '.tree-table' do
-      click_link "doc"
-    end
-
-    page.within '.tree-table' do
-      click_link "api"
-    end
-
-    wait_for_requests
-
-    page.within '.tree-table' do
-      click_link "README.md"
-    end
-  end
-
-  step 'I see correct file rendered' do
-    expect(current_path).to eq project_blob_path(@project, "markdown/doc/api/README.md")
-    wait_for_requests
-    expect(page).to have_content "Contents"
-    expect(page).to have_link "Users"
-    expect(page).to have_link "Rake tasks"
-  end
-
-  step 'I click on users in doc/api/README' do
-    click_link "Users"
-  end
-
-  step 'I should see the correct document file' do
-    expect(current_path).to eq project_blob_path(@project, "markdown/doc/api/users.md")
-    expect(page).to have_content "Get a list of users."
-  end
-
-  step 'I click on raketasks in doc/api/README' do
-    click_link "Rake tasks"
-  end
-
-  # Markdown branch
-
-  When 'I visit markdown branch' do
-    visit project_tree_path(@project, "markdown")
-    wait_for_requests
-  end
-
-  When 'I visit markdown branch "README.md" blob' do
-    visit project_blob_path(@project, "markdown/README.md")
-  end
-
-  When 'I visit markdown branch "d" tree' do
-    visit project_tree_path(@project, "markdown/d")
-  end
-
-  When 'I visit markdown branch "d/README.md" blob' do
-    visit project_blob_path(@project, "markdown/d/README.md")
-  end
-
-  step 'I should see files from repository in markdown branch' do
-    expect(current_path).to eq project_tree_path(@project, "markdown")
-    expect(page).to have_content "README.md"
-    expect(page).to have_content "CHANGELOG"
-  end
-
-  step 'I see correct file rendered in markdown branch' do
-    expect(current_path).to eq project_blob_path(@project, "markdown/doc/api/README.md")
-    wait_for_requests
-    expect(page).to have_content "Contents"
-    expect(page).to have_link "Users"
-    expect(page).to have_link "Rake tasks"
-  end
-
-  step 'I should see correct document rendered for markdown branch' do
-    expect(current_path).to eq project_blob_path(@project, "markdown/doc/api/README.md")
-    wait_for_requests
-    expect(page).to have_content "All API requests require authentication"
-  end
-
-  step 'I should see correct directory rendered for markdown branch' do
-    expect(current_path).to eq project_tree_path(@project, "markdown/doc/raketasks")
-    expect(page).to have_content "backup_restore.md"
-    expect(page).to have_content "maintenance.md"
-  end
-
-  step 'I should see the users document file in markdown branch' do
-    expect(current_path).to eq project_blob_path(@project, "markdown/doc/api/users.md")
-    expect(page).to have_content "Get a list of users."
-  end
-
-  # Expected link contents
-
-  step 'The link with text "empty" should have url "tree/markdown"' do
-    wait_for_requests
-    find('a', text: /^empty$/)['href'] == current_host + project_tree_path(@project, "markdown")
-  end
-
-  step 'The link with text "empty" should have url "blob/markdown/README.md"' do
-    find('a', text: /^empty$/)['href'] == current_host + project_blob_path(@project, "markdown/README.md")
-  end
-
-  step 'The link with text "empty" should have url "tree/markdown/d"' do
-    find('a', text: /^empty$/)['href'] == current_host + project_tree_path(@project, "markdown/d")
-  end
-
-  step 'The link with text "empty" should have '\
-       'url "blob/markdown/d/README.md"' do
-    find('a', text: /^empty$/)['href'] == current_host + project_blob_path(@project, "markdown/d/README.md")
-  end
-
-  step 'The link with text "ID" should have url "tree/markdownID"' do
-    find('a', text: /^#id$/)['href'] == current_host + project_tree_path(@project, "markdown") + '#id'
-  end
-
-  step 'The link with text "/ID" should have url "tree/markdownID"' do
-    find('a', text: %r{^/#id$})['href'] == current_host + project_tree_path(@project, "markdown") + '#id'
-  end
-
-  step 'The link with text "README.mdID" '\
-       'should have url "blob/markdown/README.mdID"' do
-    find('a', text: /^README.md#id$/)['href'] == current_host + project_blob_path(@project, "markdown/README.md") + '#id'
-  end
-
-  step 'The link with text "d/README.mdID" should have '\
-       'url "blob/markdown/d/README.mdID"' do
-    find('a', text: %r{^d/README.md#id$})['href'] == current_host + project_blob_path(@project, "d/markdown/README.md") + '#id'
-  end
-
-  step 'The link with text "ID" should have url "blob/markdown/README.mdID"' do
-    wait_for_requests
-    find('a', text: /^#id$/)['href'] == current_host + project_blob_path(@project, "markdown/README.md") + '#id'
-  end
-
-  step 'The link with text "/ID" should have url "blob/markdown/README.mdID"' do
-    find('a', text: %r{^/#id$})['href'] == current_host + project_blob_path(@project, "markdown/README.md") + '#id'
-  end
-
-  # Wiki
-
-  step 'I go to wiki page' do
-    first(:link, "Wiki").click
-    expect(current_path).to eq project_wiki_path(@project, "home")
-  end
-
-  step 'I add various links to the wiki page' do
-    fill_in "wiki[content]", with: "[test](test)\n[GitLab API doc](api)\n[Rake tasks](raketasks)\n"
-    fill_in "wiki[message]", with: "Adding links to wiki"
-    page.within '.wiki-form' do
-      click_button "Create page"
-    end
-  end
-
-  step 'Wiki page should have added links' do
-    expect(current_path).to eq project_wiki_path(@project, "home")
-    expect(page).to have_content "test GitLab API doc Rake tasks"
-  end
-
-  step 'I add a header to the wiki page' do
-    fill_in "wiki[content]", with: "# Wiki header\n"
-    fill_in "wiki[message]", with: "Add header to wiki"
-    page.within '.wiki-form' do
-      click_button "Create page"
-    end
-  end
-
-  step 'Wiki header should have correct id and link' do
-    header_should_have_correct_id_and_link(1, 'Wiki header', 'wiki-header')
-  end
-
-  step 'I click on test link' do
-    click_link "test"
-  end
-
-  step 'I see new wiki page named test' do
-    expect(current_path).to eq  project_wiki_path(@project, "test")
-
-    page.within(:css, ".nav-text") do
-      expect(page).to have_content "Test"
-      expect(page).to have_content "Create Page"
-    end
-  end
-
-  When 'I go back to wiki page home' do
-    visit project_wiki_path(@project, "home")
-    expect(current_path).to eq project_wiki_path(@project, "home")
-  end
-
-  step 'I click on GitLab API doc link' do
-    click_link "GitLab API"
-  end
-
-  step 'I see Gitlab API document' do
-    expect(current_path).to eq project_wiki_path(@project, "api")
-
-    page.within(:css, ".nav-text") do
-      expect(page).to have_content "Create"
-      expect(page).to have_content "Api"
-    end
-  end
-
-  step 'I click on Rake tasks link' do
-    click_link "Rake tasks"
-  end
-
-  step 'I see Rake tasks directory' do
-    expect(current_path).to eq project_wiki_path(@project, "raketasks")
-
-    page.within(:css, ".nav-text") do
-      expect(page).to have_content "Create"
-      expect(page).to have_content "Rake"
-    end
-  end
-
-  step 'I go directory which contains README file' do
-    visit project_tree_path(@project, "markdown/doc/api")
-    expect(current_path).to eq project_tree_path(@project, "markdown/doc/api")
-  end
-
-  step 'I click on a relative link in README' do
-    click_link "Users"
-  end
-
-  step 'I should see the correct markdown' do
-    expect(current_path).to eq project_blob_path(@project, "markdown/doc/api/users.md")
-    wait_for_requests
-    expect(page).to have_content "List users"
-  end
-
-  step 'Header "Application details" should have correct id and link' do
-    wait_for_requests
-    header_should_have_correct_id_and_link(2, 'Application details', 'application-details')
-  end
-
-  step 'Header "GitLab API" should have correct id and link' do
-    header_should_have_correct_id_and_link(1, 'GitLab API', 'gitlab-api')
-  end
-end
diff --git a/features/steps/shared/markdown.rb b/features/steps/shared/markdown.rb
index 9d522936fb6..65118f07ca2 100644
--- a/features/steps/shared/markdown.rb
+++ b/features/steps/shared/markdown.rb
@@ -1,15 +1,6 @@
 module SharedMarkdown
   include Spinach::DSL
 
-  def header_should_have_correct_id_and_link(level, text, id, parent = ".wiki")
-    node = find("#{parent} h#{level} a#user-content-#{id}")
-    expect(node[:href]).to end_with "##{id}"
-
-    # Work around a weird Capybara behavior where calling `parent` on a node
-    # returns the whole document, not the node's actual parent element
-    expect(find(:xpath, "#{node.path}/..").text).to eq text
-  end
-
   step 'I should not see the Markdown preview' do
     expect(find('.gfm-form .js-md-preview')).not_to be_visible
   end
diff --git a/spec/features/projects/files/user_browses_files_spec.rb b/spec/features/projects/files/user_browses_files_spec.rb
index 9c1f11f4c12..41f6c52fb8a 100644
--- a/spec/features/projects/files/user_browses_files_spec.rb
+++ b/spec/features/projects/files/user_browses_files_spec.rb
@@ -1,14 +1,12 @@
-require 'spec_helper'
+require "spec_helper"
 
-describe 'Projects > Files > User browses files' do
+describe "User browses 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, :repository, 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(:project) { create(:project, :repository, name: "Shop") }
+  let(:project2) { create(:project, :repository, name: "Another Project", path: "another-project") }
   let(:tree_path_root_ref) { project_tree_path(project, project.repository.root_ref) }
   let(:user) { project.owner }
 
@@ -16,57 +14,55 @@ describe 'Projects > Files > User browses files' do
     sign_in(user)
   end
 
-  it 'shows last commit for current directory' do
+  it "shows last commit for current directory" do
     visit(tree_path_root_ref)
 
-    click_link 'files'
+    click_link("files")
 
-    last_commit = project.repository.last_commit_for_path(project.default_branch, 'files')
-    page.within('.blob-commit-info') do
-      expect(page).to have_content last_commit.short_id
-      expect(page).to have_content last_commit.author_name
+    last_commit = project.repository.last_commit_for_path(project.default_branch, "files")
+
+    page.within(".blob-commit-info") do
+      expect(page).to have_content(last_commit.short_id).and have_content(last_commit.author_name)
     end
   end
 
-  context 'when browsing the master branch' do
+  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')
+    it "shows files from a repository" do
+      expect(page).to have_content("VERSION")
+                 .and have_content(".gitignore")
+                 .and have_content("LICENSE")
     end
 
-    it 'shows the "Browse Directory" link' do
-      click_link('files')
-      click_link('History')
+    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')
+      expect(page).to have_link("Browse Directory").and have_no_link("Browse Code")
     end
 
-    it 'shows the "Browse File" link' do
-      page.within('.tree-table') do
-        click_link('README.md')
+    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')
+      click_link("History")
+
+      expect(page).to have_link("Browse File").and have_no_link("Browse Files")
     end
 
-    it 'shows the "Browse Files" link' do
-      click_link('History')
+    it "shows the `Browse Files` link" do
+      click_link("History")
 
-      expect(page).to have_link('Browse Files')
-      expect(page).not_to have_link('Browse Directory')
+      expect(page).to have_link("Browse Files").and have_no_link("Browse Directory")
     end
 
-    it 'redirects to the permalink URL' do
-      click_link('.gitignore')
-      click_link('Permalink')
+    it "redirects to the permalink URL" do
+      click_link(".gitignore")
+      click_link("Permalink")
 
       permalink_path = project_blob_path(project, "#{project.repository.commit.sha}/.gitignore")
 
@@ -74,80 +70,180 @@ describe 'Projects > Files > User browses files' do
     end
   end
 
-  context 'when browsing a specific ref' do
+  context "when browsing the `markdown` branch", :js do
+    context "when browsing the root" do
+      before do
+        visit(project_tree_path(project, "markdown"))
+      end
+
+      it "shows correct files and links" do
+        # rubocop:disable Lint/Void
+        # Test the full URLs of links instead of relative paths by `have_link(text: "...", href: "...")`.
+        find("a", text: /^empty$/)["href"]            == project_tree_url(project, "markdown")
+        find("a", text: /^#id$/)["href"]              == project_tree_url(project, "markdown", anchor: "#id")
+        find("a", text: %r{^/#id$})["href"]           == project_tree_url(project, "markdown", anchor: "#id")
+        find("a", text: /^README.md#id$/)["href"]     == project_blob_url(project, "markdown/README.md", anchor: "#id")
+        find("a", text: %r{^d/README.md#id$})["href"] == project_blob_url(project, "d/markdown/README.md", anchor: "#id")
+        # rubocop:enable Lint/Void
+
+        expect(current_path).to eq(project_tree_path(project, "markdown"))
+        expect(page).to have_content("README.md")
+                   .and have_content("CHANGELOG")
+                   .and have_content("Welcome to GitLab GitLab is a free project and repository management application")
+                   .and have_link("GitLab API doc")
+                   .and have_link("GitLab API website")
+                   .and have_link("Rake tasks")
+                   .and have_link("backup and restore procedure")
+                   .and have_link("GitLab API doc directory")
+                   .and have_link("Maintenance")
+                   .and have_header_with_correct_id_and_link(2, "Application details", "application-details")
+      end
+
+      it "shows correct content of file" do
+        click_link("GitLab API doc")
+
+        expect(current_path).to eq(project_blob_path(project, "markdown/doc/api/README.md"))
+        expect(page).to have_content("All API requests require authentication")
+                   .and have_content("Contents")
+                   .and have_link("Users")
+                   .and have_link("Rake tasks")
+                   .and have_header_with_correct_id_and_link(1, "GitLab API", "gitlab-api")
+
+        click_link("Users")
+
+        expect(current_path).to eq(project_blob_path(project, "markdown/doc/api/users.md"))
+        expect(page).to have_content("Get a list of users.")
+
+        page.go_back
+
+        click_link("Rake tasks")
+
+        expect(current_path).to eq(project_tree_path(project, "markdown/doc/raketasks"))
+        expect(page).to have_content("backup_restore.md").and have_content("maintenance.md")
+
+        click_link("shop")
+        click_link("Maintenance")
+
+        expect(current_path).to eq(project_blob_path(project, "markdown/doc/raketasks/maintenance.md"))
+        expect(page).to have_content("bundle exec rake gitlab:env:info RAILS_ENV=production")
+
+        click_link("shop")
+
+        page.within(".tree-table") do
+          click_link("README.md")
+        end
+
+        page.go_back
+
+        page.within(".tree-table") do
+          click_link("d")
+        end
+
+        # rubocop:disable Lint/Void
+        # Test the full URLs of links instead of relative paths by `have_link(text: "...", href: "...")`.
+        find("a", text: /^empty$/)["href"] == project_tree_url(project, "markdown/d")
+        # rubocop:enable Lint/Void
+
+        page.within(".tree-table") do
+          click_link("README.md")
+        end
+
+        # rubocop:disable Lint/Void
+        # Test the full URLs of links instead of relative paths by `have_link(text: "...", href: "...")`.
+        find("a", text: /^empty$/)["href"] == project_blob_url(project, "markdown/d/README.md")
+        # rubocop:enable Lint/Void
+      end
+
+      it "shows correct content of directory" do
+        click_link("GitLab API doc directory")
+
+        expect(current_path).to eq(project_tree_path(project, "markdown/doc/api"))
+        expect(page).to have_content("README.md").and have_content("users.md")
+
+        click_link("Users")
+
+        expect(current_path).to eq(project_blob_path(project, "markdown/doc/api/users.md"))
+        expect(page).to have_content("List users").and have_content("Get a list of users.")
+      end
+    end
+  end
+
+  context "when browsing a specific ref" do
+    let(:ref) { project_tree_path(project, "6d39438") }
+
     before do
-      visit(tree_path_ref_6d39438)
+      visit(ref)
     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')
+    it "shows files from a repository for `6d39438`" do
+      expect(current_path).to eq(ref)
+      expect(page).to have_content(".gitignore").and have_content("LICENSE")
     end
 
-    it 'shows files from a repository with apostroph in its name', :js do
-      first('.js-project-refs-dropdown').click
+    it "shows files from a repository with apostroph in its name", :js do
+      first(".js-project-refs-dropdown").click
 
-      page.within('.project-refs-form') do
+      page.within(".project-refs-form") do
         click_link("'test'")
       end
 
-      expect(page).to have_selector('.dropdown-toggle-text', text: "'test'")
+      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...')
+      expect(page).to have_css(".tree-commit-link").and have_no_content("Loading commit data...")
     end
 
-    it 'shows the code with a leading dot in the directory', :js do
-      first('.js-project-refs-dropdown').click
+    it "shows the code with a leading dot in the directory", :js do
+      first(".js-project-refs-dropdown").click
 
-      page.within('.project-refs-form') do
-        click_link('fix')
+      page.within(".project-refs-form") do
+        click_link("fix")
       end
 
-      visit(project_tree_path(project, 'fix/.testdir'))
+      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...')
+      expect(page).to have_css(".tree-commit-link").and have_no_content("Loading commit data...")
     end
 
-    it 'does not show the permalink link' do
-      click_link('.gitignore')
+    it "does not show the permalink link" do
+      click_link(".gitignore")
 
-      expect(page).not_to have_link('permalink')
+      expect(page).not_to have_link("permalink")
     end
   end
 
-  context 'when browsing a file content' do
+  context "when browsing a file content" do
     before do
       visit(tree_path_root_ref)
-      click_link('.gitignore')
+
+      click_link(".gitignore")
     end
 
-    it 'shows a file content', :js do
-      wait_for_requests
-      expect(page).to have_content('*.rbc')
+    it "shows a file content", :js do
+      expect(page).to have_content("*.rbc")
     end
 
-    it 'is possible to blame' do
-      click_link 'Blame'
+    it "is possible to blame" do
+      click_link("Blame")
 
-      expect(page).to have_content "*.rb"
-      expect(page).to have_content "Dmitriy Zaporozhets"
-      expect(page).to have_content "Initial commit"
+      expect(page).to have_content("*.rb")
+                 .and have_content("Dmitriy Zaporozhets")
+                 .and have_content("Initial commit")
     end
   end
 
-  context 'when browsing a raw file' do
+  context "when browsing a raw file" do
     before do
-      visit(project_blob_path(project, File.join(RepoHelpers.sample_commit.id, RepoHelpers.sample_blob.path)))
+      path = File.join(RepoHelpers.sample_commit.id, RepoHelpers.sample_blob.path)
+
+      visit(project_blob_path(project, path))
     end
 
-    it 'shows a raw file content' do
-      click_link('Open raw')
-      expect(source).to eq('') # Body is filled in by gitlab-workhorse
+    it "shows a raw file content" do
+      click_link("Open raw")
+
+      expect(source).to eq("") # Body is filled in by gitlab-workhorse
     end
   end
 end
diff --git a/spec/features/projects/wiki/user_creates_wiki_page_spec.rb b/spec/features/projects/wiki/user_creates_wiki_page_spec.rb
index 4a9d1cb87e1..fe6fa55fa75 100644
--- a/spec/features/projects/wiki/user_creates_wiki_page_spec.rb
+++ b/spec/features/projects/wiki/user_creates_wiki_page_spec.rb
@@ -1,6 +1,6 @@
-require 'spec_helper'
+require "spec_helper"
 
-describe 'User creates wiki page' do
+describe "User creates wiki page" do
   let(:user) { create(:user) }
 
   before do
@@ -10,67 +10,104 @@ describe 'User creates wiki page' do
     visit(project_wikis_path(project))
   end
 
-  context 'when wiki is empty' do
-    context 'in a user namespace' do
+  context "when wiki is empty" do
+    context "in a user namespace" do
       let(:project) { create(:project, namespace: user.namespace) }
 
-      it 'shows validation error message' do
-        page.within('.wiki-form') do
-          fill_in(:wiki_content, with: '')
-          click_on('Create page')
+      it "shows validation error message" do
+        page.within(".wiki-form") do
+          fill_in(:wiki_content, with: "")
+
+          click_on("Create page")
         end
 
-        expect(page).to have_content('The form contains the following error:')
-        expect(page).to have_content("Content can't be blank")
+        expect(page).to have_content("The form contains the following error:").and have_content("Content can't be blank")
+
+        page.within(".wiki-form") do
+          fill_in(:wiki_content, with: "[link test](test)")
 
-        page.within('.wiki-form') do
-          fill_in(:wiki_content, with: '[link test](test)')
-          click_on('Create page')
+          click_on("Create page")
         end
 
-        expect(page).to have_content('Home')
-        expect(page).to have_content('link test')
+        expect(page).to have_content("Home").and have_content("link test")
 
-        click_link('link test')
+        click_link("link test")
 
-        expect(page).to have_content('Create Page')
+        expect(page).to have_content("Create Page")
       end
 
-      it 'shows non-escaped link in the pages list', :js do
-        click_link('New page')
+      it "shows non-escaped link in the pages list", :js do
+        click_link("New page")
 
-        page.within('#modal-new-wiki') do
-          fill_in(:new_wiki_path, with: 'one/two/three-test')
-          click_on('Create page')
+        page.within("#modal-new-wiki") do
+          fill_in(:new_wiki_path, with: "one/two/three-test")
+
+          click_on("Create page")
         end
 
-        page.within('.wiki-form') do
-          fill_in(:wiki_content, with: 'wiki content')
-          click_on('Create page')
+        page.within(".wiki-form") do
+          fill_in(:wiki_content, with: "wiki content")
+
+          click_on("Create page")
         end
 
-        expect(current_path).to include('one/two/three-test')
+        expect(current_path).to include("one/two/three-test")
         expect(page).to have_xpath("//a[@href='/#{project.full_path}/wikis/one/two/three-test']")
       end
 
-      it 'has "Create home" as a commit message' do
-        expect(page).to have_field('wiki[message]', with: 'Create home')
+      it "has `Create home` as a commit message" do
+        expect(page).to have_field("wiki[message]", with: "Create home")
       end
 
-      it 'creates a page from the home page' do
-        fill_in(:wiki_content, with: 'My awesome wiki!')
+      it "creates a page from the home page" do
+        fill_in(:wiki_content, with: "[test](test)\n[GitLab API doc](api)\n[Rake tasks](raketasks)\n# Wiki header\n")
+        fill_in(:wiki_message, with: "Adding links to wiki")
+
+        page.within(".wiki-form") do
+          click_button("Create page")
+        end
+
+        expect(current_path).to eq(project_wiki_path(project, "home"))
+        expect(page).to have_content("test GitLab API doc Rake tasks Wiki header")
+                   .and have_content("Home")
+                   .and have_content("Last edited by #{user.name}")
+                   .and have_header_with_correct_id_and_link(1, "Wiki header", "wiki-header")
+
+        click_link("test")
 
-        page.within('.wiki-form') do
-          click_button('Create page')
+        expect(current_path).to eq(project_wiki_path(project, "test"))
+
+        page.within(:css, ".nav-text") do
+          expect(page).to have_content("Test").and have_content("Create Page")
+        end
+
+        click_link("Home")
+
+        expect(current_path).to eq(project_wiki_path(project, "home"))
+
+        click_link("GitLab API")
+
+        expect(current_path).to eq(project_wiki_path(project, "api"))
+
+        page.within(:css, ".nav-text") do
+          expect(page).to have_content("Create").and have_content("Api")
         end
 
-        expect(page).to have_content('Home')
-        expect(page).to have_content("Last edited by #{user.name}")
-        expect(page).to have_content('My awesome wiki!')
+        click_link("Home")
+
+        expect(current_path).to eq(project_wiki_path(project, "home"))
+
+        click_link("Rake tasks")
+
+        expect(current_path).to eq(project_wiki_path(project, "raketasks"))
+
+        page.within(:css, ".nav-text") do
+          expect(page).to have_content("Create").and have_content("Rake")
+        end
       end
 
-      it 'creates ASCII wiki with LaTeX blocks', :js do
-        stub_application_setting(plantuml_url: 'http://localhost', plantuml_enabled: true)
+      it "creates ASCII wiki with LaTeX blocks", :js do
+        stub_application_setting(plantuml_url: "http://localhost", plantuml_enabled: true)
 
         ascii_content = <<~MD
           :stem: latexmath
@@ -90,153 +127,164 @@ describe 'User creates wiki page' do
           stem:[2+2] is 4
         MD
 
-        find('#wiki_format option[value=asciidoc]').select_option
+        find("#wiki_format option[value=asciidoc]").select_option
+
         fill_in(:wiki_content, with: ascii_content)
 
-        page.within('.wiki-form') do
-          click_button('Create page')
+        page.within(".wiki-form") do
+          click_button("Create page")
         end
 
-        page.within '.wiki' do
-          expect(page).to have_selector('.katex', count: 3)
-          expect(page).to have_content('2+2 is 4')
+        page.within ".wiki" do
+          expect(page).to have_selector(".katex", count: 3).and have_content("2+2 is 4")
         end
       end
     end
 
-    context 'in a group namespace', :js do
+    context "in a group namespace", :js do
       let(:project) { create(:project, namespace: create(:group, :public)) }
 
-      it 'has "Create home" as a commit message' do
-        expect(page).to have_field('wiki[message]', with: 'Create home')
+      it "has `Create home` as a commit message" do
+        expect(page).to have_field("wiki[message]", with: "Create home")
       end
 
-      it 'creates a page from from the home page' do
-        page.within('.wiki-form') do
-          fill_in(:wiki_content, with: 'My awesome wiki!')
-          click_button('Create page')
+      it "creates a page from from the home page" do
+        page.within(".wiki-form") do
+          fill_in(:wiki_content, with: "My awesome wiki!")
+
+          click_button("Create page")
         end
 
-        expect(page).to have_content('Home')
-        expect(page).to have_content("Last edited by #{user.name}")
-        expect(page).to have_content('My awesome wiki!')
+        expect(page).to have_content("Home")
+                   .and have_content("Last edited by #{user.name}")
+                   .and have_content("My awesome wiki!")
       end
     end
   end
 
-  context 'when wiki is not empty', :js do
+  context "when wiki is not empty", :js do
     before do
-      create(:wiki_page, wiki: create(:project, namespace: user.namespace).wiki, attrs: { title: 'home', content: 'Home page' })
+      create(:wiki_page, wiki: create(:project, namespace: user.namespace).wiki, attrs: { title: "home", content: "Home page" })
     end
 
-    context 'in a user namespace' do
+    context "in a user namespace" do
       let(:project) { create(:project, namespace: user.namespace) }
 
-      context 'via the "new wiki page" page' do
-        it 'creates a page with a single word' do
-          click_link('New page')
+      context "via the `new wiki page` page" do
+        it "creates a page with a single word" do
+          click_link("New page")
 
-          page.within('#modal-new-wiki') do
-            fill_in(:new_wiki_path, with: 'foo')
-            click_button('Create page')
+          page.within("#modal-new-wiki") do
+            fill_in(:new_wiki_path, with: "foo")
+
+            click_button("Create page")
           end
 
           # Commit message field should have correct value.
-          expect(page).to have_field('wiki[message]', with: 'Create foo')
+          expect(page).to have_field("wiki[message]", with: "Create foo")
+
+          page.within(".wiki-form") do
+            fill_in(:wiki_content, with: "My awesome wiki!")
 
-          page.within('.wiki-form') do
-            fill_in(:wiki_content, with: 'My awesome wiki!')
-            click_button('Create page')
+            click_button("Create page")
           end
 
-          expect(page).to have_content('Foo')
-          expect(page).to have_content("Last edited by #{user.name}")
-          expect(page).to have_content('My awesome wiki!')
+          expect(page).to have_content("Foo")
+                     .and have_content("Last edited by #{user.name}")
+                     .and have_content("My awesome wiki!")
         end
 
-        it 'creates a page with spaces in the name' do
-          click_link('New page')
+        it "creates a page with spaces in the name" do
+          click_link("New page")
 
-          page.within('#modal-new-wiki') do
-            fill_in(:new_wiki_path, with: 'Spaces in the name')
-            click_button('Create page')
+          page.within("#modal-new-wiki") do
+            fill_in(:new_wiki_path, with: "Spaces in the name")
+
+            click_button("Create page")
           end
 
           # Commit message field should have correct value.
-          expect(page).to have_field('wiki[message]', with: 'Create spaces in the name')
+          expect(page).to have_field("wiki[message]", with: "Create spaces in the name")
+
+          page.within(".wiki-form") do
+            fill_in(:wiki_content, with: "My awesome wiki!")
 
-          page.within('.wiki-form') do
-            fill_in(:wiki_content, with: 'My awesome wiki!')
-            click_button('Create page')
+            click_button("Create page")
           end
 
-          expect(page).to have_content('Spaces in the name')
-          expect(page).to have_content("Last edited by #{user.name}")
-          expect(page).to have_content('My awesome wiki!')
+          expect(page).to have_content("Spaces in the name")
+                     .and have_content("Last edited by #{user.name}")
+                     .and have_content("My awesome wiki!")
         end
 
-        it 'creates a page with hyphens in the name' do
-          click_link('New page')
+        it "creates a page with hyphens in the name" do
+          click_link("New page")
 
-          page.within('#modal-new-wiki') do
-            fill_in(:new_wiki_path, with: 'hyphens-in-the-name')
-            click_button('Create page')
+          page.within("#modal-new-wiki") do
+            fill_in(:new_wiki_path, with: "hyphens-in-the-name")
+
+            click_button("Create page")
           end
 
           # Commit message field should have correct value.
-          expect(page).to have_field('wiki[message]', with: 'Create hyphens in the name')
+          expect(page).to have_field("wiki[message]", with: "Create hyphens in the name")
+
+          page.within(".wiki-form") do
+            fill_in(:wiki_content, with: "My awesome wiki!")
 
-          page.within('.wiki-form') do
-            fill_in(:wiki_content, with: 'My awesome wiki!')
-            click_button('Create page')
+            click_button("Create page")
           end
 
-          expect(page).to have_content('Hyphens in the name')
-          expect(page).to have_content("Last edited by #{user.name}")
-          expect(page).to have_content('My awesome wiki!')
+          expect(page).to have_content("Hyphens in the name")
+                     .and have_content("Last edited by #{user.name}")
+                     .and have_content("My awesome wiki!")
         end
       end
 
-      it 'shows the autocompletion dropdown' do
-        click_link('New page')
+      it "shows the autocompletion dropdown" do
+        click_link("New page")
 
-        page.within('#modal-new-wiki') do
-          fill_in(:new_wiki_path, with: 'test-autocomplete')
-          click_button('Create page')
+        page.within("#modal-new-wiki") do
+          fill_in(:new_wiki_path, with: "test-autocomplete")
+
+          click_button("Create page")
         end
 
-        page.within('.wiki-form') do
-          find('#wiki_content').native.send_keys('')
-          fill_in(:wiki_content, with: '@')
+        page.within(".wiki-form") do
+          find("#wiki_content").native.send_keys("")
+
+          fill_in(:wiki_content, with: "@")
         end
 
-        expect(page).to have_selector('.atwho-view')
+        expect(page).to have_selector(".atwho-view")
       end
     end
 
-    context 'in a group namespace' do
+    context "in a group namespace" do
       let(:project) { create(:project, namespace: create(:group, :public)) }
 
-      context 'via the "new wiki page" page' do
-        it 'creates a page' do
-          click_link('New page')
+      context "via the `new wiki page` page" do
+        it "creates a page" do
+          click_link("New page")
 
-          page.within('#modal-new-wiki') do
-            fill_in(:new_wiki_path, with: 'foo')
-            click_button('Create page')
+          page.within("#modal-new-wiki") do
+            fill_in(:new_wiki_path, with: "foo")
+
+            click_button("Create page")
           end
 
           # Commit message field should have correct value.
-          expect(page).to have_field('wiki[message]', with: 'Create foo')
+          expect(page).to have_field("wiki[message]", with: "Create foo")
+
+          page.within(".wiki-form") do
+            fill_in(:wiki_content, with: "My awesome wiki!")
 
-          page.within('.wiki-form') do
-            fill_in(:wiki_content, with: 'My awesome wiki!')
-            click_button('Create page')
+            click_button("Create page")
           end
 
-          expect(page).to have_content('Foo')
-          expect(page).to have_content("Last edited by #{user.name}")
-          expect(page).to have_content('My awesome wiki!')
+          expect(page).to have_content("Foo")
+                     .and have_content("Last edited by #{user.name}")
+                     .and have_content("My awesome wiki!")
         end
       end
     end