mirror of
https://github.com/discourse/discourse.git
synced 2025-02-20 00:23:17 +08:00
226be994da
The emoji-picker is a specific piece of code as it has very strong performance requirements which are almost not found anywhere else in the app, as a result it was using various hacks to make it work decently even on old browsers. Following our drop of Internet Explorer, and various new features in Ember and recent browsers we can now take advantage of this to reduce the amount of code needed, this rewrite most importantly does the following: - use loading="lazy" preventing the full list of emojis to be loaded on opening - uses InterserctionObserver to find the active section - limits the use of native event listentes only for hover/click emojis (for performance reason we track click on the whole emoji area and delegate events), everything else is using ember events - uses popper to position the emoji picker - no jquery code
145 lines
4.3 KiB
JavaScript
145 lines
4.3 KiB
JavaScript
import { acceptance } from "helpers/qunit-helpers";
|
|
|
|
acceptance("EmojiPicker", {
|
|
loggedIn: true,
|
|
beforeEach() {
|
|
this.emojiStore = this.container.lookup("service:emoji-store");
|
|
this.emojiStore.reset();
|
|
},
|
|
afterEach() {
|
|
this.emojiStore.reset();
|
|
}
|
|
});
|
|
|
|
QUnit.test("emoji picker can be opened/closed", async assert => {
|
|
await visit("/t/internationalization-localization/280");
|
|
await click("#topic-footer-buttons .btn.create");
|
|
|
|
await click("button.emoji.btn");
|
|
assert.ok(exists(".emoji-picker.opened"), "it opens the picker");
|
|
|
|
await click("button.emoji.btn");
|
|
assert.notOk(exists(".emoji-picker.opened"), "it closes the picker");
|
|
});
|
|
|
|
QUnit.test("emoji picker triggers event when picking emoji", async assert => {
|
|
await visit("/t/internationalization-localization/280");
|
|
await click("#topic-footer-buttons .btn.create");
|
|
await click("button.emoji.btn");
|
|
await click(".emoji-picker-emoji-area img.emoji[title='grinning']");
|
|
|
|
assert.equal(
|
|
find(".d-editor-input").val(),
|
|
":grinning:",
|
|
"it adds the emoji code in the editor when selected"
|
|
);
|
|
});
|
|
|
|
QUnit.test(
|
|
"emoji picker adds leading whitespace before emoji",
|
|
async assert => {
|
|
await visit("/t/internationalization-localization/280");
|
|
await click("#topic-footer-buttons .btn.create");
|
|
|
|
// Whitespace should be added on text
|
|
await fillIn(".d-editor-input", "This is a test input");
|
|
await click("button.emoji.btn");
|
|
await click(".emoji-picker-emoji-area img.emoji[title='grinning']");
|
|
assert.equal(
|
|
find(".d-editor-input").val(),
|
|
"This is a test input :grinning:",
|
|
"it adds the emoji code and a leading whitespace when there is text"
|
|
);
|
|
|
|
// Whitespace should not be added on whitespace
|
|
await fillIn(".d-editor-input", "This is a test input ");
|
|
await click(".emoji-picker-emoji-area img.emoji[title='grinning']");
|
|
|
|
assert.equal(
|
|
find(".d-editor-input").val(),
|
|
"This is a test input :grinning:",
|
|
"it adds the emoji code and no leading whitespace when user already entered whitespace"
|
|
);
|
|
}
|
|
);
|
|
|
|
QUnit.test("emoji picker has a list of recently used emojis", async assert => {
|
|
await visit("/t/internationalization-localization/280");
|
|
await click("#topic-footer-buttons .btn.create");
|
|
await click("button.emoji.btn");
|
|
await click(".emoji-picker-emoji-area img.emoji[title='grinning']");
|
|
|
|
assert.ok(
|
|
exists(
|
|
".emoji-picker .section.recent .section-group img.emoji[title='grinning']"
|
|
),
|
|
"it shows recent selected emoji"
|
|
);
|
|
|
|
assert.ok(
|
|
exists('.emoji-picker .category-button[data-section="recent"]'),
|
|
"it shows recent category icon"
|
|
);
|
|
|
|
await click(".emoji-picker .trash-recent");
|
|
|
|
assert.notOk(
|
|
exists(
|
|
".emoji-picker .section.recent .section-group img.emoji[title='grinning']"
|
|
),
|
|
"it has cleared recent emojis"
|
|
);
|
|
|
|
assert.notOk(
|
|
exists('.emoji-picker .section[data-section="recent"]'),
|
|
"it hides recent section"
|
|
);
|
|
|
|
assert.notOk(
|
|
exists('.emoji-picker .category-button[data-section="recent"]'),
|
|
"it hides recent category icon"
|
|
);
|
|
});
|
|
|
|
QUnit.test(
|
|
"emoji picker correctly orders recently used emojis",
|
|
async assert => {
|
|
await visit("/t/internationalization-localization/280");
|
|
await click("#topic-footer-buttons .btn.create");
|
|
await click("button.emoji.btn");
|
|
await click(".emoji-picker-emoji-area img.emoji[title='sunglasses']");
|
|
await click(".emoji-picker-emoji-area img.emoji[title='grinning']");
|
|
|
|
assert.equal(
|
|
find('.section[data-section="recent"] .section-group img.emoji').length,
|
|
2,
|
|
"it has multiple recent emojis"
|
|
);
|
|
|
|
assert.equal(
|
|
/grinning/.test(
|
|
find(".section.recent .section-group img.emoji")
|
|
.first()
|
|
.attr("src")
|
|
),
|
|
true,
|
|
"it puts the last used emoji in first"
|
|
);
|
|
}
|
|
);
|
|
|
|
QUnit.test("emoji picker persists state", async assert => {
|
|
await visit("/t/internationalization-localization/280");
|
|
await click("#topic-footer-buttons .btn.create");
|
|
await click("button.emoji.btn");
|
|
await click(".emoji-picker button.diversity-scale.medium-dark");
|
|
await click("button.emoji.btn");
|
|
await click("button.emoji.btn");
|
|
|
|
assert.ok(
|
|
exists(".emoji-picker button.diversity-scale.medium-dark .d-icon"),
|
|
true,
|
|
"it stores diversity scale"
|
|
);
|
|
});
|