Replace the `project/commits/diff_comments.feature` spinach test with an rspec analog

8 files changed, 249 insertions, 410 deletions

diff --git a/features/project/commits/diff_comments.feature b/features/project/commits/diff_comments.feature
deleted file mode 100644
index 35687aac9ea..00000000000
--- a/features/project/commits/diff_comments.feature
+++ /dev/null
@@ -1,96 +0,0 @@
-@project_commits
-Feature: Project Commits Diff Comments
-  Background:
-    Given I sign in as a user
-    And I own project "Shop"
-    And I visit project commit page
-
-  @javascript
-  Scenario: I can comment on a commit diff
-    Given I leave a diff comment like "Typo, please fix"
-    Then I should see a diff comment saying "Typo, please fix"
-
-  @javascript
-  Scenario: I can add a diff comment with a single emoji
-    Given I open a diff comment form
-    And I write a diff comment like ":smile:"
-    Then I should see a diff comment with an emoji image
-
-  @javascript
-  Scenario: I get a temporary form for the first comment on a diff line
-    Given I open a diff comment form
-    Then I should see a temporary diff comment form
-
-  @javascript
-  Scenario: I have a cancel button on the diff form
-    Given I open a diff comment form
-    Then I should see the cancel comment button
-
-  @javascript
-  Scenario: I can cancel a diff form
-    Given I open a diff comment form
-    And I cancel the diff comment
-    Then I should not see the diff comment form
-
-  @javascript
-  Scenario: I can't open a second form for a diff line
-    Given I open a diff comment form
-    And I open a diff comment form
-    Then I should only see one diff form
-
-  @javascript
-  Scenario: I can have multiple forms
-    Given I open a diff comment form
-    And I write a diff comment like ":-1: I don't like this"
-    And I open another diff comment form
-    Then I should see a diff comment form with ":-1: I don't like this"
-    And I should see an empty diff comment form
-
-  @javascript
-  Scenario: I can preview multiple forms separately
-    Given I preview a diff comment text like "Should fix it :smile:"
-    And I preview another diff comment text like "DRY this up"
-    Then I should see two separate previews
-
-  @javascript
-  Scenario: I have a reply button in discussions
-    Given I leave a diff comment like "Typo, please fix"
-    Then I should see a discussion reply button
-
-  @javascript
-  Scenario: I can preview with text
-    Given I open a diff comment form
-    And I write a diff comment like ":-1: I don't like this"
-    Then The diff comment preview tab should display rendered Markdown
-
-  @javascript
-  Scenario: I preview a diff comment
-    Given I preview a diff comment text like "Should fix it :smile:"
-    Then I should see the diff comment preview
-    And I should not see the diff comment text field
-
-  @javascript
-  Scenario: I can edit after preview
-    Given I preview a diff comment text like "Should fix it :smile:"
-    Then I should see the diff comment write tab
-
-  @javascript
-  Scenario: The form gets removed after posting
-    Given I preview a diff comment text like "Should fix it :smile:"
-    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/shared/diff_note.rb b/features/steps/shared/diff_note.rb
index aa32528a7ca..22f397947b0 100644
--- a/features/steps/shared/diff_note.rb
+++ b/features/steps/shared/diff_note.rb
@@ -7,12 +7,6 @@ module SharedDiffNote
     wait_for_requests if javascript_test?
   end
 
-  step 'I cancel the diff comment' do
-    page.within(diff_file_selector) do
-      find(".js-close-discussion-note-form").click
-    end
-  end
-
   step 'I delete a diff comment' do
     find('.note').hover
     find(".js-note-delete").click
@@ -24,96 +18,6 @@ module SharedDiffNote
     end
   end
 
-  step 'I leave a diff comment like "Typo, please fix"' do
-    page.within(diff_file_selector) do
-      click_diff_line(sample_commit.line_code)
-
-      page.within("form[data-line-code='#{sample_commit.line_code}']") do
-        fill_in "note[note]", with: "Typo, please fix"
-        find(".js-comment-button").click
-      end
-    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.del_line_code, 'old')
-    page.within("#{diff_file_selector} form[data-line-code='#{sample_commit.del_line_code}']") do
-      fill_in "note[note]", with: "Old comment"
-      find(".js-comment-button").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[data-line-code='#{sample_commit.line_code}']") do
-      fill_in "note[note]", with: "New comment"
-      find(".js-comment-button").click
-    end
-  end
-
-  step 'I preview a diff comment text like "Should fix it :smile:"' do
-    page.within(diff_file_selector) do
-      click_diff_line(sample_commit.line_code)
-
-      page.within("form[data-line-code='#{sample_commit.line_code}']") do
-        fill_in "note[note]", with: "Should fix it :smile:"
-        find('.js-md-preview-button').click
-      end
-    end
-  end
-
-  step 'I preview another diff comment text like "DRY this up"' do
-    page.within(diff_file_selector) do
-      click_diff_line(sample_commit.del_line_code)
-
-      page.within("form[data-line-code='#{sample_commit.del_line_code}']") do
-        fill_in "note[note]", with: "DRY this up"
-        find('.js-md-preview-button').click
-      end
-    end
-  end
-
-  step 'I open a diff comment form' do
-    page.within(diff_file_selector) do
-      click_diff_line(sample_commit.line_code)
-    end
-  end
-
-  step 'I open another diff comment form' do
-    page.within(diff_file_selector) do
-      click_diff_line(sample_commit.del_line_code)
-    end
-  end
-
-  step 'I write a diff comment like ":-1: I don\'t like this"' do
-    page.within(diff_file_selector) do
-      fill_in "note[note]", with: ":-1: I don\'t like this"
-    end
-  end
-
-  step 'I write a diff comment like ":smile:"' do
-    page.within(diff_file_selector) do
-      click_diff_line(sample_commit.line_code)
-
-      page.within("form[data-line-code='#{sample_commit.line_code}']") do
-        fill_in 'note[note]', with: ':smile:'
-        click_button('Comment')
-      end
-    end
-  end
-
-  step 'I submit the diff comment' do
-    page.within(diff_file_selector) do
-      click_button("Comment")
-    end
-  end
-
-  step 'I should not see the diff comment form' do
-    page.within(diff_file_selector) do
-      expect(page).not_to have_css("form.new_note")
-    end
-  end
-
   step 'The diff comment preview tab should say there is nothing to do' do
     page.within(diff_file_selector) do
       find('.js-md-preview-button').click
@@ -121,103 +25,6 @@ module SharedDiffNote
     end
   end
 
-  step 'I should not see the diff comment text field' do
-    page.within(diff_file_selector) do
-      expect(find('.js-note-text')).not_to be_visible
-    end
-  end
-
-  step 'I should only see one diff form' do
-    page.within(diff_file_selector) do
-      expect(page).to have_css("form.new-note", count: 1)
-    end
-  end
-
-  step 'I should see a diff comment form with ":-1: I don\'t like this"' do
-    page.within(diff_file_selector) do
-      expect(page).to have_field("note[note]", with: ":-1: I don\'t like this")
-    end
-  end
-
-  step 'I should see a diff comment saying "Typo, please fix"' do
-    page.within("#{diff_file_selector} .note") do
-      expect(page).to have_content("Typo, please fix")
-    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...')
-    end
-  end
-
-  step 'I should see a temporary diff comment form' do
-    page.within(diff_file_selector) do
-      expect(page).to have_css(".js-temp-notes-holder form.new-note")
-    end
-  end
-
-  step 'I should see an empty diff comment form' do
-    page.within(diff_file_selector) do
-      expect(page).to have_field("note[note]", with: "")
-    end
-  end
-
-  step 'I should see the cancel comment button' do
-    page.within("#{diff_file_selector} form") do
-      expect(page).to have_css(".js-close-discussion-note-form", text: "Cancel")
-    end
-  end
-
-  step 'I should see the diff comment preview' do
-    page.within("#{diff_file_selector} form") do
-      expect(page).to have_css('.js-md-preview', visible: true)
-    end
-  end
-
-  step 'I should see the diff comment write tab' do
-    page.within(diff_file_selector) do
-      expect(page).to have_css('.js-md-write-button', visible: true)
-    end
-  end
-
-  step 'The diff comment preview tab should display rendered Markdown' do
-    page.within(diff_file_selector) do
-      find('.js-md-preview-button').click
-      expect(find('.js-md-preview')).to have_css('gl-emoji', visible: true)
-    end
-  end
-
-  step 'I should see two separate previews' do
-    page.within(diff_file_selector) do
-      expect(page).to have_css('.js-md-preview', visible: true, count: 2)
-      expect(page).to have_content('Should fix it')
-      expect(page).to have_content('DRY this up')
-    end
-  end
-
-  step 'I should see a diff comment with an emoji image' do
-    page.within("#{diff_file_selector} .note") do
-      expect(page).to have_xpath("//gl-emoji[@data-name='smile']")
-    end
-  end
-
-  step 'I click side-by-side diff button' do
-    find('#parallel-diff-btn').click
-  end
-
   step 'I see side-by-side diff button' do
     expect(page).to have_content "Side-by-side"
   end
diff --git a/features/steps/shared/paths.rb b/features/steps/shared/paths.rb
index a6bf7008955..fec57812af5 100644
--- a/features/steps/shared/paths.rb
+++ b/features/steps/shared/paths.rb
@@ -303,10 +303,6 @@ module SharedPaths
     visit project_tags_path(@project)
   end
 
-  step 'I visit project commit page' do
-    visit project_commit_path(@project, sample_commit.id)
-  end
-
   step 'I visit issue page "Release 0.4"' do
     issue = Issue.find_by(title: "Release 0.4")
     visit project_issue_path(issue.project, issue)
diff --git a/features/steps/shared/project.rb b/features/steps/shared/project.rb
index dbfb90fcc48..d0277257320 100644
--- a/features/steps/shared/project.rb
+++ b/features/steps/shared/project.rb
@@ -13,13 +13,6 @@ module SharedProject
     @project.add_master(@user)
   end
 
-  # Create a specific project called "Shop"
-  step 'I own project "Shop"' do
-    @project = Project.find_by(name: "Shop")
-    @project ||= create(:project, :repository, name: "Shop", namespace: @user.namespace)
-    @project.add_master(@user)
-  end
-
   def current_project
     @project ||= Project.first
   end
diff --git a/spec/features/projects/commit/comments/user_adds_comment_spec.rb b/spec/features/projects/commit/comments/user_adds_comment_spec.rb
new file mode 100644
index 00000000000..6397df086a7
--- /dev/null
+++ b/spec/features/projects/commit/comments/user_adds_comment_spec.rb
@@ -0,0 +1,170 @@
+require "spec_helper"
+
+describe "User adds a comment on a commit", :js do
+  include Spec::Support::Helpers::Features::NotesHelpers
+  include RepoHelpers
+
+  let(:comment_text) { "XML attached" }
+  let(:another_comment_text) { "SVG attached" }
+  let(:project) { create(:project, :repository) }
+  let(:user) { create(:user) }
+
+  before do
+    sign_in(user)
+    project.add_developer(user)
+  end
+
+  context "inline view" do
+    before do
+      visit(project_commit_path(project, sample_commit.id))
+    end
+
+    it "adds a comment" do
+      page.within(".js-main-target-form") do
+        expect(page).not_to have_link("Cancel")
+
+        emoji = ":+1:"
+
+        fill_in("note[note]", with: "#{comment_text} #{emoji}")
+
+        # Check on `Preview` tab
+        click_link("Preview")
+
+        expect(find(".js-md-preview")).to have_content(comment_text).and have_css("gl-emoji")
+        expect(page).not_to have_css(".js-note-text")
+
+        # Check on the `Write` tab
+        click_link("Write")
+
+        expect(page).to have_field("note[note]", with: "#{comment_text} #{emoji}")
+
+        # Submit comment from the `Preview` tab to get rid of a separate `it` block
+        # which would specially tests if everything gets cleared from the note form.
+        click_link("Preview")
+        click_button("Comment")
+      end
+
+      wait_for_requests
+
+      page.within(".note") do
+        expect(page).to have_content(comment_text).and have_css("gl-emoji")
+      end
+
+      page.within(".js-main-target-form") do
+        expect(page).to have_field("note[note]", with: "").and have_no_css(".js-md-preview")
+      end
+    end
+
+    context "when commenting on diff" do
+      it "adds a comment" do
+        page.within(".diff-file:nth-of-type(1)") do
+          # Open a form for a comment and check UI elements are visible and acting as expecting.
+          click_diff_line(sample_commit.line_code)
+
+          expect(page).to have_css(".js-temp-notes-holder form.new-note")
+                    .and have_css(".js-close-discussion-note-form", text: "Cancel")
+
+          # The `Cancel` button closes the current form. The page should not have any open forms after that.
+          find(".js-close-discussion-note-form").click
+
+          expect(page).not_to have_css("form.new_note")
+
+          # Try to open the same form twice. There should be only one form opened.
+          click_diff_line(sample_commit.line_code)
+          click_diff_line(sample_commit.line_code)
+
+          expect(page).to have_css("form.new-note", count: 1)
+
+          # Fill in a form.
+          page.within("form[data-line-code='#{sample_commit.line_code}']") do
+            fill_in("note[note]", with: "#{comment_text} :smile:")
+          end
+
+          # Open another form and check we have two forms now (because the first one is filled in).
+          click_diff_line(sample_commit.del_line_code)
+
+          expect(page).to have_field("note[note]", with: "#{comment_text} :smile:")
+                    .and have_field("note[note]", with: "")
+
+          # Test Preview feature for both forms.
+          page.within("form[data-line-code='#{sample_commit.line_code}']") do
+            click_link("Preview")
+          end
+
+          page.within("form[data-line-code='#{sample_commit.del_line_code}']") do
+            fill_in("note[note]", with: another_comment_text)
+
+            click_link("Preview")
+          end
+
+          expect(page).to have_css(".js-md-preview", visible: true, count: 2)
+                    .and have_content(comment_text)
+                    .and have_content(another_comment_text)
+                    .and have_xpath("//gl-emoji[@data-name='smile']")
+
+          # Test UI elements, then submit.
+          page.within("form[data-line-code='#{sample_commit.line_code}']") do
+            expect(find(".js-note-text", visible: false).text).to eq("")
+            expect(page).to have_css('.js-md-write-button')
+
+            click_button("Comment")
+          end
+
+          expect(page).to have_button("Reply...").and have_no_css("form.new_note")
+        end
+
+        # A comment should be added and visible.
+        page.within(".diff-file:nth-of-type(1) .note") do
+          expect(page).to have_content(comment_text).and have_xpath("//gl-emoji[@data-name='smile']")
+        end
+      end
+    end
+  end
+
+  context "side-by-side view" do
+    before do
+      visit(project_commit_path(project, sample_commit.id, view: "parallel"))
+    end
+
+    it "adds a comment" do
+      new_comment = "New comment"
+      old_comment = "Old comment"
+
+      # Left side.
+      click_parallel_diff_line(sample_commit.del_line_code)
+
+      page.within(".diff-file:nth-of-type(1) form[data-line-code='#{sample_commit.del_line_code}']") do
+        fill_in("note[note]", with: old_comment)
+        click_button("Comment")
+      end
+
+      page.within(".diff-file:nth-of-type(1) .notes_content.parallel.old") do
+        expect(page).to have_content(old_comment)
+      end
+
+      # Right side.
+      click_parallel_diff_line(sample_commit.line_code)
+
+      page.within(".diff-file:nth-of-type(1) form[data-line-code='#{sample_commit.line_code}']") do
+        fill_in("note[note]", with: new_comment)
+        click_button("Comment")
+      end
+
+      wait_for_requests
+
+      expect(all(".diff-file:nth-of-type(1) .notes_content.parallel.new")[1].text).to have_content(new_comment)
+    end
+  end
+
+  private
+
+  def click_diff_line(line)
+    find(".line_holder[id='#{line}'] td:nth-of-type(1)").hover
+    find(".line_holder[id='#{line}'] button").click
+  end
+
+  def click_parallel_diff_line(line)
+    find(".line_holder.parallel td[id='#{line}']").find(:xpath, 'preceding-sibling::*[1][self::td]').hover
+    find(".line_holder.parallel button[data-line-code='#{line}']").click
+  end
+end
diff --git a/spec/features/projects/commit/comments/user_deletes_comments_spec.rb b/spec/features/projects/commit/comments/user_deletes_comments_spec.rb
new file mode 100644
index 00000000000..a727cab4ac7
--- /dev/null
+++ b/spec/features/projects/commit/comments/user_deletes_comments_spec.rb
@@ -0,0 +1,37 @@
+require "spec_helper"
+
+describe "User deletes comments on a commit", :js do
+  include Spec::Support::Helpers::Features::NotesHelpers
+  include RepoHelpers
+
+  let(:comment_text) { "XML attached" }
+  let(:project) { create(:project, :repository) }
+  let(:user) { create(:user) }
+
+  before do
+    sign_in(user)
+    project.add_developer(user)
+
+    visit(project_commit_path(project, sample_commit.id))
+
+    add_note(comment_text)
+  end
+
+  it "deletes comment" do
+    page.within(".note") do
+      expect(page).to have_content(comment_text)
+    end
+
+    page.within(".main-notes-list") do
+      note = find(".note")
+      note.hover
+
+      find(".more-actions").click
+      find(".more-actions .dropdown-menu li", match: :first)
+
+      accept_confirm { find(".js-note-delete").click }
+    end
+
+    expect(page).not_to have_css(".note")
+  end
+end
diff --git a/spec/features/projects/commit/comments/user_edits_comments_spec.rb b/spec/features/projects/commit/comments/user_edits_comments_spec.rb
new file mode 100644
index 00000000000..75bccd99f59
--- /dev/null
+++ b/spec/features/projects/commit/comments/user_edits_comments_spec.rb
@@ -0,0 +1,42 @@
+require "spec_helper"
+
+describe "User edits a comment on a commit", :js do
+  include Spec::Support::Helpers::Features::NotesHelpers
+  include RepoHelpers
+
+  let(:project) { create(:project, :repository) }
+  let(:user) { create(:user) }
+
+  before do
+    sign_in(user)
+    project.add_developer(user)
+
+    visit(project_commit_path(project, sample_commit.id))
+
+    add_note("XML attached")
+  end
+
+  it "edits comment" do
+    NEW_COMMENT_TEXT = "+1 Awesome!".freeze
+
+    page.within(".main-notes-list") do
+      note = find(".note")
+      note.hover
+
+      note.find(".js-note-edit").click
+    end
+
+    page.find(".current-note-edit-form textarea")
+
+    page.within(".current-note-edit-form") do
+      fill_in("note[note]", with: NEW_COMMENT_TEXT)
+      click_button("Save comment")
+    end
+
+    wait_for_requests
+
+    page.within(".note") do
+      expect(page).to have_content(NEW_COMMENT_TEXT)
+    end
+  end
+end
diff --git a/spec/features/projects/commit/user_comments_on_commit_spec.rb b/spec/features/projects/commit/user_comments_on_commit_spec.rb
deleted file mode 100644
index 5174f793367..00000000000
--- a/spec/features/projects/commit/user_comments_on_commit_spec.rb
+++ /dev/null
@@ -1,110 +0,0 @@
-require "spec_helper"
-
-describe "User comments on commit", :js do
-  include Spec::Support::Helpers::Features::NotesHelpers
-  include RepoHelpers
-
-  let(:project) { create(:project, :repository) }
-  let(:user) { create(:user) }
-
-  COMMENT_TEXT = "XML attached".freeze
-
-  before do
-    sign_in(user)
-    project.add_developer(user)
-
-    visit(project_commit_path(project, sample_commit.id))
-  end
-
-  context "when adding new comment" do
-    it "adds comment" do
-      EMOJI = ":+1:".freeze
-
-      page.within(".js-main-target-form") do
-        expect(page).not_to have_link("Cancel")
-
-        fill_in("note[note]", with: "#{COMMENT_TEXT} #{EMOJI}")
-
-        # Check on `Preview` tab
-        click_link("Preview")
-
-        expect(find(".js-md-preview")).to have_content(COMMENT_TEXT).and have_css("gl-emoji")
-        expect(page).not_to have_css(".js-note-text")
-
-        # Check on `Write` tab
-        click_link("Write")
-
-        expect(page).to have_field("note[note]", with: "#{COMMENT_TEXT} #{EMOJI}")
-
-        # Submit comment from the `Preview` tab to get rid of a separate `it` block
-        # which would specially tests if everything gets cleared from the note form.
-        click_link("Preview")
-        click_button("Comment")
-      end
-
-      wait_for_requests
-
-      page.within(".note") do
-        expect(page).to have_content(COMMENT_TEXT).and have_css("gl-emoji")
-      end
-
-      page.within(".js-main-target-form") do
-        expect(page).to have_field("note[note]", with: "").and have_no_css(".js-md-preview")
-      end
-    end
-  end
-
-  context "when editing comment" do
-    before do
-      add_note(COMMENT_TEXT)
-    end
-
-    it "edits comment" do
-      NEW_COMMENT_TEXT = "+1 Awesome!".freeze
-
-      page.within(".main-notes-list") do
-        note = find(".note")
-        note.hover
-
-        note.find(".js-note-edit").click
-      end
-
-      page.find(".current-note-edit-form textarea")
-
-      page.within(".current-note-edit-form") do
-        fill_in("note[note]", with: NEW_COMMENT_TEXT)
-        click_button("Save comment")
-      end
-
-      wait_for_requests
-
-      page.within(".note") do
-        expect(page).to have_content(NEW_COMMENT_TEXT)
-      end
-    end
-  end
-
-  context "when deleting comment" do
-    before do
-      add_note(COMMENT_TEXT)
-    end
-
-    it "deletes comment" do
-      page.within(".note") do
-        expect(page).to have_content(COMMENT_TEXT)
-      end
-
-      page.within(".main-notes-list") do
-        note = find(".note")
-        note.hover
-
-        find(".more-actions").click
-        find(".more-actions .dropdown-menu li", match: :first)
-
-        accept_confirm { find(".js-note-delete").click }
-      end
-
-      expect(page).not_to have_css(".note")
-    end
-  end
-end