gitlab-org--gitlab-foss/spec/frontend/awards_handler_spec.js

415 lines
14 KiB
JavaScript
Raw Normal View History

import $ from 'jquery';
import Cookies from 'js-cookie';
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
import loadAwardsHandler from '~/awards_handler';
import '~/lib/utils/common_utils';
import waitForPromises from './helpers/wait_for_promises';
import { EMOJI_VERSION } from '~/emoji';
2016-09-08 10:08:09 +00:00
2018-10-17 07:07:04 +00:00
window.gl = window.gl || {};
window.gon = window.gon || {};
let openAndWaitForEmojiMenu;
let mock;
2018-10-17 07:07:04 +00:00
let awardsHandler = null;
const urlRoot = gon.relative_url_root;
const lazyAssert = (done, assertFn) => {
jest.runOnlyPendingTimers();
waitForPromises()
.then(() => {
assertFn();
done();
})
.catch(e => {
throw e;
});
2018-10-17 07:07:04 +00:00
};
describe('AwardsHandler', () => {
const emojiData = getJSONFixture('emojis/emojis.json');
preloadFixtures('snippets/show.html');
beforeEach(done => {
mock = new MockAdapter(axios);
mock.onGet(`/-/emojis/${EMOJI_VERSION}/emojis.json`).reply(200, emojiData);
loadFixtures('snippets/show.html');
2018-10-17 07:07:04 +00:00
loadAwardsHandler(true)
.then(obj => {
awardsHandler = obj;
jest.spyOn(awardsHandler, 'postEmoji').mockImplementation((button, url, emoji, cb) => cb());
2018-10-17 07:07:04 +00:00
done();
})
.catch(done.fail);
2018-10-17 07:07:04 +00:00
let isEmojiMenuBuilt = false;
openAndWaitForEmojiMenu = () => {
2018-10-17 07:07:04 +00:00
return new Promise(resolve => {
if (isEmojiMenuBuilt) {
resolve();
} else {
$('.js-add-award')
.eq(0)
.click();
const $menu = $('.emoji-menu');
$menu.one('build-emoji-menu-finish', () => {
isEmojiMenuBuilt = true;
resolve();
});
}
});
};
});
2016-07-24 20:45:11 +00:00
afterEach(() => {
2018-10-17 07:07:04 +00:00
// restore original url root value
gon.relative_url_root = urlRoot;
2016-07-24 20:45:11 +00:00
mock.restore();
2018-10-17 07:07:04 +00:00
// Undo what we did to the shared <body>
$('body').removeAttr('data-page');
2016-07-24 20:45:11 +00:00
2018-10-17 07:07:04 +00:00
awardsHandler.destroy();
});
2016-07-24 20:45:11 +00:00
describe('::showEmojiMenu', () => {
it('should show emoji menu when Add emoji button clicked', done => {
2018-10-17 07:07:04 +00:00
$('.js-add-award')
.eq(0)
.click();
lazyAssert(done, () => {
2018-10-17 07:07:04 +00:00
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-07-24 20:45:11 +00:00
it('should also show emoji menu for the smiley icon in notes', done => {
2018-10-17 07:07:04 +00:00
$('.js-add-award.note-action-button').click();
lazyAssert(done, () => {
2018-10-17 07:07:04 +00:00
const $emojiMenu = $('.emoji-menu');
2016-07-24 20:45:11 +00:00
2018-10-17 07:07:04 +00:00
expect($emojiMenu.length).toBe(1);
});
});
it('should remove emoji menu when body is clicked', done => {
2018-10-17 07:07:04 +00:00
$('.js-add-award')
.eq(0)
.click();
lazyAssert(done, () => {
2018-10-17 07:07:04 +00:00
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);
});
});
it('should not remove emoji menu when search is clicked', done => {
2018-10-17 07:07:04 +00:00
$('.js-add-award')
.eq(0)
.click();
lazyAssert(done, () => {
2018-10-17 07:07:04 +00:00
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);
});
});
});
describe('::addAwardToEmojiBar', () => {
it('should add emoji to votes block', () => {
2018-10-17 07:07:04 +00:00
const $votesBlock = $('.js-awards-block').eq(0);
awardsHandler.addAwardToEmojiBar($votesBlock, 'heart', false);
const $emojiButton = $votesBlock.find('[data-name=heart]');
2018-10-17 07:07:04 +00:00
expect($emojiButton.length).toBe(1);
expect($emojiButton.next('.js-counter').text()).toBe('1');
expect($votesBlock.hasClass('hidden')).toBe(false);
2016-07-24 20:45:11 +00:00
});
it('should remove the emoji when we click again', () => {
2018-10-17 07:07:04 +00:00
const $votesBlock = $('.js-awards-block').eq(0);
awardsHandler.addAwardToEmojiBar($votesBlock, 'heart', false);
awardsHandler.addAwardToEmojiBar($votesBlock, 'heart', false);
const $emojiButton = $votesBlock.find('[data-name=heart]');
2018-10-17 07:07:04 +00:00
expect($emojiButton.length).toBe(0);
});
2018-10-09 18:03:09 +00:00
it('should decrement the emoji counter', () => {
2018-10-17 07:07:04 +00:00
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);
2018-10-17 07:07:04 +00:00
expect($emojiButton.length).toBe(1);
expect($emojiButton.next('.js-counter').text()).toBe('4');
});
});
describe('::userAuthored', () => {
it('should update tooltip to user authored title', () => {
2018-10-17 07:07:04 +00:00
const $votesBlock = $('.js-awards-block').eq(0);
const $thumbsUpEmoji = $votesBlock.find('[data-name=thumbsup]').parent();
$thumbsUpEmoji.attr('data-title', 'sam');
awardsHandler.userAuthored($thumbsUpEmoji);
expect($thumbsUpEmoji.data('originalTitle')).toBe(
'You cannot vote on your own issue, MR and note',
);
2016-07-24 20:45:11 +00:00
});
2018-06-21 12:22:40 +00:00
it('should restore tooltip back to initial vote list', () => {
2018-10-17 07:07:04 +00:00
const $votesBlock = $('.js-awards-block').eq(0);
const $thumbsUpEmoji = $votesBlock.find('[data-name=thumbsup]').parent();
$thumbsUpEmoji.attr('data-title', 'sam');
awardsHandler.userAuthored($thumbsUpEmoji);
jest.advanceTimersByTime(2801);
2018-10-09 18:03:09 +00:00
2018-10-17 07:07:04 +00:00
expect($thumbsUpEmoji.data('originalTitle')).toBe('sam');
});
});
describe('::getAwardUrl', () => {
it('returns the url for request', () => {
2018-10-17 07:07:04 +00:00
expect(awardsHandler.getAwardUrl()).toBe('http://test.host/snippets/1/toggle_award_emoji');
});
});
2018-10-09 18:03:09 +00:00
describe('::addAward and ::checkMutuality', () => {
it('should handle :+1: and :-1: mutuality', () => {
2018-10-17 07:07:04 +00:00
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);
$thumbsUpEmoji.tooltip();
$thumbsDownEmoji.tooltip();
awardsHandler.addAward($votesBlock, awardUrl, 'thumbsdown', true);
expect($thumbsUpEmoji.hasClass('active')).toBe(false);
expect($thumbsDownEmoji.hasClass('active')).toBe(true);
2016-07-24 20:45:11 +00:00
});
2018-10-17 07:07:04 +00:00
});
describe('::removeEmoji', () => {
it('should remove emoji', () => {
2018-10-17 07:07:04 +00:00
const awardUrl = awardsHandler.getAwardUrl();
const $votesBlock = $('.js-awards-block').eq(0);
awardsHandler.addAward($votesBlock, awardUrl, 'fire', false);
2018-10-17 07:07:04 +00:00
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);
2016-09-08 10:08:09 +00:00
});
2018-10-17 07:07:04 +00:00
});
describe('::addYouToUserList', () => {
it('should prepend "You" to the award tooltip', () => {
2018-10-17 07:07:04 +00:00
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);
$thumbsUpEmoji.tooltip();
2018-10-09 18:03:09 +00:00
2018-10-17 07:07:04 +00:00
expect($thumbsUpEmoji.data('originalTitle')).toBe('You, sam, jerry, max, and andy');
2016-07-24 20:45:11 +00:00
});
it('handles the special case where "You" is not cleanly comma separated', () => {
2018-10-17 07:07:04 +00:00
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);
$thumbsUpEmoji.tooltip();
expect($thumbsUpEmoji.data('originalTitle')).toBe('You and sam');
2016-07-24 20:45:11 +00:00
});
2018-10-17 07:07:04 +00:00
});
describe('::removeYouToUserList', () => {
it('removes "You" from the front of the tooltip', () => {
2018-10-17 07:07:04 +00:00
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);
$thumbsUpEmoji.tooltip();
expect($thumbsUpEmoji.data('originalTitle')).toBe('sam, jerry, max, and andy');
});
2018-10-09 18:03:09 +00:00
it('handles the special case where "You" is not cleanly comma separated', () => {
2018-10-17 07:07:04 +00:00
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);
$thumbsUpEmoji.tooltip();
2018-10-09 18:03:09 +00:00
2018-10-17 07:07:04 +00:00
expect($thumbsUpEmoji.data('originalTitle')).toBe('sam');
2016-07-24 20:45:11 +00:00
});
2018-10-17 07:07:04 +00:00
});
2018-10-17 07:07:04 +00:00
describe('::searchEmojis', () => {
it('should filter the emoji', done => {
2018-10-17 07:07:04 +00:00
openAndWaitForEmojiMenu()
.then(() => {
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');
})
.then(done)
.catch(err => {
done.fail(`Failed to open and build emoji menu: ${err.message}`);
});
});
it('should clear the search when searching for nothing', done => {
2018-10-17 07:07:04 +00:00
openAndWaitForEmojiMenu()
.then(() => {
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('');
})
.then(done)
.catch(err => {
done.fail(`Failed to open and build emoji menu: ${err.message}`);
});
});
2018-10-17 07:07:04 +00:00
});
describe('emoji menu', () => {
2018-10-17 07:07:04 +00:00
const emojiSelector = '[data-name="sunglasses"]';
const openEmojiMenuAndAddEmoji = () => {
2018-10-17 07:07:04 +00:00
return openAndWaitForEmojiMenu().then(() => {
const $menu = $('.emoji-menu');
const $block = $('.js-awards-block');
const $emoji = $menu.find(`.emoji-menu-list:not(.frequent-emojis) ${emojiSelector}`);
2018-10-17 07:07:04 +00:00
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-07-24 20:45:11 +00:00
});
2018-10-17 07:07:04 +00:00
};
it('should add selected emoji to awards block', done => {
2018-10-17 07:07:04 +00:00
openEmojiMenuAndAddEmoji()
.then(done)
.catch(err => {
done.fail(`Failed to open and build emoji menu: ${err.message}`);
});
2016-07-24 20:45:11 +00:00
});
it('should remove already selected emoji', done => {
2018-10-17 07:07:04 +00:00
openEmojiMenuAndAddEmoji()
.then(() => {
$('.js-add-award')
.eq(0)
.click();
2018-06-21 12:22:40 +00:00
const $block = $('.js-awards-block');
2018-10-17 07:07:04 +00:00
const $emoji = $('.emoji-menu').find(
`.emoji-menu-list:not(.frequent-emojis) ${emojiSelector}`,
);
2018-06-21 12:22:40 +00:00
$emoji.click();
2018-10-09 18:03:09 +00:00
2018-10-17 07:07:04 +00:00
expect($block.find(emojiSelector).length).toBe(0);
})
.then(done)
.catch(err => {
done.fail(`Failed to open and build emoji menu: ${err.message}`);
2018-06-21 12:22:40 +00:00
});
2018-10-17 07:07:04 +00:00
});
});
describe('frequently used emojis', () => {
2018-10-17 07:07:04 +00:00
beforeEach(() => {
// Clear it out
Cookies.set('frequently_used_emojis', '');
});
it('shouldn\'t have any "Frequently used" heading if no frequently used emojis', done => {
2018-10-17 07:07:04 +00:00
return openAndWaitForEmojiMenu()
.then(() => {
const emojiMenu = document.querySelector('.emoji-menu');
Array.prototype.forEach.call(emojiMenu.querySelectorAll('.emoji-menu-title'), title => {
expect(title.textContent.trim().toLowerCase()).not.toBe('frequently used');
});
2018-10-17 07:07:04 +00:00
})
.then(done)
.catch(err => {
done.fail(`Failed to open and build emoji menu: ${err.message}`);
});
});
it('should have any frequently used section when there are frequently used emojis', done => {
2018-10-17 07:07:04 +00:00
awardsHandler.addEmojiToFrequentlyUsedList('8ball');
2018-10-17 07:07:04 +00:00
return openAndWaitForEmojiMenu()
.then(() => {
const emojiMenu = document.querySelector('.emoji-menu');
const hasFrequentlyUsedHeading = Array.prototype.some.call(
emojiMenu.querySelectorAll('.emoji-menu-title'),
title => title.textContent.trim().toLowerCase() === 'frequently used',
);
2018-10-17 07:07:04 +00:00
expect(hasFrequentlyUsedHeading).toBe(true);
})
.then(done)
.catch(err => {
done.fail(`Failed to open and build emoji menu: ${err.message}`);
});
});
it('should disregard invalid frequently used emoji that are being attempted to be added', () => {
2018-10-17 07:07:04 +00:00
awardsHandler.addEmojiToFrequentlyUsedList('8ball');
awardsHandler.addEmojiToFrequentlyUsedList('invalid_emoji');
awardsHandler.addEmojiToFrequentlyUsedList('grinning');
2018-10-17 07:07:04 +00:00
expect(awardsHandler.getFrequentlyUsedEmojis()).toEqual(['8ball', 'grinning']);
});
it('should disregard invalid frequently used emoji already set in cookie', () => {
2018-10-17 07:07:04 +00:00
Cookies.set('frequently_used_emojis', '8ball,invalid_emoji,grinning');
2018-10-17 07:07:04 +00:00
expect(awardsHandler.getFrequentlyUsedEmojis()).toEqual(['8ball', 'grinning']);
2016-07-24 20:45:11 +00:00
});
});
2018-10-17 07:07:04 +00:00
});