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

4 files changed, 115 insertions, 173 deletions

diff --git a/changelogs/unreleased/blackst0ne-replace-spinach-project-commits-comments-feature.yml b/changelogs/unreleased/blackst0ne-replace-spinach-project-commits-comments-feature.yml
new file mode 100644
index 00000000000..e7077f27555
--- /dev/null
+++ b/changelogs/unreleased/blackst0ne-replace-spinach-project-commits-comments-feature.yml
@@ -0,0 +1,5 @@
+---
+title: Replace the `project/commits/comments.feature` spinach test with an rspec analog
+merge_request: 18356
+author: "@blackst0ne"
+type: other
diff --git a/features/project/commits/comments.feature b/features/project/commits/comments.feature
deleted file mode 100644
index fafb54b183a..00000000000
--- a/features/project/commits/comments.feature
+++ /dev/null
@@ -1,51 +0,0 @@
-@project_commits
-Feature: Project Commits 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
-    Given I leave a comment like "XML attached"
-    Then I should see a comment saying "XML attached"
-
-  @javascript
-  Scenario: I can't cancel the main form
-    Then I should not see the cancel comment button
-
-  @javascript
-  Scenario: I can preview with text
-    Given I write a comment like ":+1: Nice"
-    Then The comment preview tab should be display rendered Markdown
-
-  @javascript
-  Scenario: I preview a comment
-    Given I preview a comment text like "Bug fixed :smile:"
-    Then I should see the comment preview
-    And I should not see the comment text field
-
-  @javascript
-  Scenario: I can edit after preview
-    Given I preview a comment text like "Bug fixed :smile:"
-    Then I should see the comment write tab
-
-  @javascript
-  Scenario: I have a reset form after posting from preview
-    Given I preview a comment text like "Bug fixed :smile:"
-    And I submit the comment
-    Then I should see an empty comment text field
-    And I should not see the comment preview
-
-  @javascript
-  Scenario: I can delete a comment
-    Given I leave a comment like "XML attached"
-    Then I should see a comment saying "XML attached"
-    And I delete a comment
-    Then I should not see a comment saying "XML attached"
-
-  @javascript
-  Scenario: I can edit a comment with +1
-    Given I leave a comment like "XML attached"
-    And I edit the last comment with a +1
-    Then I should see +1 in the description
diff --git a/features/steps/shared/note.rb b/features/steps/shared/note.rb
index cbe1cae096e..bf1b88c60d7 100644
--- a/features/steps/shared/note.rb
+++ b/features/steps/shared/note.rb
@@ -6,70 +6,12 @@ module SharedNote
     wait_for_requests if javascript_test?
   end
 
-  step 'I delete a comment' do
-    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
-  end
-
   step 'I haven\'t written any comment text' do
     page.within(".js-main-target-form") do
       fill_in "note[note]", with: ""
     end
   end
 
-  step 'I leave a comment like "XML attached"' do
-    page.within(".js-main-target-form") do
-      fill_in "note[note]", with: "XML attached"
-      click_button "Comment"
-    end
-
-    wait_for_requests
-  end
-
-  step 'I preview a comment text like "Bug fixed :smile:"' do
-    page.within(".js-main-target-form") do
-      fill_in "note[note]", with: "Bug fixed :smile:"
-      find('.js-md-preview-button').click
-    end
-  end
-
-  step 'I submit the comment' do
-    page.within(".js-main-target-form") do
-      click_button "Comment"
-    end
-
-    wait_for_requests
-  end
-
-  step 'I write a comment like ":+1: Nice"' do
-    page.within(".js-main-target-form") do
-      fill_in 'note[note]', with: ':+1: Nice'
-    end
-  end
-
-  step 'I should not see a comment saying "XML attached"' do
-    expect(page).not_to have_css(".note")
-  end
-
-  step 'I should not see the cancel comment button' do
-    page.within(".js-main-target-form") do
-      should_not have_link("Cancel")
-    end
-  end
-
-  step 'I should not see the comment preview' do
-    page.within(".js-main-target-form") do
-      expect(find('.js-md-preview')).not_to be_visible
-    end
-  end
-
   step 'The comment preview tab should say there is nothing to do' do
     page.within(".js-main-target-form") do
       find('.js-md-preview-button').click
@@ -77,71 +19,7 @@ module SharedNote
     end
   end
 
-  step 'I should not see the comment text field' do
-    page.within(".js-main-target-form") do
-      expect(find('.js-note-text')).not_to be_visible
-    end
-  end
-
-  step 'I should see a comment saying "XML attached"' do
-    page.within(".note") do
-      expect(page).to have_content("XML attached")
-    end
-  end
-
-  step 'I should see an empty comment text field' do
-    page.within(".js-main-target-form") do
-      expect(page).to have_field("note[note]", with: "")
-    end
-  end
-
-  step 'I should see the comment write tab' do
-    page.within(".js-main-target-form") do
-      expect(page).to have_css('.js-md-write-button', visible: true)
-    end
-  end
-
-  step 'The comment preview tab should be display rendered Markdown' do
-    page.within(".js-main-target-form") 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 the comment preview' do
-    page.within(".js-main-target-form") do
-      expect(page).to have_css('.js-md-preview', visible: true)
-    end
-  end
-
   step 'I should see no notes at all' do
     expect(page).not_to have_css('.note')
   end
-
-  # Markdown
-
-  step 'I edit the last comment with a +1' do
-    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: '+1 Awesome!'
-      click_button 'Save comment'
-    end
-    wait_for_requests
-  end
-
-  step 'I should see +1 in the description' do
-    page.within(".note") do
-      expect(page).to have_content("+1 Awesome!")
-    end
-
-    wait_for_requests
-  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
new file mode 100644
index 00000000000..5174f793367
--- /dev/null
+++ b/spec/features/projects/commit/user_comments_on_commit_spec.rb
@@ -0,0 +1,110 @@
+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