debian-mirror-gitlab/spec/frontend/awards_handler_spec.js

412 lines
13 KiB
JavaScript
Raw Normal View History

2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2022-07-16 23:28:13 +05:30
import Cookies from '~/lib/utils/cookies';
import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
2022-01-26 12:08:38 +05:30
import { initEmojiMock, clearEmojiMock } from 'helpers/emoji';
2020-10-24 23:57:45 +05:30
import { useFakeRequestAnimationFrame } from 'helpers/fake_request_animation_frame';
2017-09-10 17:25:29 +05:30
import loadAwardsHandler from '~/awards_handler';
2016-09-13 17:45:13 +05:30
2018-12-13 13:39:08 +05:30
window.gl = window.gl || {};
window.gon = window.gon || {};
2016-09-13 17:45:13 +05:30
2018-12-13 13:39:08 +05:30
let awardsHandler = null;
const urlRoot = gon.relative_url_root;
2016-09-13 17:45:13 +05:30
2020-06-23 00:09:42 +05:30
describe('AwardsHandler', () => {
2020-07-28 23:09:34 +05:30
useFakeRequestAnimationFrame();
2020-11-24 15:15:51 +05:30
const emojiData = {
'8ball': {
c: 'activity',
e: '🎱',
d: 'billiards',
u: '6.0',
},
grinning: {
c: 'people',
e: '😀',
d: 'grinning face',
u: '6.1',
},
angel: {
c: 'people',
e: '👼',
d: 'baby angel',
u: '6.0',
},
anger: {
c: 'symbols',
e: '💢',
d: 'anger symbol',
u: '6.0',
},
alien: {
c: 'people',
e: '👽',
d: 'extraterrestrial alien',
u: '6.0',
},
sunglasses: {
c: 'people',
e: '😎',
d: 'smiling face with sunglasses',
u: '6.0',
},
2021-03-11 19:13:27 +05:30
grey_question: {
c: 'symbols',
e: '❔',
d: 'white question mark ornament',
u: '6.0',
},
2022-07-23 23:45:48 +05:30
thumbsup: {
c: 'people',
e: '👍',
d: 'thumbs up sign',
u: '6.0',
},
thumbsdown: {
c: 'people',
e: '👎',
d: 'thumbs down sign',
u: '6.0',
},
2020-11-24 15:15:51 +05:30
};
2020-07-28 23:09:34 +05:30
const openAndWaitForEmojiMenu = (sel = '.js-add-award') => {
2021-03-08 18:12:59 +05:30
$(sel).eq(0).click();
2020-07-28 23:09:34 +05:30
2020-11-24 15:15:51 +05:30
jest.runOnlyPendingTimers();
2020-07-28 23:09:34 +05:30
const $menu = $('.emoji-menu');
2021-03-08 18:12:59 +05:30
return new Promise((resolve) => {
2020-07-28 23:09:34 +05:30
$menu.one('build-emoji-menu-finish', () => {
resolve();
2018-12-13 13:39:08 +05:30
});
2020-07-28 23:09:34 +05:30
});
};
beforeEach(async () => {
2022-01-26 12:08:38 +05:30
await initEmojiMock(emojiData);
2020-07-28 23:09:34 +05:30
2022-07-16 23:28:13 +05:30
loadHTMLFixture('snippets/show.html');
2020-07-28 23:09:34 +05:30
awardsHandler = await loadAwardsHandler(true);
jest.spyOn(awardsHandler, 'postEmoji').mockImplementation((button, url, emoji, cb) => cb());
2018-12-13 13:39:08 +05:30
});
2016-09-13 17:45:13 +05:30
2020-06-23 00:09:42 +05:30
afterEach(() => {
2018-12-13 13:39:08 +05:30
// restore original url root value
gon.relative_url_root = urlRoot;
2016-09-13 17:45:13 +05:30
2022-01-26 12:08:38 +05:30
clearEmojiMock();
2020-07-28 23:09:34 +05:30
2018-12-13 13:39:08 +05:30
// Undo what we did to the shared <body>
$('body').removeAttr('data-page');
2017-08-17 22:00:37 +05:30
2018-12-13 13:39:08 +05:30
awardsHandler.destroy();
2022-07-16 23:28:13 +05:30
resetHTMLFixture();
2018-12-13 13:39:08 +05:30
});
2017-08-17 22:00:37 +05:30
2020-06-23 00:09:42 +05:30
describe('::showEmojiMenu', () => {
2020-07-28 23:09:34 +05:30
it('should show emoji menu when Add emoji button clicked', async () => {
await openAndWaitForEmojiMenu();
2018-03-17 18:26:18 +05:30
2020-07-28 23:09:34 +05:30
const $emojiMenu = $('.emoji-menu');
expect($emojiMenu.length).toBe(1);
expect($emojiMenu.hasClass('is-visible')).toBe(true);
expect($emojiMenu.find('.js-emoji-menu-search').length).toBe(1);
expect($('.js-awards-block.current').length).toBe(1);
2016-09-13 17:45:13 +05:30
});
2018-11-08 19:23:39 +05:30
2020-07-28 23:09:34 +05:30
it('should also show emoji menu for the smiley icon in notes', async () => {
await openAndWaitForEmojiMenu('.js-add-award.note-action-button');
2018-12-13 13:39:08 +05:30
2020-07-28 23:09:34 +05:30
const $emojiMenu = $('.emoji-menu');
expect($emojiMenu.length).toBe(1);
2016-09-13 17:45:13 +05:30
});
2018-12-13 13:39:08 +05:30
2020-07-28 23:09:34 +05:30
it('should remove emoji menu when body is clicked', async () => {
await openAndWaitForEmojiMenu();
2018-12-13 13:39:08 +05:30
2020-07-28 23:09:34 +05:30
const $emojiMenu = $('.emoji-menu');
$('body').click();
expect($emojiMenu.length).toBe(1);
expect($emojiMenu.hasClass('is-visible')).toBe(false);
expect($('.js-awards-block.current').length).toBe(0);
2017-08-17 22:00:37 +05:30
});
2018-12-13 13:39:08 +05:30
2020-07-28 23:09:34 +05:30
it('should not remove emoji menu when search is clicked', async () => {
await openAndWaitForEmojiMenu();
2018-12-13 13:39:08 +05:30
2020-07-28 23:09:34 +05:30
const $emojiMenu = $('.emoji-menu');
$('.emoji-search').click();
expect($emojiMenu.length).toBe(1);
expect($emojiMenu.hasClass('is-visible')).toBe(true);
expect($('.js-awards-block.current').length).toBe(1);
2016-09-13 17:45:13 +05:30
});
2018-12-13 13:39:08 +05:30
});
2020-06-23 00:09:42 +05:30
describe('::addAwardToEmojiBar', () => {
it('should add emoji to votes block', () => {
2018-12-13 13:39:08 +05:30
const $votesBlock = $('.js-awards-block').eq(0);
awardsHandler.addAwardToEmojiBar($votesBlock, 'heart', false);
const $emojiButton = $votesBlock.find('[data-name=heart]');
expect($emojiButton.length).toBe(1);
expect($emojiButton.next('.js-counter').text()).toBe('1');
expect($votesBlock.hasClass('hidden')).toBe(false);
2016-09-13 17:45:13 +05:30
});
2018-12-13 13:39:08 +05:30
2020-06-23 00:09:42 +05:30
it('should remove the emoji when we click again', () => {
2018-12-13 13:39:08 +05:30
const $votesBlock = $('.js-awards-block').eq(0);
awardsHandler.addAwardToEmojiBar($votesBlock, 'heart', false);
awardsHandler.addAwardToEmojiBar($votesBlock, 'heart', false);
const $emojiButton = $votesBlock.find('[data-name=heart]');
expect($emojiButton.length).toBe(0);
2016-09-13 17:45:13 +05:30
});
2018-12-13 13:39:08 +05:30
2020-06-23 00:09:42 +05:30
it('should decrement the emoji counter', () => {
2018-12-13 13:39:08 +05:30
const $votesBlock = $('.js-awards-block').eq(0);
awardsHandler.addAwardToEmojiBar($votesBlock, 'heart', false);
const $emojiButton = $votesBlock.find('[data-name=heart]');
$emojiButton.next('.js-counter').text(5);
awardsHandler.addAwardToEmojiBar($votesBlock, 'heart', false);
expect($emojiButton.length).toBe(1);
expect($emojiButton.next('.js-counter').text()).toBe('4');
2016-09-29 09:46:39 +05:30
});
2018-12-13 13:39:08 +05:30
});
2020-06-23 00:09:42 +05:30
describe('::getAwardUrl', () => {
it('returns the url for request', () => {
2022-11-25 23:54:43 +05:30
expect(awardsHandler.getAwardUrl()).toBe(
document.querySelector('.js-awards-block').dataset.awardUrl,
);
2018-12-13 13:39:08 +05:30
});
});
2020-06-23 00:09:42 +05:30
describe('::addAward and ::checkMutuality', () => {
it('should handle :+1: and :-1: mutuality', () => {
2018-12-13 13:39:08 +05:30
const awardUrl = awardsHandler.getAwardUrl();
const $votesBlock = $('.js-awards-block').eq(0);
const $thumbsUpEmoji = $votesBlock.find('[data-name=thumbsup]').parent();
const $thumbsDownEmoji = $votesBlock.find('[data-name=thumbsdown]').parent();
awardsHandler.addAward($votesBlock, awardUrl, 'thumbsup', false);
expect($thumbsUpEmoji.hasClass('active')).toBe(true);
expect($thumbsDownEmoji.hasClass('active')).toBe(false);
awardsHandler.addAward($votesBlock, awardUrl, 'thumbsdown', true);
expect($thumbsUpEmoji.hasClass('active')).toBe(false);
expect($thumbsDownEmoji.hasClass('active')).toBe(true);
});
});
2020-06-23 00:09:42 +05:30
describe('::removeEmoji', () => {
it('should remove emoji', () => {
2018-12-13 13:39:08 +05:30
const awardUrl = awardsHandler.getAwardUrl();
const $votesBlock = $('.js-awards-block').eq(0);
awardsHandler.addAward($votesBlock, awardUrl, 'fire', false);
expect($votesBlock.find('[data-name=fire]').length).toBe(1);
awardsHandler.removeEmoji($votesBlock.find('[data-name=fire]').closest('button'));
expect($votesBlock.find('[data-name=fire]').length).toBe(0);
});
});
2020-06-23 00:09:42 +05:30
describe('::addYouToUserList', () => {
it('should prepend "You" to the award tooltip', () => {
2018-12-13 13:39:08 +05:30
const awardUrl = awardsHandler.getAwardUrl();
const $votesBlock = $('.js-awards-block').eq(0);
const $thumbsUpEmoji = $votesBlock.find('[data-name=thumbsup]').parent();
$thumbsUpEmoji.attr('data-title', 'sam, jerry, max, and andy');
awardsHandler.addAward($votesBlock, awardUrl, 'thumbsup', false);
2021-04-17 20:07:23 +05:30
expect($thumbsUpEmoji.attr('title')).toBe('You, sam, jerry, max, and andy');
2018-12-13 13:39:08 +05:30
});
2020-06-23 00:09:42 +05:30
it('handles the special case where "You" is not cleanly comma separated', () => {
2018-12-13 13:39:08 +05:30
const awardUrl = awardsHandler.getAwardUrl();
const $votesBlock = $('.js-awards-block').eq(0);
const $thumbsUpEmoji = $votesBlock.find('[data-name=thumbsup]').parent();
$thumbsUpEmoji.attr('data-title', 'sam');
awardsHandler.addAward($votesBlock, awardUrl, 'thumbsup', false);
2021-04-17 20:07:23 +05:30
expect($thumbsUpEmoji.attr('title')).toBe('You and sam');
2018-12-13 13:39:08 +05:30
});
});
2020-06-23 00:09:42 +05:30
describe('::removeYouToUserList', () => {
it('removes "You" from the front of the tooltip', () => {
2018-12-13 13:39:08 +05:30
const awardUrl = awardsHandler.getAwardUrl();
const $votesBlock = $('.js-awards-block').eq(0);
const $thumbsUpEmoji = $votesBlock.find('[data-name=thumbsup]').parent();
$thumbsUpEmoji.attr('data-title', 'You, sam, jerry, max, and andy');
$thumbsUpEmoji.addClass('active');
awardsHandler.addAward($votesBlock, awardUrl, 'thumbsup', false);
2021-04-17 20:07:23 +05:30
expect($thumbsUpEmoji.attr('title')).toBe('sam, jerry, max, and andy');
2018-12-13 13:39:08 +05:30
});
2020-06-23 00:09:42 +05:30
it('handles the special case where "You" is not cleanly comma separated', () => {
2018-12-13 13:39:08 +05:30
const awardUrl = awardsHandler.getAwardUrl();
const $votesBlock = $('.js-awards-block').eq(0);
const $thumbsUpEmoji = $votesBlock.find('[data-name=thumbsup]').parent();
$thumbsUpEmoji.attr('data-title', 'You and sam');
$thumbsUpEmoji.addClass('active');
awardsHandler.addAward($votesBlock, awardUrl, 'thumbsup', false);
2021-04-17 20:07:23 +05:30
expect($thumbsUpEmoji.attr('title')).toBe('sam');
2018-12-13 13:39:08 +05:30
});
});
describe('::searchEmojis', () => {
2020-07-28 23:09:34 +05:30
it('should filter the emoji', async () => {
await openAndWaitForEmojiMenu();
expect($('[data-name=angel]').is(':visible')).toBe(true);
expect($('[data-name=anger]').is(':visible')).toBe(true);
awardsHandler.searchEmojis('ali');
expect($('[data-name=angel]').is(':visible')).toBe(false);
expect($('[data-name=anger]').is(':visible')).toBe(false);
expect($('[data-name=alien]').is(':visible')).toBe(true);
expect($('.js-emoji-menu-search').val()).toBe('ali');
2018-12-13 13:39:08 +05:30
});
2020-07-28 23:09:34 +05:30
it('should clear the search when searching for nothing', async () => {
await openAndWaitForEmojiMenu();
awardsHandler.searchEmojis('ali');
expect($('[data-name=angel]').is(':visible')).toBe(false);
expect($('[data-name=anger]').is(':visible')).toBe(false);
expect($('[data-name=alien]').is(':visible')).toBe(true);
awardsHandler.searchEmojis('');
expect($('[data-name=angel]').is(':visible')).toBe(true);
expect($('[data-name=anger]').is(':visible')).toBe(true);
expect($('[data-name=alien]').is(':visible')).toBe(true);
expect($('.js-emoji-menu-search').val()).toBe('');
2018-12-13 13:39:08 +05:30
});
2021-01-03 14:25:43 +05:30
it('should filter by emoji description', async () => {
await openAndWaitForEmojiMenu();
awardsHandler.searchEmojis('baby');
expect($('[data-name=angel]').is(':visible')).toBe(true);
});
it('should filter by emoji unicode value', async () => {
await openAndWaitForEmojiMenu();
awardsHandler.searchEmojis('👼');
expect($('[data-name=angel]').is(':visible')).toBe(true);
});
2022-07-23 23:45:48 +05:30
it('should show positive intent emoji first', async () => {
await openAndWaitForEmojiMenu();
awardsHandler.searchEmojis('thumb');
const $menu = $('.emoji-menu');
const $thumbsUpItem = $menu.find('[data-name=thumbsup]');
const $thumbsDownItem = $menu.find('[data-name=thumbsdown]');
expect($thumbsUpItem.is(':visible')).toBe(true);
expect($thumbsDownItem.is(':visible')).toBe(true);
expect($thumbsUpItem.parents('.emoji-menu-list-item').index()).toBeLessThan(
$thumbsDownItem.parents('.emoji-menu-list-item').index(),
);
});
2018-12-13 13:39:08 +05:30
});
2020-06-23 00:09:42 +05:30
describe('emoji menu', () => {
2018-12-13 13:39:08 +05:30
const emojiSelector = '[data-name="sunglasses"]';
2020-07-28 23:09:34 +05:30
2020-06-23 00:09:42 +05:30
const openEmojiMenuAndAddEmoji = () => {
2018-12-13 13:39:08 +05:30
return openAndWaitForEmojiMenu().then(() => {
const $menu = $('.emoji-menu');
const $block = $('.js-awards-block');
const $emoji = $menu.find(`.emoji-menu-list:not(.frequent-emojis) ${emojiSelector}`);
expect($emoji.length).toBe(1);
expect($block.find(emojiSelector).length).toBe(0);
$emoji.click();
expect($menu.hasClass('.is-visible')).toBe(false);
expect($block.find(emojiSelector).length).toBe(1);
2016-09-29 09:46:39 +05:30
});
2018-12-13 13:39:08 +05:30
};
2020-07-28 23:09:34 +05:30
it('should add selected emoji to awards block', async () => {
await openEmojiMenuAndAddEmoji();
2016-09-29 09:46:39 +05:30
});
2017-08-17 22:00:37 +05:30
2020-07-28 23:09:34 +05:30
it('should remove already selected emoji', async () => {
await openEmojiMenuAndAddEmoji();
2021-03-08 18:12:59 +05:30
$('.js-add-award').eq(0).click();
2020-07-28 23:09:34 +05:30
const $block = $('.js-awards-block');
const $emoji = $('.emoji-menu').find(
`.emoji-menu-list:not(.frequent-emojis) ${emojiSelector}`,
);
$emoji.click();
expect($block.find(emojiSelector).length).toBe(0);
2016-09-13 17:45:13 +05:30
});
2018-12-13 13:39:08 +05:30
});
2017-08-17 22:00:37 +05:30
2020-06-23 00:09:42 +05:30
describe('frequently used emojis', () => {
2018-12-13 13:39:08 +05:30
beforeEach(() => {
// Clear it out
Cookies.set('frequently_used_emojis', '');
});
2017-08-17 22:00:37 +05:30
2020-07-28 23:09:34 +05:30
it('shouldn\'t have any "Frequently used" heading if no frequently used emojis', async () => {
await openAndWaitForEmojiMenu();
const emojiMenu = document.querySelector('.emoji-menu');
2021-03-08 18:12:59 +05:30
Array.prototype.forEach.call(emojiMenu.querySelectorAll('.emoji-menu-title'), (title) => {
2020-07-28 23:09:34 +05:30
expect(title.textContent.trim().toLowerCase()).not.toBe('frequently used');
});
2018-12-13 13:39:08 +05:30
});
2017-08-17 22:00:37 +05:30
2020-07-28 23:09:34 +05:30
it('should have any frequently used section when there are frequently used emojis', async () => {
2018-12-13 13:39:08 +05:30
awardsHandler.addEmojiToFrequentlyUsedList('8ball');
2017-08-17 22:00:37 +05:30
2020-07-28 23:09:34 +05:30
await openAndWaitForEmojiMenu();
const emojiMenu = document.querySelector('.emoji-menu');
const hasFrequentlyUsedHeading = Array.prototype.some.call(
emojiMenu.querySelectorAll('.emoji-menu-title'),
2021-03-08 18:12:59 +05:30
(title) => title.textContent.trim().toLowerCase() === 'frequently used',
2020-07-28 23:09:34 +05:30
);
expect(hasFrequentlyUsedHeading).toBe(true);
2018-12-13 13:39:08 +05:30
});
2017-08-17 22:00:37 +05:30
2020-06-23 00:09:42 +05:30
it('should disregard invalid frequently used emoji that are being attempted to be added', () => {
2018-12-13 13:39:08 +05:30
awardsHandler.addEmojiToFrequentlyUsedList('8ball');
awardsHandler.addEmojiToFrequentlyUsedList('invalid_emoji');
awardsHandler.addEmojiToFrequentlyUsedList('grinning');
2017-08-17 22:00:37 +05:30
2018-12-13 13:39:08 +05:30
expect(awardsHandler.getFrequentlyUsedEmojis()).toEqual(['8ball', 'grinning']);
});
2020-06-23 00:09:42 +05:30
it('should disregard invalid frequently used emoji already set in cookie', () => {
2018-12-13 13:39:08 +05:30
Cookies.set('frequently_used_emojis', '8ball,invalid_emoji,grinning');
expect(awardsHandler.getFrequentlyUsedEmojis()).toEqual(['8ball', 'grinning']);
2016-09-13 17:45:13 +05:30
});
});
2018-12-13 13:39:08 +05:30
});