E2E test for scheduled Draft feature (#28433)

e2e-tests/playwright/support/ui/pages/channels.ts

@@ -12,6 +12,8 @@ export default class ChannelsPage {
 
     readonly globalHeader;
     readonly centerView;
+    readonly scheduledDraftDropdown;
+    readonly scheduledDraftModal;
     readonly sidebarLeft;
     readonly sidebarRight;
     readonly appBar;
@@ -20,6 +22,7 @@ export default class ChannelsPage {
     readonly deletePostModal;
     readonly settingsModal;
 
+    readonly postContainer;
     readonly postDotMenu;
     readonly postReminderMenu;
 
@@ -46,21 +49,30 @@ export default class ChannelsPage {
 
         // Popovers
         this.emojiGifPickerPopup = new components.EmojiGifPicker(page.locator('#emojiGifPicker'));
+        this.scheduledDraftDropdown = new components.ScheduledDraftMenu(page.locator('#dropdown_send_post_options'));
+        this.scheduledDraftModal = new components.ScheduledDraftModal(page.locator('div.modal-content'));
+
+        // Posts
+        this.postContainer = page.locator('div.post-message__text');
     }
 
     async toBeVisible() {
         await this.centerView.toBeVisible();
     }
 
+    async getLastPost() {
+        return this.postContainer.last();
+    }
+
     async goto(teamName = '', channelName = '') {
         let channelsUrl = '/';
         if (teamName) {
             channelsUrl += `${teamName}`;
             if (channelName) {
-                channelsUrl += `/${channelName}`;
+                const prefix = channelName.startsWith('@') ? '/messages' : '';
+                channelsUrl += `${prefix}/${channelName}`;
             }
         }
-
         await this.page.goto(channelsUrl);
     }
 }

e2e-tests/playwright/support/ui/pages/drafts.ts

@@ -0,0 +1,128 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, Page} from '@playwright/test';
+
+export default class DraftPage {
+    readonly page: Page;
+
+    readonly badgeCountOnScheduledTab;
+    readonly confirmbutton;
+    readonly datePattern;
+    readonly deleteIcon;
+    readonly deleteIconToolTip;
+    readonly noscheduledDraftIcon;
+    readonly scheduleIcon;
+    readonly rescheduleIconToolTip;
+    readonly draftBody;
+    readonly scheduledDraftPageInfo;
+    readonly scheduledDraftPanel;
+    readonly scheduledDraftSendNowButton;
+    readonly scheduledDraftSendNowButtonToolTip;
+
+    constructor(page: Page) {
+        this.page = page;
+        this.draftBody = page.locator('div.post__body');
+        this.scheduleIcon = page.locator('#draft_icon-clock-send-outline_reschedule');
+
+        this.datePattern =
+            /(Today|Tomorrow|(?:January|February|March|April|May|June|July|August|September|October|November|December) \d{1,2}) at \d{1,2}:\d{2} [AP]M/;
+        this.badgeCountOnScheduledTab = page.locator('a#draft_tabs-tab-0 div.drafts_tab_title span.MuiBadge-badge');
+        // this.scheduledDraftPageInfo = page.locator('span:has-text("Send on")');
+        this.scheduledDraftPageInfo = page.locator('.PanelHeader__info');
+        this.scheduledDraftPanel = (messageContent: string) =>
+            page.locator(`article.Panel:has(div.post__body:has-text("${messageContent}"))`);
+        this.deleteIcon = page.locator('#draft_icon-trash-can-outline_delete');
+        this.deleteIconToolTip = page.locator('text=Delete scheduled post');
+        this.rescheduleIconToolTip = page.locator('text=Schedule draft');
+        this.noscheduledDraftIcon = page.locator('.no-results__wrapper');
+        this.scheduledDraftSendNowButton = page.locator('#draft_icon-send-outline_sendNow');
+        this.scheduledDraftSendNowButtonToolTip = page.locator('text=Send now');
+        this.confirmbutton = this.page.locator('button.btn-primary');
+    }
+
+    async goTo(teamName: string) {
+        await this.page.goto(`/${teamName}/drafts`);
+    }
+
+    async toBeVisible() {
+        await this.page.waitForLoadState('networkidle');
+        await expect(this.page).toHaveURL(/.*drafts/);
+    }
+
+    async assertBadgeCountOnTab(badgeCount: string) {
+        await this.badgeCountOnScheduledTab.isVisible();
+        await expect(this.badgeCountOnScheduledTab).toHaveText(badgeCount);
+    }
+
+    async assertDraftBody(draftMessage: string) {
+        await expect(this.draftBody).toBeVisible();
+        await expect(this.draftBody).toHaveText(draftMessage);
+    }
+
+    async verifyOnHoverActionItems(messageContent: string) {
+        await this.scheduledDraftPanel(messageContent).isVisible();
+        await this.scheduledDraftPanel(messageContent).hover();
+        await this.verifyDeleteIcon();
+        await this.verifyScheduleIcon(messageContent);
+        await this.verifySendNowIcon();
+    }
+
+    async verifyDeleteIcon() {
+        await this.deleteIcon.isVisible();
+        await this.deleteIcon.hover();
+        await expect(this.deleteIconToolTip).toBeVisible();
+        await expect(this.deleteIconToolTip).toHaveText('Delete scheduled post');
+    }
+
+    async verifyScheduleIcon(messageContent: string) {
+        await this.scheduledDraftPanel(messageContent).hover();
+        await expect(this.scheduleIcon).toBeVisible();
+        await this.scheduleIcon.hover();
+        await expect(this.rescheduleIconToolTip).toBeVisible();
+        await expect(this.rescheduleIconToolTip).toHaveText('Schedule draft');
+    }
+
+    async verifySendNowIcon() {
+        await this.scheduledDraftSendNowButton.isVisible();
+        await this.scheduledDraftSendNowButton.hover();
+        await expect(this.scheduledDraftSendNowButtonToolTip).toBeVisible();
+        await expect(this.scheduledDraftSendNowButtonToolTip).toHaveText('Send now');
+    }
+
+    async getTimeStampOfMessage(messageContent: string) {
+        await this.scheduledDraftPanel(messageContent).scrollIntoViewIfNeeded();
+        await this.scheduledDraftPanel(messageContent).isVisible();
+        return this.scheduledDraftPanel(messageContent).locator(this.scheduledDraftPageInfo).innerHTML();
+    }
+
+    async openScheduleModal(messageContent: string) {
+        await this.scheduledDraftPanel(messageContent).scrollIntoViewIfNeeded();
+        await this.scheduledDraftPanel(messageContent).isVisible();
+        await this.scheduledDraftPanel(messageContent).hover();
+        await this.scheduleIcon.hover();
+        await expect(this.rescheduleIconToolTip).toBeVisible();
+        await expect(this.rescheduleIconToolTip).toHaveText('Schedule draft');
+        await this.scheduleIcon.click();
+    }
+
+    async deleteScheduledMessage(messageContent: string) {
+        await this.scheduledDraftPanel(messageContent).isVisible();
+        await this.scheduledDraftPanel(messageContent).hover();
+        await this.verifyDeleteIcon();
+        await this.deleteIcon.click();
+        expect(await this.confirmbutton.textContent()).toEqual('Yes, delete');
+        await this.confirmbutton.click();
+    }
+
+    async sendScheduledMessage(messageContent: string) {
+        await this.scheduledDraftPanel(messageContent).isVisible();
+        await this.scheduledDraftPanel(messageContent).hover();
+        await this.verifySendNowIcon();
+        await this.scheduledDraftSendNowButton.click();
+        expect(await this.confirmbutton.textContent()).toEqual('Yes, send now');
+        await this.confirmbutton.click();
+    }
+}
+
+export {DraftPage};

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

@@ -7,6 +7,8 @@ import {LoginPage} from './login';
 import {ResetPasswordPage} from './reset_password';
 import {SignupPage} from './signup';
 import {SystemConsolePage} from './system_console';
+import {ScheduledDraftPage} from './scheduled_draft';
+import {DraftPage} from './drafts';
 
 const pages = {
     ChannelsPage,
@@ -14,7 +16,9 @@ const pages = {
     LoginPage,
     ResetPasswordPage,
     SignupPage,
+    ScheduledDraftPage,
     SystemConsolePage,
+    DraftPage,
 };
 
-export {pages, ChannelsPage, LandingLoginPage, LoginPage, SignupPage};
+export {pages, ChannelsPage, LandingLoginPage, LoginPage, SignupPage, ScheduledDraftPage, DraftPage};

e2e-tests/playwright/support/ui/pages/scheduled_draft.ts

@@ -0,0 +1,161 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, Page} from '@playwright/test';
+
+export default class ScheduledDraftPage {
+    readonly page: Page;
+
+    readonly badgeCountOnScheduledTab;
+    readonly confirmbutton;
+    readonly copyIcon;
+    readonly copyIconToolTip;
+    readonly datePattern;
+    readonly deleteIcon;
+    readonly deleteIconToolTip;
+    readonly noscheduledDraftIcon;
+    readonly rescheduleIcon;
+    readonly rescheduleIconToolTip;
+    readonly scheduledDraftBody;
+    readonly scheduledDraftPageInfo;
+    readonly scheduledDraftPanel;
+    readonly scheduledDraftSendNowButton;
+    readonly scheduledDraftSendNowButtonToolTip;
+    readonly editIcon;
+    readonly editBox;
+    readonly editorSaveButton;
+
+    constructor(page: Page) {
+        this.page = page;
+
+        this.datePattern =
+            /(Today|Tomorrow|(?:January|February|March|April|May|June|July|August|September|October|November|December) \d{1,2}) at \d{1,2}:\d{2} [AP]M/;
+        this.scheduledDraftBody = page.locator('div.post__body');
+        this.badgeCountOnScheduledTab = page.locator('a#draft_tabs-tab-1 div.drafts_tab_title span.MuiBadge-badge');
+        this.scheduledDraftPageInfo = page.locator('.PanelHeader__info');
+        this.scheduledDraftPanel = (messageContent: string) =>
+            page.locator(`article.Panel:has(div.post__body:has-text("${messageContent}"))`);
+        this.deleteIcon = page.locator('#draft_icon-trash-can-outline_delete');
+        this.deleteIconToolTip = page.locator('text=Delete scheduled post');
+        this.copyIcon = page.locator('#draft_icon-content-copy_copy_text');
+        this.copyIconToolTip = page.locator('text=Copy text');
+        this.rescheduleIcon = page.locator('#draft_icon-clock-send-outline_reschedule');
+        this.rescheduleIconToolTip = page.locator('text=Reschedule post');
+        this.noscheduledDraftIcon = page.locator('.no-results__wrapper');
+        this.scheduledDraftSendNowButton = page.locator('#draft_icon-send-outline_sendNow');
+        this.scheduledDraftSendNowButtonToolTip = page.locator('text=Send now');
+        this.confirmbutton = this.page.locator('button.btn-primary');
+        this.editIcon = page.locator('#draft_icon-pencil-outline_edit');
+        this.editBox = page.locator('textarea#edit_textbox');
+        this.editorSaveButton = page.locator('button.save');
+    }
+
+    async toBeVisible() {
+        await this.page.waitForLoadState('networkidle');
+        await expect(this.page).toHaveURL(/.*scheduled_posts/);
+    }
+
+    async assertBadgeCountOnTab(badgeCount: string) {
+        await this.badgeCountOnScheduledTab.isVisible();
+        await expect(this.badgeCountOnScheduledTab).toHaveText(badgeCount);
+    }
+
+    async assertscheduledDraftBody(draftMessage: string) {
+        await expect(this.scheduledDraftBody).toBeVisible();
+        await expect(this.scheduledDraftBody).toHaveText(draftMessage);
+    }
+
+    async verifyOnHoverActionItems(messageContent: string) {
+        await this.scheduledDraftPanel(messageContent).isVisible();
+        await this.scheduledDraftPanel(messageContent).hover();
+        await this.verifyDeleteIcon();
+        await this.verifyCopyIcon();
+        await this.verifyRescheduleIcon();
+        await this.verifySendNowIcon();
+    }
+
+    async verifyDeleteIcon() {
+        await this.deleteIcon.isVisible();
+        await this.deleteIcon.hover();
+        await expect(this.deleteIconToolTip).toBeVisible();
+        await expect(this.deleteIconToolTip).toHaveText('Delete scheduled post');
+    }
+
+    async verifyCopyIcon() {
+        await this.copyIcon.isVisible();
+        await this.copyIcon.hover();
+        await expect(this.copyIconToolTip).toBeVisible();
+        await expect(this.copyIconToolTip).toHaveText('Copy text');
+    }
+
+    async verifyRescheduleIcon() {
+        await expect(this.rescheduleIcon).toBeVisible();
+        await this.rescheduleIcon.hover();
+        await expect(this.rescheduleIconToolTip).toBeVisible();
+        await expect(this.rescheduleIconToolTip).toHaveText('Reschedule post');
+    }
+
+    async verifySendNowIcon() {
+        await this.scheduledDraftSendNowButton.isVisible();
+        await this.scheduledDraftSendNowButton.hover();
+        await expect(this.scheduledDraftSendNowButtonToolTip).toBeVisible();
+        await expect(this.scheduledDraftSendNowButtonToolTip).toHaveText('Send now');
+    }
+
+    async getTimeStampOfMessage(messageContent: string) {
+        await this.scheduledDraftPanel(messageContent).scrollIntoViewIfNeeded();
+        await this.scheduledDraftPanel(messageContent).isVisible();
+        return this.scheduledDraftPanel(messageContent).locator(this.scheduledDraftPageInfo).innerHTML();
+    }
+
+    async openRescheduleModal(messageContent: string) {
+        await this.scheduledDraftPanel(messageContent).scrollIntoViewIfNeeded();
+        await this.scheduledDraftPanel(messageContent).isVisible();
+        await this.scheduledDraftPanel(messageContent).hover();
+        await this.rescheduleIcon.hover();
+        await expect(this.rescheduleIconToolTip).toBeVisible();
+        await expect(this.rescheduleIconToolTip).toHaveText('Reschedule post');
+        await this.rescheduleIcon.click();
+    }
+
+    async deleteScheduledMessage(messageContent: string) {
+        await this.scheduledDraftPanel(messageContent).isVisible();
+        await this.scheduledDraftPanel(messageContent).hover();
+        await this.verifyDeleteIcon();
+        await this.deleteIcon.click();
+        expect(await this.confirmbutton.textContent()).toEqual('Yes, delete');
+        await this.confirmbutton.click();
+    }
+
+    async sendScheduledMessage(messageContent: string) {
+        await this.scheduledDraftPanel(messageContent).isVisible();
+        await this.scheduledDraftPanel(messageContent).hover();
+        await this.verifySendNowIcon();
+        await this.scheduledDraftSendNowButton.click();
+        expect(await this.confirmbutton.textContent()).toEqual('Yes, send now');
+        await this.confirmbutton.click();
+    }
+
+    async goTo(teamName: string) {
+        await this.page.goto(`/${teamName}/scheduled_posts`);
+    }
+
+    async editText(newText: string) {
+        await this.editIcon.click();
+        await this.editBox.isVisible();
+        await this.editBox.fill(newText);
+        await this.editorSaveButton.isVisible();
+        await this.editorSaveButton.click();
+        await this.editBox.isHidden();
+        await this.scheduledDraftPanel(newText).isVisible();
+    }
+
+    async copyScheduledMessage(draftMessage: string) {
+        await this.scheduledDraftPanel(draftMessage).isVisible();
+        await this.scheduledDraftPanel(draftMessage).hover();
+        await this.verifyCopyIcon();
+        await this.copyIcon.click();
+    }
+}
+
+export {ScheduledDraftPage};