MM-64282 E2E/Playwright: Test documentation format (#31050)

* initial implementation of test documentation in spec file with AI-assisted prompt from Claude and linter script

* update snapshots

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

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

@@ -3,91 +3,106 @@
 
 import {expect, test} from '@mattermost/playwright-lib';
 
+/**
+ * @objective Verify that users can search for GIFs, select them, and post them correctly when using the center textbox.
+ */
 test.fixme(
-    'MM-T5445 Should search, select and post correct Gif when Gif picker is opened from center textbox',
+    'MM-T5445 searches for GIF from center textbox and posts selected GIF correctly',
+    {tag: '@gif_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);
 
-        // # Visit default channel page
+        // # Navigate to default channel page
         await channelsPage.goto();
         await channelsPage.toBeVisible();
 
-        // # Open emoji/gif picker
+        // # Open emoji/gif picker from center textbox
         await channelsPage.centerView.postCreate.openEmojiPicker();
+
+        // * Verify emoji/gif picker popup appears
         await channelsPage.emojiGifPickerPopup.toBeVisible();
 
-        // # Open gif tab
+        // # Switch to GIF tab in the picker
         await channelsPage.emojiGifPickerPopup.openGifTab();
 
-        // # Search for gif
+        // # Search for GIFs using the term "hello"
         await channelsPage.emojiGifPickerPopup.searchGif('hello');
 
-        // # Select the first gif
+        // # Select the first GIF from search results
         const {img: firstSearchGifResult, alt: altOfFirstSearchGifResult} =
             await channelsPage.emojiGifPickerPopup.getNthGif(0);
         await firstSearchGifResult.click();
 
-        // # Send the selected gif as a message
+        // # Send the selected GIF as a message
         await channelsPage.centerView.postCreate.sendMessage();
 
-        // * Verify that last message has the gif
+        // * Verify the posted message contains the selected GIF
         const lastPost = await channelsPage.getLastPost();
         await lastPost.toBeVisible();
         await expect(lastPost.body.getByLabel('file thumbnail')).toHaveAttribute('alt', altOfFirstSearchGifResult);
     },
 );
 
+/**
+ * @objective Verify that users can search for GIFs, select them, and post them correctly when using the right-hand sidebar.
+ */
 test.fixme(
-    'MM-T5446 Should search, select and post correct Gif when Gif picker is opened from RHS textbox',
+    'MM-T5446 searches for GIF from RHS textbox and posts selected GIF correctly in thread',
+    {tag: '@gif_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);
 
-        // # Visit default channel page
+        // # Navigate to default channel page
         await channelsPage.goto();
         await channelsPage.toBeVisible();
 
-        // # Send a message
+        // # Post a message to create a thread
         await channelsPage.postMessage('Message to open RHS');
 
-        // # Open the last post sent in RHS
+        // # Open the message in right-hand sidebar to start a thread
         const lastPost = await channelsPage.getLastPost();
         await lastPost.hover();
         await lastPost.postMenu.toBeVisible();
         await lastPost.postMenu.reply();
 
+        // * Verify right sidebar opens and is visible
         const sidebarRight = channelsPage.sidebarRight;
         await sidebarRight.toBeVisible();
 
-        // # Send a message in the thread
+        // # Post an initial reply in the thread
         await sidebarRight.postCreate.toBeVisible();
         await sidebarRight.postCreate.writeMessage('Replying to a thread');
         await sidebarRight.postCreate.sendMessage();
 
-        // # Open emoji/gif picker
+        // # Open emoji/gif picker from the RHS textbox
         await sidebarRight.postCreate.openEmojiPicker();
+
+        // * Verify emoji/gif picker popup appears
         await channelsPage.emojiGifPickerPopup.toBeVisible();
 
-        // # Open gif tab
+        // # Switch to GIF tab in the picker
         await channelsPage.emojiGifPickerPopup.openGifTab();
 
-        // # Search for gif
+        // # Search for GIFs using the term "hello"
         await channelsPage.emojiGifPickerPopup.searchGif('hello');
 
-        // # Select the first gif
+        // # Select the first GIF from search results
         const {img: firstSearchGifResult, alt: altOfFirstSearchGifResult} =
             await channelsPage.emojiGifPickerPopup.getNthGif(0);
         await firstSearchGifResult.click();
 
-        // # Send the selected gif as a message in the thread
+        // # Send the selected GIF as a message in the thread
         await sidebarRight.postCreate.sendMessage();
 
-        // * Verify that last message has the gif
+        // * Verify the posted message in the thread contains the selected GIF
         const lastPostInRHS = await sidebarRight.getLastPost();
         await lastPostInRHS.toBeVisible();
         await expect(lastPostInRHS.body.getByLabel('file thumbnail')).toHaveAttribute('alt', altOfFirstSearchGifResult);