Replace the 'project/issues/award_emoji.feature' spinach test with an rspec analog

changelogs/unreleased/replace_project_issues_award_emoji-feature.yml

+---
+title: Replace the 'project/issues/award_emoji.feature' spinach test with an rspec analog
+merge_request: 14202
+author: Vitaliy @blackst0ne Klachkov
+type: other

features/project/issues/award_emoji.feature

-@project_issues
-Feature: Award Emoji
-  Background:
-    Given I sign in as a user
-    And I own project "Shop"
-    And project "Shop" has issue "Bugfix"
-    And I visit "Bugfix" issue page
-
-  @javascript
-  Scenario: I repeatedly add and remove thumbsup award in the issue
-    Given I click the thumbsup award Emoji
-    Then I have award added
-    Given I click the thumbsup award Emoji
-    Then I have no awards added
-    Given I click the thumbsup award Emoji
-    Then I have award added
-
-  @javascript
-  Scenario: I add and remove custom award in the issue
-    Given I click to emoji-picker
-    Then The emoji menu is visible
-    And The search field is focused
-    Then I click to emoji in the picker
-    Then I have award added
-    And I can remove it by clicking to icon
-
-  @javascript
-  Scenario: I can see the list of emoji categories
-    Given I click to emoji-picker
-    Then The emoji menu is visible
-    And The search field is focused
-    Then I can see the activity and food categories
-
-  @javascript
-  Scenario: I can search emoji
-    Given I click to emoji-picker
-    Then The emoji menu is visible
-    And The search field is focused
-    And I search "hand"
-    Then I see search result for "hand"
-
-  @javascript
-  Scenario: I add award emoji using regular comment
-    Given I leave comment with a single emoji
-    Then I have new comment with emoji added

features/steps/project/issues/award_emoji.rb → spec/features/projects/awards/user_interacts_with_awards_in_issue_spec.rb

-class Spinach::Features::AwardEmoji < Spinach::FeatureSteps
-  include SharedAuthentication
-  include SharedProject
-  include SharedPaths
-  include Select2Helper
-
-  step 'I visit "Bugfix" issue page' do
-    visit project_issue_path(@project, @issue)
+require 'spec_helper'
+
+describe 'User interacts with awards in an issue', :js do
+  let(:issue) { create(:issue, project: project)}
+  let(:project) { create(:project) }
+  let(:user) { create(:user) }
+
+  before do
+    project.add_master(user)
+    sign_in(user)
+
+    visit(project_issue_path(project, issue))
   end
 
-  step 'I click the thumbsup award Emoji' do
-    page.within '.awards' do
+  it 'toggles the thumbsup award emoji' do
+    page.within('.awards') do
+      thumbsup = page.first('.award-control')
+      thumbsup.click
+      thumbsup.hover
+
+      expect(page).to have_selector('.js-emoji-btn')
+      expect(page).to have_css(".js-emoji-btn.active[data-original-title='You']")
+      expect(page.find('.js-emoji-btn.active .js-counter')).to have_content('1')
+
+      thumbsup = page.first('.award-control')
+      thumbsup.click
+      thumbsup.hover
+
+      expect(page).to have_selector('.award-control.js-emoji-btn')
+      expect(page.all('.award-control.js-emoji-btn').size).to eq(2)
+
+      page.all('.award-control.js-emoji-btn').each do |element|
+        expect(element['title']).to eq('')
+      end
+
+      page.all('.award-control .js-counter').each do |element|
+        expect(element).to have_content('0')
+      end
+
       thumbsup = page.first('.award-control')
       thumbsup.click
       thumbsup.hover
+
+      expect(page).to have_selector('.js-emoji-btn')
+      expect(page).to have_css(".js-emoji-btn.active[data-original-title='You']")
+      expect(page.find('.js-emoji-btn.active .js-counter')).to have_content('1')
     end
   end
 
-  step 'I click to emoji-picker' do
-    page.within '.awards' do
+  it 'toggles a custom award emoji' do
+    page.within('.awards') do
       page.find('.js-add-award').click
     end
-  end
 
-  step 'I click to emoji in the picker' do
-    page.within '.emoji-menu-content' do
+    page.find('.emoji-menu.is-visible')
+
+    expect(page).to have_selector('.js-emoji-menu-search')
+    expect(page.evaluate_script("document.activeElement.classList.contains('js-emoji-menu-search')")).to eq(true)
+
+    page.within('.emoji-menu-content') do
       emoji_button = page.first('.js-emoji-btn')
       emoji_button.hover
       emoji_button.click
     end
-  end
 
-  step 'I can remove it by clicking to icon' do
-    page.within '.awards' do
+    page.within('.awards') do
+      expect(page).to have_selector('.js-emoji-btn')
+      expect(page.find('.js-emoji-btn.active .js-counter')).to have_content('1')
+      expect(page).to have_css(".js-emoji-btn.active[data-original-title='You']")
+
       expect do
         page.find('.js-emoji-btn.active').click
         wait_for_requests
-      end.to change { page.all(".award-control.js-emoji-btn").size }.from(3).to(2)
+      end.to change { page.all('.award-control.js-emoji-btn').size }.from(3).to(2)
     end
   end
 
-  step 'I can see the activity and food categories' do
-    page.within '.emoji-menu' do
-      expect(page).not_to have_selector 'Activity'
-      expect(page).not_to have_selector 'Food'
+  it 'shows the list of award emoji categories' do
+    page.within('.awards') do
+      page.find('.js-add-award').click
     end
-  end
-
-  step 'I have new comment with emoji added' do
-    expect(page).to have_selector 'gl-emoji[data-name="smile"]'
-  end
 
-  step 'I have award added' do
-    page.within '.awards' do
-      expect(page).to have_selector '.js-emoji-btn'
-      expect(page.find('.js-emoji-btn.active .js-counter')).to have_content '1'
-      expect(page).to have_css(".js-emoji-btn.active[data-original-title='You']")
-    end
-  end
+    page.find('.emoji-menu.is-visible')
 
-  step 'I have no awards added' do
-    page.within '.awards' do
-      expect(page).to have_selector '.award-control.js-emoji-btn'
-      expect(page.all('.award-control.js-emoji-btn').size).to eq(2)
+    expect(page).to have_selector('.js-emoji-menu-search')
+    expect(page.evaluate_script("document.activeElement.classList.contains('js-emoji-menu-search')")).to eq(true)
 
-      # Check tooltip data
-      page.all('.award-control.js-emoji-btn').each do |element|
-        expect(element['title']).to eq("")
-      end
+    fill_in('emoji-menu-search', with: 'hand')
 
-      page.all('.award-control .js-counter').each do |element|
-        expect(element).to have_content '0'
-      end
+    page.within('.emoji-menu-content') do
+      expect(page).to have_selector('[data-name="raised_hand"]')
     end
   end
 
-  step 'project "Shop" has issue "Bugfix"' do
-    @project = Project.find_by(name: 'Shop')
-    @issue = create(:issue, title: 'Bugfix', project: project)
-  end
-
-  step 'I leave comment with a single emoji' do
+  it 'adds an award emoji by a comment' do
     page.within('.js-main-target-form') do
-      fill_in 'note[note]', with: ':smile:'
-      click_button 'Comment'
-    end
-  end
+      fill_in('note[note]', with: ':smile:')
 
-  step 'I search "hand"' do
-    fill_in 'emoji-menu-search', with: 'hand'
-  end
-
-  step 'I see search result for "hand"' do
-    page.within '.emoji-menu-content' do
-      expect(page).to have_selector '[data-name="raised_hand"]'
+      click_button('Comment')
     end
-  end
 
-  step 'The emoji menu is visible' do
-    page.find(".emoji-menu.is-visible")
-  end
-
-  step 'The search field is focused' do
-    expect(page).to have_selector('.js-emoji-menu-search')
-    expect(page.evaluate_script("document.activeElement.classList.contains('js-emoji-menu-search')")).to eq(true)
+    expect(page).to have_selector('gl-emoji[data-name="smile"]')
   end
 end