From 1c10e0147f51198c090af135c2a96f6f6077cebe Mon Sep 17 00:00:00 2001 From: Winnie Hellmann Date: Tue, 31 Jul 2018 10:21:53 +0200 Subject: Restyle status message input on profile settings --- spec/features/profiles/user_edit_profile_spec.rb | 75 ++++++++++--- .../pages/profiles/show/emoji_menu_spec.js | 117 +++++++++++++++++++++ 2 files changed, 179 insertions(+), 13 deletions(-) create mode 100644 spec/javascripts/pages/profiles/show/emoji_menu_spec.js (limited to 'spec') 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 = ''; + 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 = () => $('
'); + + 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); + }); + }); +}); -- cgit v1.2.1