add(test): add test for happy path on create group chat (#185)

playwright/PageObjects/ChatsMain.ts → playwright/PageObjects/ChatsElements/ChatsMain.ts

@@ -1,4 +1,4 @@
-import MainPage from "./MainPage";
+import MainPage from "../MainPage";
 import { expect, type Locator, type Page } from "@playwright/test";
 const fs = require("fs");
 
@@ -44,12 +44,6 @@ export class ChatsMainPage extends MainPage {
   readonly contextMenuOptionUnpinMessage: Locator;
   readonly contextMenuOptionUpload: Locator;
   readonly contextMenuSidebarChat: Locator;
-  readonly createGroupButton: Locator;
-  readonly createGroupModal: Locator;
-  readonly createGroupInputGroupName: Locator;
-  readonly createGroupLabelGroupMembers: Locator;
-  readonly createGroupLabelGroupName: Locator;
-  readonly createGroupLabelSelectMembers: Locator;
   readonly editMessageInput: Locator;
   readonly emojiButton: Locator;
   readonly emojiGroup: Locator;
@@ -220,20 +214,6 @@ export class ChatsMainPage extends MainPage {
     this.contextMenuOptionUnpinMessage = this.page.getByTestId(
       "context-menu-option-Unpin Message",
     );
-    this.createGroupButton = this.page.getByTestId("button-create-group");
-    this.createGroupModal = this.page.getByTestId("modal-create-group-chat");
-    this.createGroupInputGroupName = this.page.getByTestId(
-      "input-create-group-name",
-    );
-    this.createGroupLabelGroupMembers = this.page.getByTestId(
-      "label-create-group-members",
-    );
-    this.createGroupLabelGroupName = this.page.getByTestId(
-      "label-create-group-name",
-    );
-    this.createGroupLabelSelectMembers = this.page.getByTestId(
-      "label-create-group-select-members",
-    );
     this.editMessageInput = this.page
       .getByTestId("message-bubble-content")
       .locator(".cm-editor")
@@ -372,6 +352,10 @@ export class ChatsMainPage extends MainPage {
     await this.buttonChatCall.click();
   }
 
+  async clickOnCreateGroupChat() {
+    await this.buttonCreateGroupChat.click();
+  }
+
   async clickOnFavoriteButton() {
     if (this.viewport === "mobile-chrome") {
       await this.clickOnHamburgerMobileButton();

playwright/PageObjects/ChatsElements/CreateGroupModal.ts

@@ -0,0 +1,87 @@
+import MainPage from "../MainPage";
+import { type Locator, type Page, expect } from "@playwright/test";
+
+export class CreateGroupModal extends MainPage {
+  readonly createGroupButton: Locator;
+  readonly createGroupModal: Locator;
+  readonly createGroupInputGroupName: Locator;
+  readonly createGroupLabelGroupMembers: Locator;
+  readonly createGroupLabelGroupName: Locator;
+  readonly createGroupLabelSelectMembers: Locator;
+  readonly createGroupUsersList: Locator;
+  readonly errorNameCreateGroupModal: Locator;
+  readonly errorUsersCreateGroupModal: Locator;
+  readonly singleUser: Locator;
+  readonly singleUserProfilePicture: Locator;
+  readonly singleUserProfilePictureIdenticon: Locator;
+  readonly singleUserProfilePictureImage: Locator;
+  readonly singleUserStatusIndicator: Locator;
+  readonly singleUserUserInfo: Locator;
+  readonly singleUserName: Locator;
+  readonly singleUserKey: Locator;
+  readonly singleUserCheckbox: Locator;
+
+  constructor(
+    public readonly page: Page,
+    public readonly viewport: string,
+  ) {
+    super(page, viewport);
+    this.createGroupModal = this.page.getByTestId("modal-create-group-chat");
+    this.createGroupButton = this.createGroupModal.getByTestId(
+      "button-create-group",
+    );
+    this.createGroupInputGroupName = this.createGroupModal
+      .getByTestId("input-create-group-name")
+      .getByRole("textbox");
+    this.createGroupLabelGroupMembers = this.createGroupModal.getByTestId(
+      "label-create-group-members",
+    );
+    this.createGroupLabelGroupName = this.createGroupModal.getByTestId(
+      "label-create-group-name",
+    );
+    this.createGroupLabelSelectMembers = this.createGroupModal.getByTestId(
+      "label-create-group-select-members",
+    );
+    this.createGroupUsersList = this.createGroupModal.getByTestId(
+      "create-group-users-list",
+    );
+    this.errorNameCreateGroupModal = this.createGroupModal
+      .locator(".error-message")
+      .locator("p");
+    this.errorUsersCreateGroupModal = this.createGroupModal.getByTestId(
+      "text-error-create-group",
+    );
+    this.singleUser = this.createGroupUsersList.getByTestId("single-user");
+    this.singleUserProfilePicture;
+    this.singleUserProfilePictureIdenticon;
+    this.singleUserProfilePictureImage;
+    this.singleUserStatusIndicator;
+    this.singleUserUserInfo;
+    this.singleUserName;
+    this.singleUserKey;
+    this.singleUserCheckbox;
+  }
+
+  async createGroupChat(name: string, users: string[]) {
+    await this.createGroupModal.waitFor({ state: "attached" });
+    await this.createGroupInputGroupName.fill(name);
+    await this.selectUser(users);
+    await this.createGroupButton.click();
+  }
+
+  async exitCreateGroup(): Promise<void> {
+    await this.page.mouse.click(0, 0);
+  }
+
+  async selectUser(users: string[]) {
+    for (const user of users) {
+      const userCheckbox = this.page
+        .locator(`[data-cy="single-user-name"]`)
+        .filter({ hasText: user })
+        .locator("xpath=..")
+        .locator("xpath=..")
+        .getByTestId("single-user-checkbox");
+      await userCheckbox.click();
+    }
+  }
+}

playwright/PageObjects/MainPage.ts

@@ -20,6 +20,9 @@ export default class MainPage {
   readonly chatPreviewPicture: Locator;
   readonly chatPreviewPictureIdenticon: Locator;
   readonly chatPreviewPictureImage: Locator;
+  readonly chatPreviewPictureMany: Locator;
+  readonly chatPreviewPictureSingle: Locator;
+  readonly chatPreviewPictureSingleImage: Locator;
   readonly chatPreviewStatusIndicator: Locator;
   readonly chatPreviewTimestamp: Locator;
   readonly favoriteCircle: Locator;
@@ -72,6 +75,12 @@ export default class MainPage {
     this.chatPreviewPictureIdenticon =
       this.chatPreviewPicture.locator(".identicon img");
     this.chatPreviewPictureImage = this.chatPreviewPicture.locator("img");
+    this.chatPreviewPictureMany = this.page.getByTestId("profile-picture-many");
+    this.chatPreviewPictureSingle = this.page.getByTestId(
+      "profile-picture-many-single-pic",
+    );
+    this.chatPreviewPictureSingleImage =
+      this.chatPreviewPictureSingle.locator("img");
     this.chatPreviewStatusIndicator =
       this.chatPreview.getByTestId("status-indicator");
     this.chatPreviewTimestamp = this.page.getByTestId("chat-preview-timestamp");
@@ -230,6 +239,14 @@ export default class MainPage {
     await this.buttonSettings.first().click();
   }
 
+  async goToSidebarChat(chatName: string) {
+    const chatPreviewLocator = this.page
+      .getByTestId("chat-preview-name")
+      .filter({ hasText: chatName })
+      .locator("xpath=../../..");
+    await chatPreviewLocator.click();
+  }
+
   async goToWallet() {
     await this.dismissAddSomeoneOnMobile();
     await this.clickOnShowSidebarIfClosed();
@@ -346,7 +363,35 @@ export default class MainPage {
       .textContent();
     const statusIndicator = chatPreviewLocator.getByTestId("status-indicator");
     expect(text).toEqual(expectedText);
-    expect(timestamp).toEqual("just now");
+    expect(timestamp).toMatch(/just now|1 minute ago/);
     expect(statusIndicator).toHaveClass(/.*\bonline\b.*/);
   }
+
+  async validateChatPreviewMessageTextGroup(
+    chatName: string,
+    expectedText: string,
+    numberOfParticipants: number,
+  ) {
+    const chatPreviewLocator = this.page
+      .getByTestId("chat-preview-name")
+      .filter({ hasText: chatName })
+      .locator("xpath=../../..");
+    const text = await chatPreviewLocator
+      .getByTestId("chat-preview-last-message")
+      .textContent();
+    const timestamp = await chatPreviewLocator
+      .getByTestId("chat-preview-timestamp")
+      .textContent();
+    const profilePictureGroup = await chatPreviewLocator.getByTestId(
+      "profile-picture-many",
+    );
+    const singleProfilePictures = await chatPreviewLocator.getByTestId(
+      "profile-picture-many-single-pic",
+    );
+    const numberOfProfilePictures = await singleProfilePictures.count();
+    expect(numberOfProfilePictures).toBe(numberOfParticipants);
+    expect(text).toEqual(expectedText);
+    expect(timestamp).toEqual("just now");
+    await expect(profilePictureGroup).toBeVisible();
+  }
 }

playwright/fixtures/setup.ts

@@ -5,7 +5,7 @@ import {
   type Page,
 } from "@playwright/test";
 import { AuthNewAccount } from "../PageObjects/AuthNewAccount";
-import { ChatsMainPage } from "../PageObjects/ChatsMain";
+import { ChatsMainPage } from "../PageObjects/ChatsElements/ChatsMain";
 import { CreateOrImportPage } from "../PageObjects/CreateOrImport";
 import { LoginPinPage } from "../PageObjects/LoginPin";
 import { SaveRecoverySeedPage } from "../PageObjects/SaveRecoverySeed";
@@ -32,6 +32,11 @@ type MyFixtures = {
     page: Page;
     viewport: string;
   };
+  thirdUserContext: {
+    context: BrowserContext;
+    page: Page;
+    viewport: string;
+  };
 };
 
 // Extend base test by providing page object classes as fixtures.
@@ -207,6 +212,51 @@ export const test = base.extend<MyFixtures>({
     await context.clearPermissions();
     await context.close();
   },
+
+  thirdUserContext: async ({}, use, testInfo) => {
+    // Declare all constants required for the precondition steps
+    const browser = await chromium.launch();
+    const context = await browser.newContext();
+    const page = await context.newPage();
+    const viewport = testInfo.project.name;
+    const createOrImport = new CreateOrImportPage(page, viewport);
+    const authNewAccount = new AuthNewAccount(page, viewport);
+    const loginPinPage = new LoginPinPage(page, viewport);
+    const saveRecoverySeed = new SaveRecoverySeedPage(page, viewport);
+    const username: string = "ChatUserC";
+    const status: string = "status from third user";
+
+    // Start browser one
+    await createOrImport.navigateTo();
+
+    // Click on Create New Account
+    await createOrImport.clickCreateNewAccount();
+
+    // Enter username and Status and click on create account
+    await authNewAccount.validateLoadingHeader();
+    await authNewAccount.typeOnUsername(username);
+    await authNewAccount.typeOnStatus(status);
+    await authNewAccount.clickOnCreateAccount();
+
+    // Enter Pin
+    await loginPinPage.waitUntilPageIsLoaded();
+    await loginPinPage.enterDefaultPin();
+
+    // Click on I Saved It
+    await saveRecoverySeed.clickOnSavedIt();
+
+    // Pass the context, browser, and page to the test
+    await use({
+      context,
+      page,
+      viewport,
+    });
+
+    // Close the context and browser after the test is done
+    await context.clearCookies();
+    await context.clearPermissions();
+    await context.close();
+  },
 });
 
 export { expect } from "@playwright/test";

playwright/specs/01-pin-input.spec.ts

@@ -4,7 +4,7 @@ import { faker } from "@faker-js/faker";
 import { AuthNewAccount } from "playwright/PageObjects/AuthNewAccount";
 import { LoginPinPage } from "playwright/PageObjects/LoginPin";
 import { SaveRecoverySeedPage } from "playwright/PageObjects/SaveRecoverySeed";
-import { ChatsMainPage } from "playwright/PageObjects/ChatsMain";
+import { ChatsMainPage } from "playwright/PageObjects/ChatsElements/ChatsMain";
 import { SettingsProfile } from "playwright/PageObjects/Settings/SettingsProfile";
 
 test.describe("Create Account and Login Tests", () => {

playwright/specs/02-friends-one-instance.spec.ts

@@ -1,4 +1,4 @@
-import { ChatsMainPage } from "playwright/PageObjects/ChatsMain";
+import { ChatsMainPage } from "playwright/PageObjects/ChatsElements/ChatsMain";
 import { test, expect } from "../fixtures/setup";
 import { FriendsScreen } from "playwright/PageObjects/FriendsScreen";