fix flaky notifications tests and migrated to playwright (#34449) (#36225)

Co-authored-by: Mattermost Build <build@mattermost.com>

e2e-tests/playwright/lib/src/global_setup.ts

@@ -2,13 +2,13 @@
 // See LICENSE.txt for license information.
 
 import {Client4} from '@mattermost/client';
-import {UserProfile} from '@mattermost/types/users';
 import {PluginManifest} from '@mattermost/types/plugins';
 import {PreferenceType} from '@mattermost/types/preferences';
+import {UserProfile} from '@mattermost/types/users';
 
-import {defaultTeam} from './util';
 import {createRandomTeam, getAdminClient, getDefaultAdminUser, makeClient} from './server';
 import {testConfig} from './test_config';
+import {defaultTeam} from './util';
 
 export async function baseGlobalSetup() {
     let adminClient: Client4;

e2e-tests/playwright/lib/src/server/client.ts

@@ -2,10 +2,25 @@
 // See LICENSE.txt for license information.
 
 import {Client4} from '@mattermost/client';
+import {AdminConfig} from '@mattermost/types/config';
 import {UserProfile} from '@mattermost/types/users';
 
 import {testConfig} from '@/test_config';
 
+// Extend Client4 with methods used for testing
+declare module '@mattermost/client' {
+    interface Client4 {
+        updateConfigX: (config: Partial<AdminConfig>) => Promise<AdminConfig>;
+    }
+}
+
+// updateConfigX merges the given config with the current config and updates it to the server
+Client4.prototype.updateConfigX = async function (this: Client4, config: Partial<AdminConfig>) {
+    const currentConfig = await this.getConfig();
+    const newConfig = {...currentConfig, ...config};
+    return await this.updateConfig(newConfig);
+};
+
 // Variable to hold cache
 const clients: Record<string, ClientCache> = {};
 

e2e-tests/playwright/lib/src/ui/components/index.ts

@@ -40,6 +40,7 @@ import DeletePostConfirmationDialog from './channels/delete_post_confirmation_di
 import RestorePostConfirmationDialog from './channels/restore_post_confirmation_dialog';
 import SystemConsoleFeatureDiscovery from './system_console/sections/system_users/feature_discovery';
 import SystemConsoleMobileSecurity from './system_console/sections/system_users/mobile_security';
+import SystemConsoleNotifications from './system_console/sections/site_configuration/notifications';
 import ScheduledPost from './channels/scheduled_post';
 import SendMessageNowModal from './channels/send_message_now_modal';
 import DeleteScheduledPostModal from './channels/delete_scheduled_post_modal';
@@ -83,6 +84,7 @@ const components = {
     SystemUsersColumnToggleMenu,
     SystemConsoleFeatureDiscovery,
     SystemConsoleMobileSecurity,
+    SystemConsoleNotifications,
     MessagePriority,
     UserProfilePopover,
     UserAccountMenu,
@@ -130,6 +132,7 @@ export {
     SystemUsersColumnToggleMenu,
     SystemConsoleFeatureDiscovery,
     SystemConsoleMobileSecurity,
+    SystemConsoleNotifications,
     MessagePriority,
     UserProfilePopover,
     UserAccountMenu,

e2e-tests/playwright/lib/src/ui/components/system_console/sections/site_configuration/notifications.ts

@@ -0,0 +1,77 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {Locator, expect} from '@playwright/test';
+
+/**
+ * System Console -> Site Configuration -> Notifications
+ */
+export default class SystemConsoleNotifications {
+    readonly container: Locator;
+
+    // header
+    readonly header: Locator;
+
+    // Notification Display Name
+    readonly notificationDisplayName: Locator;
+    readonly notificationDisplayNameInput: Locator;
+    readonly notificationDisplayNameHelpText: Locator;
+
+    // Notification From Address
+    readonly notificationFromAddress: Locator;
+    readonly notificationFromAddressInput: Locator;
+    readonly notificationFromAddressHelpText: Locator;
+
+    // Support Email Address
+    readonly supportEmailAddress: Locator;
+    readonly supportEmailAddressInput: Locator;
+    readonly supportEmailHelpText: Locator;
+
+    // Push Notification Contents
+    readonly pushNotificationContents: Locator;
+    readonly pushNotificationContentsDropdown: Locator;
+    readonly pushNotificationContentsHelpText: Locator;
+
+    // Save button
+    readonly saveButton: Locator;
+    readonly errorMessage: Locator;
+
+    constructor(container: Locator) {
+        this.container = container;
+
+        // header
+        this.header = this.container.locator('.admin-console__header').getByText('Notifications');
+
+        // Notification Display Name
+        this.notificationDisplayName = this.container.getByTestId('EmailSettings.FeedbackNameinput');
+        this.notificationDisplayNameInput = this.container.getByTestId('EmailSettings.FeedbackNameinput');
+        this.notificationDisplayNameHelpText = this.container.getByTestId('EmailSettings.FeedbackNamehelp-text');
+
+        // Notification From Address
+        this.notificationFromAddress = this.container.getByLabel('Notification From Address:');
+        this.notificationFromAddressInput = this.container.getByTestId('EmailSettings.FeedbackEmailinput');
+        this.notificationFromAddressHelpText = this.container.getByTestId('EmailSettings.FeedbackEmailhelp-text');
+
+        // Support Email Address
+        this.supportEmailAddress = this.container.getByLabel('Support Email Address:');
+        this.supportEmailAddressInput = this.container.getByTestId('SupportSettings.SupportEmailinput');
+        this.supportEmailHelpText = this.container.getByTestId('SupportSettings.SupportEmailhelp-text');
+
+        // Push Notification Contents
+        this.pushNotificationContents = this.container.getByTestId('EmailSettings.PushNotificationContents');
+        this.pushNotificationContentsDropdown = this.container.getByTestId(
+            'EmailSettings.PushNotificationContentsdropdown',
+        );
+        this.pushNotificationContentsHelpText = this.container.getByTestId(
+            'EmailSettings.PushNotificationContentshelp-text',
+        );
+
+        // Save button and error message
+        this.saveButton = this.container.getByTestId('saveSetting');
+        this.errorMessage = this.container.locator('.has-error');
+    }
+
+    async toBeVisible() {
+        await expect(this.container).toBeVisible();
+    }
+}

e2e-tests/playwright/lib/src/ui/pages/system_console.ts

@@ -11,6 +11,11 @@ export default class SystemConsolePage {
     readonly sidebar;
     readonly navbar;
 
+    // Site Configuration
+
+    // System Console > Notifications
+    readonly notifications;
+
     /**
      * System Console -> User Management -> Users
      */
@@ -34,6 +39,12 @@ export default class SystemConsolePage {
     constructor(page: Page) {
         this.page = page;
 
+        // Site Configuration
+        // System Console > Notifications
+        this.notifications = new components.SystemConsoleNotifications(
+            page.getByTestId('sysconsole_section_notifications'),
+        );
+
         // Areas of the page
         this.navbar = new components.SystemConsoleNavbar(page.locator('.backstage-navbar'));
         this.sidebar = new components.SystemConsoleSidebar(page.locator('.admin-sidebar'));