Skip to content

Refactor SagaDiagram and tests to use new toLocalDateTimeString utility #2475

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jun 20, 2025
Merged

Refactor SagaDiagram and tests to use new toLocalDateTimeString utility #2475

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
000f372
Refactor SagaDiagram and tests to use new toLocalDateTimeString utility
jasontaylordev Jun 19, 2025
9879cfc
Refactor SagaDiagram tests to use named constants for start and finis…
jasontaylordev Jun 19, 2025
78c44fe
Retrieve dates and convert to date values
cquirosj Jun 19, 2025
fe02728
Merge pull request #2476 from Particular/fix-component-tests-alternative
jasontaylordev Jun 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 57 additions & 30 deletions src/Frontend/src/components/messages/SagaDiagram.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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)
Expand All @@ -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,
},
]);
});
Expand Down Expand Up @@ -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
Expand All @@ -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,
},
]);
});
Expand Down Expand Up @@ -317,21 +335,30 @@ 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"));

//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));

// 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);
},
},
};
Expand Down
3 changes: 2 additions & 1 deletion src/Frontend/src/components/messages/SagaDiagram.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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,
};
Expand Down
4 changes: 4 additions & 0 deletions src/Frontend/src/composables/formatUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()}`;
}