MM-54404 : E2E tests for the Gif picker (#24486)

e2e-tests/playwright/support/ui/components/channels/emoji_gif_picker.ts

@@ -0,0 +1,61 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, Locator} from '@playwright/test';
+
+export default class EmojiGifPicker {
+    readonly container: Locator;
+
+    readonly gifTab: Locator;
+    readonly gifSearchInput: Locator;
+    readonly gifPickerItems: Locator;
+
+    constructor(container: Locator) {
+        this.container = container;
+
+        this.gifTab = container.getByText('GIFs');
+        this.gifSearchInput = container.getByPlaceholder('Search GIPHY');
+        this.gifPickerItems = container.locator('.gif-picker__items')
+    }
+
+    async toBeVisible() {
+        await expect(this.container).toBeVisible();
+    }
+
+    async openGifTab() {
+        await expect(this.gifTab).toBeVisible();
+        
+        await this.gifTab.click({force: true});
+
+        await expect(this.gifSearchInput).toBeVisible();
+        await expect(this.gifPickerItems).toBeVisible();
+    }
+
+    async searchGif(name: string) {
+        await this.gifSearchInput.fill(name);
+        await expect(this.gifSearchInput).toHaveValue(name);
+    }
+
+    async getNthGif(n: number) {
+        await expect(this.gifPickerItems).toBeVisible();
+
+        await this.gifPickerItems.locator('img').nth(n).waitFor();
+        const nthGif = this.gifPickerItems.locator('img').nth(n);
+        await expect(nthGif).toBeVisible()
+
+        const nthGifSrc = await nthGif.getAttribute('src');
+        const nthGifAlt = await nthGif.getAttribute('alt');
+
+        if (!nthGifSrc || !nthGifAlt) {
+            throw new Error('Gif src or alt is empty');
+        }
+
+        return {
+            src: nthGifSrc,
+            alt: nthGifAlt,
+            img: nthGif,
+        };
+    }
+}
+
+export {EmojiGifPicker};

e2e-tests/playwright/support/ui/components/index.ts

@@ -19,6 +19,7 @@ import {PostDotMenu} from './channels/post_dot_menu';
 import {PostReminderMenu} from './channels/post_reminder_menu';
 import {PostMenu} from './channels/post_menu';
 import {ThreadFooter} from './channels/thread_footer';
+import {EmojiGifPicker} from './channels/emoji_gif_picker';
 
 const components = {
     BoardsSidebar,
@@ -39,6 +40,7 @@ const components = {
     Footer,
     MainHeader,
     PostReminderMenu,
+    EmojiGifPicker,
 };
 
 export {

e2e-tests/playwright/support/ui/pages/channels.ts

@@ -23,6 +23,8 @@ export default class ChannelsPage {
     readonly postDotMenu;
     readonly postReminderMenu;
 
+    readonly emojiGifPickerPopup;
+
     constructor(page: Page) {
         this.page = page;
 
@@ -40,6 +42,9 @@ export default class ChannelsPage {
         // Menus
         this.postDotMenu = new components.PostDotMenu(page.getByRole('menu', {name: 'Post extra options'}));
         this.postReminderMenu = new components.PostReminderMenu(page.getByRole('menu', {name: 'Set a reminder for:'}));
+
+        // Popovers
+        this.emojiGifPickerPopup = new components.EmojiGifPicker(page.locator('#emojiGifPicker'));
     }
 
     async toBeVisible() {

e2e-tests/playwright/tests/functional/channels/gif_picker/gif_picker_search.spec.ts

@@ -0,0 +1,95 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, test} from '@e2e-support/test_fixture';
+
+test('MM-T5445 Should search, select and post correct Gif when Gif picker is opened from center textbox', async ({
+    pw,
+    pages,
+}) => {
+    const {user} = await pw.initSetup();
+
+    // # Log in as a user in new browser context
+    const {page} = await pw.testBrowser.login(user);
+
+    // # Visit default channel page
+    const channelPage = new pages.ChannelsPage(page);
+    await channelPage.goto();
+    await channelPage.toBeVisible();
+
+    // # Open emoji/gif picker
+    await channelPage.centerView.postCreate.openEmojiPicker();
+    await channelPage.emojiGifPickerPopup.toBeVisible();
+
+    // # Open gif tab
+    await channelPage.emojiGifPickerPopup.openGifTab();
+
+    // # Search for gif
+    await channelPage.emojiGifPickerPopup.searchGif('hello');
+
+    // # Select the first gif
+    const {img: firstSearchGifResult, alt: altOfFirstSearchGifResult} = await channelPage.emojiGifPickerPopup.getNthGif(0);
+    await firstSearchGifResult.click();
+
+    // # Send the selected gif as a message
+    await channelPage.centerView.postCreate.sendMessage();
+
+    // * Verify that last message has the gif
+    const lastPost = await channelPage.centerView.getLastPost();
+    await lastPost.toBeVisible();
+    await expect(lastPost.body.getByLabel('file thumbnail')).toHaveAttribute('alt', altOfFirstSearchGifResult);
+});
+
+test('MM-T5446 Should search, select and post correct Gif when Gif picker is opened from RHS textbox', async ({
+    pw,
+    pages,
+}) => {
+    const {user} = await pw.initSetup();
+
+    // # Log in as a user in new browser context
+    const {page} = await pw.testBrowser.login(user);
+
+    // # Visit default channel page
+    const channelPage = new pages.ChannelsPage(page);
+    await channelPage.goto();
+    await channelPage.toBeVisible();
+
+    // # Send a message
+    await channelPage.centerView.postCreate.postMessage('Message to open RHS');
+
+    // # Open the last post sent in RHS
+    const lastPost = await channelPage.centerView.getLastPost();
+    await lastPost.hover();
+    await lastPost.postMenu.toBeVisible();
+    await lastPost.postMenu.reply();
+
+    const sidebarRight = channelPage.sidebarRight;
+    await sidebarRight.toBeVisible();
+
+    // # Send a message in the thread
+    await sidebarRight.postCreate.toBeVisible();
+    await sidebarRight.postCreate.writeMessage('Replying to a thread');
+    await sidebarRight.postCreate.sendMessage();
+
+    // # Open emoji/gif picker
+    await sidebarRight.postCreate.openEmojiPicker();
+    await channelPage.emojiGifPickerPopup.toBeVisible();
+
+    // # Open gif tab
+    await channelPage.emojiGifPickerPopup.openGifTab();
+
+    // # Search for gif
+    await channelPage.emojiGifPickerPopup.searchGif('hello');
+
+    // # Select the first gif
+    const {img: firstSearchGifResult, alt: altOfFirstSearchGifResult} = await channelPage.emojiGifPickerPopup.getNthGif(0);
+    await firstSearchGifResult.click();
+
+    // # Send the selected gif as a message in the thread
+    await sidebarRight.postCreate.sendMessage();
+
+    // * Verify that last message has the gif
+    const lastPostInRHS = await sidebarRight.getLastPost();
+    await lastPostInRHS.toBeVisible();
+    await expect(lastPostInRHS.body.getByLabel('file thumbnail')).toHaveAttribute('alt', altOfFirstSearchGifResult);
+});