Merge branch 'dm-snippet-blob-viewers' into 'master'

Use blob viewers for snippets

See merge request !10747

5 files changed, 270 insertions, 12 deletions

diff --git a/spec/features/projects/blobs/blob_show_spec.rb b/spec/features/projects/blobs/blob_show_spec.rb
index cc11cb7a55f..8613b850203 100644
--- a/spec/features/projects/blobs/blob_show_spec.rb
+++ b/spec/features/projects/blobs/blob_show_spec.rb
@@ -1,13 +1,10 @@
 require 'spec_helper'
 
 feature 'File blob', :js, feature: true do
-  include TreeHelper
-  include WaitForAjax
-
   let(:project) { create(:project, :public) }
 
   def visit_blob(path, fragment = nil)
-    visit namespace_project_blob_path(project.namespace, project, tree_join('master', path), anchor: fragment)
+    visit namespace_project_blob_path(project.namespace, project, File.join('master', path), anchor: fragment)
   end
 
   context 'Ruby file' do
@@ -39,7 +36,7 @@ feature 'File blob', :js, feature: true do
         wait_for_ajax
       end
 
-      it 'displays the blob' do
+      it 'displays the blob using the rich viewer' do
         aggregate_failures do
           # hides the simple viewer
           expect(page).to have_selector('.blob-viewer[data-type="simple"]', visible: false)
@@ -63,7 +60,7 @@ feature 'File blob', :js, feature: true do
           wait_for_ajax
         end
 
-        it 'displays the blob' do
+        it 'displays the blob using the simple viewer' do
           aggregate_failures do
             # hides the rich viewer
             expect(page).to have_selector('.blob-viewer[data-type="simple"]')
@@ -84,7 +81,7 @@ feature 'File blob', :js, feature: true do
             wait_for_ajax
           end
 
-          it 'displays the blob' do
+          it 'displays the blob using the rich viewer' do
             aggregate_failures do
               # hides the simple viewer
               expect(page).to have_selector('.blob-viewer[data-type="simple"]', visible: false)
@@ -105,7 +102,7 @@ feature 'File blob', :js, feature: true do
         wait_for_ajax
       end
 
-      it 'displays the blob' do
+      it 'displays the blob using the simple viewer' do
         aggregate_failures do
           # hides the rich viewer
           expect(page).to have_selector('.blob-viewer[data-type="simple"]')
diff --git a/spec/features/projects/snippets/show_spec.rb b/spec/features/projects/snippets/show_spec.rb
new file mode 100644
index 00000000000..7eb1210e307
--- /dev/null
+++ b/spec/features/projects/snippets/show_spec.rb
@@ -0,0 +1,132 @@
+require 'spec_helper'
+
+feature 'Project snippet', :js, feature: true do
+  let(:user) { create(:user) }
+  let(:project) { create(:project, :repository) }
+  let(:snippet) { create(:project_snippet, project: project, file_name: file_name, content: content) }
+
+  before do
+    project.team << [user, :master]
+    login_as(user)
+  end
+
+  context 'Ruby file' do
+    let(:file_name) { 'popen.rb' }
+    let(:content) { project.repository.blob_at('master', 'files/ruby/popen.rb').data }
+
+    before do
+      visit namespace_project_snippet_path(project.namespace, project, snippet)
+
+      wait_for_ajax
+    end
+
+    it 'displays the blob' do
+      aggregate_failures do
+        # shows highlighted Ruby code
+        expect(page).to have_content("require 'fileutils'")
+
+        # does not show a viewer switcher
+        expect(page).not_to have_selector('.js-blob-viewer-switcher')
+
+        # shows an enabled copy button
+        expect(page).to have_selector('.js-copy-blob-source-btn:not(.disabled)')
+      end
+    end
+  end
+
+  context 'Markdown file' do
+    let(:file_name) { 'ruby-style-guide.md' }
+    let(:content) { project.repository.blob_at('master', 'files/markdown/ruby-style-guide.md').data }
+
+    context 'visiting directly' do
+      before do
+        visit namespace_project_snippet_path(project.namespace, project, snippet)
+
+        wait_for_ajax
+      end
+
+      it 'displays the blob using the rich viewer' do
+        aggregate_failures do
+          # hides the simple viewer
+          expect(page).to have_selector('.blob-viewer[data-type="simple"]', visible: false)
+          expect(page).to have_selector('.blob-viewer[data-type="rich"]')
+
+          # shows rendered Markdown
+          expect(page).to have_link("PEP-8")
+
+          # shows a viewer switcher
+          expect(page).to have_selector('.js-blob-viewer-switcher')
+
+          # shows a disabled copy button
+          expect(page).to have_selector('.js-copy-blob-source-btn.disabled')
+        end
+      end
+
+      context 'switching to the simple viewer' do
+        before do
+          find('.js-blob-viewer-switch-btn[data-viewer=simple]').click
+
+          wait_for_ajax
+        end
+
+        it 'displays the blob using the simple viewer' do
+          aggregate_failures do
+            # hides the rich viewer
+            expect(page).to have_selector('.blob-viewer[data-type="simple"]')
+            expect(page).to have_selector('.blob-viewer[data-type="rich"]', visible: false)
+
+            # shows highlighted Markdown code
+            expect(page).to have_content("[PEP-8](http://www.python.org/dev/peps/pep-0008/)")
+
+            # shows an enabled copy button
+            expect(page).to have_selector('.js-copy-blob-source-btn:not(.disabled)')
+          end
+        end
+
+        context 'switching to the rich viewer again' do
+          before do
+            find('.js-blob-viewer-switch-btn[data-viewer=rich]').click
+
+            wait_for_ajax
+          end
+
+          it 'displays the blob using the rich viewer' do
+            aggregate_failures do
+              # hides the simple viewer
+              expect(page).to have_selector('.blob-viewer[data-type="simple"]', visible: false)
+              expect(page).to have_selector('.blob-viewer[data-type="rich"]')
+
+              # shows an enabled copy button
+              expect(page).to have_selector('.js-copy-blob-source-btn:not(.disabled)')
+            end
+          end
+        end
+      end
+    end
+
+    context 'visiting with a line number anchor' do
+      before do
+        visit namespace_project_snippet_path(project.namespace, project, snippet, anchor: 'L1')
+
+        wait_for_ajax
+      end
+
+      it 'displays the blob using the simple viewer' do
+        aggregate_failures do
+          # hides the rich viewer
+          expect(page).to have_selector('.blob-viewer[data-type="simple"]')
+          expect(page).to have_selector('.blob-viewer[data-type="rich"]', visible: false)
+
+          # highlights the line in question
+          expect(page).to have_selector('#LC1.hll')
+
+          # shows highlighted Markdown code
+          expect(page).to have_content("[PEP-8](http://www.python.org/dev/peps/pep-0008/)")
+
+          # shows an enabled copy button
+          expect(page).to have_selector('.js-copy-blob-source-btn:not(.disabled)')
+        end
+      end
+    end
+  end
+end
diff --git a/spec/features/snippets/create_snippet_spec.rb b/spec/features/snippets/create_snippet_spec.rb
index 5470276bf06..9409c323288 100644
--- a/spec/features/snippets/create_snippet_spec.rb
+++ b/spec/features/snippets/create_snippet_spec.rb
@@ -1,6 +1,6 @@
 require 'rails_helper'
 
-feature 'Create Snippet', feature: true do
+feature 'Create Snippet', :js, feature: true do
   before do
     login_as :user
     visit new_snippet_path
@@ -9,10 +9,11 @@ feature 'Create Snippet', feature: true do
   scenario 'Authenticated user creates a snippet' do
     fill_in 'personal_snippet_title', with: 'My Snippet Title'
     page.within('.file-editor') do
-      find(:xpath, "//input[@id='personal_snippet_content']").set 'Hello World!'
+      find('.ace_editor').native.send_keys 'Hello World!'
     end
 
     click_button 'Create snippet'
+    wait_for_ajax
 
     expect(page).to have_content('My Snippet Title')
     expect(page).to have_content('Hello World!')
@@ -22,10 +23,11 @@ feature 'Create Snippet', feature: true do
     fill_in 'personal_snippet_title', with: 'My Snippet Title'
     page.within('.file-editor') do
       find(:xpath, "//input[@id='personal_snippet_file_name']").set 'snippet+file+name'
-      find(:xpath, "//input[@id='personal_snippet_content']").set 'Hello World!'
+      find('.ace_editor').native.send_keys 'Hello World!'
     end
 
     click_button 'Create snippet'
+    wait_for_ajax
 
     expect(page).to have_content('My Snippet Title')
     expect(page).to have_content('snippet+file+name')
diff --git a/spec/features/snippets/public_snippets_spec.rb b/spec/features/snippets/public_snippets_spec.rb
index 34300ccb940..2df483818c3 100644
--- a/spec/features/snippets/public_snippets_spec.rb
+++ b/spec/features/snippets/public_snippets_spec.rb
@@ -1,10 +1,11 @@
 require 'rails_helper'
 
-feature 'Public Snippets', feature: true do
+feature 'Public Snippets', :js, feature: true do
   scenario 'Unauthenticated user should see public snippets' do
     public_snippet = create(:personal_snippet, :public)
 
     visit snippet_path(public_snippet)
+    wait_for_ajax
 
     expect(page).to have_content(public_snippet.content)
   end
diff --git a/spec/features/snippets/show_spec.rb b/spec/features/snippets/show_spec.rb
new file mode 100644
index 00000000000..cebcba6a230
--- /dev/null
+++ b/spec/features/snippets/show_spec.rb
@@ -0,0 +1,126 @@
+require 'spec_helper'
+
+feature 'Snippet', :js, feature: true do
+  let(:project) { create(:project, :repository) }
+  let(:snippet) { create(:personal_snippet, :public, file_name: file_name, content: content) }
+
+  context 'Ruby file' do
+    let(:file_name) { 'popen.rb' }
+    let(:content) { project.repository.blob_at('master', 'files/ruby/popen.rb').data }
+
+    before do
+      visit snippet_path(snippet)
+
+      wait_for_ajax
+    end
+
+    it 'displays the blob' do
+      aggregate_failures do
+        # shows highlighted Ruby code
+        expect(page).to have_content("require 'fileutils'")
+
+        # does not show a viewer switcher
+        expect(page).not_to have_selector('.js-blob-viewer-switcher')
+
+        # shows an enabled copy button
+        expect(page).to have_selector('.js-copy-blob-source-btn:not(.disabled)')
+      end
+    end
+  end
+
+  context 'Markdown file' do
+    let(:file_name) { 'ruby-style-guide.md' }
+    let(:content) { project.repository.blob_at('master', 'files/markdown/ruby-style-guide.md').data }
+
+    context 'visiting directly' do
+      before do
+        visit snippet_path(snippet)
+
+        wait_for_ajax
+      end
+
+      it 'displays the blob using the rich viewer' do
+        aggregate_failures do
+          # hides the simple viewer
+          expect(page).to have_selector('.blob-viewer[data-type="simple"]', visible: false)
+          expect(page).to have_selector('.blob-viewer[data-type="rich"]')
+
+          # shows rendered Markdown
+          expect(page).to have_link("PEP-8")
+
+          # shows a viewer switcher
+          expect(page).to have_selector('.js-blob-viewer-switcher')
+
+          # shows a disabled copy button
+          expect(page).to have_selector('.js-copy-blob-source-btn.disabled')
+        end
+      end
+
+      context 'switching to the simple viewer' do
+        before do
+          find('.js-blob-viewer-switch-btn[data-viewer=simple]').click
+
+          wait_for_ajax
+        end
+
+        it 'displays the blob using the simple viewer' do
+          aggregate_failures do
+            # hides the rich viewer
+            expect(page).to have_selector('.blob-viewer[data-type="simple"]')
+            expect(page).to have_selector('.blob-viewer[data-type="rich"]', visible: false)
+
+            # shows highlighted Markdown code
+            expect(page).to have_content("[PEP-8](http://www.python.org/dev/peps/pep-0008/)")
+
+            # shows an enabled copy button
+            expect(page).to have_selector('.js-copy-blob-source-btn:not(.disabled)')
+          end
+        end
+
+        context 'switching to the rich viewer again' do
+          before do
+            find('.js-blob-viewer-switch-btn[data-viewer=rich]').click
+
+            wait_for_ajax
+          end
+
+          it 'displays the blob using the rich viewer' do
+            aggregate_failures do
+              # hides the simple viewer
+              expect(page).to have_selector('.blob-viewer[data-type="simple"]', visible: false)
+              expect(page).to have_selector('.blob-viewer[data-type="rich"]')
+
+              # shows an enabled copy button
+              expect(page).to have_selector('.js-copy-blob-source-btn:not(.disabled)')
+            end
+          end
+        end
+      end
+    end
+
+    context 'visiting with a line number anchor' do
+      before do
+        visit snippet_path(snippet, anchor: 'L1')
+
+        wait_for_ajax
+      end
+
+      it 'displays the blob using the simple viewer' do
+        aggregate_failures do
+          # hides the rich viewer
+          expect(page).to have_selector('.blob-viewer[data-type="simple"]')
+          expect(page).to have_selector('.blob-viewer[data-type="rich"]', visible: false)
+
+          # highlights the line in question
+          expect(page).to have_selector('#LC1.hll')
+
+          # shows highlighted Markdown code
+          expect(page).to have_content("[PEP-8](http://www.python.org/dev/peps/pep-0008/)")
+
+          # shows an enabled copy button
+          expect(page).to have_selector('.js-copy-blob-source-btn:not(.disabled)')
+        end
+      end
+    end
+  end
+end