discourse/plugins/chat/test/javascripts/components/chat-emoji-picker-test.js

317 lines
9.0 KiB
JavaScript

import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import { exists, query, queryAll } from "discourse/tests/helpers/qunit-helpers";
import hbs from "htmlbars-inline-precompile";
import { module, test } from "qunit";
import pretender from "discourse/tests/helpers/create-pretender";
import { click, fillIn, render, triggerKeyEvent } from "@ember/test-helpers";
function emojisResponse() {
return {
favorites: [
{
name: "grinning",
tonable: false,
url: "/images/emoji/twitter/grinning.png?v=12",
group: "smileys_\u0026_emotion",
search_aliases: ["smiley_cat", "star_struck"],
},
],
"smileys_&_emotion": [
{
name: "grinning",
tonable: false,
url: "/images/emoji/twitter/grinning.png?v=12",
group: "smileys_\u0026_emotion",
search_aliases: ["smiley_cat", "star_struck"],
},
],
"people_&_body": [
{
name: "raised_hands",
tonable: true,
url: "/images/emoji/twitter/raised_hands.png?v=12",
group: "people_&_body",
search_aliases: [],
},
{
name: "man_rowing_boat",
tonable: true,
url: "/images/emoji/twitter/man_rowing_boat.png?v=12",
group: "people_&_body",
search_aliases: [],
},
],
objects: [
{
name: "womans_clothes",
tonable: false,
url: "/images/emoji/twitter/womans_clothes.png?v=12",
group: "objects",
search_aliases: [],
},
],
};
}
module("Discourse Chat | Component | chat-emoji-picker", function (hooks) {
setupRenderingTest(hooks);
hooks.afterEach(function () {
this.emojiReactionStore.diversity = 1;
});
hooks.beforeEach(function () {
pretender.get("/chat/emojis.json", () => {
return [200, {}, emojisResponse()];
});
this.chatEmojiPickerManager = this.container.lookup(
"service:chat-emoji-picker-manager"
);
this.chatEmojiPickerManager.open(() => {});
this.chatEmojiPickerManager.addVisibleSections([
"smileys_&_emotion",
"people_&_body",
"objects",
]);
this.emojiReactionStore = this.container.lookup(
"service:chat-emoji-reaction-store"
);
});
test("When displaying navigation", async function (assert) {
await render(hbs`<ChatEmojiPicker />`);
assert.true(
exists(
`.chat-emoji-picker__section-btn.active[data-section="favorites"]`
),
"it renders first section as active"
);
assert.true(
exists(
`.chat-emoji-picker__section-btn[data-section="smileys_&_emotion"]`
)
);
assert.true(
exists(`.chat-emoji-picker__section-btn[data-section="people_&_body"]`)
);
assert.true(
exists(`.chat-emoji-picker__section-btn[data-section="objects"]`)
);
});
test("When changing tone scale", async function (assert) {
await render(hbs`<ChatEmojiPicker />`);
await click(".chat-emoji-picker__fitzpatrick-modifier-btn.current.t1");
await click(".chat-emoji-picker__fitzpatrick-modifier-btn.t6");
assert.true(
exists(`img[src="/images/emoji/twitter/raised_hands/6.png"]`),
"it applies the tone to emojis"
);
assert.true(
exists(".chat-emoji-picker__fitzpatrick-modifier-btn.current.t6"),
"it changes the current scale to t6"
);
});
test("When requesting section", async function (assert) {
await render(hbs`<ChatEmojiPicker />`);
assert.strictEqual(
document.querySelector("#ember-testing-container").scrollTop,
0
);
await click(`.chat-emoji-picker__section-btn[data-section="objects"]`);
assert.true(
document.querySelector(".chat-emoji-picker__scrollable-content")
.scrollTop > 0,
"it scrolls to the section"
);
});
test("When filtering emojis", async function (assert) {
await render(hbs`<ChatEmojiPicker />`);
await fillIn(".dc-filter-input", "grinning");
assert.strictEqual(
queryAll(".chat-emoji-picker__section.filtered > img").length,
1,
"it filters the emojis list"
);
assert.true(
exists('.chat-emoji-picker__section.filtered > img[alt="grinning"]'),
"it filters the correct emoji"
);
await fillIn(".dc-filter-input", "Grinning");
assert.true(
exists('.chat-emoji-picker__section.filtered > img[alt="grinning"]'),
"it is case insensitive"
);
await fillIn(".dc-filter-input", "smiley_cat");
assert.true(
exists('.chat-emoji-picker__section.filtered > img[alt="grinning"]'),
"it filters the correct emoji using search alias"
);
});
test("When selecting an emoji", async function (assert) {
let selection;
this.didSelectEmoji = (emoji) => {
selection = emoji;
};
await render(
hbs`<ChatEmojiPicker @didSelectEmoji={{this.didSelectEmoji}} />`
);
await click('img.emoji[data-emoji="grinning"]');
assert.strictEqual(selection, "grinning");
});
test("When navigating sections", async function (assert) {
await render(hbs`<ChatEmojiPicker />`);
await triggerKeyEvent(document.activeElement, "keydown", "ArrowDown");
assert.strictEqual(
document.activeElement.dataset.emoji,
"grinning",
"ArrowDown focuses on the first favorite emoji"
);
await triggerKeyEvent(document.activeElement, "keydown", "ArrowDown");
await triggerKeyEvent(document.activeElement, "keydown", "ArrowDown");
assert.strictEqual(
document.activeElement.dataset.emoji,
"raised_hands",
"ArrowDown focuses on the first emoji form the third section"
);
await triggerKeyEvent(document.activeElement, "keydown", "ArrowRight");
assert.strictEqual(
document.activeElement.dataset.emoji,
"man_rowing_boat",
"ArrowRight focuses on the emoji at the right"
);
await triggerKeyEvent(document.activeElement, "keydown", "ArrowLeft");
assert.strictEqual(
document.activeElement.dataset.emoji,
"raised_hands",
"ArrowLeft focuses on the emoji at the left"
);
await triggerKeyEvent(document.activeElement, "keydown", "ArrowUp");
assert.strictEqual(
document.activeElement.dataset.emoji,
"grinning",
"ArrowUp focuses on the first emoji form the second section"
);
});
test("When navigating filtered emojis", async function (assert) {
await render(hbs`<ChatEmojiPicker />`);
await fillIn(".dc-filter-input", "man");
await triggerKeyEvent(document.activeElement, "keydown", "ArrowDown");
assert.strictEqual(
document.activeElement.dataset.emoji,
"man_rowing_boat",
"ArrowDown focuses on the first filtered emoji"
);
await triggerKeyEvent(document.activeElement, "keydown", "ArrowRight");
assert.strictEqual(
document.activeElement.dataset.emoji,
"womans_clothes",
"ArrowRight focuses on the emoji at the right"
);
await triggerKeyEvent(document.activeElement, "keydown", "ArrowLeft");
assert.strictEqual(
document.activeElement.dataset.emoji,
"man_rowing_boat",
"ArrowLeft focuses on the emoji at the left"
);
});
test("When selecting a toned an emoji", async function (assert) {
let selection;
this.didSelectEmoji = (emoji) => {
selection = emoji;
};
await render(
hbs`<ChatEmojiPicker @didSelectEmoji={{this.didSelectEmoji}} />`
);
this.emojiReactionStore.diversity = 1;
await click('img.emoji[data-emoji="man_rowing_boat"]');
assert.strictEqual(selection, "man_rowing_boat");
this.emojiReactionStore.diversity = 2;
await click('img.emoji[data-emoji="man_rowing_boat"]');
assert.strictEqual(selection, "man_rowing_boat:t2");
});
test("When opening the picker", async function (assert) {
await render(hbs`<ChatEmojiPicker />`);
assert.true(document.activeElement.classList.contains("dc-filter-input"));
});
test("When hovering an emoji", async function (assert) {
await render(hbs`<ChatEmojiPicker />`);
assert.strictEqual(
query(
'.chat-emoji-picker__section[data-section="people_&_body"] img.emoji:nth-child(1)'
).title,
":raised_hands:",
"first emoji has a title"
);
assert.strictEqual(
query(
'.chat-emoji-picker__section[data-section="people_&_body"] img.emoji:nth-child(2)'
).title,
":man_rowing_boat:",
"second emoji has a title"
);
await fillIn(".dc-filter-input", "grinning");
assert.strictEqual(
query('img.emoji[data-emoji="grinning"]').title,
":grinning:",
"filtered emoji have a title"
);
this.emojiReactionStore.diversity = 1;
await render(hbs`<ChatEmojiPicker />`);
assert.strictEqual(
query('img.emoji[data-emoji="man_rowing_boat"]').title,
":man_rowing_boat:",
"it has a title without the scale as diversity value is 1"
);
this.emojiReactionStore.diversity = 2;
await render(hbs`<ChatEmojiPicker />`);
assert.strictEqual(
query('img.emoji[data-emoji="man_rowing_boat"]').title,
":man_rowing_boat:t2:",
"it has a title with the scale"
);
});
});