From 000f372b5c646ce2aafff824c75c9a113204211b Mon Sep 17 00:00:00 2001 From: JasonTaylorDev Date: Thu, 19 Jun 2025 11:46:30 +1000 Subject: [PATCH 1/3] Refactor SagaDiagram and tests to use new toLocalDateTimeString utility --- .../components/messages/SagaDiagram.spec.ts | 21 ++++++++++--------- .../src/components/messages/SagaDiagram.vue | 3 ++- src/Frontend/src/composables/formatUtils.ts | 4 ++++ 3 files changed, 17 insertions(+), 11 deletions(-) diff --git a/src/Frontend/src/components/messages/SagaDiagram.spec.ts b/src/Frontend/src/components/messages/SagaDiagram.spec.ts index 4f643fee9..9e42ac1b1 100644 --- a/src/Frontend/src/components/messages/SagaDiagram.spec.ts +++ b/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,7 +322,7 @@ 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")); @@ -330,6 +330,7 @@ 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)); }, 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()}`; +} From 9879cfc74918d7922badc363a915d71bf6913a43 Mon Sep 17 00:00:00 2001 From: JasonTaylorDev Date: Thu, 19 Jun 2025 12:12:13 +1000 Subject: [PATCH 2/3] Refactor SagaDiagram tests to use named constants for start and finish times --- .../components/messages/SagaDiagram.spec.ts | 67 ++++++++++++------- 1 file changed, 43 insertions(+), 24 deletions(-) diff --git a/src/Frontend/src/components/messages/SagaDiagram.spec.ts b/src/Frontend/src/components/messages/SagaDiagram.spec.ts index 9e42ac1b1..9b31a9f8b 100644 --- a/src/Frontend/src/components/messages/SagaDiagram.spec.ts +++ b/src/Frontend/src/components/messages/SagaDiagram.spec.ts @@ -137,14 +137,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.3819211Z"); + const finishTimeA1 = new Date("2025-03-28T03:04:08.3836Z"); + const startTimeB = new Date("2025-03-28T03:04:07.5416262Z"); + const finishTimeB1 = new Date("2025-03-28T03:04:07.5509712Z"); + const startTimeC = new Date("2025-03-28T03:04:06.3088353Z"); + const finishTimeC1 = new Date("2025-03-28T03:04:06.3218175Z"); + const startTimeD = new Date("2025-03-28T03:04:05.3332078Z"); + const finishTimeD1 = new Date("2025-03-28T03:04:05.3799483Z"); + + 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) @@ -161,16 +171,16 @@ describe("Feature: 3 Visual Representation of Saga Timeline", () => { //assert componentDriver.assert.thereAreTheFollowingSagaChangesInThisOrder([ { - expectedRenderedLocalTime: toLocalDateTimeString(sampleSagaHistory.changes[3].start_time), // D + expectedRenderedLocalTime: toLocalDateTimeString(startTimeD), }, { - expectedRenderedLocalTime: toLocalDateTimeString(sampleSagaHistory.changes[2].start_time), // C + expectedRenderedLocalTime: toLocalDateTimeString(startTimeC), }, { - expectedRenderedLocalTime: toLocalDateTimeString(sampleSagaHistory.changes[1].start_time), // B + expectedRenderedLocalTime: toLocalDateTimeString(startTimeB), }, { - expectedRenderedLocalTime: toLocalDateTimeString(sampleSagaHistory.changes[0].start_time), // A + expectedRenderedLocalTime: toLocalDateTimeString(startTimeA), }, ]); }); @@ -202,14 +212,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.3819211Z"); + const finishTimeA1 = new Date("2025-03-28T03:04:08.3836Z"); + const startTimeB = new Date("2025-03-28T03:04:07.5416262Z"); + const finishTimeB1 = new Date("2025-03-28T03:04:07.5509712Z"); + const startTimeC = new Date("2025-03-28T03:04:06.3088353Z"); + const finishTimeC1 = new Date("2025-03-28T03:04:06.3218175Z"); + const startTimeD = new Date("2025-03-28T03:04:05.3332078Z"); + const finishTimeD1 = new Date("2025-03-28T03:04:05.3799483Z"); + + 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 +243,16 @@ describe("Feature: 3 Visual Representation of Saga Timeline", () => { componentDriver.assert.thereAreTheFollowingSagaChangesInThisOrder([ { - expectedRenderedLocalTime: toLocalDateTimeString(sampleSagaHistory.changes[3].start_time), // D + expectedRenderedLocalTime: toLocalDateTimeString(startTimeD), }, { - expectedRenderedLocalTime: toLocalDateTimeString(sampleSagaHistory.changes[2].start_time), // C + expectedRenderedLocalTime: toLocalDateTimeString(startTimeC), }, { - expectedRenderedLocalTime: toLocalDateTimeString(sampleSagaHistory.changes[1].start_time), // B + expectedRenderedLocalTime: toLocalDateTimeString(startTimeB), }, { - expectedRenderedLocalTime: toLocalDateTimeString(sampleSagaHistory.changes[0].start_time), // A + expectedRenderedLocalTime: toLocalDateTimeString(startTimeA), }, ]); }); From 78c44fea321cb045087886b652585007e8e30d56 Mon Sep 17 00:00:00 2001 From: Christian Date: Thu, 19 Jun 2025 09:48:32 -0600 Subject: [PATCH 3/3] Retrieve dates and convert to date values Removing the need to test too close to the implementation --- .../components/messages/SagaDiagram.spec.ts | 65 ++++++++++--------- 1 file changed, 36 insertions(+), 29 deletions(-) diff --git a/src/Frontend/src/components/messages/SagaDiagram.spec.ts b/src/Frontend/src/components/messages/SagaDiagram.spec.ts index 9b31a9f8b..9f5ff594f 100644 --- a/src/Frontend/src/components/messages/SagaDiagram.spec.ts +++ b/src/Frontend/src/components/messages/SagaDiagram.spec.ts @@ -5,7 +5,6 @@ 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 { @@ -15,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; @@ -138,14 +137,14 @@ describe("Feature: 3 Visual Representation of Saga Timeline", () => { //so that the reader of this test can see the preconditions at play //and understand the test better without having to jump around - const startTimeA = new Date("2025-03-28T03:04:08.3819211Z"); - const finishTimeA1 = new Date("2025-03-28T03:04:08.3836Z"); - const startTimeB = new Date("2025-03-28T03:04:07.5416262Z"); - const finishTimeB1 = new Date("2025-03-28T03:04:07.5509712Z"); - const startTimeC = new Date("2025-03-28T03:04:06.3088353Z"); - const finishTimeC1 = new Date("2025-03-28T03:04:06.3218175Z"); - const startTimeD = new Date("2025-03-28T03:04:05.3332078Z"); - const finishTimeD1 = new Date("2025-03-28T03:04:05.3799483Z"); + 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; @@ -171,16 +170,16 @@ describe("Feature: 3 Visual Representation of Saga Timeline", () => { //assert componentDriver.assert.thereAreTheFollowingSagaChangesInThisOrder([ { - expectedRenderedLocalTime: toLocalDateTimeString(startTimeD), + expectedTime: startTimeD, }, { - expectedRenderedLocalTime: toLocalDateTimeString(startTimeC), + expectedTime: startTimeC, }, { - expectedRenderedLocalTime: toLocalDateTimeString(startTimeB), + expectedTime: startTimeB, }, { - expectedRenderedLocalTime: toLocalDateTimeString(startTimeA), + expectedTime: startTimeA, }, ]); }); @@ -212,14 +211,14 @@ 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 - const startTimeA = new Date("2025-03-28T03:04:08.3819211Z"); - const finishTimeA1 = new Date("2025-03-28T03:04:08.3836Z"); - const startTimeB = new Date("2025-03-28T03:04:07.5416262Z"); - const finishTimeB1 = new Date("2025-03-28T03:04:07.5509712Z"); - const startTimeC = new Date("2025-03-28T03:04:06.3088353Z"); - const finishTimeC1 = new Date("2025-03-28T03:04:06.3218175Z"); - const startTimeD = new Date("2025-03-28T03:04:05.3332078Z"); - const finishTimeD1 = new Date("2025-03-28T03:04:05.3799483Z"); + 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; @@ -243,16 +242,16 @@ describe("Feature: 3 Visual Representation of Saga Timeline", () => { componentDriver.assert.thereAreTheFollowingSagaChangesInThisOrder([ { - expectedRenderedLocalTime: toLocalDateTimeString(startTimeD), + expectedTime: startTimeD, }, { - expectedRenderedLocalTime: toLocalDateTimeString(startTimeC), + expectedTime: startTimeC, }, { - expectedRenderedLocalTime: toLocalDateTimeString(startTimeB), + expectedTime: startTimeB, }, { - expectedRenderedLocalTime: toLocalDateTimeString(startTimeA), + expectedTime: startTimeA, }, ]); }); @@ -336,7 +335,7 @@ 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 }); @@ -350,8 +349,16 @@ function rendercomponent({ initialState = {} }: { initialState?: { MessageStore? 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); }, }, };