add(test): add tests for chat sidebar (#123)

playwright/PageObjects/ChatsMain.ts

@@ -20,15 +20,11 @@ export class ChatsMainPage extends MainPage {
   readonly buttonMarketplace: Locator;
   readonly chatEncryptedMessage: Locator;
   readonly chatEncryptedMessageText: Locator;
-  readonly chatPreview: Locator;
-  readonly chatPreviewLastMessage: Locator;
-  readonly chatPreviewName: Locator;
-  readonly chatPreviewPicture: Locator;
-  readonly chatPreviewTimestamp: Locator;
   readonly chatbar: Locator;
   readonly chatbarInput: Locator;
   readonly chatbarInputContainer: Locator;
   readonly chatTopbarProfilePicture: Locator;
+  readonly chatTopbarProfilePictureImage: Locator;
   readonly chatTopbarProfileStatusIndicator: Locator;
   readonly chatTopbarStatus: Locator;
   readonly chatTopbarUsername: Locator;
@@ -114,11 +110,6 @@ export class ChatsMainPage extends MainPage {
     this.buttonMarketplace = page.getByTestId("button-marketplace");
     this.chatEncryptedMessage = page.getByTestId("chat-encrypted-notice");
     this.chatEncryptedMessageText = page.getByTestId("chat-encrypted-text");
-    this.chatPreview = page.getByTestId("chat-preview");
-    this.chatPreviewLastMessage = page.getByTestId("chat-preview-last-message");
-    this.chatPreviewName = page.getByTestId("chat-preview-name");
-    this.chatPreviewPicture = page.getByTestId("chat-preview-picture");
-    this.chatPreviewTimestamp = page.getByTestId("chat-preview-timestamp");
     this.chatbar = page.getByTestId("chatbar");
     this.chatbarInput = page
       .locator('[data-cy="chatbar-input"]')
@@ -130,6 +121,8 @@ export class ChatsMainPage extends MainPage {
     this.chatTopbarProfilePicture = page.getByTestId(
       "chat-topbar-profile-picture",
     );
+    this.chatTopbarProfilePictureImage =
+      this.chatTopbarProfilePicture.locator("img");
     this.chatTopbarProfileStatusIndicator =
       this.chatTopbarProfilePicture.getByTestId("status-indicator");
     this.chatTopbarStatus = page.getByTestId("chat-topbar-status");

playwright/PageObjects/MainPage.ts

@@ -16,6 +16,13 @@ export default class MainPage {
   readonly buttonSidebarChats: Locator;
   readonly buttonSidebarFiles: Locator;
   readonly buttonWallet: Locator;
+  readonly chatPreview: Locator;
+  readonly chatPreviewLastMessage: Locator;
+  readonly chatPreviewName: Locator;
+  readonly chatPreviewPicture: Locator;
+  readonly chatPreviewPictureImage: Locator;
+  readonly chatPreviewStatusIndicator: Locator;
+  readonly chatPreviewTimestamp: Locator;
   readonly favoriteCircle: Locator;
   readonly favoriteProfilePicture: Locator;
   readonly favoriteProfileStatusIndicator: Locator;
@@ -41,6 +48,14 @@ export default class MainPage {
     this.buttonSidebarChats = page.getByTestId("button-sidebar-chats");
     this.buttonSidebarFiles = page.getByTestId("button-sidebar-files");
     this.buttonWallet = page.getByTestId("button-Wallet");
+    this.chatPreview = page.getByTestId("chat-preview");
+    this.chatPreviewLastMessage = page.getByTestId("chat-preview-last-message");
+    this.chatPreviewName = page.getByTestId("chat-preview-name");
+    this.chatPreviewPicture = page.getByTestId("chat-preview-picture");
+    this.chatPreviewPictureImage = this.chatPreviewPicture.locator("img");
+    this.chatPreviewStatusIndicator =
+      this.chatPreview.getByTestId("status-indicator");
+    this.chatPreviewTimestamp = page.getByTestId("chat-preview-timestamp");
     this.favoriteCircle = page.getByTestId("favorite-circle");
     this.favoriteProfilePicture = page.getByTestId("favorite-profile-picture");
     this.favoriteProfileStatusIndicator =
@@ -140,6 +155,13 @@ export default class MainPage {
     return svgString.replace(/(width|height)="\d+"/g, "");
   }
 
+  async openContextMenuOnChatPreview(chatName: string) {
+    await this.page
+      .getByTestId("chat-preview-name")
+      .filter({ hasText: chatName })
+      .click({ button: "right" });
+  }
+
   async visitOtherSite(url: string) {
     await this.page.goto(url);
   }
@@ -159,6 +181,10 @@ export default class MainPage {
     });
   }
 
+  async validateNoFavoritesAreVisible() {
+    await this.favoriteCircle.waitFor({ state: "detached" });
+  }
+
   async validatePseudoElementContent(
     selector: string,
     expectedContent: string,

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

@@ -333,7 +333,7 @@ test.describe("Friends tests", () => {
     await friendsScreenFirst.validateNoIncomingRequestsExist();
   });
 
-  test.afterAll(async ({ page1, page2 }) => {
+  test.afterEach(async ({ page1, page2 }) => {
     await page1.close();
     await page2.close();
   });

playwright/specs/05-chats-sidebar.spec.ts

@@ -153,69 +153,4 @@ test.describe("Chats Sidebar Tests", () => {
       "rgb(77, 77, 255) 0px 0px 0px 1px",
     );
   });
-
-  /*
-  // Cannot be automated until app is wired
-  test.skip("C11 - ProfilePicFrame should display for any friends that have one", async ({
-    page,
-  }) => {
-    // Test code for C11
-  });
-
-  // Cannot be automated until app is wired
-  test.skip("C12 - Favorites should appear on left side of Sidebar", async ({
-    page,
-  }) => {
-    // Test code for C12
-  });
-
-  // Cannot be automated until app is wired
-  test.skip("C13 - Number of members in group should appear on that chat in both Sidebar and Favorites", async ({
-    page,
-  }) => {
-    // Test code for C13
-  });
-
-  // Cannot be automated until app is wired
-  test.skip("C14 - Clicking a favorite should take you to that chat", async ({
-    page,
-  }) => {
-    // Test code for C14
-  });
-
-  // Cannot be automated until app is wired
-  test.skip("C15 - Right clicking a chat in sidebar should open context menu", async ({
-    page,
-  }) => {
-    // Test code for C15
-  });
-
-  // Cannot be automated until app is wired
-  test.skip("C16 - Context menu should display: Favorite, Hide, Mark as read", async ({
-    page,
-  }) => {
-    // Test code for C16
-  });
-
-  // Cannot be automated until app is wired
-  test.skip("C17 - Timestamp of most recent message sent or received in chat should be displayed in the sidebar", async ({
-    page,
-  }) => {
-    // Test code for C17
-  });
-
-  // Cannot be automated until app is wired
-  test.skip("C18 - Typing indicator should be displayed around users profile picture when they are typing (this applies to favorites as well)", async ({
-    page,
-  }) => {
-    // Test code for C18
-  });
-
-  // Cannot be automated until app is wired
-  test.skip("C19 - After selecting Hide chat chat should no longer be displayed in sidebar", async ({
-    page,
-  }) => {
-    // Test code for C19
-  });
-  */
 });