update(test): finishing emoji tests

playwright/PageObjects/ChatsElements/CombinedSelector.ts

@@ -16,15 +16,11 @@ export class CombinedSelector extends MainPage {
     this.combinedSelector = this.page.getByTestId("combined-selector");
     this.emojiContainer = this.page.getByTestId("emoji-container");
     this.footerTabs = this.page.getByTestId(".pill-tabs");
-    this.footerTabsEmojiButton = this.page
-      .getByTestId(".pill-tabs")
-      .getByTestId("button-Emojis");
-    this.footerTabsGifButton = this.page
-      .getByTestId(".pill-tabs")
-      .getByTestId("button-GIFs");
-    this.footerTabsStickerButton = this.page
-      .getByTestId(".pill-tabs")
-      .getByTestId("button-Stickers");
+    this.footerTabsEmojiButton = this.page.getByTestId("button-Emojis");
+    this.footerTabsGifButton = this.page.getByTestId("button-GIFs");
+    this.footerTabsStickerButton = this.page.getByTestId("button-Stickers");
+    this.giphySelector = this.page.getByTestId("giphy-selector");
+    this.stickerSelector = this.page.getByTestId("sticker-selector");
   }
 
   async goToEmojisTab() {

playwright/PageObjects/ChatsElements/EmojiPicker.ts

@@ -14,6 +14,7 @@ export class EmojiPicker extends CombinedSelector {
   readonly emojiContainerSizeRangeSelectorInput: Locator;
   readonly emojiContainerSizeSection: Locator;
   readonly emojiSelector: Locator;
+  readonly frequentlyUsedSection: Locator;
   readonly skinToneSelector: Locator;
   readonly skinToneSelectorButton: Locator;
 
@@ -27,15 +28,19 @@ export class EmojiPicker extends CombinedSelector {
       "emoji-container-size-label",
     );
     this.emojiContainerSizeRangeSelector = this.page
-      .getByTestId("emoji-container-size-selection")
+      .getByTestId("emoji-container-size-section")
       .getByTestId("range-selector");
     this.emojiContainerSizeRangeSelectorInput = this.page
-      .getByTestId("emoji-container-size-selection")
+      .getByTestId("emoji-container-size-section")
+      .getByTestId("range-selector")
       .getByTestId("range-selector-input");
     this.emojiContainerSizeSection = this.page.getByTestId(
-      "emoji-container-size-selection",
+      "emoji-container-size-section",
     );
     this.emojiSelector = this.page.getByTestId("emoji-selector");
+    this.frequentlyUsedSection = this.page.getByTestId(
+      "frequently-used-section",
+    );
     this.skinToneSelector = this.page.getByTestId("skin-tone-selector");
     this.skinToneSelectorButton = this.page.getByTestId(
       "skin-tone-selector-button",
@@ -98,14 +103,15 @@ export class EmojiPicker extends CombinedSelector {
   ) {
     const emojisCount = await this.page
       .getByTestId(section + "-section")
-      .locator("span .emoji")
+      .locator("span")
       .count();
     expect(emojisCount).toEqual(expectedNumber);
   }
 
   async validateEmojiSnapshot() {
     await expect(this.page).toHaveScreenshot({
       maxDiffPixels: 400,
+      mask: [this.skinToneSelector, this.frequentlyUsedSection],
     });
   }
 }

playwright/specs/03-friends-two-instances.spec.ts

@@ -1512,7 +1512,7 @@ test.describe("Two instances tests - Friends and Chats", () => {
     await chatsMainPageFirst.closeImagePreview();
   });
 
-  test("Sending and receiving emojis, gifs and stickers tests", async ({
+  test("B66 - Sending and receiving emojis and emoji picker tests", async ({
     firstUserContext,
     secondUserContext,
   }) => {
@@ -1551,41 +1551,90 @@ test.describe("Two instances tests - Friends and Chats", () => {
     // Change skin tone of emojis
     await chatsMainPageSecond.openEmojiPicker();
     await emojiPickerSecond.changeSkinToneEmoji(2);
-    await emojiPickerSecond.selectEmoji("🖐🏽");
+    await emojiPickerSecond.selectEmoji("🖐🏾");
     await chatsMainPageSecond.buttonChatbarSendMessage.click();
 
     // Validate emoji sent is displayed on local and remote sides
     await expect(chatsMainPageSecond.messageBubbleContent.last()).toHaveText(
-      "🖐🏽",
+      "🖐🏾",
     );
     await expect(chatsMainPageFirst.messageBubbleContent.last()).toHaveText(
-      "🖐🏽",
+      "🖐🏾",
     );
 
     // Change emoji size in emojis container view
     await chatsMainPageSecond.openEmojiPicker();
-    await emojiPickerSecond.changeEmojiSizeView("1");
+    await emojiPickerSecond.changeEmojiSizeView("16");
     await emojiPickerSecond.validateEmojiSnapshot();
-    await emojiPickerSecond.changeEmojiSizeView("99");
+    await emojiPickerSecond.changeEmojiSizeView("45");
     await emojiPickerSecond.validateEmojiSnapshot();
-    await emojiPickerSecond.changeEmojiSizeView("50");
+    await emojiPickerSecond.changeEmojiSizeView("30");
     await emojiPickerSecond.validateEmojiSnapshot();
 
     // Validate emoji categories displayed in emoji container
-    const emojiCategories = ["Frequently Used", "Smileys And Emotion"];
+    const emojiCategories = [
+      "Frequently Used",
+      "smileys and emotion",
+      "people and body",
+      "animals and nature",
+      "food and drink",
+      "travel and places",
+      "activities",
+      "objects",
+      "symbols",
+      "flags",
+    ];
     await emojiPickerSecond.validateEmojiCategories(emojiCategories);
 
     // Validate number of emojis per category
     await emojiPickerSecond.validateNumberOfEmojisPerSection(
       "frequently-used",
-      1,
+      2,
+    );
+    await emojiPickerSecond.validateNumberOfEmojisPerSection(
+      "smileys-and-emotion",
+      168,
     );
+    await emojiPickerSecond.validateNumberOfEmojisPerSection(
+      "people-and-body",
+      367,
+    );
+    await emojiPickerSecond.validateNumberOfEmojisPerSection(
+      "animals-and-nature",
+      153,
+    );
+    await emojiPickerSecond.validateNumberOfEmojisPerSection(
+      "food-and-drink",
+      135,
+    );
+    await emojiPickerSecond.validateNumberOfEmojisPerSection(
+      "travel-and-places",
+      218,
+    );
+    await emojiPickerSecond.validateNumberOfEmojisPerSection("activities", 84);
+    await emojiPickerSecond.validateNumberOfEmojisPerSection("objects", 261);
+    await emojiPickerSecond.validateNumberOfEmojisPerSection("symbols", 223);
+    await emojiPickerSecond.validateNumberOfEmojisPerSection("flags", 269);
 
     // Validate user can navigate through all categories of emojis
     await emojiPickerSecond.navigateThroughEmojiCategories(
       "smileys-and-emotion",
     );
     await emojiPickerSecond.navigateThroughEmojiCategories("people-and-body");
+    await emojiPickerSecond.navigateThroughEmojiCategories(
+      "animals-and-nature",
+    );
+    await emojiPickerSecond.navigateThroughEmojiCategories("food-and-drink");
+    await emojiPickerSecond.navigateThroughEmojiCategories("travel-and-places");
+    await emojiPickerSecond.navigateThroughEmojiCategories("activities");
+    await emojiPickerSecond.navigateThroughEmojiCategories("objects");
+    await emojiPickerSecond.navigateThroughEmojiCategories("symbols");
+    await emojiPickerSecond.navigateThroughEmojiCategories("flags");
+
+    // Validate user can navigate through tabs in emoji picker
+    await emojiPickerSecond.goToGifsTab();
+    await emojiPickerSecond.goToStickersTab();
+    await emojiPickerSecond.goToEmojisTab();
   });
 });