Restyle status message input on profile settings

2 files changed, 179 insertions, 13 deletions

diff --git a/spec/features/profiles/user_edit_profile_spec.rb b/spec/features/profiles/user_edit_profile_spec.rb
index 96bbe6f93f1..9e60b4995bd 100644
--- a/spec/features/profiles/user_edit_profile_spec.rb
+++ b/spec/features/profiles/user_edit_profile_spec.rb
@@ -8,6 +8,10 @@ describe 'User edit profile' do
     visit(profile_path)
   end
 
+  def submit_settings
+    click_button 'Update profile settings'
+  end
+
   it 'changes user profile' do
     fill_in 'user_skype', with: 'testskype'
     fill_in 'user_linkedin', with: 'testlinkedin'
@@ -16,7 +20,7 @@ describe 'User edit profile' do
     fill_in 'user_location', with: 'Ukraine'
     fill_in 'user_bio', with: 'I <3 GitLab'
     fill_in 'user_organization', with: 'GitLab'
-    click_button 'Update profile settings'
+    submit_settings
 
     expect(user.reload).to have_attributes(
       skype: 'testskype',
@@ -34,7 +38,7 @@ describe 'User edit profile' do
   context 'user avatar' do
     before do
       attach_file(:user_avatar, Rails.root.join('spec', 'fixtures', 'banana_sample.gif'))
-      click_button 'Update profile settings'
+      submit_settings
     end
 
     it 'changes user avatar' do
@@ -56,30 +60,75 @@ describe 'User edit profile' do
     end
   end
 
-  context 'user status' do
-    it 'hides user status when the feature is disabled' do
-      stub_feature_flags(user_status_form: false)
+  context 'user status', :js do
+    def select_emoji(emoji_name)
+      toggle_button = find('.js-toggle-emoji-menu')
+      toggle_button.click
+      emoji_button = find(%Q{.js-status-emoji-menu .js-emoji-btn gl-emoji[data-name="#{emoji_name}"]})
+      emoji_button.click
+    end
 
+    it 'shows the user status form' do
       visit(profile_path)
 
-      expect(page).not_to have_content('Current Status')
+      expect(page).to have_content('Current status')
     end
 
-    it 'shows the status form when the feature is enabled' do
-      stub_feature_flags(user_status_form: true)
+    it 'adds emoji to user status' do
+      emoji = 'biohazard'
+      visit(profile_path)
+      select_emoji(emoji)
+      submit_settings
 
+      visit user_path(user)
+      within('.cover-status') do
+        expect(page).to have_emoji(emoji)
+      end
+    end
+
+    it 'adds message to user status' do
+      message = 'I have something to say'
       visit(profile_path)
+      fill_in 'js-status-message-field', with: message
+      submit_settings
+
+      visit user_path(user)
+      within('.cover-status') do
+        expect(page).to have_emoji('speech_balloon')
+        expect(page).to have_content message
+      end
+    end
 
-      expect(page).to have_content('Current Status')
+    it 'adds message and emoji to user status' do
+      emoji = 'tanabata_tree'
+      message = 'Playing outside'
+      visit(profile_path)
+      select_emoji(emoji)
+      fill_in 'js-status-message-field', with: message
+      submit_settings
+
+      visit user_path(user)
+      within('.cover-status') do
+        expect(page).to have_emoji(emoji)
+        expect(page).to have_content message
+      end
     end
 
-    it 'shows the status form when the feature is enabled by setting a cookie', :js do
-      stub_feature_flags(user_status_form: false)
-      set_cookie('feature_user_status_form', 'true')
+    it 'clears the user status' do
+      user_status = create(:user_status, user: user, message: 'Eating bread', emoji: 'stuffed_flatbread')
+
+      visit user_path(user)
+      within('.cover-status') do
+        expect(page).to have_emoji(user_status.emoji)
+        expect(page).to have_content user_status.message
+      end
 
       visit(profile_path)
+      click_button 'js-clear-user-status-button'
+      submit_settings
 
-      expect(page).to have_content('Current Status')
+      visit user_path(user)
+      expect(page).not_to have_selector '.cover-status'
     end
   end
 end
diff --git a/spec/javascripts/pages/profiles/show/emoji_menu_spec.js b/spec/javascripts/pages/profiles/show/emoji_menu_spec.js
new file mode 100644
index 00000000000..b70368fc92f
--- /dev/null
+++ b/spec/javascripts/pages/profiles/show/emoji_menu_spec.js
@@ -0,0 +1,117 @@
+import $ from 'jquery';
+import axios from '~/lib/utils/axios_utils';
+import EmojiMenu from '~/pages/profiles/show/emoji_menu';
+import { TEST_HOST } from 'spec/test_constants';
+
+describe('EmojiMenu', () => {
+  const dummyEmojiTag = '<dummy></tag>';
+  const dummyToggleButtonSelector = '.toggle-button-selector';
+  const dummyMenuClass = 'dummy-menu-class';
+
+  let emojiMenu;
+  let dummySelectEmojiCallback;
+  let dummyEmojiList;
+
+  beforeEach(() => {
+    dummySelectEmojiCallback = jasmine.createSpy('dummySelectEmojiCallback');
+    dummyEmojiList = {
+      glEmojiTag() {
+        return dummyEmojiTag;
+      },
+      normalizeEmojiName(emoji) {
+        return emoji;
+      },
+      isEmojiNameValid() {
+        return true;
+      },
+      getEmojiCategoryMap() {
+        return { dummyCategory: [] };
+      },
+    };
+
+    emojiMenu = new EmojiMenu(
+      dummyEmojiList,
+      dummyToggleButtonSelector,
+      dummyMenuClass,
+      dummySelectEmojiCallback,
+    );
+  });
+
+  afterEach(() => {
+    emojiMenu.destroy();
+  });
+
+  describe('addAward', () => {
+    const dummyAwardUrl = `${TEST_HOST}/award/url`;
+    const dummyEmoji = 'tropical_fish';
+    const dummyVotesBlock = () => $('<div />');
+
+    it('calls selectEmojiCallback', done => {
+      expect(dummySelectEmojiCallback).not.toHaveBeenCalled();
+
+      emojiMenu.addAward(dummyVotesBlock(), dummyAwardUrl, dummyEmoji, false, () => {
+        expect(dummySelectEmojiCallback).toHaveBeenCalledWith(dummyEmoji, dummyEmojiTag);
+        done();
+      });
+    });
+
+    it('does not make an axios requst', done => {
+      spyOn(axios, 'request').and.stub();
+
+      emojiMenu.addAward(dummyVotesBlock(), dummyAwardUrl, dummyEmoji, false, () => {
+        expect(axios.request).not.toHaveBeenCalled();
+        done();
+      });
+    });
+  });
+
+  describe('bindEvents', () => {
+    beforeEach(() => {
+      spyOn(emojiMenu, 'registerEventListener').and.stub();
+    });
+
+    it('binds event listeners to custom toggle button', () => {
+      emojiMenu.bindEvents();
+
+      expect(emojiMenu.registerEventListener).toHaveBeenCalledWith(
+        'one',
+        jasmine.anything(),
+        'mouseenter focus',
+        dummyToggleButtonSelector,
+        'mouseenter focus',
+        jasmine.anything(),
+      );
+      expect(emojiMenu.registerEventListener).toHaveBeenCalledWith(
+        'on',
+        jasmine.anything(),
+        'click',
+        dummyToggleButtonSelector,
+        jasmine.anything(),
+      );
+    });
+
+    it('binds event listeners to custom menu class', () => {
+      emojiMenu.bindEvents();
+
+      expect(emojiMenu.registerEventListener).toHaveBeenCalledWith(
+        'on',
+        jasmine.anything(),
+        'click',
+        `.js-awards-block .js-emoji-btn, .${dummyMenuClass} .js-emoji-btn`,
+        jasmine.anything(),
+      );
+    });
+  });
+
+  describe('createEmojiMenu', () => {
+    it('renders the menu with custom menu class', () => {
+      const menuElement = () =>
+        document.body.querySelector(`.emoji-menu.${dummyMenuClass} .emoji-menu-content`);
+      expect(menuElement()).toBe(null);
+
+      emojiMenu.createEmojiMenu();
+
+      expect(menuElement()).not.toBe(null);
+    });
+  });
+});