Skip to content

C
converse.js
Commit 2c480966 authored by JC Brand's avatar JC Brand
Browse files
Options

Add new spec with emoji tests

parent e4dc9fa8
Hide whitespace changes
Inline Side-by-side
Showing with 238 additions and 96 deletions
spec/chatbox.js
View file @ 2c480966
...@@ -438,33 +438,6 @@ ...@@ -438,33 +438,6 @@
done(); done();
})); }));
it("contains a button for inserting emojis",
mock.initConverse(
null, ['rosterGroupsFetched', 'chatBoxesFetched'], {},
async function (done, _converse) {
await test_utils.waitForRoster(_converse, 'current');
test_utils.openControlBox();
const contact_jid = mock.cur_names[2].replace(/ /g,'.').toLowerCase() + '@montague.lit';
await test_utils.openChatBoxFor(_converse, contact_jid);
const view = _converse.chatboxviews.get(contact_jid);
const toolbar = view.el.querySelector('ul.chat-toolbar');
expect(toolbar.querySelectorAll('li.toggle-smiley').length).toBe(1);
spyOn(view, 'toggleEmojiMenu').and.callThrough();
view.delegateEvents(); // We need to rebind all events otherwise our spy won't be called
toolbar.querySelector('li.toggle-smiley').click();
await u.waitUntil(() => u.isVisible(view.el.querySelector('.toggle-smiley .emoji-picker__container')));
const picker = await u.waitUntil(() => view.el.querySelector('.toggle-smiley .emoji-picker__container'));
const item = await u.waitUntil(() => picker.querySelector('.emoji-picker li.insert-emoji'));
item.click()
expect(view.el.querySelector('textarea.chat-textarea').value).toBe(':grinning: ');
toolbar.querySelector('li.toggle-smiley').click(); // Close the panel again
done();
}));
it("shows the remaining character count if a message_limit is configured", it("shows the remaining character count if a message_limit is configured",
mock.initConverse( mock.initConverse(
null, ['rosterGroupsFetched', 'chatBoxesFetched'], {'message_limit': 200}, null, ['rosterGroupsFetched', 'chatBoxesFetched'], {'message_limit': 200},
......
spec/emojis.js 0 → 100644
View file @ 2c480966
(function (root, factory) {
define([
"jasmine",
"mock",
"test-utils"
], factory);
} (this, function (jasmine, mock, test_utils) {
"use strict";
const { Backbone, Promise, Strophe, $iq, $msg, $pres, b64_sha1, dayjs, sizzle, _ } = converse.env;
const u = converse.env.utils;
describe("Emojis", function () {
describe("The emoji picker", function () {
it("can be opened by clicking a button in the chat toolbar",
mock.initConverse(
null, ['rosterGroupsFetched', 'chatBoxesFetched'], {},
async function (done, _converse) {
await test_utils.waitForRoster(_converse, 'current');
test_utils.openControlBox();
const contact_jid = mock.cur_names[2].replace(/ /g,'.').toLowerCase() + '@montague.lit';
await test_utils.openChatBoxFor(_converse, contact_jid);
const view = _converse.chatboxviews.get(contact_jid);
const toolbar = view.el.querySelector('ul.chat-toolbar');
expect(toolbar.querySelectorAll('li.toggle-smiley').length).toBe(1);
spyOn(view, 'toggleEmojiMenu').and.callThrough();
view.delegateEvents(); // We need to rebind all events otherwise our spy won't be called
toolbar.querySelector('li.toggle-smiley').click();
await u.waitUntil(() => u.isVisible(view.el.querySelector('.toggle-smiley .emoji-picker__container')));
const picker = await u.waitUntil(() => view.el.querySelector('.toggle-smiley .emoji-picker__container'));
const item = await u.waitUntil(() => picker.querySelector('.emoji-picker li.insert-emoji'));
item.click()
expect(view.el.querySelector('textarea.chat-textarea').value).toBe(':grinning: ');
toolbar.querySelector('li.toggle-smiley').click(); // Close the panel again
done();
}));
it("is opened to autocomplete emojis in the textarea",
mock.initConverse(
null, ['rosterGroupsFetched', 'chatBoxesFetched'], {},
async function (done, _converse) {
const muc_jid = 'lounge@montague.lit';
await test_utils.openAndEnterChatRoom(_converse, muc_jid, 'romeo');
const view = _converse.chatboxviews.get(muc_jid);
const textarea = view.el.querySelector('textarea.chat-textarea');
textarea.value = ':gri';
// Press tab
const tab_event = {
'target': textarea,
'preventDefault': function preventDefault () {},
'stopPropagation': function stopPropagation () {},
'keyCode': 9,
'key': 'Tab'
}
view.onKeyDown(tab_event);
await u.waitUntil(() => u.isVisible(view.el.querySelector('.toggle-smiley .emoji-picker__container')));
const picker = await u.waitUntil(() => view.el.querySelector('.toggle-smiley .emoji-picker__container'));
const input = picker.querySelector('.emoji-search');
expect(input.value).toBe(':gri');
let visible_emojis = sizzle('.insert-emoji:not(.hidden)', picker);
expect(visible_emojis.length).toBe(3);
expect(visible_emojis[0].getAttribute('data-emoji')).toBe(':grimacing:');
expect(visible_emojis[1].getAttribute('data-emoji')).toBe(':grin:');
expect(visible_emojis[2].getAttribute('data-emoji')).toBe(':grinning:');
// Test that TAB autocompletes the to first match
view.emoji_picker_view.onKeyDown(tab_event);
visible_emojis = sizzle('.insert-emoji:not(.hidden)', picker);
expect(visible_emojis.length).toBe(1);
expect(visible_emojis[0].getAttribute('data-emoji')).toBe(':grimacing:');
expect(input.value).toBe(':grimacing:');
// Check that ENTER now inserts the match
const enter_event = Object.assign({}, tab_event, {'keyCode': 13, 'key': 'Enter', 'target': input});
view.emoji_picker_view.onKeyDown(enter_event);
expect(input.value).toBe('');
expect(textarea.value).toBe(':grimacing: ');
done();
}));
it("allows you to search for particular emojis",
mock.initConverse(
null, ['rosterGroupsFetched', 'chatBoxesFetched'], {},
async function (done, _converse) {
const muc_jid = 'lounge@montague.lit';
await test_utils.openAndEnterChatRoom(_converse, muc_jid, 'romeo');
const view = _converse.chatboxviews.get(muc_jid);
const toolbar = view.el.querySelector('ul.chat-toolbar');
expect(toolbar.querySelectorAll('li.toggle-smiley').length).toBe(1);
toolbar.querySelector('li.toggle-smiley').click();
await u.waitUntil(() => u.isVisible(view.el.querySelector('.toggle-smiley .emoji-picker__container')));
const picker = await u.waitUntil(() => view.el.querySelector('.toggle-smiley .emoji-picker__container'));
const input = picker.querySelector('.emoji-search');
expect(sizzle('.insert-emoji:not(.hidden)', picker).length).toBe(1420);
expect(view.emoji_picker_view.model.get('query')).toBeUndefined();
input.value = 'smiley';
const event = {
'target': input,
'preventDefault': function preventDefault () {},
'stopPropagation': function stopPropagation () {}
};
view.emoji_picker_view.onKeyDown(event);
await u.waitUntil(() => view.emoji_picker_view.model.get('query') === 'smiley');
let visible_emojis = sizzle('.insert-emoji:not(.hidden)', picker);
expect(visible_emojis.length).toBe(2);
expect(visible_emojis[0].getAttribute('data-emoji')).toBe(':smiley:');
expect(visible_emojis[1].getAttribute('data-emoji')).toBe(':smiley_cat:');
// Check that pressing enter without an unambiguous match does nothing
const enter_event = Object.assign({}, event, {'keyCode': 13});
view.emoji_picker_view.onKeyDown(enter_event);
expect(input.value).toBe('smiley');
// Test that TAB autocompletes the to first match
const tab_event = Object.assign({}, event, {'keyCode': 9, 'key': 'Tab'});
view.emoji_picker_view.onKeyDown(tab_event);
expect(input.value).toBe(':smiley:');
visible_emojis = sizzle('.insert-emoji:not(.hidden)', picker);
expect(visible_emojis.length).toBe(1);
expect(visible_emojis[0].getAttribute('data-emoji')).toBe(':smiley:');
// Check that ENTER now inserts the match
view.emoji_picker_view.onKeyDown(enter_event);
expect(input.value).toBe('');
expect(view.el.querySelector('textarea.chat-textarea').value).toBe(':smiley: ');
done();
}));
});
describe("A Chat Message", function () {
it("will display larger if it's a single emoji",
mock.initConverse(
null, ['rosterGroupsFetched', 'chatBoxesFetched', 'emojisInitialized'], {'use_system_emojis': false},
async function (done, _converse) {
await test_utils.waitForRoster(_converse, 'current');
const sender_jid = mock.cur_names[1].replace(/ /g,'.').toLowerCase() + '@montague.lit';
_converse.chatboxes.onMessage($msg({
'from': sender_jid,
'to': _converse.connection.jid,
'type': 'chat',
'id': _converse.connection.getUniqueId()
}).c('body').t('😇').up()
.c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree());
await new Promise(resolve => _converse.on('chatBoxInitialized', resolve));
const view = _converse.api.chatviews.get(sender_jid);
await new Promise((resolve, reject) => view.once('messageInserted', resolve));
const chat_content = view.el.querySelector('.chat-content');
let message = chat_content.querySelector('.chat-msg__text');
expect(u.hasClass('chat-msg__text--larger', message)).toBe(true);
_converse.chatboxes.onMessage($msg({
'from': sender_jid,
'to': _converse.connection.jid,
'type': 'chat',
'id': _converse.connection.getUniqueId()
}).c('body').t('😇 Hello world! 😇 😇').up()
.c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree());
await new Promise((resolve, reject) => view.once('messageInserted', resolve));
message = chat_content.querySelector('.message:last-child .chat-msg__text');
expect(u.hasClass('chat-msg__text--larger', message)).toBe(false);
done();
}));
});
});
}));
spec/messages.js
View file @ 2c480966
...@@ -925,41 +925,6 @@ ...@@ -925,41 +925,6 @@
done(); done();
})); }));
it("will display larger if it's a single emoji",
mock.initConverse(
null, ['rosterGroupsFetched', 'chatBoxesFetched', 'emojisInitialized'], {'use_system_emojis': false},
async function (done, _converse) {
await test_utils.waitForRoster(_converse, 'current');
const sender_jid = mock.cur_names[1].replace(/ /g,'.').toLowerCase() + '@montague.lit';
_converse.chatboxes.onMessage($msg({
'from': sender_jid,
'to': _converse.connection.jid,
'type': 'chat',
'id': _converse.connection.getUniqueId()
}).c('body').t('😇').up()
.c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree());
await new Promise(resolve => _converse.on('chatBoxInitialized', resolve));
const view = _converse.api.chatviews.get(sender_jid);
await new Promise((resolve, reject) => view.once('messageInserted', resolve));
const chat_content = view.el.querySelector('.chat-content');
let message = chat_content.querySelector('.chat-msg__text');
expect(u.hasClass('chat-msg__text--larger', message)).toBe(true);
_converse.chatboxes.onMessage($msg({
'from': sender_jid,
'to': _converse.connection.jid,
'type': 'chat',
'id': _converse.connection.getUniqueId()
}).c('body').t('😇 Hello world! 😇 😇').up()
.c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree());
await new Promise((resolve, reject) => view.once('messageInserted', resolve));
message = chat_content.querySelector('.message:last-child .chat-msg__text');
expect(u.hasClass('chat-msg__text--larger', message)).toBe(false);
done();
}));
it("will render newlines", it("will render newlines",
mock.initConverse( mock.initConverse(
null, ['rosterGroupsFetched', 'chatBoxesFetched'], {}, null, ['rosterGroupsFetched', 'chatBoxesFetched'], {},
......
spec/muc.js
View file @ 2c480966
...@@ -3955,7 +3955,7 @@ ...@@ -3955,7 +3955,7 @@
const chat_body = view.el.querySelector('.chatroom-body'); const chat_body = view.el.querySelector('.chatroom-body');
expect(view.renderPasswordForm).toHaveBeenCalled(); expect(view.renderPasswordForm).toHaveBeenCalled();
expect(chat_body.querySelectorAll('form.chatroom-form').length).toBe(1); expect(chat_body.querySelectorAll('form.chatroom-form').length).toBe(1);
expect(chat_body.querySelector('label').textContent.trim()) expect(chat_body.querySelector('.chatroom-form label').textContent.trim())
.toBe('This groupchat requires a password'); .toBe('This groupchat requires a password');
// Let's submit the form // Let's submit the form
......
src/converse-chatview.js
View file @ 2c480966
...@@ -1048,12 +1048,9 @@ converse.plugins.add('converse-chatview', { ...@@ -1048,12 +1048,9 @@ converse.plugins.add('converse-chatview', {
if (position && typeof replace == 'string') { if (position && typeof replace == 'string') {
textarea.value = textarea.value.replace( textarea.value = textarea.value.replace(
new RegExp(replace, 'g'), new RegExp(replace, 'g'),
(match, offset) => { (match, offset) => (offset == position-replace.length ? value+' ' : match)
return offset == position-replace.length ? value : match
}
); );
} else { } else {
textarea.value = '';
textarea.value = value; textarea.value = value;
} }
} else { } else {
...@@ -1061,7 +1058,6 @@ converse.plugins.add('converse-chatview', { ...@@ -1061,7 +1058,6 @@ converse.plugins.add('converse-chatview', {
if (existing && (existing[existing.length-1] !== ' ')) { if (existing && (existing[existing.length-1] !== ' ')) {
existing = existing + ' '; existing = existing + ' ';
} }
textarea.value = '';
textarea.value = existing+value+' '; textarea.value = existing+value+' ';
} }
this.updateCharCounter(textarea.value); this.updateCharCounter(textarea.value);
......
src/converse-emoji-views.js
View file @ 2c480966
...@@ -54,14 +54,13 @@ converse.plugins.add('converse-emoji-views', { ...@@ -54,14 +54,13 @@ converse.plugins.add('converse-emoji-views', {
if (this.emoji_dropdown === undefined) { if (this.emoji_dropdown === undefined) {
this.createEmojiDropdown(); this.createEmojiDropdown();
} }
this.emoji_dropdown.toggle();
await _converse.api.waitUntil('emojisInitialized'); await _converse.api.waitUntil('emojisInitialized');
this.emoji_picker_view.model.set({ this.emoji_picker_view.model.set({
'autocompleting': value, 'autocompleting': value,
'position': ev.target.selectionStart 'position': ev.target.selectionStart
}); }, {'silent': true});
this.emoji_picker_view.filter(value, true); this.emoji_picker_view.filter(value, true);
this.emoji_picker_view.render(); this.emoji_dropdown.toggle();
} else { } else {
this.__super__.onTabPressed.apply(this, arguments); this.__super__.onTabPressed.apply(this, arguments);
} }
...@@ -94,7 +93,7 @@ converse.plugins.add('converse-emoji-views', { ...@@ -94,7 +93,7 @@ converse.plugins.add('converse-emoji-views', {
const emoji_aware_chat_view = { const emoji_aware_chat_view = {
createEmojiPicker () { createEmojiPicker () {
if (_converse.emojipicker === undefined) { if (!_converse.emojipicker) {
const storage = _converse.config.get('storage'), const storage = _converse.config.get('storage'),
id = `converse.emoji-${_converse.bare_jid}`; id = `converse.emoji-${_converse.bare_jid}`;
_converse.emojipicker = new _converse.EmojiPicker({'id': id}); _converse.emojipicker = new _converse.EmojiPicker({'id': id});
...@@ -143,7 +142,7 @@ converse.plugins.add('converse-emoji-views', { ...@@ -143,7 +142,7 @@ converse.plugins.add('converse-emoji-views', {
}, },
initialize () { initialize () {
this.debouncedFilter = _.debounce(input => this.filter(input.value), 50); this.debouncedFilter = _.debounce(input => this.filter(input.value), 150);
this.model.on('change:query', this.render, this); this.model.on('change:query', this.render, this);
this.model.on('change:current_skintone', this.render, this); this.model.on('change:current_skintone', this.render, this);
this.model.on('change:current_category', () => { this.model.on('change:current_category', () => {
...@@ -203,7 +202,7 @@ converse.plugins.add('converse-emoji-views', { ...@@ -203,7 +202,7 @@ converse.plugins.add('converse-emoji-views', {
this.filter('', true); this.filter('', true);
} }
} else { } else {
this.debouncedFilter(ev.target.value); this.debouncedFilter(ev.target);
} }
}, },
......
src/headless/converse-emoji.js
View file @ 2c480966
...@@ -198,9 +198,15 @@ converse.plugins.add('converse-emoji', { ...@@ -198,9 +198,15 @@ converse.plugins.add('converse-emoji', {
"flags": __("Flags") "flags": __("Flags")
} }
/**
* Model for storing data related to the Emoji picker widget
* @class
* @namespace _converse.EmojiPicker
* @memberOf _converse
*/
_converse.EmojiPicker = Backbone.Model.extend({ _converse.EmojiPicker = Backbone.Model.extend({
defaults: { defaults: {
'current_category': 'people', 'current_category': 'smileys',
'current_skintone': '', 'current_skintone': '',
'scroll_position': 0 'scroll_position': 0
} }
...@@ -208,21 +214,6 @@ converse.plugins.add('converse-emoji', { ...@@ -208,21 +214,6 @@ converse.plugins.add('converse-emoji', {
_converse.emojis = {}; _converse.emojis = {};
u.getEmojiRenderer = function () {
const how = {
'attributes': (icon, variant) => {
const codepoint = twemoji.default.convert.toCodePoint(icon);
return {'title': `${u.getEmojisByAtrribute('cp')[codepoint]['sn']} ${icon}`}
}
};
const toUnicode = u.shortnameToUnicode;
return _converse.use_system_emojis ? toUnicode: text => twemoji.default.parse(toUnicode(text), how);
};
u.addEmoji = function (text) {
return u.getEmojiRenderer()(text);
}
function getTonedEmojis () { function getTonedEmojis () {
if (!_converse.toned_emojis) { if (!_converse.toned_emojis) {
_converse.toned_emojis = _.uniq( _converse.toned_emojis = _.uniq(
...@@ -282,9 +273,41 @@ converse.plugins.add('converse-emoji', { ...@@ -282,9 +273,41 @@ converse.plugins.add('converse-emoji', {
const emojis_by_attribute = {}; const emojis_by_attribute = {};
Object.assign(u, { Object.assign(u, {
/**
* Replaces emoji shortnames in the passed-in string with unicode or image-based emojis
* (based on the value of `use_system_emojis`).
* @method u.addEmoji
* @param {string} text = The text
* @returns {string} The text with shortnames replaced with emoji
* unicodes or images.
*/
addEmoji (text) {
return u.getEmojiRenderer()(text);
},
/**
* Based on the value of `use_system_emojis` will return either
* a function that converts emoji shortnames into unicode glyphs
* (see {@link u.shortnameToUnicode} or one that converts them into images.
* unicode emojis
* @method u.getEmojiRenderer
* @returns {function}
*/
getEmojiRenderer () {
const how = {
'attributes': (icon, variant) => {
const codepoint = twemoji.default.convert.toCodePoint(icon);
return {'title': `${u.getEmojisByAtrribute('cp')[codepoint]['sn']} ${icon}`}
}
};
const toUnicode = u.shortnameToUnicode;
return _converse.use_system_emojis ? toUnicode: text => twemoji.default.parse(toUnicode(text), how);
},
/** /**
* @method u.shortnameToUnicode
* Returns unicode represented by the passed in shortname. * Returns unicode represented by the passed in shortname.
* @method u.shortnameToUnicode
* @param {string} str - String containg the shortname(s) * @param {string} str - String containg the shortname(s)
*/ */
shortnameToUnicode (str) { shortnameToUnicode (str) {
...@@ -386,9 +409,9 @@ converse.plugins.add('converse-emoji', { ...@@ -386,9 +409,9 @@ converse.plugins.add('converse-emoji', {
const excluded_categories = ['modifier', 'regional']; const excluded_categories = ['modifier', 'regional'];
_converse.emojis.all_categories = _converse.emojis_list _converse.emojis.all_categories = _converse.emojis_list
.map(e => e.c) .map(e => e.c)
.filter((c, i, arr) => arr.indexOf(c) == i) .filter((c, i, arr) => arr.indexOf(c) == i)
.filter(c => !excluded_categories.includes(c)); .filter(c => !excluded_categories.includes(c));
_converse.emojis.toned = getTonedEmojis(); _converse.emojis.toned = getTonedEmojis();
...@@ -398,5 +421,16 @@ converse.plugins.add('converse-emoji', { ...@@ -398,5 +421,16 @@ converse.plugins.add('converse-emoji', {
* @event _converse#emojisInitialized * @event _converse#emojisInitialized
*/ */
_converse.api.trigger('emojisInitialized'); _converse.api.trigger('emojisInitialized');
/************************ BEGIN Event Handlers ************************/
_converse.api.listen.on('clearSession', () => {
if (_converse.emojipicker) {
_converse.emojipicker.browserStorage._clear();
_converse.emojipicker.destroy();
delete _converse.emojipicker
}
});
/************************ END Event Handlers ************************/
} }
}); });
src/templates/emojis.html
View file @ 2c480966
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
{[ }); ]} {[ }); ]}
</ul> </ul>
</div> </div>
<div class="emoji-picker__lists"> <div class="emoji-picker__lists">
{[ if (o.query) { ]} {[ if (o.query) { ]}
<a id="emoji-picker-search-results" class="emoji-category__heading">{{{o.__('Search results')}}}</a> <a id="emoji-picker-search-results" class="emoji-category__heading">{{{o.__('Search results')}}}</a>
......
tests/runner.js
View file @ 2c480966
...@@ -61,6 +61,7 @@ var specs = [ ...@@ -61,6 +61,7 @@ var specs = [
"spec/autocomplete", "spec/autocomplete",
"spec/minchats", "spec/minchats",
"spec/notification", "spec/notification",
"spec/emojis",
"spec/login", "spec/login",
"spec/register", "spec/register",
"spec/http-file-upload" "spec/http-file-upload"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7