Refactor SagaDiagram and tests to use new toLocalDateTimeString utility

Author: jasontaylordev

src/Frontend/src/components/messages/SagaDiagram.spec.ts

@@ -5,6 +5,7 @@ import makeRouter from "@/router";
 import { createTestingPinia } from "@pinia/testing";
 import { MessageStore } from "@/stores/MessageStore";
 import { MessageStatus } from "@/resources/Message";
+import { toLocalDateTimeString } from "@/composables/formatUtils";
 
 //Defines a domain-specific language (DSL) for interacting with the system under test (sut)
 interface componentDSL {
@@ -158,19 +159,18 @@ describe("Feature: 3 Visual Representation of Saga Timeline", () => {
       });
 
       //assert
-
       componentDriver.assert.thereAreTheFollowingSagaChangesInThisOrder([
         {
-          expectedRenderedLocalTime: "3/28/2025 3:04:05 AM",
+          expectedRenderedLocalTime: toLocalDateTimeString(sampleSagaHistory.changes[3].start_time), // D
         },
         {
-          expectedRenderedLocalTime: "3/28/2025 3:04:06 AM",
+          expectedRenderedLocalTime: toLocalDateTimeString(sampleSagaHistory.changes[2].start_time), // C
         },
         {
-          expectedRenderedLocalTime: "3/28/2025 3:04:07 AM",
+          expectedRenderedLocalTime: toLocalDateTimeString(sampleSagaHistory.changes[1].start_time), // B
         },
         {
-          expectedRenderedLocalTime: "3/28/2025 3:04:08 AM",
+          expectedRenderedLocalTime: toLocalDateTimeString(sampleSagaHistory.changes[0].start_time), // A
         },
       ]);
     });
@@ -224,16 +224,16 @@ describe("Feature: 3 Visual Representation of Saga Timeline", () => {
 
       componentDriver.assert.thereAreTheFollowingSagaChangesInThisOrder([
         {
-          expectedRenderedLocalTime: "3/27/2025 8:04:05 PM",
+          expectedRenderedLocalTime: toLocalDateTimeString(sampleSagaHistory.changes[3].start_time), // D
         },
         {
-          expectedRenderedLocalTime: "3/27/2025 8:04:06 PM",
+          expectedRenderedLocalTime: toLocalDateTimeString(sampleSagaHistory.changes[2].start_time), // C
         },
         {
-          expectedRenderedLocalTime: "3/27/2025 8:04:07 PM",
+          expectedRenderedLocalTime: toLocalDateTimeString(sampleSagaHistory.changes[1].start_time), // B
         },
         {
-          expectedRenderedLocalTime: "3/27/2025 8:04:08 PM",
+          expectedRenderedLocalTime: toLocalDateTimeString(sampleSagaHistory.changes[0].start_time), // A
         },
       ]);
     });
@@ -322,14 +322,15 @@ function rendercomponent({ initialState = {} }: { initialState?: { MessageStore?
         const sagaChangesContainer = screen.getByRole("table", { name: /saga-sequence-list/i });
 
         const sagaUpdatesElements = within(sagaChangesContainer).queryAllByRole("row");
-        //from within each sagaUpdatesElemtns get the values of an element with aria-label="time stamp"
+        //from within each sagaUpdatesElements get the values of an element with aria-label="time stamp"
         //and check if the values are in the same order as the sagaUpdates array passed to this function
         const sagaUpdatesTimestamps = sagaUpdatesElements.map((item: HTMLElement) => within(item).getByLabelText("time stamp"));
 
         //expect the number of found sagaUpdatesTimestamps to be the same as the number of sagaUpdates passed to this function
         expect(sagaUpdatesTimestamps).toHaveLength(sagaUpdates.length);
 
         const sagaUpdatesTimestampsValues = sagaUpdatesTimestamps.map((item) => item.innerHTML);
+
         // //check if the values are in the same order as the sagaUpdates array passed to this function
         expect(sagaUpdatesTimestampsValues).toEqual(sagaUpdates.map((item) => item.expectedRenderedLocalTime));
       },

src/Frontend/src/components/messages/SagaDiagram.vue

@@ -13,6 +13,7 @@ import SagaPluginNeeded from "./SagaDiagram/SagaPluginNeeded.vue";
 import SagaHeader from "./SagaDiagram/SagaHeader.vue";
 import SagaUpdateNode from "./SagaDiagram/SagaUpdateNode.vue";
 import SagaCompletedNode from "./SagaDiagram/SagaCompletedNode.vue";
+import { toLocalDateTimeString } from "@/composables/formatUtils";
 
 const sagaDiagramStore = useSagaDiagramStore();
 const { showMessageData, loading } = storeToRefs(sagaDiagramStore);
@@ -56,7 +57,7 @@ const vm = computed<SagaViewModel>(() => {
     SagaCompleted: !!completedUpdate,
 
     // Display data
-    FormattedCompletionTime: completionTime ? `${completionTime.toLocaleDateString()} ${completionTime.toLocaleTimeString()}` : "",
+    FormattedCompletionTime: completionTime ? toLocalDateTimeString(completionTime) : "",
     SagaUpdates: parseSagaUpdates(sagaHistory, sagaDiagramStore.messagesData),
     ShowMessageData: showMessageData.value,
   };

src/Frontend/src/composables/formatUtils.ts

@@ -17,3 +17,7 @@ export function dotNetTimespanToMilliseconds(timespan: string) {
   const [hh, mm, ss] = timespan.split(":");
   return ((parseInt(hh) * 60 + parseInt(mm)) * 60 + parseFloat(ss)) * 1000;
 }
+
+export function toLocalDateTimeString(date: Date) {
+  return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+}