diff --git a/app/assets/javascripts/awards_handler.coffee b/app/assets/javascripts/awards_handler.coffee index e01c5d68c43..4f4009e6db0 100644 --- a/app/assets/javascripts/awards_handler.coffee +++ b/app/assets/javascripts/awards_handler.coffee @@ -202,7 +202,7 @@ class @AwardsHandler getAwardTooltip: ($awardBlock) -> - return $awardBlock.attr('data-original-title') or $awardBlock.attr('data-title') + return $awardBlock.attr('data-original-title') or $awardBlock.attr('data-title') or '' removeMeFromUserList: ($emojiButton, emoji) -> @@ -222,7 +222,7 @@ class @AwardsHandler .attr 'data-original-title', newAuthors .attr 'data-title', newAuthors - @resetTooltip(awardBlock) + @resetTooltip awardBlock addMeToUserList: (votesBlock, emoji) -> @@ -232,21 +232,21 @@ class @AwardsHandler users = [] if origTitle - users = origTitle.trim().split(', ') + users = origTitle.trim().split ', ' - users.push('me') - awardBlock.attr('title', users.join(', ')) + users.push 'me' + awardBlock.attr 'title', users.join ', ' - @resetTooltip(awardBlock) + @resetTooltip awardBlock resetTooltip: (award) -> - award.tooltip('destroy') + + award.tooltip 'destroy' # 'destroy' call is asynchronous and there is no appropriate callback on it, this is why we need to set timeout. - setTimeout (-> - award.tooltip() - ), 200 + cb = -> award.tooltip() + setTimeout cb, 200 createEmoji_: (votesBlock, emoji) -> diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 53a9d1144c8..4ebaf227279 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -122,7 +122,7 @@ ul.notes { .note-awards { .js-awards-block { - padding: 2px 0; + padding: 2px; margin-top: 10px; } diff --git a/spec/javascripts/awards_handler_spec.js.coffee b/spec/javascripts/awards_handler_spec.js.coffee new file mode 100644 index 00000000000..5a95ae52dc8 --- /dev/null +++ b/spec/javascripts/awards_handler_spec.js.coffee @@ -0,0 +1,202 @@ +#= require awards_handler +#= require jquery +#= require jquery.cookie +#= require ./fixtures/emoji_menu + +awardsHandler = null +window.gl or= {} +window.gl.awardMenuUrl = '/emojis' +window.emojiAliases = -> return { '+1': 'thumbsup', '-1': 'thumbsdown' } + + +lazyAssert = (done, assertFn) -> + + setTimeout -> # Maybe jasmine.clock here? + assertFn() + done() + , 333 + + +describe 'AwardsHandler', -> + + fixture.preload 'awards_handler.html' + + beforeEach -> + fixture.load 'awards_handler.html' + awardsHandler = new AwardsHandler + spyOn(awardsHandler, 'postEmoji').and.callFake (url, emoji, cb) => cb() + spyOn(jQuery, 'get').and.callFake (req, cb) -> + expect(req).toBe '/emojis' + cb window.emojiMenu + + + describe '::showEmojiMenu', -> + + it 'should show emoji menu when Add emoji button clicked', (done) -> + + $('.js-add-award').eq(0).click() + + lazyAssert done, -> + $emojiMenu = $ '.emoji-menu' + expect($emojiMenu.length).toBe 1 + expect($emojiMenu.hasClass('is-visible')).toBe yes + expect($emojiMenu.find('#emoji_search').length).toBe 1 + expect($('.js-awards-block.current').length).toBe 1 + + + it 'should also show emoji menu for the smiley icon in notes', (done) -> + + $('.note-action-button').click() + + lazyAssert done, -> + $emojiMenu = $ '.emoji-menu' + expect($emojiMenu.length).toBe 1 + + + it 'should remove emoji menu when body is clicked', (done) -> + + $('.js-add-award').eq(0).click() + + lazyAssert done, -> + $emojiMenu = $('.emoji-menu') + $('body').click() + expect($emojiMenu.length).toBe 1 + expect($emojiMenu.hasClass('is-visible')).toBe no + expect($('.js-awards-block.current').length).toBe 0 + + + describe '::addAwardToEmojiBar', -> + + it 'should add emoji to votes block', -> + + $votesBlock = $('.js-awards-block').eq 0 + awardsHandler.addAwardToEmojiBar $votesBlock, 'heart', no + + $emojiButton = $votesBlock.find '[data-emoji=heart]' + + expect($emojiButton.length).toBe 1 + expect($emojiButton.next('.js-counter').text()).toBe '1' + expect($votesBlock.hasClass('hidden')).toBe no + + + it 'should remove the emoji when we click again', -> + + $votesBlock = $('.js-awards-block').eq 0 + awardsHandler.addAwardToEmojiBar $votesBlock, 'heart', no + awardsHandler.addAwardToEmojiBar $votesBlock, 'heart', no + $emojiButton = $votesBlock.find '[data-emoji=heart]' + + expect($emojiButton.length).toBe 0 + + + it 'should decrement the emoji counter', -> + + $votesBlock = $('.js-awards-block').eq 0 + awardsHandler.addAwardToEmojiBar $votesBlock, 'heart', no + + $emojiButton = $votesBlock.find '[data-emoji=heart]' + $emojiButton.next('.js-counter').text 5 + + awardsHandler.addAwardToEmojiBar $votesBlock, 'heart', no + + expect($emojiButton.length).toBe 1 + expect($emojiButton.next('.js-counter').text()).toBe '4' + + + describe '::getAwardUrl', -> + + it 'should return the url for request', -> + + expect(awardsHandler.getAwardUrl()).toBe '/gitlab-org/gitlab-test/issues/8/toggle_award_emoji' + + + describe '::addAward and ::checkMutuality', -> + + it 'should handle :+1: and :-1: mutuality', -> + + awardUrl = awardsHandler.getAwardUrl() + $votesBlock = $('.js-awards-block').eq 0 + $thumbsUpEmoji = $votesBlock.find('[data-emoji=thumbsup]').parent() + $thumbsDownEmoji = $votesBlock.find('[data-emoji=thumbsdown]').parent() + + awardsHandler.addAward $votesBlock, awardUrl, 'thumbsup', no + + expect($thumbsUpEmoji.hasClass('active')).toBe yes + expect($thumbsDownEmoji.hasClass('active')).toBe no + + $thumbsUpEmoji.tooltip() + $thumbsDownEmoji.tooltip() + + awardsHandler.addAward $votesBlock, awardUrl, 'thumbsdown', yes + + expect($thumbsUpEmoji.hasClass('active')).toBe no + expect($thumbsDownEmoji.hasClass('active')).toBe yes + + + describe '::removeEmoji', -> + + it 'should remove emoji', -> + + awardUrl = awardsHandler.getAwardUrl() + $votesBlock = $('.js-awards-block').eq 0 + + awardsHandler.addAward $votesBlock, awardUrl, 'fire', no + expect($votesBlock.find('[data-emoji=fire]').length).toBe 1 + + awardsHandler.removeEmoji $votesBlock.find('[data-emoji=fire]').closest('button') + expect($votesBlock.find('[data-emoji=fire]').length).toBe 0 + + + describe 'search', -> + + it 'should filter the emoji', -> + + $('.js-add-award').eq(0).click() + + expect($('[data-emoji=angel]').is(':visible')).toBe yes + expect($('[data-emoji=anger]').is(':visible')).toBe yes + + $('#emoji_search').val('ali').trigger 'keyup' + + expect($('[data-emoji=angel]').is(':visible')).toBe no + expect($('[data-emoji=anger]').is(':visible')).toBe no + expect($('[data-emoji=alien]').is(':visible')).toBe yes + expect($('h5.emoji-search').is(':visible')).toBe yes + + + describe 'emoji menu', -> + + selector = '[data-emoji=sunglasses]' + + openEmojiMenuAndAddEmoji = -> + + $('.js-add-award').eq(0).click() + + $menu = $ '.emoji-menu' + $block = $ '.js-awards-block' + $emoji = $menu.find ".emoji-menu-list-item #{selector}" + + expect($emoji.length).toBe 1 + expect($block.find(selector).length).toBe 0 + + $emoji.click() + + expect($menu.hasClass('.is-visible')).toBe no + expect($block.find(selector).length).toBe 1 + + + it 'should add selected emoji to awards block', -> + + openEmojiMenuAndAddEmoji() + + + it 'should remove already selected emoji', -> + + openEmojiMenuAndAddEmoji() + $('.js-add-award').eq(0).click() + + $block = $ '.js-awards-block' + $emoji = $('.emoji-menu').find ".emoji-menu-list-item #{selector}" + + $emoji.click() + expect($block.find(selector).length).toBe 0 diff --git a/spec/javascripts/behaviors/quick_submit_spec.js.coffee b/spec/javascripts/behaviors/quick_submit_spec.js.coffee index 09708c12ed4..d3b003a328a 100644 --- a/spec/javascripts/behaviors/quick_submit_spec.js.coffee +++ b/spec/javascripts/behaviors/quick_submit_spec.js.coffee @@ -14,17 +14,17 @@ describe 'Quick Submit behavior', -> } it 'does not respond to other keyCodes', -> - $('input').trigger(keydownEvent(keyCode: 32)) + $('input.quick-submit-input').trigger(keydownEvent(keyCode: 32)) expect(@spies.submit).not.toHaveBeenTriggered() it 'does not respond to Enter alone', -> - $('input').trigger(keydownEvent(ctrlKey: false, metaKey: false)) + $('input.quick-submit-input').trigger(keydownEvent(ctrlKey: false, metaKey: false)) expect(@spies.submit).not.toHaveBeenTriggered() it 'does not respond to repeated events', -> - $('input').trigger(keydownEvent(repeat: true)) + $('input.quick-submit-input').trigger(keydownEvent(repeat: true)) expect(@spies.submit).not.toHaveBeenTriggered() @@ -38,26 +38,26 @@ describe 'Quick Submit behavior', -> # only run the tests that apply to the current platform if navigator.userAgent.match(/Macintosh/) it 'responds to Meta+Enter', -> - $('input').trigger(keydownEvent()) + $('input.quick-submit-input').trigger(keydownEvent()) expect(@spies.submit).toHaveBeenTriggered() it 'excludes other modifier keys', -> - $('input').trigger(keydownEvent(altKey: true)) - $('input').trigger(keydownEvent(ctrlKey: true)) - $('input').trigger(keydownEvent(shiftKey: true)) + $('input.quick-submit-input').trigger(keydownEvent(altKey: true)) + $('input.quick-submit-input').trigger(keydownEvent(ctrlKey: true)) + $('input.quick-submit-input').trigger(keydownEvent(shiftKey: true)) expect(@spies.submit).not.toHaveBeenTriggered() else it 'responds to Ctrl+Enter', -> - $('input').trigger(keydownEvent()) + $('input.quick-submit-input').trigger(keydownEvent()) expect(@spies.submit).toHaveBeenTriggered() it 'excludes other modifier keys', -> - $('input').trigger(keydownEvent(altKey: true)) - $('input').trigger(keydownEvent(metaKey: true)) - $('input').trigger(keydownEvent(shiftKey: true)) + $('input.quick-submit-input').trigger(keydownEvent(altKey: true)) + $('input.quick-submit-input').trigger(keydownEvent(metaKey: true)) + $('input.quick-submit-input').trigger(keydownEvent(shiftKey: true)) expect(@spies.submit).not.toHaveBeenTriggered() diff --git a/spec/javascripts/fixtures/awards_handler.html.haml b/spec/javascripts/fixtures/awards_handler.html.haml new file mode 100644 index 00000000000..d55936ee4f9 --- /dev/null +++ b/spec/javascripts/fixtures/awards_handler.html.haml @@ -0,0 +1,52 @@ +.issue-details.issuable-details + .detail-page-description.content-block + %h2.title Quibusdam sint officiis earum molestiae ipsa autem voluptatem nisi rem. + .description.js-task-list-container.is-task-list-enabled + .wiki + %p Qui exercitationem magnam optio quae fuga earum odio. + %textarea.hidden.js-task-list-field Qui exercitationem magnam optio quae fuga earum odio. + %small.edited-text + .content-block.content-block-small + .awards.js-awards-block{"data-award-url" => "/gitlab-org/gitlab-test/issues/8/toggle_award_emoji"} + %button.award-control.btn.js-emoji-btn{"data-placement" => "bottom", "data-title" => "", :type => "button"} + .icon.emoji-icon.emoji-1F44D{"data-aliases" => "", "data-emoji" => "thumbsup", "data-unicode-name" => "1F44D", :title => "thumbsup"} + %span.award-control-text.js-counter 0 + %button.award-control.btn.js-emoji-btn{"data-placement" => "bottom", "data-title" => "", :type => "button"} + .icon.emoji-icon.emoji-1F44E{"data-aliases" => "", "data-emoji" => "thumbsdown", "data-unicode-name" => "1F44E", :title => "thumbsdown"} + %span.award-control-text.js-counter 0 + .award-menu-holder.js-award-holder + %button.btn.award-control.js-add-award{:type => "button"} + %i.fa.fa-smile-o.award-control-icon.award-control-icon-normal + %i.fa.fa-spinner.fa-spin.award-control-icon.award-control-icon-loading + %span.award-control-text Add + %section.issuable-discussion + #notes + %ul#notes-list.notes.main-notes-list.timeline + %li#note_348.note.note-row-348.timeline-entry{"data-author-id" => "18", "data-editable" => ""} + .timeline-entry-inner + .timeline-icon + %a{:href => "/u/agustin"} + %img.avatar.s40{:alt => "", :src => "#"}/ + .timeline-content + .note-header + %a.author_link{:href => "/u/agustin"} + %span.author Brenna Stokes + .inline.note-headline-light + @agustin commented + %a{:href => "#note_348"} + %time 11 days ago + .note-actions + %span.note-role Reporter + %a.note-action-button.note-emoji-button.js-add-award.js-note-emoji{"data-position" => "right", :href => "#", :title => "Award Emoji"} + %i.fa.fa-spinner.fa-spin + %i.fa.fa-smile-o + .js-task-list-container.note-body.is-task-list-enabled + .note-text + %p Suscipit sunt quia quisquam sed eveniet ipsam. + .note-awards + .awards.hidden.js-awards-block{"data-award-url" => "/gitlab-org/gitlab-test/notes/348/toggle_award_emoji"} + .award-menu-holder.js-award-holder + %button.btn.award-control.js-add-award{:type => "button"} + %i.fa.fa-smile-o.award-control-icon.award-control-icon-normal + %i.fa.fa-spinner.fa-spin.award-control-icon.award-control-icon-loading + %span.award-control-text Add diff --git a/spec/javascripts/fixtures/behaviors/quick_submit.html.haml b/spec/javascripts/fixtures/behaviors/quick_submit.html.haml index e3788bee813..dc2ceed42f4 100644 --- a/spec/javascripts/fixtures/behaviors/quick_submit.html.haml +++ b/spec/javascripts/fixtures/behaviors/quick_submit.html.haml @@ -1,5 +1,5 @@ %form.js-quick-submit{ action: '/foo' } - %input{ type: 'text' } + %input{ type: 'text', class: 'quick-submit-input'} %textarea %input{ type: 'submit'} Submit diff --git a/spec/javascripts/fixtures/emoji_menu.coffee b/spec/javascripts/fixtures/emoji_menu.coffee new file mode 100644 index 00000000000..e529dd5f1cd --- /dev/null +++ b/spec/javascripts/fixtures/emoji_menu.coffee @@ -0,0 +1,957 @@ +window.emojiMenu = """ +
+
+ +
+ Emoticons +
+ +
+
+""" diff --git a/spec/javascripts/new_branch_spec.js.coffee b/spec/javascripts/new_branch_spec.js.coffee index f2ce85efcdc..ce773793817 100644 --- a/spec/javascripts/new_branch_spec.js.coffee +++ b/spec/javascripts/new_branch_spec.js.coffee @@ -1,4 +1,4 @@ -#= require jquery-ui +#= require jquery-ui/autocomplete #= require new_branch_form describe 'Branch', ->