diff --git a/src/Frontend/src/components/messages/SagaDiagram.spec.ts b/src/Frontend/src/components/messages/SagaDiagram.spec.ts index 4f643fee9..9f5ff594f 100644 --- a/src/Frontend/src/components/messages/SagaDiagram.spec.ts +++ b/src/Frontend/src/components/messages/SagaDiagram.spec.ts @@ -14,7 +14,7 @@ interface componentDSL { //Defines a domain-specific language (DSL) for checking assertions against the system under test (sut) interface componentDSLAssertions { - thereAreTheFollowingSagaChangesInThisOrder(sagaUpdates: { expectedRenderedLocalTime: string }[]): void; + thereAreTheFollowingSagaChangesInThisOrder(sagaUpdates: { expectedTime: Date }[]): void; displayedSagaGuidIs(sagaId: string): void; displayedSagaNameIs(humanizedSagaName: string): void; linkIsShown(arg0: { withText: string; withHref: string }): void; @@ -136,14 +136,24 @@ describe("Feature: 3 Visual Representation of Saga Timeline", () => { // but set them again explicitly here //so that the reader of this test can see the preconditions at play //and understand the test better without having to jump around - sampleSagaHistory.changes[0].start_time = new Date("2025-03-28T03:04:08.3819211Z"); // A - sampleSagaHistory.changes[0].finish_time = new Date("2025-03-28T03:04:08.3836Z"); // A1 - sampleSagaHistory.changes[1].start_time = new Date("2025-03-28T03:04:07.5416262Z"); // B - sampleSagaHistory.changes[1].finish_time = new Date("2025-03-28T03:04:07.5509712Z"); //B1 - sampleSagaHistory.changes[2].start_time = new Date("2025-03-28T03:04:06.3088353Z"); //C - sampleSagaHistory.changes[2].finish_time = new Date("2025-03-28T03:04:06.3218175Z"); //C1 - sampleSagaHistory.changes[3].start_time = new Date("2025-03-28T03:04:05.3332078Z"); //D - sampleSagaHistory.changes[3].finish_time = new Date("2025-03-28T03:04:05.3799483Z"); //D1 + + const startTimeA = new Date("2025-03-28T03:04:08.000Z"); + const finishTimeA1 = new Date("2025-03-28T03:04:08.000Z"); + const startTimeB = new Date("2025-03-28T03:04:07.000Z"); + const finishTimeB1 = new Date("2025-03-28T03:04:07.000Z"); + const startTimeC = new Date("2025-03-28T03:04:06.000Z"); + const finishTimeC1 = new Date("2025-03-28T03:04:06.000Z"); + const startTimeD = new Date("2025-03-28T03:04:05.000Z"); + const finishTimeD1 = new Date("2025-03-28T03:04:05.000Z"); + + sampleSagaHistory.changes[0].start_time = startTimeA; + sampleSagaHistory.changes[0].finish_time = finishTimeA1; + sampleSagaHistory.changes[1].start_time = startTimeB; + sampleSagaHistory.changes[1].finish_time = finishTimeB1; + sampleSagaHistory.changes[2].start_time = startTimeC; + sampleSagaHistory.changes[2].finish_time = finishTimeC1; + sampleSagaHistory.changes[3].start_time = startTimeD; + sampleSagaHistory.changes[3].finish_time = finishTimeD1; sampleSagaHistory.changes[3].status = "new"; //B(1), C(2), A(0), D(3) @@ -158,19 +168,18 @@ describe("Feature: 3 Visual Representation of Saga Timeline", () => { }); //assert - componentDriver.assert.thereAreTheFollowingSagaChangesInThisOrder([ { - expectedRenderedLocalTime: "3/28/2025 3:04:05 AM", + expectedTime: startTimeD, }, { - expectedRenderedLocalTime: "3/28/2025 3:04:06 AM", + expectedTime: startTimeC, }, { - expectedRenderedLocalTime: "3/28/2025 3:04:07 AM", + expectedTime: startTimeB, }, { - expectedRenderedLocalTime: "3/28/2025 3:04:08 AM", + expectedTime: startTimeA, }, ]); }); @@ -202,14 +211,23 @@ describe("Feature: 3 Visual Representation of Saga Timeline", () => { // but set them again explicitly here //so that the reader of this test can see the preconditions at play //and understand the test better without having to jump around - sampleSagaHistory.changes[0].start_time = new Date("2025-03-28T03:04:08.3819211Z"); // A - sampleSagaHistory.changes[0].finish_time = new Date("2025-03-28T03:04:08.3836Z"); // A1 - sampleSagaHistory.changes[1].start_time = new Date("2025-03-28T03:04:07.5416262Z"); // B - sampleSagaHistory.changes[1].finish_time = new Date("2025-03-28T03:04:07.5509712Z"); //B1 - sampleSagaHistory.changes[2].start_time = new Date("2025-03-28T03:04:06.3088353Z"); //C - sampleSagaHistory.changes[2].finish_time = new Date("2025-03-28T03:04:06.3218175Z"); //C1 - sampleSagaHistory.changes[3].start_time = new Date("2025-03-28T03:04:05.3332078Z"); //D - sampleSagaHistory.changes[3].finish_time = new Date("2025-03-28T03:04:05.3799483Z"); //D1 + const startTimeA = new Date("2025-03-28T03:04:08.000Z"); + const finishTimeA1 = new Date("2025-03-28T03:04:08.000Z"); + const startTimeB = new Date("2025-03-28T03:04:07.000Z"); + const finishTimeB1 = new Date("2025-03-28T03:04:07.000Z"); + const startTimeC = new Date("2025-03-28T03:04:06.000Z"); + const finishTimeC1 = new Date("2025-03-28T03:04:06.000Z"); + const startTimeD = new Date("2025-03-28T03:04:05.000Z"); + const finishTimeD1 = new Date("2025-03-28T03:04:05.000Z"); + + sampleSagaHistory.changes[0].start_time = startTimeA; + sampleSagaHistory.changes[0].finish_time = finishTimeA1; + sampleSagaHistory.changes[1].start_time = startTimeB; + sampleSagaHistory.changes[1].finish_time = finishTimeB1; + sampleSagaHistory.changes[2].start_time = startTimeC; + sampleSagaHistory.changes[2].finish_time = finishTimeC1; + sampleSagaHistory.changes[3].start_time = startTimeD; + sampleSagaHistory.changes[3].finish_time = finishTimeD1; sampleSagaHistory.changes[3].status = "new"; // Set up the store with sample saga history @@ -224,16 +242,16 @@ describe("Feature: 3 Visual Representation of Saga Timeline", () => { componentDriver.assert.thereAreTheFollowingSagaChangesInThisOrder([ { - expectedRenderedLocalTime: "3/27/2025 8:04:05 PM", + expectedTime: startTimeD, }, { - expectedRenderedLocalTime: "3/27/2025 8:04:06 PM", + expectedTime: startTimeC, }, { - expectedRenderedLocalTime: "3/27/2025 8:04:07 PM", + expectedTime: startTimeB, }, { - expectedRenderedLocalTime: "3/27/2025 8:04:08 PM", + expectedTime: startTimeA, }, ]); }); @@ -317,12 +335,12 @@ function rendercomponent({ initialState = {} }: { initialState?: { MessageStore? expect(sagaGuid).toBeInTheDocument(); expect(sagaGuid).toHaveTextContent(guid); }, - thereAreTheFollowingSagaChangesInThisOrder: function (sagaUpdates: { expectedRenderedLocalTime: string }[]): void { + thereAreTheFollowingSagaChangesInThisOrder: function (sagaUpdates: { expectedTime: Date }[]): void { //Retrive the main parent component that contains the saga changes 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")); @@ -330,8 +348,17 @@ function rendercomponent({ initialState = {} }: { initialState?: { MessageStore? 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)); + + // Parse the rendered timestamp strings back to Date objects for comparison + const parsedDatesFromUI = sagaUpdatesTimestampsValues.map((timestampString) => { + // Parse the retrieved timestamp string back to a Date + return new Date(timestampString); + }); + + const expectedDates = sagaUpdates.map((item) => item.expectedTime); + + // Compare the dates directly + expect(parsedDatesFromUI).toEqual(expectedDates); }, }, }; diff --git a/src/Frontend/src/components/messages/SagaDiagram.vue b/src/Frontend/src/components/messages/SagaDiagram.vue index 741424f6c..fd366ae0e 100644 --- a/src/Frontend/src/components/messages/SagaDiagram.vue +++ b/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(() => { SagaCompleted: !!completedUpdate, // Display data - FormattedCompletionTime: completionTime ? `${completionTime.toLocaleDateString()} ${completionTime.toLocaleTimeString()}` : "", + FormattedCompletionTime: completionTime ? toLocalDateTimeString(completionTime) : "", SagaUpdates: parseSagaUpdates(sagaHistory, sagaDiagramStore.messagesData), ShowMessageData: showMessageData.value, }; diff --git a/src/Frontend/src/composables/formatUtils.ts b/src/Frontend/src/composables/formatUtils.ts index 60cfa2350..c4e8345cf 100644 --- a/src/Frontend/src/composables/formatUtils.ts +++ b/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()}`; +}