Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Add new spec with emoji tests

Browse Source
This commit is contained in:
JC Brand 2019-08-21 16:32:32 +02:00
parent e4dc9fa820
commit 2c48096664
9 changed files with 238 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
spec/chatbox.js
View File

@ -438,33 +438,6 @@
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",
mock.initConverse(
null, ['rosterGroupsFetched', 'chatBoxesFetched'], {'message_limit': 200},

176
spec/emojis.js Normal file
View File

@ -0,0 +1,176 @@
(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();
}));
});
});
}));

35
spec/messages.js
View File

@ -925,41 +925,6 @@
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",
mock.initConverse(
null, ['rosterGroupsFetched', 'chatBoxesFetched'], {},

2
spec/muc.js
View File

@ -3955,7 +3955,7 @@
const chat_body = view.el.querySelector('.chatroom-body');
expect(view.renderPasswordForm).toHaveBeenCalled();
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');
// Let's submit the form

6
src/converse-chatview.js
View File

@ -1048,12 +1048,9 @@ converse.plugins.add('converse-chatview', {
if (position && typeof replace == 'string') {
textarea.value = textarea.value.replace(
new RegExp(replace, 'g'),
(match, offset) => {
return offset == position-replace.length ? value : match
}
(match, offset) => (offset == position-replace.length ? value+' ' : match)
);
} else {
textarea.value = '';
textarea.value = value;
}
} else {
@ -1061,7 +1058,6 @@ converse.plugins.add('converse-chatview', {
if (existing && (existing[existing.length-1] !== ' ')) {
existing = existing + ' ';
}
textarea.value = '';
textarea.value = existing+value+' ';
}
this.updateCharCounter(textarea.value);

11
src/converse-emoji-views.js
View File

@ -54,14 +54,13 @@ converse.plugins.add('converse-emoji-views', {
if (this.emoji_dropdown === undefined) {
this.createEmojiDropdown();
}
this.emoji_dropdown.toggle();
await _converse.api.waitUntil('emojisInitialized');
this.emoji_picker_view.model.set({
'autocompleting': value,
'position': ev.target.selectionStart
});
}, {'silent': true});
this.emoji_picker_view.filter(value, true);
this.emoji_picker_view.render();
this.emoji_dropdown.toggle();
} else {
this.__super__.onTabPressed.apply(this, arguments);
}
@ -94,7 +93,7 @@ converse.plugins.add('converse-emoji-views', {
const emoji_aware_chat_view = {
createEmojiPicker () {
if (_converse.emojipicker === undefined) {
if (!_converse.emojipicker) {
const storage = _converse.config.get('storage'),
id = `converse.emoji-${_converse.bare_jid}`;
_converse.emojipicker = new _converse.EmojiPicker({'id': id});
@ -143,7 +142,7 @@ converse.plugins.add('converse-emoji-views', {
},
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:current_skintone', this.render, this);
this.model.on('change:current_category', () => {
@ -203,7 +202,7 @@ converse.plugins.add('converse-emoji-views', {
this.filter('', true);
}
} else {
this.debouncedFilter(ev.target.value);
this.debouncedFilter(ev.target);
}
},

74
src/headless/converse-emoji.js
View File

@ -198,9 +198,15 @@ converse.plugins.add('converse-emoji', {
"flags": __("Flags")
}
/**
* Model for storing data related to the Emoji picker widget
* @class
* @namespace _converse.EmojiPicker
* @memberOf _converse
*/
_converse.EmojiPicker = Backbone.Model.extend({
defaults: {
'current_category': 'people',
'current_category': 'smileys',
'current_skintone': '',
'scroll_position': 0
}
@ -208,21 +214,6 @@ converse.plugins.add('converse-emoji', {
_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 () {
if (!_converse.toned_emojis) {
_converse.toned_emojis = _.uniq(
@ -282,9 +273,41 @@ converse.plugins.add('converse-emoji', {
const emojis_by_attribute = {};
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.
* @method u.shortnameToUnicode
* @param {string} str - String containg the shortname(s)
*/
shortnameToUnicode (str) {
@ -386,9 +409,9 @@ converse.plugins.add('converse-emoji', {
const excluded_categories = ['modifier', 'regional'];
_converse.emojis.all_categories = _converse.emojis_list
.map(e => e.c)
.filter((c, i, arr) => arr.indexOf(c) == i)
.filter(c => !excluded_categories.includes(c));
.map(e => e.c)
.filter((c, i, arr) => arr.indexOf(c) == i)
.filter(c => !excluded_categories.includes(c));
_converse.emojis.toned = getTonedEmojis();
@ -398,5 +421,16 @@ converse.plugins.add('converse-emoji', {
* @event _converse#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 ************************/
}
});

2
src/templates/emojis.html
View File

@ -9,8 +9,6 @@
{[ }); ]}
</ul>
</div>
<div class="emoji-picker__lists">
{[ if (o.query) { ]}
<a id="emoji-picker-search-results" class="emoji-category__heading">{{{o.__('Search results')}}}</a>

1
tests/runner.js
View File

@ -61,6 +61,7 @@ var specs = [
"spec/autocomplete",
"spec/minchats",
"spec/notification",
"spec/emojis",
"spec/login",
"spec/register",
"spec/http-file-upload"