Update test time until (#1809)

* test views

test timeline

* timeline show seconds when less than 2m

* fix: countown typings

* refactor: backstage schedule item

* chore: lint

apps/client/src/views/timeline/Timeline.tsx

@@ -101,6 +101,7 @@ function Timeline({ firstStart, rundown, selectedEventId, totalDuration }: Timel
               isLinkedToLoaded={event.isLinkedToLoaded}
               dayOffset={event.dayOffset}
               title={event.title}
+              cue={event.cue}
               width={position.width}
             />
           );

apps/client/src/views/timeline/TimelineEntry.tsx

@@ -25,6 +25,7 @@ interface TimelineEntryProps {
   isLinkedToLoaded: boolean;
   title: string;
   width: number;
+  cue: string;
   ref?: RefObject<HTMLDivElement | null>;
 }
 
@@ -46,6 +47,7 @@ export function TimelineEntry({
   isLinkedToLoaded,
   title,
   width,
+  cue,
   ref,
 }: TimelineEntryProps) {
   const formattedStartTime = formatTime(start, formatOptions);
@@ -67,6 +69,7 @@ export function TimelineEntry({
         left: `${left}px`,
         width: `${width}px`,
       }}
+      data-testid={cue}
     >
       {status === 'live' ? <ActiveBlock /> : <div data-status={status} className={style.timelineBlock} />}
       <div

apps/client/src/views/timeline/TimelinePage.scss

@@ -111,7 +111,7 @@
     color: $red-500;
   }
 
-  .section-content--next {
+  .section-content--followedBy .section-content--next {
     color: $green-500;
   }
 

apps/client/src/views/timeline/TimelineSections.tsx

@@ -1,4 +1,5 @@
 import { OntimeEvent } from 'ontime-types';
+import { MILLIS_PER_MINUTE } from 'ontime-utils';
 
 import { useExpectedStartData } from '../../common/hooks/useSocket';
 import { ExtendedEntry } from '../../common/utils/rundownMetadata';
@@ -30,7 +31,7 @@ export default function TimelineSections({ now, next, followedBy }: TimelineSect
     if (timeToStart <= 0) {
       nextStatus = dueText;
     } else {
-      nextStatus = formatDuration(timeToStart);
+      nextStatus = formatDuration(timeToStart, timeToStart > MILLIS_PER_MINUTE * 2);
     }
   }
 
@@ -39,7 +40,7 @@ export default function TimelineSections({ now, next, followedBy }: TimelineSect
     if (timeToStart <= 0) {
       followedByStatus = dueText;
     } else {
-      followedByStatus = formatDuration(timeToStart);
+      followedByStatus = formatDuration(timeToStart, timeToStart > MILLIS_PER_MINUTE * 2);
     }
   }
 
@@ -56,7 +57,7 @@ export default function TimelineSections({ now, next, followedBy }: TimelineSect
         title={getLocalizedString('timeline.followedby')}
         status={followedByStatus}
         content={followedByText}
-        category='next'
+        category='followedBy'
       />
     </div>
   );

apps/client/src/views/timeline/timeline-section/TimelineSection.tsx

@@ -4,7 +4,7 @@ import { MaybeString } from 'ontime-types';
 import { cx } from '../../../common/utils/styleUtils';
 
 interface SectionProps {
-  category: 'now' | 'next';
+  category: 'now' | 'next' | 'followedBy';
   content: MaybeString;
   title: string;
   status?: string;
@@ -16,7 +16,7 @@ function TimelineSection({ category, content, title, status }: SectionProps) {
   const sectionClasses = cx(['section', category === 'now' && 'section--now']);
   const contentClasses = cx(['section-content', content ? `section-content--${category}` : 'section-content--subdue']);
   return (
-    <div className={sectionClasses}>
+    <div className={sectionClasses} data-testid={category}>
       <div className='section-title'>
         <span className='section-title__label'>{title}</span>
         {status && <span className='section-title__status'>{status}</span>}

apps/client/src/views/timeline/timeline.utils.ts

@@ -8,6 +8,7 @@ import {
   getTimeFrom,
   isNewLatest,
   MILLIS_PER_HOUR,
+  MILLIS_PER_MINUTE,
 } from 'ontime-utils';
 
 import { ExtendedEntry } from '../../common/utils/rundownMetadata';
@@ -81,7 +82,7 @@ export function getStatusLabel(timeToStart: number, status: ProgressStatus): str
     return 'pending';
   }
 
-  return formatDuration(timeToStart);
+  return formatDuration(timeToStart, timeToStart > MILLIS_PER_MINUTE * 2);
 }
 
 interface ScopedRundownData {