E2E test for scheduled Draft feature (#28433)

e2e-tests/playwright/support/ui/components/channels/center_view.ts

@@ -12,12 +12,26 @@ export default class ChannelsCenterView {
 
     readonly header;
     readonly postCreate;
+    readonly scheduledDraftOptions;
+    readonly scheduledDraftChannelInfo;
+    readonly scheduledDraftChannelIcon;
+    readonly scheduledDraftChannelInfoMessage;
+    readonly scheduledDraftChannelInfoMessageText;
+    readonly scheduledDraftSeeAllLink;
 
     constructor(container: Locator) {
         this.container = container;
 
         this.header = new components.ChannelsHeader(this.container.locator('.channel-header'));
         this.postCreate = new components.ChannelsPostCreate(container.getByTestId('post-create'));
+        this.scheduledDraftOptions = new components.ChannelsPostCreate(
+            container.locator('#dropdown_send_post_options'),
+        );
+        this.scheduledDraftChannelInfo = container.locator('div.postBoxIndicator');
+        this.scheduledDraftChannelIcon = container.locator('#create_post i.icon-draft-indicator');
+        this.scheduledDraftChannelInfoMessage = container.locator('div.ScheduledPostIndicator span');
+        this.scheduledDraftChannelInfoMessageText = container.locator('span:has-text("Message scheduled for")');
+        this.scheduledDraftSeeAllLink = container.locator('a:has-text("See all scheduled messages")');
     }
 
     async toBeVisible() {
@@ -25,6 +39,14 @@ export default class ChannelsCenterView {
         await this.postCreate.toBeVisible();
     }
 
+    /**
+     * Click on "See all scheduled messages"
+     */
+    async clickOnSeeAllscheduledDrafts() {
+        await this.scheduledDraftSeeAllLink.isVisible();
+        await this.scheduledDraftSeeAllLink.click();
+    }
+
     /**
      * Return the first post in the Center
      */
@@ -86,6 +108,13 @@ export default class ChannelsCenterView {
             {timeout},
         );
     }
+
+    async verifyscheduledDraftChannelInfo() {
+        await this.scheduledDraftChannelInfo.isVisible();
+        await this.scheduledDraftChannelIcon.isVisible();
+        const messageLocator = this.scheduledDraftChannelInfoMessage.first();
+        await expect(messageLocator).toContainText('Message scheduled for');
+    }
 }
 
 export {ChannelsCenterView};

e2e-tests/playwright/support/ui/components/channels/post_create.ts

@@ -5,12 +5,12 @@ import {expect, Locator} from '@playwright/test';
 
 export default class ChannelsPostCreate {
     readonly container: Locator;
-
     readonly input;
 
     readonly attachmentButton;
     readonly emojiButton;
     readonly sendMessageButton;
+    readonly scheduleDraftMessageButton;
 
     constructor(container: Locator, isRHS = false) {
         this.container = container;
@@ -24,6 +24,7 @@ export default class ChannelsPostCreate {
         this.attachmentButton = container.getByLabel('attachment');
         this.emojiButton = container.getByLabel('select an emoji');
         this.sendMessageButton = container.getByTestId('SendMessageButton');
+        this.scheduleDraftMessageButton = container.getByLabel('Schedule message');
     }
 
     async toBeVisible() {
@@ -66,6 +67,18 @@ export default class ChannelsPostCreate {
         await this.sendMessageButton.click();
     }
 
+    /**
+     * Click on Scheduled Draft button to open options
+     */
+    async clickOnScheduleDraftDropdownButton() {
+        await expect(this.input).toBeVisible();
+
+        await expect(this.scheduleDraftMessageButton).toBeVisible();
+        await expect(this.scheduleDraftMessageButton).toBeEnabled();
+
+        await this.scheduleDraftMessageButton.click();
+    }
+
     /**
      * Composes and sends a message
      */

e2e-tests/playwright/support/ui/components/channels/scheduled_draft_menu.ts

@@ -0,0 +1,26 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, Locator} from '@playwright/test';
+
+export default class ScheduledDraftMenu {
+    readonly container: Locator;
+
+    readonly scheduleDraftMessageCustomTimeOption;
+
+    constructor(container: Locator) {
+        this.container = container;
+
+        this.scheduleDraftMessageCustomTimeOption = container.getByText('Choose a custom time');
+    }
+
+    async toBeVisible() {
+        await expect(this.container).toBeVisible();
+    }
+
+    async selectCustomTime() {
+        await this.scheduleDraftMessageCustomTimeOption.click();
+    }
+}
+
+export {ScheduledDraftMenu};

e2e-tests/playwright/support/ui/components/channels/scheduled_draft_modal.ts

@@ -0,0 +1,90 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, Locator} from '@playwright/test';
+
+export default class ScheduledDraftModal {
+    readonly container: Locator;
+
+    readonly confirmButton;
+    readonly dateInput;
+    readonly timeLocator;
+    readonly timeDropdownOptions;
+
+    constructor(container: Locator) {
+        this.container = container;
+
+        this.confirmButton = container.locator('button.confirm');
+        this.dateInput = container.locator('div.Input_wrapper');
+        this.timeLocator = container.locator('div.dateTime__input');
+        this.timeDropdownOptions = container.locator('ul.dropdown-menu .MenuItem');
+    }
+
+    async toBeVisible() {
+        await expect(this.container).toBeVisible();
+    }
+
+    getDaySuffix(day: number): string {
+        if (day > 3 && day < 21) return 'th';
+        switch (day % 10) {
+            case 1:
+                return 'st';
+            case 2:
+                return 'nd';
+            case 3:
+                return 'rd';
+            default:
+                return 'th';
+        }
+    }
+
+    dateLocator(day: number, month: string, dayOfWeek: string) {
+        const daySuffix = this.getDaySuffix(day);
+        return this.container.locator(`button[aria-label*='${day}${daySuffix} ${month} (${dayOfWeek})']`);
+    }
+
+    async selectDay(dayFromToday: number = 0) {
+        await this.dateInput.click();
+
+        const pacificDate = this.getPacificDate();
+
+        // If dayFromToday is provided, add days to the current date
+        if (dayFromToday) {
+            pacificDate.setDate(pacificDate.getDate() + dayFromToday);
+        }
+
+        const day = pacificDate.getDate();
+        const month = pacificDate.toLocaleString('default', {month: 'long'});
+        const dayOfWeek = pacificDate.toLocaleDateString('en-US', {weekday: 'long'});
+
+        await this.dateLocator(day, month, dayOfWeek).click();
+    }
+
+    async confirm() {
+        await this.confirmButton.isVisible();
+        await this.confirmButton.click();
+    }
+
+    /**
+     * Selecting the First time option from the dropdown for
+     * scheduled_post_job to send the drafts out
+     */
+    async selectTime() {
+        await this.timeLocator.click();
+        const timeButton = this.timeDropdownOptions.first();
+        await expect(timeButton).toBeVisible();
+        await timeButton.click();
+    }
+
+    getPacificDate(): Date {
+        const currentDate = new Date();
+        // Convert the current date to Pacific Time
+        const utcTime = currentDate.getTime() + currentDate.getTimezoneOffset() * 60000;
+        const pacificOffset = -7 * 60; // Pacific Daylight Time (UTC-07:00)
+        const pacificTime = new Date(utcTime + pacificOffset * 60000);
+
+        return pacificTime;
+    }
+}
+
+export {ScheduledDraftModal};

e2e-tests/playwright/support/ui/components/channels/sidebar_left.ts

@@ -6,17 +6,24 @@ import {expect, Locator} from '@playwright/test';
 export default class ChannelsSidebarLeft {
     readonly container: Locator;
     readonly findChannelButton;
+    readonly scheduledDraftCountonLHS;
 
     constructor(container: Locator) {
         this.container = container;
 
         this.findChannelButton = container.getByRole('button', {name: 'Find Channels'});
+        this.scheduledDraftCountonLHS = container.locator('span.scheduledPostBadge');
     }
 
     async toBeVisible() {
         await expect(this.container).toBeVisible();
     }
 
+    async assertscheduledDraftCountLHS(count: string) {
+        await expect(this.scheduledDraftCountonLHS).toBeVisible();
+        await expect(this.scheduledDraftCountonLHS).toHaveText(count);
+    }
+
     /**
      * Clicks on the sidebar channel link with the given name.
      * It can be any sidebar item name including channels, direct messages, or group messages, threads, etc.

e2e-tests/playwright/support/ui/components/channels/sidebar_right.ts

@@ -8,12 +8,22 @@ import {components} from '@e2e-support/ui/components';
 export default class ChannelsSidebarRight {
     readonly container: Locator;
 
-    readonly postCreate;
     readonly closeButton;
+    readonly postCreate;
+    readonly rhsPostBody;
+    readonly scheduledDraftChannelInfo;
+    readonly scheduledDraftChannelInfoMessage;
+    readonly scheduledDraftSeeAllLink;
+    readonly scheduledDraftChannelInfoMessageText;
 
     constructor(container: Locator) {
         this.container = container;
 
+        this.scheduledDraftChannelInfo = container.locator('div.postBoxIndicator');
+        this.scheduledDraftChannelInfoMessage = container.locator('div.ScheduledPostIndicator span');
+        this.scheduledDraftSeeAllLink = container.locator('a:has-text("See all scheduled messages")');
+        this.scheduledDraftChannelInfoMessageText = container.locator('span:has-text("Message scheduled for")');
+        this.rhsPostBody = container.locator('.post-message__text');
         this.postCreate = new components.ChannelsPostCreate(container.getByTestId('comment-create'), true);
         this.closeButton = container.locator('#rhsCloseButton');
     }
@@ -50,6 +60,11 @@ export default class ChannelsSidebarRight {
 
         await expect(this.container).not.toBeVisible();
     }
+
+    async clickOnSeeAllscheduledDrafts() {
+        await this.scheduledDraftSeeAllLink.isVisible();
+        await this.scheduledDraftSeeAllLink.click();
+    }
 }
 
 export {ChannelsSidebarRight};

e2e-tests/playwright/support/ui/components/index.ts

@@ -21,6 +21,8 @@ import {ThreadFooter} from './channels/thread_footer';
 import {EmojiGifPicker} from './channels/emoji_gif_picker';
 import {GenericConfirmModal} from './channels/generic_confirm_modal';
 
+import {ScheduledDraftMenu} from './channels/scheduled_draft_menu';
+import {ScheduledDraftModal} from './channels/scheduled_draft_modal';
 import {SystemConsoleSidebar} from './system_console/sidebar';
 import {SystemConsoleNavbar} from './system_console/navbar';
 
@@ -49,6 +51,8 @@ const components = {
     PostReminderMenu,
     EmojiGifPicker,
     GenericConfirmModal,
+    ScheduledDraftMenu,
+    ScheduledDraftModal,
     SystemConsoleSidebar,
     SystemConsoleNavbar,
     SystemUsers,