test([WPB-19950]): implement regression tests for editing an already sent message (#19748)

Author: markbrockhoff

test/e2e_tests/pageManager/index.ts

@@ -66,6 +66,7 @@ import {HistoryExportPage} from './webapp/pages/historyExport.page';
 import {HistoryImportPage} from './webapp/pages/historyImport.page';
 import {HistoryInfoPage} from './webapp/pages/infoHistory.page';
 import {LoginPage} from './webapp/pages/login.page';
+import {MessageDetailsPage} from './webapp/pages/messageDetails.page';
 import {OptionsPage} from './webapp/pages/options.page';
 import {OutgoingConnectionPage} from './webapp/pages/outgoingConnection.page';
 import {ParticipantDetails} from './webapp/pages/participantDetails.page';
@@ -176,6 +177,7 @@ export class PageManager {
       historyInfo: () => this.getOrCreate('webapp.pages.infoHostory', () => new HistoryInfoPage(this.page)),
       historyExport: () => this.getOrCreate('webapp.pages.historyExport', () => new HistoryExportPage(this.page)),
       historyImport: () => this.getOrCreate('webapp.pages.historyImport', () => new HistoryImportPage(this.page)),
+      messageDetails: () => this.getOrCreate('webapp.pages.messageDetails', () => new MessageDetailsPage(this.page)),
       participantDetails: () =>
         this.getOrCreate('webapp.pages.participantsDetails', () => new ParticipantDetails(this.page)),
       requestResetPassword: () =>

test/e2e_tests/pageManager/webapp/pages/conversation.page.ts

@@ -50,6 +50,7 @@ export class ConversationPage {
   readonly conversationInfoButton: Locator;
   readonly pingButton: Locator;
   readonly messages: Locator;
+  readonly messageDetails: Locator;
   readonly messageItems: Locator;
   readonly filesTab: Locator;
   readonly isTypingIndicator: Locator;
@@ -95,6 +96,7 @@ export class ConversationPage {
     this.messages = page.locator(
       `${selectByDataAttribute('item-message')} ${selectByClass('message-body')}:not(:has(p${selectByClass('text-foreground')})):has(${selectByClass('text')})`,
     );
+    this.messageDetails = page.locator('#message-details');
     this.filesTab = page.locator('#conversation-tab-files');
     this.isTypingIndicator = page.locator(selectByDataAttribute('typing-indicator-title'));
     this.itemPendingRequest = page.locator(selectByDataAttribute('item-pending-requests'));
@@ -224,6 +226,42 @@ export class ConversationPage {
     return await locator.screenshot();
   }
 
+  /**
+   * Util to get a message in the conversation sent by a given user
+   * @param messageContent Optional parameter to specify content the message should contain. If undefined the last message sent by the user will be returned.
+   */
+  getMessageFromUser(user: User, messageContent?: string) {
+    const messagesFromUser = this.messageItems.filter({
+      has: this.page.getByTestId('sender-name').getByText(user.fullName),
+    });
+    if (messageContent !== undefined) {
+      return messagesFromUser.filter({hasText: messageContent});
+    }
+    return messagesFromUser.last();
+  }
+
+  /**
+   * Open the options associated with a message
+   * @returns the Locator of the now open context menu
+   */
+  async openMessageOptions(message: Locator) {
+    await message.hover();
+    await message.getByTestId('message-actions').getByTestId('go-options').click();
+    // The context menu containing the edit button is positioned globally as an overlay
+    return this.page.getByRole('menu');
+  }
+
+  /** Click the "Edit" option within a messages options putting it into the message input so it can be updated */
+  async editMessage(message: Locator) {
+    const menu = await this.openMessageOptions(message);
+    await menu.getByRole('button', {name: 'Edit'}).click();
+  }
+
+  async openMessageDetails(message: Locator) {
+    const menu = await this.openMessageOptions(message);
+    await menu.getByRole('button', {name: 'Details'}).click();
+  }
+
   async reactOnMessage(message: Locator, emojiType: EmojiReaction) {
     await message.hover();
     const reactionButton = message.getByRole('group').getByRole('button').first();

test/e2e_tests/pageManager/webapp/pages/conversationList.page.ts

@@ -104,7 +104,7 @@ export class ConversationListPage {
     await this.createGroupButton.click();
   }
 
-  private getConversationLocator(conversationName: string) {
+  getConversationLocator(conversationName: string) {
     return this.page.locator(
       `${selectByDataAttribute('item-conversation')}${selectByDataAttribute(escapeHtml(conversationName), 'value')}`,
     );

test/e2e_tests/pageManager/webapp/pages/messageDetails.page.ts

@@ -0,0 +1,37 @@
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {Locator, Page} from '@playwright/test';
+
+/**
+ * POM for the right sidebar shown when opening the details of a message sent in a group conversation
+ */
+export class MessageDetailsPage {
+  readonly page: Page;
+  readonly component: Locator;
+
+  readonly timeEdited: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.component = page.locator('#message-details');
+
+    this.timeEdited = this.component.getByTestId('status-message-details-edited');
+  }
+}

test/e2e_tests/specs/Accessibility/Accessibility.spec.ts

@@ -84,7 +84,7 @@ test.describe('Accessibility', () => {
       await memberPageManagerA.webapp.modals.dataShareConsent().clickDecline();
       await memberPageManagerB.webapp.modals.dataShareConsent().clickDecline();
 
-      await createGroup(memberPageManagerA, conversationName, [memberB]);
+      await createGroup(memberPageManagerA.webapp.pages, conversationName, [memberB]);
 
       await navigateToConversation(memberPageManagerA, conversationName);
       await navigateToConversation(memberPageManagerB, conversationName);
@@ -150,7 +150,7 @@ test.describe('Accessibility', () => {
       await pages.historyInfo().clickConfirmButton();
       await components.conversationSidebar().sidebar.waitFor({state: 'visible', timeout: loginTimeOut});
 
-      await createGroup(pageManager, conversationName, [memberB]);
+      await createGroup(pages, conversationName, [memberB]);
 
       await pages.conversation().typeMessage(message);
       const page = await pageManager.getPage();

test/e2e_tests/specs/AccountSettingsSpecs/accountSettings.spec.ts

@@ -237,7 +237,7 @@ test.describe('account settings', () => {
 
       await expect(components.conversationSidebar().personalStatusLabel).toHaveText(memberA.fullName);
 
-      await createGroup(pageManager, groupName, [memberB]);
+      await createGroup(pages, groupName, [memberB]);
       // check that the chat is open
       expect(await pages.conversationList().isConversationItemVisible(groupName)).toBeTruthy();
       await pages.conversation().sendMessage('test');
@@ -260,7 +260,7 @@ test.describe('account settings', () => {
 
       await (await pageManager.getPage()).reload();
 
-      await createChannel(pageManager, 'test', [memberB]);
+      await createChannel(pages, 'test', [memberB]);
 
       await pages.conversation().clickConversationInfoButton();
       await expect(pages.conversationDetails().isUserPartOfConversationAsAdmin(memberA.fullName)).toBeTruthy();

test/e2e_tests/specs/ArchiveSpecs/archive.spec.ts

@@ -110,7 +110,7 @@ test.describe('Accessibility', () => {
       const groupName = 'test';
       const {components, pages} = pageManager.webapp;
       await completeLogin(pageManager, memberA);
-      await createGroup(pageManager, groupName, [memberB]);
+      await createGroup(pages, groupName, [memberB]);
       await pages.conversation().clickConversationInfoButton();
       await pages.conversationDetails().clickArchiveButton();
       await pageManager.waitForTimeout(400);