github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-22 20:51:08 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FIX: Allow keyboard navigation when searching emojis in chat (#20157)

Browse Source
This commit is contained in:
Jan Cernik
2023-02-03 11:36:45 -03:00
committed by GitHub
parent d5024d96f1
commit 44df5ee7c8
4 changed files with 115 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
plugins/chat/test/javascripts/components/chat-emoji-picker-test.js
View File

@ -3,7 +3,7 @@ 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 } from "@ember/test-helpers";
import { click, fillIn, render, triggerKeyEvent } from "@ember/test-helpers";
function emojisResponse() {
return {
@ -138,26 +138,26 @@ module("Discourse Chat | Component | chat-emoji-picker", function (hooks) {
await fillIn(".dc-filter-input", "grinning");
assert.strictEqual(
queryAll(".chat-emoji-picker__sections > img").length,
queryAll(".chat-emoji-picker__section.filtered > img").length,
1,
"it filters the emojis list"
);
assert.true(
exists('.chat-emoji-picker__sections > img[alt="grinning"]'),
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__sections > img[alt="grinning"]'),
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__sections > img[alt="grinning"]'),
exists('.chat-emoji-picker__section.filtered > img[alt="grinning"]'),
"it filters the correct emoji using search alias"
);
});
@ -173,6 +173,72 @@ module("Discourse Chat | Component | chat-emoji-picker", function (hooks) {
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.chatEmojiPickerManager.didSelectEmoji = (emoji) => {