TimeLine Tests Improved

SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/components/TimelineItemPopover.js

@@ -3,12 +3,14 @@ import React from "react";
 export function getFieldsHtml(fields, status = undefined, style = {}) {
     const labelClassName = status ? `col-5 su-${status}-icon` : 'col-5'
 
-    return fields.map((field, index) => (
+    const result = 
+     fields.map((field, index) => (
         <div key={field.label + "-" + index} className="entry">
             <label className={labelClassName} style={style}>{field.label}</label>
-            <div className="col-7 initial-line-height">{field.value}</div>
+            <div className="col-7 initial-line-height">{field.value?field.value:'-'}</div>
         </div>
     ))
+    return result;
 }
 
 const labelObject = (label, value) => ({
@@ -34,12 +36,13 @@ function getScheduleItem(mouseOverItem) {
         scheduleItemFields.push({label: "Reason:", value: mouseOverItem.unschedulable_reason})
     }
     const suId = mouseOverItem.suId ? mouseOverItem.suId : mouseOverItem.id;
+    const fieldsHTML = getFieldsHtml(scheduleItemFields, mouseOverItem.status)
     return (
         <div className={`p-grid su-${mouseOverItem.status} timeline-item-popover`}>
             <h3 className={`col-12 su-${mouseOverItem.status}-icon`}>
                 Scheduling Unit ({suId}) Overview
             </h3>
-            {getFieldsHtml(scheduleItemFields, mouseOverItem.status)}
+            {fieldsHTML}
         </div>
     );
 }

SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/components/TimelineItemPopover.test.js

-import {render} from "@testing-library/react";
+import {render,act} from "@testing-library/react";
 import TimelineItemPopover, {getFieldsHtml} from "./TimelineItemPopover";
 import moment from "moment";
 import {removeReact18ConsoleErrors} from "../../../utils/test.helper";
@@ -26,13 +26,19 @@ describe("TimelineItemPopover", () => {
     };
     
     // TODO : Fix Unit Test Render type SCHEDULE for a schedulable item
-    test.skip("Render type SCHEDULE for a schedulable item", () => {
-        const {container} = render(<TimelineItemPopover mouseOverItem={mouseOverItemSchedule}/>);
+    test("Render type SCHEDULE for a schedulable item", () => {
 
-        const renderedFields = container.querySelectorAll(".entry");
+        let pagecontent
+        act(async () => {
+                    pagecontent = render(<TimelineItemPopover mouseOverItem={mouseOverItemSchedule}/>);
+        });
+
+        
+
+        const renderedFields = pagecontent.container.querySelectorAll(".entry");
         const fieldLabels = ["Project:", "Scheduling Unit:", "Scheduler:", "Start Time:", "End Time:", "Antenna Set:", "Stations:", "Status:", "Exposure Time:", "Duration:"];
         const fieldValues = [mouseOverItemSchedule.project, mouseOverItemSchedule.name, mouseOverItemSchedule.scheduler,
-            mouseOverItemSchedule.suStartTime.format(UIConstants.CALENDAR_DATETIME_FORMAT), mouseOverItemSchedule.suStopTime.format(UIConstants.CALENDAR_DATETIME_FORMAT), mouseOverItemSchedule.antennaSet,
+            mouseOverItemSchedule.suStartTime.format(UIConstants.CALENDAR_DATETIME_FORMAT), mouseOverItemSchedule.suStopTime.format(UIConstants.CALENDAR_DATETIME_FORMAT), mouseOverItemSchedule.antenna_set,
             `${mouseOverItemSchedule.stations.groups} : ${mouseOverItemSchedule.stations.counts}`, mouseOverItemSchedule.status, mouseOverItemSchedule.on_sky_duration.toString(), mouseOverItemSchedule.duration.toString(),
         ];
 
@@ -43,8 +49,7 @@ describe("TimelineItemPopover", () => {
         });
     });
 
- // TODO : Fix Unit test Render a RESERVATION
-    test.skip("Render a RESERVATION", () => {
+    test("Render a RESERVATION", () => {
         const mouseOverItem = {
             type: "RESERVATION",
             bgColor: "#ffffff",
@@ -62,10 +67,13 @@ describe("TimelineItemPopover", () => {
             duration: 2,
             planned: true,
         };
+        
+        let pagecontent
+        act(async () => {
+                    pagecontent = render(<TimelineItemPopover mouseOverItem={mouseOverItem}/>);
+        });
 
-        const {container} = render(<TimelineItemPopover mouseOverItem={mouseOverItem}/>);
-
-        const renderedFields = container.querySelectorAll(".entry");
+        const renderedFields = pagecontent.container.querySelectorAll(".entry");
         const fieldLabels = ["Name:", "Description:", "Type:", "Stations:", "Project:", "Start Time:", "End Time:", "Duration:", "Planned:"];
         const fieldValues = [mouseOverItem.name, mouseOverItem.desc, mouseOverItem.activity_type, `${mouseOverItemSchedule.stations.groups} : ${mouseOverItemSchedule.stations.counts}`, mouseOverItem.project,
             mouseOverItem.displayStartTime.format(UIConstants.CALENDAR_DATETIME_FORMAT), mouseOverItem.displayEndTime.format(UIConstants.CALENDAR_DATETIME_FORMAT),
@@ -79,8 +87,7 @@ describe("TimelineItemPopover", () => {
     });
 
 
-    // TODO : Fix Unit Test Render a RESERVATION without stations
-    test.skip("Render a RESERVATION without stations", () => {
+    test("Render a RESERVATION without stations", () => {
         const mouseOverItem = {
             type: "RESERVATION",
             bgColor: "#ffffff",
@@ -89,18 +96,20 @@ describe("TimelineItemPopover", () => {
             desc: "By Fanna Lautenbach",
             activity_type: "Very intense",
             project: "Maintenance",
-            displayStartTime: moment("2023-07-27T12:00:00Z"),
-            displayEndTime: moment("2023-07-27T14:00:00Z"),
+            real_start_time: moment("2023-07-27T12:00:00Z"),
+            real_end_time: moment("2023-07-27T14:00:00Z"),
             duration: 2,
             planned: true,
         };
+        let pagecontent
+        act(async () => {
+                    pagecontent = render(<TimelineItemPopover mouseOverItem={mouseOverItem}/>);
+        });
 
-        const {container} = render(<TimelineItemPopover mouseOverItem={mouseOverItem}/>);
-
-        const renderedFields = container.querySelectorAll(".entry");
+        const renderedFields = pagecontent.container.querySelectorAll(".entry");
         const fieldLabels = ["Name:", "Description:", "Type:", "Stations:", "Project:", "Start Time:", "End Time:", "Duration:", "Planned:"];
         const fieldValues = [mouseOverItem.name, mouseOverItem.desc, mouseOverItem.activity_type, "-", mouseOverItem.project,
-            mouseOverItem.displayStartTime.format(UIConstants.CALENDAR_DATETIME_FORMAT), mouseOverItem.displayEndTime.format(UIConstants.CALENDAR_DATETIME_FORMAT),
+            mouseOverItem.real_start_time.format(UIConstants.CALENDAR_DATETIME_FORMAT), mouseOverItem.real_end_time.format(UIConstants.CALENDAR_DATETIME_FORMAT),
             mouseOverItem.duration.toString(), "Yes"
         ];
 
@@ -159,20 +168,28 @@ describe("getFieldsHtml", () => {
         {label: "Project:", value: "X-men"},
         {label: "Scheduling Unit:", value: "Wolverine"},
     ];
+
+
     test("Render fields with the correct label, value, and classNames", () => {
         const status = "scheduled";
         const style = {color: "blue"};
 
-        const {container} = render(getFieldsHtml(fields, status, style));
 
+        act( () => {
+                    pagecontent = render(getFieldsHtml(fields, status, style));
+        });
+     
         // Check if the correct number of fields are rendered
-        const renderedFields = container.querySelectorAll(".entry");
-        expect(renderedFields.length).toBe(fields.length);
+        
+            const renderedFields = pagecontent.container.getElementsByClassName("entry");
+            expect(renderedFields.length).toBe(fields.length);
+        
+        
 
         // Check if the labels and values are rendered correctly
         fields.forEach((field, index) => {
-            const renderedLabel = container.querySelector(`.entry:nth-child(${index + 1}) label`);
-            const renderedValue = container.querySelector(`.entry:nth-child(${index + 1}) .col-7`);
+            const renderedLabel = pagecontent.container.querySelector(`.entry:nth-child(${index + 1}) label`);
+            const renderedValue = pagecontent.container.querySelector(`.entry:nth-child(${index + 1}) .col-7`);
 
             expect(renderedLabel).toHaveTextContent(field.label);
             expect(renderedValue).toHaveTextContent(field.value);
@@ -180,7 +197,7 @@ describe("getFieldsHtml", () => {
 
         // Check if the label has the correct className based on the status
         const labelClassName = status ? `col-5 su-${status}-icon` : 'col-5';
-        const renderedLabels = container.querySelectorAll("label");
+        const renderedLabels = pagecontent.container.querySelectorAll("label");
         renderedLabels.forEach((label) => {
             expect(label).toHaveClass(labelClassName);
         });
@@ -191,6 +208,8 @@ describe("getFieldsHtml", () => {
     });
 
     test("Render fields without status and style", () => {
+
+
         const {container} = render(getFieldsHtml(fields));
 
         // Check if the label has the default className 'col-5' (no status provided)

SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/helpers/timeline.renderer.helper.js

@@ -30,8 +30,10 @@ function calculatePopPosition(evt) {
         display: "block",
         left: `${evt.pageX + 400 > window.innerWidth ? evt.pageX - 400 : evt.pageX + 20}px`
     };
+   
     if (evt.clientY > window.screen.height / 2) {
-        popPosition.bottom = `${evt.clientY - evt.pageY + 30}px`;
+     //   popPosition.bottom = `${evt.clientY - evt.pageY + 30}px`;  
+        popPosition.top = `${evt.pageY - 400}px`; // Bottem line position will not work here
     } else {
         popPosition.top = `${evt.pageY}px`;
     }