Merge branch 'support-comment-parallel-diff' into 'master'

Support commenting on a diff in side-by-side view

### What does this MR do?

This MR adds support for commenting on a diff in side-by-side (aka parallel) view. It also fixes a JavaScript bug (see !779) when the comment button is clicked on a line that already has a comment.

There is an existing bug where the comment count is not updated when a new comment is added. I'll send a MR for that later.

### Why was this MR needed?

Commenting only worked in "inline" mode. Often the side-by-side view is more conducive to writing comments.

### What are the relevant issue numbers?

Closes https://github.com/gitlabhq/gitlabhq/issues/9283

### Screenshot

![image](https://gitlab.com/stanhu/gitlab-ce/uploads/3d0a3213fde38844a681a826da18139b/image.png)

See merge request !810

3 files changed, 55 insertions, 8 deletions

diff --git a/features/project/commits/diff_comments.feature b/features/project/commits/diff_comments.feature
index 56b9a13678d..4a2b870e082 100644
--- a/features/project/commits/diff_comments.feature
+++ b/features/project/commits/diff_comments.feature
@@ -77,3 +77,17 @@ Feature: Project Commits Diff Comments
     And I submit the diff comment
     Then I should not see the diff comment form
     And I should see a discussion reply button
+
+  @javascript
+  Scenario: I can add a comment on a side-by-side commit diff (left side)
+    Given I open a diff comment form
+    And I click side-by-side diff button
+    When I leave a diff comment in a parallel view on the left side like "Old comment"
+    Then I should see a diff comment on the left side saying "Old comment"
+
+  @javascript
+  Scenario: I can add a comment on a side-by-side commit diff (right side)
+    Given I open a diff comment form
+    And I click side-by-side diff button
+    When I leave a diff comment in a parallel view on the right side like "New comment"
+    Then I should see a diff comment on the right side saying "New comment"
diff --git a/features/steps/project/commits/commits.rb b/features/steps/project/commits/commits.rb
index 4b19e3beed4..e6330ec457e 100644
--- a/features/steps/project/commits/commits.rb
+++ b/features/steps/project/commits/commits.rb
@@ -2,6 +2,7 @@ class Spinach::Features::ProjectCommits < Spinach::FeatureSteps
   include SharedAuthentication
   include SharedProject
   include SharedPaths
+  include SharedDiffNote
   include RepoHelpers
 
   step 'I see project commits' do
@@ -88,14 +89,6 @@ class Spinach::Features::ProjectCommits < Spinach::FeatureSteps
     expect(links[1]['href']).to match %r{blob/#{sample_image_commit.new_blob_id}}
   end
 
-  step 'I click side-by-side diff button' do
-    click_link "Side-by-side"
-  end
-
-  step 'I see side-by-side diff button' do
-    expect(page).to have_content "Side-by-side"
-  end
-
   step 'I see inline diff button' do
     expect(page).to have_content "Inline"
   end
diff --git a/features/steps/shared/diff_note.rb b/features/steps/shared/diff_note.rb
index a716ca5837c..c4f89ca31c9 100644
--- a/features/steps/shared/diff_note.rb
+++ b/features/steps/shared/diff_note.rb
@@ -28,6 +28,22 @@ module SharedDiffNote
     end
   end
 
+  step 'I leave a diff comment in a parallel view on the left side like "Old comment"' do
+    click_parallel_diff_line(sample_commit.line_code, 'old')
+    page.within("#{diff_file_selector} form[rel$='#{sample_commit.line_code}']") do
+      fill_in "note[note]", with: "Old comment"
+      find(".js-comment-button").trigger("click")
+    end
+  end
+
+  step 'I leave a diff comment in a parallel view on the right side like "New comment"' do
+    click_parallel_diff_line(sample_commit.line_code, 'new')
+    page.within("#{diff_file_selector} form[rel$='#{sample_commit.line_code}']") do
+      fill_in "note[note]", with: "New comment"
+      find(".js-comment-button").trigger("click")
+    end
+  end
+
   step 'I preview a diff comment text like "Should fix it :smile:"' do
     click_diff_line(sample_commit.line_code)
     page.within("#{diff_file_selector} form[rel$='#{sample_commit.line_code}']") do
@@ -102,6 +118,18 @@ module SharedDiffNote
     end
   end
 
+  step 'I should see a diff comment on the left side saying "Old comment"' do
+    page.within("#{diff_file_selector} .notes_content.parallel.old") do
+      expect(page).to have_content("Old comment")
+    end
+  end
+
+  step 'I should see a diff comment on the right side saying "New comment"' do
+    page.within("#{diff_file_selector} .notes_content.parallel.new") do
+      expect(page).to have_content("New comment")
+    end
+  end
+
   step 'I should see a discussion reply button' do
     page.within(diff_file_selector) do
       expect(page).to have_button('Reply')
@@ -157,6 +185,14 @@ module SharedDiffNote
     end
   end
 
+  step 'I click side-by-side diff button' do
+    click_link "Side-by-side"
+  end
+
+  step 'I see side-by-side diff button' do
+    expect(page).to have_content "Side-by-side"
+  end
+
   def diff_file_selector
     ".diff-file:nth-of-type(1)"
   end
@@ -164,4 +200,8 @@ module SharedDiffNote
   def click_diff_line(code)
     find("button[data-line-code='#{code}']").click
   end
+
+  def click_parallel_diff_line(code, line_type)
+    find("button[data-line-code='#{code}'][data-line-type='#{line_type}']").trigger('click')
+  end
 end