add(test): add test for emoji picker (#162)

.gitignore

@@ -86,3 +86,4 @@ $RECYCLE.BIN/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+/downloads/

playwright/PageObjects/ChatsElements/CombinedSelector.ts

@@ -0,0 +1,40 @@
+import MainPage from "../MainPage";
+import { type Locator, type Page } from "@playwright/test";
+
+export class CombinedSelector extends MainPage {
+  readonly combinedSelector: Locator;
+  readonly emojiContainer: Locator;
+  readonly footerTabs: Locator;
+  readonly footerTabsEmojiButton: Locator;
+  readonly footerTabsGifButton: Locator;
+  readonly footerTabsStickerButton: Locator;
+  readonly giphySelector: Locator;
+  readonly stickerSelector: Locator;
+
+  constructor(public readonly page: Page) {
+    super(page);
+    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("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() {
+    await this.footerTabsEmojiButton.click();
+    await this.emojiContainer.waitFor({ state: "visible" });
+  }
+
+  async goToGifsTab() {
+    await this.footerTabsGifButton.click();
+    await this.giphySelector.waitFor({ state: "visible" });
+  }
+
+  async goToStickersTab() {
+    await this.footerTabsStickerButton.click();
+    await this.stickerSelector.waitFor({ state: "visible" });
+  }
+}

playwright/PageObjects/ChatsElements/EmojiPicker.ts

@@ -0,0 +1,124 @@
+import { CombinedSelector } from "./CombinedSelector";
+import { type Locator, type Page, expect } from "@playwright/test";
+
+export class EmojiPicker extends CombinedSelector {
+  readonly categoryNav: Locator;
+  readonly categoryNavLink: Locator;
+  readonly emojiSection: Locator;
+  readonly emojiSectionEmojis: Locator;
+  readonly emojiSectionLabel: Locator;
+  readonly emojiSectionList: Locator;
+  readonly emojiContainerSearchInput: Locator;
+  readonly emojiContainerSizeLabel: Locator;
+  readonly emojiContainerSizeRangeSelector: Locator;
+  readonly emojiContainerSizeRangeSelectorInput: Locator;
+  readonly emojiContainerSizeSection: Locator;
+  readonly emojiSelector: Locator;
+  readonly frequentlyUsedSection: Locator;
+  readonly skinToneSelector: Locator;
+  readonly skinToneSelectorButton: Locator;
+
+  constructor(public readonly page: Page) {
+    super(page);
+    this.categoryNav = this.page.getByTestId("emoji-category-nav");
+    this.emojiContainerSearchInput = this.page.getByTestId(
+      "emoji-container-search-input",
+    );
+    this.emojiContainerSizeLabel = this.page.getByTestId(
+      "emoji-container-size-label",
+    );
+    this.emojiContainerSizeRangeSelector = this.page
+      .getByTestId("emoji-container-size-section")
+      .getByTestId("range-selector");
+    this.emojiContainerSizeRangeSelectorInput = this.page
+      .getByTestId("emoji-container-size-section")
+      .getByTestId("range-selector")
+      .getByTestId("range-selector-input");
+    this.emojiContainerSizeSection = this.page.getByTestId(
+      "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",
+    );
+  }
+
+  async changeSkinToneEmoji(index: number) {
+    await this.skinToneSelector.click();
+    await this.page.locator(".skin-tone-popup").waitFor({ state: "visible" });
+    const skinToneButton = this.page
+      .getByTestId("skin-tone-selector-button")
+      .nth(index);
+    await skinToneButton.click();
+    await this.page.locator(".skin-tone-popup").waitFor({ state: "detached" });
+  }
+
+  async changeEmojiSizeView(size: string) {
+    await this.emojiContainerSizeRangeSelectorInput.fill(size);
+  }
+
+  async navigateThroughEmojiCategories(category: string) {
+    const locator = this.page.getByTestId("category-link-" + category);
+    await locator.click();
+    const section = this.page.getByTestId(category + "-section");
+    await section.waitFor({ state: "visible" });
+  }
+
+  async searchEmoji(emoji: string) {
+    await this.emojiContainerSearchInput.fill(emoji);
+  }
+
+  async selectEmoji(emoji: string) {
+    await this.page
+      .getByTestId("emoji-container")
+      .locator("span")
+      .filter({
+        hasText: emoji,
+      })
+      .click();
+  }
+
+  async validateEmojiCategories(expectedCategories: string[]) {
+    // Define an array to store section names
+    const sectionNames = [];
+
+    // Select all section elements (assuming they have a data-cy attribute ending with '-section')
+    const sections = await this.page.$$(`section[data-cy$="-section"]`);
+
+    // Loop through each section and find its corresponding label
+    for (const section of sections) {
+      // Find the label within the current section that ends with '-label'
+      const label = await section.$(`label[data-cy$="-label"]`);
+      if (label) {
+        const sectionName = await label.textContent();
+        sectionNames.push(sectionName.trim());
+      }
+    }
+    expect(sectionNames).toEqual(expectedCategories);
+  }
+
+  async validateNumberOfEmojisPerSection(
+    section: string,
+    expectedNumber: number,
+  ) {
+    const emojisCount = await this.page
+      .getByTestId(section + "-section")
+      .locator("span")
+      .count();
+    expect(emojisCount).toEqual(expectedNumber);
+  }
+
+  async validateSingleEmojiSize(emoji: string, expectedSize: string) {
+    const emojiLocator = this.page
+      .getByTestId("emoji-container")
+      .locator("span")
+      .filter({
+        hasText: emoji,
+      });
+    await expect(emojiLocator).toHaveCSS("font-size", expectedSize);
+  }
+}

playwright/PageObjects/ChatsElements/GifPicker.ts

@@ -0,0 +1,11 @@
+import MainPage from "../MainPage";
+import { type Locator, type Page } from "@playwright/test";
+
+export class GifPicker extends MainPage {
+  readonly combinedSelector: Locator;
+
+  constructor(public readonly page: Page) {
+    super(page);
+    this.combinedSelector = this.page.getByTestId("combined-selector");
+  }
+}

playwright/PageObjects/ChatsElements/StickerPicker.ts

@@ -0,0 +1,11 @@
+import MainPage from "../MainPage";
+import { type Locator, type Page } from "@playwright/test";
+
+export class StickerPicker extends MainPage {
+  readonly combinedSelector: Locator;
+
+  constructor(public readonly page: Page) {
+    super(page);
+    this.combinedSelector = this.page.getByTestId("combined-selector");
+  }
+}

playwright/PageObjects/ChatsMain.ts

@@ -61,6 +61,7 @@ export class ChatsMainPage extends MainPage {
   readonly fileEmbedName: Locator;
   readonly fileEmbedShareButton: Locator;
   readonly fileEmbedSize: Locator;
+  readonly gifPickerButton: Locator;
   readonly imageEmbedContainer: Locator;
   readonly imageEmbedDownloadButton: Locator;
   readonly imageEmbedFile: Locator;
@@ -103,6 +104,7 @@ export class ChatsMainPage extends MainPage {
   readonly sectionAddSomeone: Locator;
   readonly scrollToBottomButton: Locator;
   readonly statusIndicator: Locator;
+  readonly stickerPickerButton: Locator;
   readonly textChatMessage: Locator;
   readonly topbar: Locator;
   readonly uploadFileInput: Locator;
@@ -236,7 +238,9 @@ export class ChatsMainPage extends MainPage {
       .getByRole("textbox");
     this.emojiButton = this.page.locator('[data-cy^="button-emoji-"]');
     this.emojiGroup = this.page.getByTestId("emoji-group");
-    this.emojiPickerButton = this.page.getByTestId("button-emoji-picker");
+    this.emojiPickerButton = this.page.getByTestId(
+      "button-chatbar-emoji-picker",
+    );
     this.fileEmbed = this.page.getByTestId("file-embed");
     this.fileEmbedAddToFilesButton = this.fileEmbed.getByTestId(
       "file-embed-add-to-files-button",
@@ -250,6 +254,7 @@ export class ChatsMainPage extends MainPage {
       "file-embed-share-button",
     );
     this.fileEmbedSize = this.fileEmbed.getByTestId("file-embed-size");
+    this.gifPickerButton = this.page.getByTestId("button-chatbar-gif-picker");
     this.imageEmbedContainer = this.page.getByTestId("image-embed-container");
     this.imageEmbedDownloadButton = this.imageEmbedContainer.getByTestId(
       "image-embed-download-button",
@@ -335,6 +340,9 @@ export class ChatsMainPage extends MainPage {
       .locator(".scroll-to-bottom")
       .locator("button");
     this.sectionAddSomeone = this.page.getByTestId("section-add-someone");
+    this.stickerPickerButton = this.page.getByTestId(
+      "button-chatbar-sticker-picker",
+    );
     this.textChatMessage = this.page.getByTestId("text-chat-message");
     this.topbar = this.page.getByTestId("topbar");
     this.uploadFileInput = this.chatbar.locator('input[type="file"]');
@@ -1093,4 +1101,18 @@ export class ChatsMainPage extends MainPage {
     await expect(modalPreviewImageContainer).toBeVisible();
     await expect(modalPreviewImage).toBeVisible();
   }
+
+  // Emojis, GIFs and Stickers methods
+
+  async openEmojiPicker() {
+    await this.emojiPickerButton.click();
+  }
+
+  async openGifPicker() {
+    await this.gifPickerButton.click();
+  }
+
+  async openStickerPicker() {
+    await this.stickerPickerButton.click();
+  }
 }