snapshot of https://github.com/mattermost/mattermost.git (master, 2026-09-16; blobs > 131072B omitted)

e2e-tests/playwright/specs/functional/channels/emoji_picker/emoji_picker.spec.ts

@@ -0,0 +1,100 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import type {Locator} from '@playwright/test';
+
+import {expect, test} from '@mattermost/playwright-lib';
+
+/**
+ * @objective Verify that using the emoji picker adds emojis to the correct place in the post textbox based on the
+ * location of the keyboard caret, that keyboard focus is moved back to the post textbox correctly, and that the
+ * keyboard caret is placed in the correct place.
+ */
+test(
+    'Should add emoji to post textbox correctly and handle focus/selection correctly',
+    {tag: '@emoji_picker'},
+    async ({pw}) => {
+        // # Initialize a test user
+        const {user} = await pw.initSetup();
+
+        // # Log in as a user in new browser context
+        const {channelsPage} = await pw.testBrowser.login(user);
+        const {emojiGifPickerPopup} = channelsPage;
+        const {postCreate} = channelsPage.centerView;
+
+        // # Navigate to default channel page
+        await channelsPage.goto();
+        await channelsPage.toBeVisible();
+
+        // # Open emoji picker from center textbox
+        await postCreate.openEmojiPicker();
+
+        // * Verify emoji picker popup appears
+        await emojiGifPickerPopup.toBeVisible();
+
+        // # Click on an emoji
+        await emojiGifPickerPopup.clickEmoji('slightly smiling face');
+
+        // * Verify emoji picker popup disappears
+        await emojiGifPickerPopup.notToBeVisible();
+
+        // * Verify that the emoji was correctly added to the post textbox (as unicode), followed by a space
+        await expectPostCreateState(postCreate.input, '🙂 ', '');
+
+        // # Repeat those steps with another emoji
+        await postCreate.openEmojiPicker();
+        await emojiGifPickerPopup.clickEmoji('upside down face');
+
+        // * Verify that the second emoji was correctly added to the post textbox (as unicode), also followed by a space
+        await expectPostCreateState(postCreate.input, '🙂 🙃 ', '');
+
+        // # Clear the textbox and replace it with some text
+        await postCreate.writeMessage('ab');
+
+        // # Move left so that the caret is in the middle of the text
+        await postCreate.input.press('ArrowLeft');
+
+        // * Verify that the caret is in the right place
+        await expectPostCreateState(postCreate.input, 'a', 'b');
+
+        // # Open the emoji picker again and select another emoji
+        await postCreate.openEmojiPicker();
+        await emojiGifPickerPopup.clickEmoji('face with raised eyebrow');
+
+        // * Verify that the emoji was added with surrounding whitespace (as unicode) and that the caret is placed after that
+        await expectPostCreateState(postCreate.input, 'a 🤨 ', 'b');
+
+        // # Clear the textbox and replace it with some words
+        await postCreate.writeMessage('this is a test');
+
+        // # Move left again so that the caret is between words but after a space
+        await postCreate.input.press('ArrowLeft');
+        await postCreate.input.press('ArrowLeft');
+        await postCreate.input.press('ArrowLeft');
+        await postCreate.input.press('ArrowLeft');
+
+        // * Again, verify that the caret is in the right place
+        await expectPostCreateState(postCreate.input, 'this is a ', 'test');
+
+        // # Open the emoji picker again and select another emoji
+        await postCreate.openEmojiPicker();
+        await emojiGifPickerPopup.clickEmoji('neutral face');
+
+        // * Verify that the emoji was added without an extra space before it (as unicode)
+        await expectPostCreateState(postCreate.input, 'this is a 😐 ', 'test');
+    },
+);
+
+async function expectPostCreateState(input: Locator, textBeforeCaret: string, textAfterCaret: string) {
+    // * Verify that the post textbox is focused
+    await expect(input).toBeFocused();
+
+    // * Verify that the text in it is as expected
+    await expect(input).toHaveValue(textBeforeCaret + textAfterCaret);
+
+    // * Verify that the keyboard caret is in the correct place
+    const selectionStart = await input.evaluate((element: HTMLTextAreaElement) => element.selectionStart);
+    expect(selectionStart).toEqual(textBeforeCaret.length);
+    const selectionEnd = await input.evaluate((element: HTMLTextAreaElement) => element.selectionEnd);
+    expect(selectionEnd).toEqual(textBeforeCaret.length);
+}