discourse/test/javascripts/acceptance/emoji-picker-test.js.es6

165 lines
4.5 KiB
Plaintext
Raw Normal View History

2017-07-11 11:51:53 -04:00
import { acceptance } from "helpers/qunit-helpers";
import { IMAGE_VERSION as v } from "pretty-text/emoji/version";
2018-06-15 11:03:24 -04:00
import { resetCache } from "discourse/components/emoji-picker";
2017-07-11 11:51:53 -04:00
acceptance("EmojiPicker", {
loggedIn: true,
2018-06-15 11:03:24 -04:00
beforeEach() {
resetCache();
}
2017-07-11 11:51:53 -04:00
});
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.notEqual(
find(".emoji-picker")
.html()
.trim(),
"",
"it opens the picker"
);
2017-07-11 11:51:53 -04:00
await click("button.emoji.btn");
assert.equal(
find(".emoji-picker")
.html()
.trim(),
"",
"it closes the picker"
);
2017-07-11 11:51:53 -04:00
});
QUnit.test("emojis can be hovered to display info", async assert => {
await visit("/t/internationalization-localization/280");
await click("#topic-footer-buttons .btn.create");
await click("button.emoji.btn");
$(".emoji-picker button[title='grinning']").trigger("mouseover");
assert.equal(
find(".emoji-picker .info")
.html()
.trim(),
`<img src=\"/images/emoji/emoji_one/grinning.png?v=${v}\" class=\"emoji\"> <span>:grinning:<span></span></span>`,
"it displays emoji info when hovering emoji"
);
2017-07-11 11:51:53 -04:00
});
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");
2017-07-11 11:51:53 -04:00
await click(".emoji-picker button[title='grinning']");
assert.equal(
find(".d-editor-input").val(),
":grinning:",
"it adds the emoji code in the editor when selected"
);
2017-07-11 11:51:53 -04:00
});
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");
2017-07-11 11:51:53 -04:00
await click(
2019-03-15 12:15:36 -04:00
".emoji-picker .section[data-section='smileys_&_emotion'] button.emoji[title='grinning']"
2018-06-15 11:03:24 -04:00
);
assert.equal(
find('.emoji-picker .section[data-section="recent"]').css("display"),
"block",
"it shows recent section"
);
2017-07-11 11:51:53 -04:00
assert.equal(
find(
'.emoji-picker .section[data-section="recent"] .section-group button.emoji'
).length,
1,
"it adds the emoji code to the recently used emojis list"
);
2017-07-11 11:51:53 -04:00
await click(".emoji-picker .clear-recent");
assert.equal(
find(
'.emoji-picker .section[data-section="recent"] .section-group button.emoji'
).length,
0,
"it has cleared recent emojis"
);
2017-07-11 11:51:53 -04:00
assert.equal(
find('.emoji-picker .section[data-section="recent"]').css("display"),
"none",
"it hides recent section"
);
2017-07-11 11:51:53 -04:00
assert.equal(
find('.emoji-picker .category-icon button.emoji[data-section="recent"]')
.parent()
.css("display"),
"none",
"it hides recent category icon"
);
2017-07-11 11:51:53 -04:00
});
QUnit.test(
"emoji picker correctly orders recently used emojis",
async assert => {
await visit("/t/internationalization-localization/280");
await click("#topic-footer-buttons .btn.create");
2017-07-11 11:51:53 -04:00
await click("button.emoji.btn");
await click(".emoji-picker button[title='sunglasses']");
await click(".emoji-picker button[title='grinning']");
assert.equal(
find('.section[data-section="recent"] .section-group button.emoji')
.length,
2,
"it has multiple recent emojis"
);
2017-07-11 11:51:53 -04:00
assert.equal(
/grinning/.test(
find('.section[data-section="recent"] .section-group button.emoji')
.first()
.css("background-image")
2018-06-15 11:03:24 -04:00
),
true,
"it puts the last used emoji in first"
2017-07-11 11:51:53 -04:00
);
}
);
QUnit.test("emoji picker lazy loads emojis", async assert => {
await visit("/t/internationalization-localization/280");
await click("#topic-footer-buttons .btn.create");
await click("button.emoji.btn");
assert.equal(
find('.emoji-picker button[title="massage_woman"]').css("background-image"),
"none",
"it doesn't load invisible emojis"
);
2017-07-11 11:51:53 -04:00
});
QUnit.test("emoji picker persists state", async assert => {
await visit("/t/internationalization-localization/280");
await click("#topic-footer-buttons .btn.create");
2017-07-11 11:51:53 -04:00
await click("button.emoji.btn");
await click(".emoji-picker a.diversity-scale.medium-dark");
await click("button.emoji.btn");
2017-07-11 11:51:53 -04:00
await click("button.emoji.btn");
assert.equal(
find(".emoji-picker .diversity-scale.medium-dark").hasClass("selected"),
true,
"it stores diversity scale"
);
2017-07-11 11:51:53 -04:00
});