E2E/Playwright: Refactor and fix tests for scheduled posts (#30871)

webapp/channels/src/components/advanced_text_editor/scheduled_post_indicator/scheduled_post_indicator.tsx

@@ -98,7 +98,10 @@ export default function ScheduledPostIndicator({location, channelId, postId, rem
     }
 
     return (
-        <div className='ScheduledPostIndicator'>
+        <div
+            className='ScheduledPostIndicator'
+            data-testid='scheduledPostIndicator'
+        >
             <i
                 data-testid='scheduledPostIcon'
                 className='icon icon-draft-indicator icon-clock-send-outline'

webapp/channels/src/components/advanced_text_editor/scheduled_post_indicator/short_scheduled_post_indicator.tsx

@@ -18,7 +18,10 @@ export function ShortScheduledPostIndicator({scheduledPostData, scheduledPostLin
     }
 
     return (
-        <div className='ScheduledPostIndicator'>
+        <div
+            className='ScheduledPostIndicator'
+            data-testid='scheduledPostIndicator'
+        >
             <FormattedMessage
                 id='scheduled_post.channel_indicator.with_other_user_late_time'
                 defaultMessage='You have {count, plural, =1 {one} other {#}} <a>scheduled {count, plural, =1 {message} other {messages}}</a>.'

webapp/channels/src/components/advanced_text_editor/send_button/send_post_options/core_menu_options.tsx

@@ -115,6 +115,7 @@ function CoreMenuOptions({handleOnSelect, channelId}: Props) {
     const optionTomorrow = (
         <Menu.Item
             key={'scheduling_time_tomorrow_9_am'}
+            data-testid='scheduling_time_tomorrow_9_am'
             onClick={tomorrowClickHandler}
             labels={
                 <FormattedMessage
@@ -134,6 +135,7 @@ function CoreMenuOptions({handleOnSelect, channelId}: Props) {
     const optionNextMonday = (
         <Menu.Item
             key={'scheduling_time_next_monday_9_am'}
+            data-testid='scheduling_time_next_monday_9_am'
             onClick={nextMondayClickHandler}
             labels={
                 <FormattedMessage
@@ -150,6 +152,7 @@ function CoreMenuOptions({handleOnSelect, channelId}: Props) {
     const optionMonday = (
         <Menu.Item
             key={'scheduling_time_monday_9_am'}
+            data-testid='scheduling_time_monday_9_am'
             onClick={nextMondayClickHandler}
             labels={
                 <FormattedMessage

webapp/channels/src/components/advanced_text_editor/send_button/send_post_options/recent_used_custom_date.tsx

@@ -118,6 +118,7 @@ function RecentUsedCustomDate({handleOnSelect, userCurrentTimezone, nextMonday,
             <Menu.Separator key='recent_custom_separator'/>
             <Menu.Item
                 key='recently_used_custom_time'
+                data-testid='recently_used_custom_time'
                 onClick={handleRecentlyUsedCustomTime}
                 labels={timestamp}
                 className='core-menu-options'

webapp/channels/src/components/custom_status/date_time_input.tsx

@@ -204,6 +204,7 @@ const DateTimeInputContainer: React.FC<Props> = ({
                         onToggle={setIsInteracting}
                     >
                         <button
+                            data-testid='time_button'
                             className='style--none'
                             ref={timeButtonRef}
                         >
@@ -228,6 +229,7 @@ const DateTimeInputContainer: React.FC<Props> = ({
                             <Menu.Group>
                                 {Array.isArray(timeOptions) && timeOptions.map((option, index) => (
                                     <Menu.ItemAction
+                                        id={`time_option_${index}`}
                                         onClick={handleTimeChange.bind(this, option)}
                                         key={index}
                                         text={

webapp/channels/src/components/drafts/draft_row.tsx

@@ -58,6 +58,8 @@ type Props = {
     isRemote?: boolean;
     scrollIntoView?: boolean;
     containerClassName?: string;
+    dataTestId?: string;
+    dataPostId?: string;
 }
 
 const mockLastBlurAt = {current: 0};
@@ -360,8 +362,12 @@ function DraftRow({
         );
     }
 
+    const kind = isScheduledPost ? 'scheduledPost' : 'draft';
+
     return (
         <Panel
+            dataTestId={`${kind}View`}
+            dataPostId={(item as ScheduledPost).id}
             onClick={goToMessage}
             hasError={Boolean(postError)}
             innerRef={scrollIntoView ? alertRef : undefined}
@@ -371,7 +377,7 @@ function DraftRow({
             {({hover}) => (
                 <>
                     <Header
-                        kind={isScheduledPost ? 'scheduledPost' : 'draft'}
+                        kind={kind}
                         hover={hover}
                         actions={actions}
                         title={title}

webapp/channels/src/components/drafts/panel/panel.tsx

@@ -16,6 +16,8 @@ type Props = {
     isHighlighted?: boolean;
     style?: React.CSSProperties;
     className?: string;
+    dataTestId?: string;
+    dataPostId?: string;
 };
 
 const isEligibleForClick = makeIsEligibleForClick('.hljs, code');
@@ -28,6 +30,8 @@ function Panel({
     isHighlighted,
     style,
     className,
+    dataTestId,
+    dataPostId,
 }: Props) {
     const [hover, setHover] = useState(false);
 
@@ -47,6 +51,8 @@ function Panel({
 
     return (
         <article
+            data-testid={dataTestId}
+            data-postid={dataPostId}
             className={classNames(
                 'Panel',
                 {